/* ============================================================
   Oil & Gas sector — "hazard-zone dossier".
   Graphite ground, amber safety-signage accent, heavy rules, tabular dossier numerals.
   Namespaced `.sct-og-*`. Loaded only by /sectors/oilandgas via its extraStyles.

   Contrast note: amber #f0a02a on graphite #12151a measures 8.51:1 (relative luminance 0.438 vs
   0.007), and 7.70:1 on the raised panel #1a1f27 (0.438 vs 0.013) — both safe for body text.
   Body copy in --og-text (#e9ecf1) on #1a1f27 measures 13.97:1. All three clear AA comfortably.
   Every pairing that sits on a photograph or generated texture below is backed by a flat,
   high-opacity scrim precisely because a *measured* worst-case pixel from the actual source image
   — not an eyeballed guess — is what has to clear 4.5:1, and full-brightness photography does not
   clear it on its own. See task-4-report.md for the sampled pixel values and arithmetic.
   ============================================================ */

.sct-og-hero, .sct-og-statement, .sct-og-dossier, .sct-og-loads,
.sct-og-brief, .sct-og-intro, .sct-og-marks, .sct-rail--dark {
  --og-ground: #12151a;
  --og-panel: #1a1f27;
  --og-amber: #f0a02a;
  --og-text: #e9ecf1;
  --og-rule: rgba(233, 236, 241, .16);
}

/* ---------- hero ---------- */
.sct-og-hero { position: relative; background: var(--og-ground); color: var(--og-text); isolation: isolate; }
.sct-og-hero__backdrop { position: absolute; inset: 0; z-index: -1; }
.sct-og-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Flat scrim, not a reduced-opacity image: the source photo is a bright midday seascape (sampled
   foam highlights hit rgb(242,244,239)). At a plain opacity:.34 on the <img> the brightest patches
   still land background luminance high enough to drop the breadcrumb/eyebrow text to ~3.3:1 and
   ~2.9:1 — both fail 4.5:1. An 85%-opacity flat wash of --og-ground on top of the *full* photo
   keeps the worst sampled pixel's composited background at rgb(51,54,58); against that the amber
   eyebrow measures 5.6:1.
   Corrected 2026-08-06: this comment used to also claim og-text at .66 alpha (breadcrumbs)
   measured 5.4:1 there. That arithmetic was right in isolation but described a rule the page never
   actually rendered — `.crumbs a { opacity: .65 }` in site.css is inherited unless the sector rule
   resets it, and it silently multiplied with the .66 alpha to an effective .429, landing the real
   rendered ratio at 3.24:1 (fails 4.5:1). Fixed below by setting `opacity: 1` and raising the alpha
   to .85: og-text@.85, fully opaque, measures 7.91:1 against the same rgb(51,54,58) worst case.
   See task-4-report.md for the pixel sampling. */
.sct-og-hero__backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(18, 21, 26, .85); }
.sct-og-hero__inner { padding-block: 34px clamp(56px, 6vw, 92px); position: relative; }
.sct-og-hero__inner .crumbs a { color: rgba(233, 236, 241, .85); opacity: 1; }
.sct-og-hero__inner .crumbs [aria-current='page'] { color: var(--og-text); border-bottom-color: rgba(233, 236, 241, .7); }
.sct-og-hero__inner .crumbs__sep { color: rgba(233, 236, 241, .5); }
.sct-og-hero__eyebrow { color: var(--og-amber); }
.sct-og-hero__title {
  font-size: clamp(36px, 5vw, 62px); line-height: 1.03; letter-spacing: -.035em;
  color: var(--og-text); margin: 14px 0 16px; max-width: 17ch;
}
.sct-og-hero__intro { color: rgba(233, 236, 241, .84); }
.sct-og-badge {
  display: inline-block; margin-top: 22px; padding: 7px 15px;
  border: 2px solid var(--og-amber); border-radius: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--og-amber);
}
.sct-og-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* The one hazard-stripe moment on the page. Used once, at the hero's edge. */
.sct-og-stripe {
  height: 10px;
  background: repeating-linear-gradient(-45deg,
    var(--og-amber) 0 14px, var(--og-ground) 14px 28px);
}

/* ---------- shared type ---------- */
.sct-og-h {
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.12; margin: 12px 0 16px;
}

/* ---------- marks ---------- */
.sct-og-marks { background: var(--og-panel); }
.sct-og-marks__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sct-og-marks__row li {
  display: flex; align-items: center; gap: 11px; padding: 20px 24px;
  border-left: 2px solid var(--og-rule);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--og-text);
}
.sct-og-marks__row li:first-child { border-left: 0; }
.sct-og-marks__row svg { width: 19px; height: 19px; color: var(--og-amber); }

/* ---------- intro ---------- */
.sct-og-intro { background: #fff; }
.sct-og-intro .sct-og-h { color: var(--navy); }

/* ---------- statement ---------- */
.sct-og-statement {
  background:
    linear-gradient(180deg, rgba(18, 21, 26, .94) 0%, rgba(26, 31, 39, .94) 100%),
    url('/assets/images/oilgas-refinery-dusk.jpg') center/cover;
  color: var(--og-text);
}
.sct-og-statement .sct-eyebrow { color: var(--og-amber); }
.sct-og-statement__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 60px);
}
.sct-og-statement__h {
  font-size: clamp(27px, 3.4vw, 42px); letter-spacing: -.03em; line-height: 1.12;
  color: var(--og-text);
}
.sct-og-statement__body { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.72; color: rgba(233, 236, 241, .86); }
.sct-og-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.sct-og-tags li {
  padding: 7px 14px; border: 1px solid var(--og-rule); border-radius: 3px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--og-text);
}

/* ---------- dossier ---------- */
.sct-og-dossier { background: var(--og-panel); color: var(--og-text); }
.sct-og-dossier .sct-og-h { color: var(--og-text); }
.sct-og-dossier__list { margin-top: 30px; border-top: 2px solid var(--og-rule); }
.sct-og-entry {
  display: grid; grid-template-columns: 68px 40px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 26px 0; border-bottom: 2px solid var(--og-rule);
}
.sct-og-entry__num {
  font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--og-amber); letter-spacing: -.02em;
}
.sct-og-entry__icon svg { width: 26px; height: 26px; color: var(--og-amber); }
.sct-og-entry__title { font-size: 19px; color: var(--og-text); margin: 0 0 8px; }
.sct-og-entry__body { font-size: 15.5px; line-height: 1.7; color: rgba(233, 236, 241, .82); margin: 0; }

/* ---------- loads ---------- */
.sct-og-loads { background: #fff; }
.sct-og-loads .sct-og-h { color: var(--navy); }
.sct-og-loads__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.sct-og-loads__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }
.sct-og-vars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
  margin-top: 26px; border-top: 2px solid var(--line);
}
.sct-og-vars li {
  padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy);
}

/* ---------- systems rail, dark ---------- */
/* A 55%-opacity flat wash of --og-ground sits on top of the tiled texture image, not the raw
   image alone: sampled, the texture's brightest pixel is rgb(98,95,88) (a scratch highlight; the
   average tile is rgb(35,34,30)). Undimmed, that one bright pixel would put the rail's normal-
   weight lede text (og-text at .82 alpha) at 4.23:1 — under the 4.5:1 minimum. The wash lowers the
   worst-case composited background to rgb(54,54,54), which measures 7.43:1 for that same text and
   5.60:1 for the amber "view system" links. See task-4-report.md. */
.sct-rail--dark {
  background:
    linear-gradient(0deg, rgba(18, 21, 26, .55), rgba(18, 21, 26, .55)),
    url('/assets/images/oilgas-steel-texture.jpg') center/420px repeat;
  color: var(--og-text);
}
.sct-rail--dark .sct-rail__heading { color: var(--og-text); }
.sct-rail--dark .sct-lede { color: rgba(233, 236, 241, .82); }
.sct-rail--dark .sct-sys { background: var(--og-panel); border-color: var(--og-rule); }
.sct-rail--dark .sct-sys__name { color: var(--og-text); }
.sct-rail--dark .sct-sys__family { color: rgba(233, 236, 241, .62); }
.sct-rail--dark .sct-sys__role { color: rgba(233, 236, 241, .8); }
.sct-rail--dark .sct-sys__specs dt { color: rgba(233, 236, 241, .62); }
.sct-rail--dark .sct-sys__specs dd { color: var(--og-text); }
.sct-rail--dark .sct-sys__more { color: var(--og-amber); }

/* ---------- brief ---------- */
/* Flat --panel-fill, not the sitewide --band-light-low radial gradient: that gradient's inner
   stop (#acc5f2) is reachable behind this section's checklist, and --blue (the site's default
   accent, used nowhere else on this amber/graphite page) measures only 1.59:1 against it and just
   2.68:1 against --panel-fill itself — both fail the 3:1 non-text minimum outright. The checklist
   icon uses --navy instead (14.84:1 on --panel-fill), matching the rest of the page's dark-on-light
   headings. See task-4-report.md. */
.sct-og-brief { background: var(--panel-fill); }
.sct-og-brief .sct-og-h { color: var(--navy); }
.sct-og-brief__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.sct-og-brief__list { margin-top: 22px; display: grid; gap: 13px; }
.sct-og-brief__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink-70); }
.sct-og-brief__list svg { width: 19px; height: 19px; color: var(--navy); margin-top: 3px; }
.sct-og-brief__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .sct-og-statement__grid, .sct-og-loads__grid, .sct-og-brief__grid { grid-template-columns: 1fr; }
  .sct-og-entry { grid-template-columns: 52px minmax(0, 1fr); }
  .sct-og-entry__icon { display: none; }
  .sct-og-marks__row li { border-left: 0; border-top: 2px solid var(--og-rule); }
  .sct-og-marks__row li:first-child { border-top: 0; }
}