*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;font-family:var(--font-body);background:var(--color-bg-canvas);color:var(--color-text-primary)}
/* Section rhythm. The kit ships three flat rem values (4/6/8), so a phone gets the
   same 6rem top and 6rem bottom as a 1440px monitor — 192px of empty space between
   one section's content and the next, which is most of a small viewport. Overridden
   here rather than in tokens/spacing.css because that file comes from the handoff
   and chrome.css is generated, so this survives a rebuild. Same three names, so
   nothing downstream changes. clamp() keeps the proportions: roughly a quarter off
   at desktop, about half off on a phone where it actually hurts. */
:root{--section-py-compact:clamp(2.25rem,5vw,3rem);--section-py-default:clamp(3rem,7vw,4.5rem);--section-py-spacious:clamp(4rem,9vw,6rem)}
/* Target-industry cards. The icons replace the 01-06 ordinals (see
   patch-generated-content.mjs for why). Both pages get the same icon class; the
   surrounding card classes differ because index.html sits on --color-surface-deep-alt,
   dark in every theme and styled with fixed white alphas, while home.html is on a
   themed surface and uses tokens. Sizing and motion are shared, colour is not. */
/* Companion to the width/height attributes stamped by stamp-image-dims.mjs. Those
   attributes give the browser an aspect ratio to reserve space with, but where the
   CSS sizes width only (width:100% and friends) the height would otherwise resolve
   to the literal attribute value and squash the image — chart-et-run-17h rendered
   280x640 instead of 280x208. height:auto restores the ratio. Deliberately weak:
   any page rule or inline style still wins, so images with a real fixed height
   (the 110px headshots, object-fit crops) are untouched. */
img[width][height]{height:auto}
/* LENR reaction chain (deck slide 4). Sits on --color-bg-canvas, which is white on
   two of the six themes, so every colour here is a semantic token — no primitives,
   no hex, no fixed white alphas. Measured worst case across the six themes is
   5.65:1 for --color-text-brand and 4.93:1 for --color-text-thermal, both AA body.
   Column on phones with the arrows rotated, row from 720px up. */
.oge-lenr{display:grid;gap:var(--space-8);margin-top:var(--space-8);align-items:center}
.oge-lenr-chain{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);
  justify-items:center;align-items:start}
.oge-lenr-step{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.5rem;padding:var(--space-4) var(--space-3);border-radius:12px;min-width:0;
  background:var(--color-surface-default);border:1px solid var(--color-border-subtle);width:100%}
.oge-lenr-icon{width:38px;height:38px;flex:none;display:block;color:var(--color-text-secondary)}
.is-fusion .oge-lenr-icon{color:var(--color-text-brand)}
.is-out .oge-lenr-icon{color:var(--color-text-thermal)}
.oge-lenr-name{font-family:var(--font-body);font-weight:650;font-size:.95rem;line-height:1.3;
  color:var(--color-text-primary);text-wrap:balance}
.oge-lenr-note{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary);line-height:1.45}
.oge-lenr-mev{color:var(--color-text-thermal)}
.oge-lenr-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-text-brand);
  opacity:.7}
.oge-lenr-arrow svg{width:24px;height:24px;display:block;transform:rotate(90deg)}
.oge-lenr-figure{margin:0}
.oge-lenr-figure img{width:100%;max-width:340px;border-radius:12px;display:block;margin-inline:auto;
  border:1px solid var(--color-border-subtle)}
.oge-lenr-figure figcaption{margin-top:.6rem;text-align:center;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary)}
@media(min-width:720px){
  /* The chain is the content and the photograph is the corroboration, so the chain
     gets the room. At 1.55fr the cards were narrow enough to wrap every label. */
  .oge-lenr{grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);gap:var(--space-8)}
  /* Explicit tracks. grid-auto-columns is a container property, so setting it on
     the arrow <li> did nothing and both arrow tracks were sized as full 1fr
     columns — 137px each holding a 26px glyph, which is 31% of the row spent on
     empty gutter and cards crushed narrow enough that every label wrapped. */
  .oge-lenr-chain{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
    align-items:stretch;gap:var(--space-3)}
  .oge-lenr-chain .oge-lenr-arrow{width:26px}
  .oge-lenr-arrow svg{transform:none}
  .oge-lenr-figure img{max-width:none}
}
/* ---- reaction motion: removed --------------------------------------------
   The chain used to play once on scroll, behind three intensities the owner could
   compare (html[data-motion]). They picked "off", so the whole apparatus is gone:
   the keyframes, the tier variables, the .is-playing observer in RUNTIME_JS and
   the settings segment that drove it. The chain still renders — it is a diagram,
   not an animation — and the hero canvas is now the only motion on the page.
   Recover it from git history (feat/lenr-motion, PR #22) if it is ever wanted. */
/* Hero claim line — slide 4's headline claim, promoted out of the lead paragraph.
   Sits on --color-surface-deep, which is dark in all six themes, so it takes the
   --deep-* token set rather than the canvas one. Worst measured contrast is 6.23:1
   on industrial, where the brand accent is correctly orange rather than green: the
   green belongs to the deck, not to the site. Never hardcode it. */
.oge-hero-claim{margin:0 0 var(--space-5);font-family:var(--font-body);font-weight:700;
  font-size:var(--text-lg);line-height:1.3;letter-spacing:.01em;color:var(--deep-text-brand);
  text-wrap:balance}
.oge-hero-claim span{opacity:.55;padding:0 .3em}
@media(min-width:720px){.oge-hero-claim{font-size:var(--text-xl)}}
/* Below 400px the hero is tight and the CTA has to stay above the fold, so the
   claim drops a step rather than being cut. */
@media(max-width:399px){.oge-hero-claim{font-size:var(--text-base);margin-bottom:var(--space-4)}}
.oge-ind-icon{width:28px;height:28px;flex:none;display:block;color:var(--color-text-brand);transition:color .25s ease,transform .25s ease}
.oge-industry-card .oge-ind-icon{color:rgba(67,208,203,.9)}
.oge-industry-card:hover .oge-ind-icon{color:var(--color-teal-300)}
.oge-industry-card:hover .oge-ind-icon,.oge-ind-card:hover .oge-ind-icon{transform:translateY(-1px)}
/* index.html stops at 3 columns; on a 390px phone that is a 104px card, and both
   "Pharma & biotech" and "District heating" wrap. home.html already drops to 2
   here, and reads better for it. Qualified with the element because the page's
   own <style> block loads after chrome.css, so a bare class ties and loses. */
@media(max-width:480px){ul.oge-industry-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.oge-ind-icon{transition:none}}
.oge-header-cta{display:inline-flex;align-items:center;padding:.62rem 1.15rem;border-radius:999px;background:var(--color-action-primary-bg);color:var(--color-action-primary-fg);font-family:var(--font-body);font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s ease,box-shadow .25s ease,transform .15s ease}
.oge-header-cta:hover{background:var(--color-action-primary-hover-bg);box-shadow:var(--shadow-glow-accent)}
.oge-header-cta:active{transform:scale(.97)}
/* Wordmark set in text (the logo is an image; this is for "OGENERGY" written in markup).
   Carries the logo gradient, but never the logo's own colours on a light surface: the three
   stops are 1.38/1.61/2.64:1 on white. --oge-wordmark is the ramp fitted down in lightness,
   same hues, >=4.5:1 on #FFFFFF and on #EDF7F7 (bg-subtle, the darkest light surface).
   Dark themes and any always-dark surface swap the literal stops back in (>=6.50:1 there). */
.oge-wordmark{--oge-wordmark:linear-gradient(90deg,#0C8232 0%,#117F6A 14%,#2576AC 95%);color:var(--color-text-brand);background-image:var(--oge-wordmark)}
[data-theme="dark"] .oge-wordmark,[data-theme="night"] .oge-wordmark,[data-theme="industrial"] .oge-wordmark,[data-theme="solid-lab"] .oge-wordmark,.oge-footer .oge-wordmark,[style*="--deep-text-primary"] .oge-wordmark{--oge-wordmark:linear-gradient(90deg,#7CF3A3 0%,#39E4C3 14%,#58A7DB 95%)}
@supports (background-clip:text) or (-webkit-background-clip:text){.oge-wordmark{-webkit-background-clip:text;background-clip:text;color:transparent}}
@media (forced-colors:active){.oge-wordmark{background:none;color:CanvasText;forced-color-adjust:none}}
/* An auto-fit track cannot shrink below its fixed minimum, so on a viewport
   narrower than that minimum the grid overflows and the whole page scrolls
   sideways. Clamping with min(...,100%) keeps the multi-column behaviour wherever
   there is room and collapses to one full-width column where there is not; above
   the minimum it resolves to the original value, so desktop is unchanged. Only
   the three minimums that exceed the mobile content box need it. The kit sets
   these inline, hence the attribute selectors and !important. */
[style*="minmax(400px"]{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))!important}
[style*="minmax(360px"]{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important}
[style*="minmax(320px"]{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))!important}
/* ---- brand infusion + action colours ------------------------------------
   Two problems. The themes had drifted off the logo: only light and dark still
   read as the brand, while industrial and solid-lab could belong to anyone. And
   the primary actions had landed on three colours Israeli users read as other
   companies — a green-teal, a signal orange, and an unrelated blue.

   The logo ramp is #00A9E8 cyan with #7CF3A3 / #39E4C3 / #58A7DB in the mark.
   Every action below is drawn from that cyan family, and hover carries a hint of
   #0038B8 — the flag blue — as a shift on interaction rather than a field of it.
   Infusion is deliberately small: a brand cast on subtle surfaces and borders,
   not a repaint. The logo cyan still never carries text or sits under a white
   label; every action pairs it with a near-black foreground unless noted. */

/* subtle surfaces and borders pick up a trace of the logo hue in every theme */
[data-theme="industrial"]{--color-bg-subtle:#17191D;--color-border-subtle:#26292F}
[data-theme="solid-lab"]{--color-bg-subtle:#151A20;--color-border-subtle:#242B33}
[data-theme="night"]{--color-bg-subtle:#0C1520;--color-border-subtle:#1C2A38}
[data-theme="dark"]{--color-bg-subtle:#262E2F;--color-border-subtle:#3B4749}

/* primary action, per theme */
[data-theme="light"],[data-theme="default"],:root{--color-action-primary-bg:#0A6B90;--color-action-primary-fg:#FFFFFF;--color-action-primary-hover-bg:#0038B8;--color-action-primary-border:transparent}
[data-theme="dark"]{--color-action-primary-bg:#29C4FE;--color-action-primary-fg:#04121A;--color-action-primary-hover-bg:#6BD4FB}
[data-theme="night"]{--color-action-primary-bg:#29C4FE;--color-action-primary-fg:#04121A;--color-action-primary-hover-bg:#6BD4FB}
/* solid-lab is the one that takes the flag blue as its resting colour; white
   label on #0038B8 is 8.59:1, so it carries text safely. */
[data-theme="solid-lab"]{--color-action-primary-bg:#0038B8;--color-action-primary-fg:#FFFFFF;--color-action-primary-hover-bg:#1E5AE0}
/* industrial keeps its warmth but leaves signal orange behind for burnt copper */
[data-theme="industrial"]{--color-action-primary-bg:#C2410C;--color-action-primary-fg:#FFFFFF;--color-action-primary-hover-bg:#DC5518}

/* ---- daylight: a lighter theme than light ------------------------------- */
[data-theme="daylight"]{
--color-bg-canvas:#FBFDFF;--color-bg-subtle:#F1F8FB;--color-bg-inverse:#0F1A1F;
--color-surface-default:#FFFFFF;--color-surface-sunken:#F1F8FB;--color-surface-inverse:#0F1A1F;
--color-surface-deep:#0E2A34;--color-surface-deep-alt:#08191F;
--color-surface-glass:rgba(10,107,144,0.06);
--color-border-subtle:#DCE8EE;--color-border-strong:#B4C9D3;--color-border-input:#7A939E;--color-border-focus:#0A6B90;
--color-text-primary:#0F1A1F;--color-text-secondary:#425560;--color-text-disabled:#8FA4AE;--color-text-inverse:#FFFFFF;--color-text-brand:#0A6B90;
--color-link-default:#0A6B90;--color-link-hover:#0038B8;
--color-action-primary-bg:#0A6B90;--color-action-primary-fg:#FFFFFF;--color-action-primary-hover-bg:#0038B8;--color-action-primary-border:transparent;
--color-text-thermal:#B45309;
--deep-text-primary:#F7FBFC;--deep-text-secondary:#B9CDD5;--deep-text-brand:#6BD4FB;--deep-link-default:#6BD4FB;--deep-link-hover:#B0E6FA;--deep-border-subtle:#274049;--deep-text-thermal:#FBBF24;
--gradient-brand:linear-gradient(100deg,#7CF3A3 0%,#39E4C3 14%,#58A7DB 100%);
}

/* ---- small type on dark surfaces ----------------------------------------
   The credential and caption lines measured 6.41:1 at worst, which clears AA.
   They still read faint, because the cause is 12px at light weight on a dark
   surface rather than colour. Size and weight do most of the work here; the
   colour step below is the smaller half, and applies only to the dark themes,
   where halation makes thin light text bloom and lose its edges. */
[style*="var(--text-xs)"]{font-size:.84rem!important;font-weight:500;letter-spacing:.005em}
[data-theme="dark"]{--color-text-secondary:#CBD5D7}
[data-theme="night"]{--color-text-secondary:#B4C1D0}
[data-theme="industrial"]{--color-text-secondary:#BEBEC6}
[data-theme="solid-lab"]{--color-text-secondary:#BCC5D0}

/* ---- evidence imagery ---------------------------------------------------
   Charts and micrographs get a gradient mat rather than a tint. Padding on the
   image paints the brand gradient in the margin while the picture itself sits
   on top untouched: a white spreadsheet screenshot stops floating on a dark
   page, and not one measured pixel is recoloured. That distinction matters on
   a site whose argument is measurement — the ICCF photo can take a colour
   blend because it is decoration; a calorimetry trace cannot.
   Micrographs keep a black mat: they are greyscale, and black is what an SEM
   frame sits on. Same border and lift, so the two read as one family. */
/* The mat is the theme's own brand ramp veiled by the page canvas, which lands
   near the 0.28 the ICCF overlay uses at 0.55. --gradient-brand-subtle is not
   usable here: it is defined once, light-only, so it mats white on dark themes.
   !important because the kit sets background:var(--color-white) inline. */
img[src*="/diagrams/chart-"]{padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);background:linear-gradient(color-mix(in srgb,var(--color-bg-canvas) 72%,transparent),color-mix(in srgb,var(--color-bg-canvas) 72%,transparent)),var(--gradient-brand)!important;box-shadow:0 18px 50px -30px rgba(0,0,0,.65)}
[data-oge-sem-item] img{border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);box-shadow:0 18px 50px -30px rgba(0,0,0,.65)}
/* The owner asked for the charts and the lab photo to sit in the page the way the
   ICCF photograph does, which is greyscale — so the same filter, tuned per image.
   The charts are instrument screenshots: the two traces are separated by position,
   not only by colour, so dropping the red survives as evidence. The full-colour,
   uncropped original is one click away in the lightbox, which resets both of these
   below — nothing measured is only available in greyscale. */
img[src*="/diagrams/chart-"]{filter:grayscale(1) contrast(1.06)}
/* Capped at its own 559px source. Losing the text column beside it (item 22) left
   the photograph alone in an auto-fit grid, which stretched it to 1118px — exactly
   twice its pixels. */
img[src*="lab-cathode-work"]{filter:grayscale(1) contrast(1.08) brightness(0.86);max-width:559px}
/* Crop the Windows chrome off the two run charts: a title bar carrying the capture
   date (…18.05.2004…) and a row of tab buttons, about 60px of a 640px frame. Cover
   plus a bottom origin trims the top only, and needs no second copy of the asset.
   Ratios are (source width)/(640 - 60).

   These two give up the gradient mat, and have to. aspect-ratio sizes the border
   box while object-fit crops the content box, so a fixed 12px pad makes the two
   disagree by a margin that grows as the image gets smaller — measured 77px of
   source cropped at desktop and 87px at 375px, against the 60px intended, which
   eats the time-axis labels on a phone. With no padding the two boxes differ only
   by the 1px border and the crop holds at 61px across every width. */
img[src*="chart-et-run-"]{padding:0;object-fit:cover;object-position:50% 100%}
img[src*="chart-et-run-17h"]{aspect-ratio:895/580}
img[src*="chart-et-run-80h"]{aspect-ratio:945/580}
/* The one-pager pairs each chart with its text in a two-column grid that has
   no breakpoint, so on a phone an 895px source renders at 294px. Below the
   header breakpoint the chart takes the full column and the text sits under it. */
@media(max-width:719px){
[style*="minmax(0,2.4fr)"]{grid-template-columns:1fr!important}
}

/* ---- SEM evidence -------------------------------------------------------
   The page carries one micrograph now (the other five were removed from the
   markup, not hidden), and it spans the grid at its true aspect ratio: contain,
   never cover, so the burned-in instrument bar survives — that bar is the detail
   that makes the frame read as a real instrument on a real sample.
   Capped at 40rem, left-aligned with the lead above it. Spanning the full grid
   put a 1024px source on screen at 1118px — upscaled, and a full viewport of grey
   where the section wants a figure. The lightbox is there for a closer look. */
[data-oge-sem-hero]{grid-column:1/-1;max-width:min(100%,40rem)}
[data-oge-sem-hero] img{aspect-ratio:auto!important;object-fit:contain!important;width:100%;height:auto;background:#000}
/* ---- Deuterium equivalence ----------------------------------------------
   A coal pile, a stack of blue barrels and an LNG tank are generic energy stock
   and were the least credible images on the site. The section is a quantity
   comparison — 250 kg of deuterium against 4.9M tons of coal — so the quantities
   carry it instead, set large against a rule. The <img> tags are hidden rather
   than removed because that markup lives in the handoff; delete them at source
   once the design system is editable again. */
div:has(>img[src*="/fuel-"])>img{display:none}
div:has(>img[src*="/fuel-"]){text-align:left;border-top:2px solid var(--color-border-strong);padding-top:var(--space-4)}
/* Only enlarge where the column can hold it: these sit three-up inside an
   already-nested card, so on a phone the track is ~89px and "2.6M" at 5xl
   overflows it by 2px. Below the breakpoint the original size is right. */
@media(min-width:720px){
div:has(>img[src*="/fuel-"])>div{font-size:var(--text-5xl)!important;line-height:var(--leading-5xl);letter-spacing:var(--tracking-5xl)}
}
.oge-sem-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-sm)}
/* Lightbox. Native <dialog> so focus trapping, Escape and inertness are the
   platform's job rather than ours. */
.oge-lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:92vh;color:var(--color-text-primary)}
.oge-lightbox::backdrop{background:rgba(0,0,0,.85)}
.oge-lightbox img{display:block;width:100%;height:auto;background:#000;border-radius:var(--radius-sm)}
/* The dialog reuses the page's src, so the chart rules above would match here too
   and enlarge a cropped greyscale copy. The point of the lightbox is the untouched
   frame: no filter, no crop, no mat. */
.oge-lightbox img{filter:none!important;aspect-ratio:auto!important;object-fit:contain!important;padding:0!important;border:0!important;box-shadow:none!important}
/* The backdrop is near-black in every theme, so the caption cannot follow the
   theme's secondary token — in light mode that is dark grey on black, 3.06:1. */
.oge-lightbox figcaption{margin-top:var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:#E6EAEC}
.oge-lightbox-close{position:absolute;top:.5rem;right:.5rem;width:40px;height:40px;border-radius:999px;border:1px solid var(--color-border-subtle);background:var(--color-surface-default);color:var(--color-text-primary);font-size:1.1rem;line-height:1;cursor:pointer}
:focus-visible{outline:2px solid var(--color-text-brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}