/* ============================================================================
   sza.css — the one shared stylesheet of the SZ& site.

   What lives here and nowhere else:
     1. Tokens: brand palette, neutral ramp, roles, ONE type scale, spacing,
        containers, motion. Pages must not redeclare :root.
     2. The site chrome that every page shares: skip link, sitebar, mobile
        menu, CTA band and footer. The markup is stamped by web/_chrome.py.

   Families. Two carry the site: Bodoni Moda (display) and Jost (everything
   you read — body, labels, navigation). IBM Plex Mono is not a reading face:
   it is reserved for figures that are data (tonnage, CBM, years, counts,
   revisions), through --data only. The brand guide asks for exactly that.

   Linked BEFORE each page's own <style>, so page components can refine it.
   ============================================================================ */

:root{
  /* ---- Meridian brand (brand/tokens.css) ---- */
  --ocean:#0B2A45; --steel:#5C6B76; --petrol:#14716A; --petrol-bright:#3FB9AE;
  --mist:#C9D2D8;

  /* ---- neutral ramp (design system §3.1) ---- */
  --n-0:#FFFFFF; --n-50:#F7F6F2; --n-100:#EEF1F4; --n-200:#E0E5EA; --n-300:#C9D2D8;
  --n-400:#A8B4BD; --n-500:#8494A0; --n-600:#5C6B76; --n-700:#46545E; --n-800:#3A4750;
  --n-900:#26333E; --n-950:#0B2A45;

  /* ---- roles ---- */
  --paper:#F7F6F2;       /* Paper                                   */
  --paper-hi:#FFFFFF;    /* raised surface                          */
  --paper-lo:#EEF1F4;    /* sunken surface — n-100                  */
  --ink:#0B2A45;         /* Ocean — display, headings               */
  --ink-2:#3A4750;       /* Ink — body                              */
  --ink-3:#5C6B76;       /* Steel — secondary (5.1:1 on Paper)      */
  --ink-4:#5C6B76;       /* tertiary TEXT. Was n-400 (#A8B4BD, 1.96:1
                            on Paper — fails AA); text now uses Steel.
                            Decorative greys use --rule-4 below.     */
  --rule-4:#A8B4BD;      /* n-400 for marks, rules, strokes only    */
  --line:rgba(11,42,69,.14);
  --line-2:rgba(11,42,69,.07);
  --accent:#14716A;      /* Petrol — accent on light (≤10 %)        */
  --accent-2:#3FB9AE;    /* Petrol Bright — accent on dark          */
  --orange:var(--accent);     /* legacy alias: the name predates the brand */
  --orange-2:var(--accent-2); /* legacy alias                            */
  --blue:#0B2A45;
  --blue-2:#8494A0;

  /* ---- families ---- */
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --tech:"Jost",system-ui,-apple-system,sans-serif;
  --label:var(--tech);   /* uppercase labels, nav, eyebrows, tags   */
  --data:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;  /* figures only */
  --mono:var(--data);    /* legacy alias, kept for the 3D widget CSS */
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- type scale — the only one ---- */
  --t-display:clamp(56px,7.6vw,104px);
  --t-statement:clamp(40px,5vw,72px);
  --t-h1:clamp(40px,5vw,72px);      /* interior page titles              */
  --t-h2:clamp(28px,2.8vw,40px);
  --t-h3:clamp(22px,1.8vw,26px);
  --t-h4:18px;
  --t-lead:clamp(19px,1.5vw,22px);
  --t-body:17px; --t-body-sm:15px; --t-caption:13px; --t-meta:12px; --t-label:11px;
  --t-fig-xl:clamp(44px,4.8vw,72px);
  --t-fig-l:28px; --t-fig-m:17px; --t-fig-s:13px;
  --ls-label:.26em; --ls-meta:.08em;

  /* ---- spacing — base 4px ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --rhythm-section:clamp(72px,9vw,132px);
  --rhythm-block:var(--sp-8);

  /* ---- containers ---- */
  --w-wide:1440px; --w-shell:1240px; --w-text:720px;
  --gutter:clamp(20px,5vw,64px);

  /* ---- geometry + elevation ---- */
  --r-sm:2px; --r-md:3px; --r-lg:6px; --r-pill:999px;
  --elev-1:0 1px 2px rgba(11,42,69,.06),0 4px 12px rgba(11,42,69,.05);
  --elev-2:0 8px 32px rgba(11,42,69,.12);

  /* ---- motion ---- */
  --dur-micro:180ms; --dur-enter:320ms; --dur-section:640ms; --stagger:60ms;

  /* ---- dark instrument surfaces ---- */
  --dark-surface-0:#0B2A45; --dark-surface-1:#0E3454; --dark-surface-2:#133D61;
  --dark-text:#F7F6F2; --dark-text-2:#A8B4BD; --dark-accent:#3FB9AE;
  --dark-border:rgba(201,210,216,.18); --dark-border-strong:#8494A0;
}

/* Phone scale. One step: the large sizes are display sizes. */
@media (max-width:640px){
  :root{
    --t-display:48px; --t-statement:38px; --t-h1:38px; --t-h2:28px; --t-h3:22px;
    --t-h4:17px; --t-lead:18px; --t-body:16px; --t-body-sm:15px;
    --t-fig-xl:40px; --t-fig-l:26px; --t-fig-m:16px;
  }
}

/* ---------------------------------------------------------------- base -- */
::selection{background:rgba(20,113,106,.16)}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)
}
.band-dark :is(a,button,input,select,textarea):focus-visible,
.site-menu :is(a,button):focus-visible{outline-color:var(--dark-accent)}
/* Figures. The one place that decides which page components are data and
   therefore set in Plex Mono: counts, tonnages, volumes, years and indices.
   Everything else reads in Jost. */
.fig,.data,
.mast-meta div b,.hero-aside b,.stat b,.atlas-stat b,.atlas-summary b,.est-out b,.est-io b,
.op-n,.rows .fig,.rows .ix,.atlas-card .ix,.atlas-card .scale,.atlas-theatre .n,
.cap-row .ix,.cap-head .ix,.adj .n,.stages .n,.layer i,.qs li b,.svc li b,.eyebrow b,
.mth-n,.mth-meter,.num-list .num,.principle .num,.format .num,.brief-tab b,.cap-num,
.sector-tab .index,.sector-tab .detail .figure,.fig-row__n,.odo__col,.load-count,.count{
  font-family:var(--data);font-variant-numeric:tabular-nums
}
.foot-note{margin-top:var(--sp-5);font-size:var(--t-caption);line-height:1.6;color:var(--ink-3);max-width:88ch}

/* responsive images: the wrapper never takes part in layout */
picture[data-rs]{display:contents}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;left:var(--sp-4);top:var(--sp-4);z-index:130;
  transform:translateY(-300%);
  padding:var(--sp-2) var(--sp-4);background:var(--ink);color:var(--paper-hi);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:var(--ls-meta);
  text-transform:uppercase;border-radius:var(--r-md);
  transition:transform var(--dur-micro) var(--ease);
}
.skip:focus{transform:none}

/* ------------------------------------------------------------- sitebar -- */
.sitebar{
  position:sticky;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:var(--sp-5);
  padding:var(--sp-3) var(--gutter);
  background:rgba(247,246,242,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line-2);
}
/* the home keeps its hand-over: fixed, hidden until the hero track ends */
.sitebar.is-handover{position:fixed;transform:translateY(-102%);transition:transform .45s var(--ease);pointer-events:none}
.sitebar.is-handover.on{transform:none;pointer-events:auto}
.sitebar .brand{
  font-family:var(--tech);font-weight:500;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink);
}
.sitebar .brand span{opacity:.52;margin-left:.42em}
.sitebar nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)}
.sitebar nav a:not(.pill){
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);padding:var(--sp-1) 0;
  border-bottom:1px solid transparent;transition:color var(--dur-micro),border-color var(--dur-micro);
}
.sitebar nav a:not(.pill):hover{color:var(--ink);border-bottom-color:var(--line)}
.sitebar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.sitebar .pill{height:2.5em;padding:0 1.2em;font-size:var(--t-label)}
/* conmutador de idioma: un link al espejo (es/ <-> raíz), rotulado con el
   idioma de destino. Mismo registro que los links de nav, separado por una
   hairline para que no se lea como una sección más del sitio. */
.sitebar .lang{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);border-left:1px solid var(--line);
}
.sitebar .lang:hover{color:var(--ink)}
.menu-foot .lang{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dark-text-2);
}
.menu-foot .lang:hover{color:var(--dark-text)}

.pill{
  pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
  height:2.85em;padding:0 1.5em;border-radius:var(--r-pill);
  font-family:var(--label);font-weight:500;font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-hi);
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(12,16,21,.55)}
.pill.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.pill.ghost:hover{border-color:var(--ink);background:rgba(12,16,21,.04);box-shadow:none}
.pill.light{background:var(--paper-hi);border-color:var(--paper-hi);color:var(--ink)}
.pill.ghost-dark{background:transparent;color:var(--dark-text);border-color:var(--dark-border-strong)}
.pill.ghost-dark:hover{border-color:var(--dark-text);box-shadow:none}

/* ---------------------------------------------------------- mobile menu -- */
.menu-btn{
  display:none;align-items:center;gap:var(--sp-3);height:40px;padding:0 0 0 var(--sp-3);
  margin-left:var(--sp-2);border:0;background:none;cursor:pointer;color:var(--ink);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
}
.menu-btn i{position:relative;display:block;width:22px;height:9px}
.menu-btn i::before,.menu-btn i::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--dur-enter) var(--ease),top var(--dur-enter) var(--ease);
}
.menu-btn i::before{top:0}.menu-btn i::after{top:7.5px}
.menu-btn[aria-expanded="true"] i::before{top:3.75px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:3.75px;transform:rotate(-45deg)}

.site-menu{
  position:fixed;inset:0;z-index:85;overflow-y:auto;
  padding:calc(64px + var(--sp-6)) var(--gutter) var(--sp-7);
  background:var(--dark-surface-0);color:var(--dark-text);
  display:flex;flex-direction:column;gap:var(--sp-7);
  opacity:0;visibility:hidden;transition:opacity var(--dur-enter) var(--ease),visibility 0s linear var(--dur-enter);
}
.site-menu.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-enter) var(--ease)}
.site-menu ol{list-style:none;border-top:1px solid var(--dark-border)}
.site-menu li{border-bottom:1px solid var(--dark-border)}
.site-menu li a{
  display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) 0;
  font-family:var(--display);font-weight:500;font-size:clamp(26px,6.4vw,40px);line-height:1.1;
  color:var(--dark-text);
}
.site-menu li a b{font-family:var(--data);font-weight:400;font-size:var(--t-meta);color:var(--dark-accent);min-width:3ch}
.site-menu li a[aria-current="page"]{color:var(--dark-accent)}
.site-menu .menu-foot{display:grid;gap:var(--sp-2);font-size:var(--t-body-sm);color:var(--dark-text-2)}
.site-menu .menu-foot a:not(.pill){color:var(--dark-text)}
.site-menu .pill{justify-self:start;margin-bottom:var(--sp-3)}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .sitebar{background:var(--dark-surface-0);border-bottom-color:var(--dark-border);transform:none;pointer-events:auto}
html.menu-open .sitebar .brand,html.menu-open .menu-btn{color:var(--dark-text)}
html.menu-open .sitebar nav .pill{visibility:hidden}

@media (max-width:1080px){
  .sitebar nav a:not(.pill){display:none}
  .js .menu-btn{display:inline-flex}
}
@media (max-width:520px){
  .sitebar .brand{font-size:13px;letter-spacing:.08em}
  .sitebar nav .pill{display:none}
}
@media (prefers-reduced-motion:reduce){
  .site-menu,.site-menu.is-open{transition:none}
}

/* ------------------------------------------------------ CTA + footer -- */
.band-dark{background:var(--dark-surface-0);color:var(--dark-text)}
.band-dark h2{color:var(--dark-text)}
.cta-band{padding:var(--rhythm-section) var(--gutter)}
.cta-band .shell{max-width:var(--w-shell);margin:0 auto}
.cta-band h2{
  font-family:var(--display);font-weight:600;font-size:var(--t-statement);
  line-height:1.02;letter-spacing:-.02em;max-width:16ch;
}
.eyebrow-dark{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dark-text-2);margin-bottom:var(--sp-5);
}
.eyebrow-dark b{font-weight:400;color:var(--dark-accent)}
.mk{
  flex:0 0 auto;width:34px;height:5px;border-radius:1px;display:inline-block;
  margin-right:var(--sp-3);vertical-align:middle;
  background:linear-gradient(90deg,
    var(--rule-4) 0 13px,transparent 13px 16px,var(--rule-4) 16px 24px,transparent 24px 27px,
    var(--rule-4) 27px 31px,transparent 31px 33px,var(--rule-4) 33px 34px);
}
.eyebrow-dark .mk{background:linear-gradient(90deg,
    var(--dark-accent) 0 13px,transparent 13px 16px,var(--dark-accent) 16px 24px,transparent 24px 27px,
    var(--dark-accent) 27px 31px,transparent 31px 33px,var(--dark-accent) 33px 34px)}
.cta-lede{margin-top:var(--sp-4);max-width:58ch;font-size:var(--t-body-sm);line-height:1.66;color:var(--dark-text-2)}
.cta-band .cta{display:flex;gap:.7rem;margin-top:var(--sp-6);flex-wrap:wrap}
.cta-contact{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);margin-top:var(--sp-7);
  font-size:var(--t-caption);letter-spacing:.02em;color:var(--dark-text-2);
}
.cta-contact a{color:var(--dark-text);transition:color var(--dur-micro)}
.cta-contact a:hover{color:var(--dark-accent)}

.band-dark footer{
  position:relative;border-top:1px solid var(--dark-border);
  padding:var(--sp-8) var(--gutter) var(--sp-6);overflow:hidden;
}
.foot-rules{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--w-shell);margin:0 auto;left:0;right:0;
}
.foot-rules i{border-left:1px dashed rgba(201,210,216,.13)}
.foot-rules i:last-child{border-right:1px dashed rgba(201,210,216,.13)}
.foot-grid,.legal,.endmark,.foot-plate{position:relative;z-index:1}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.35fr 1.25fr;gap:var(--sp-7) var(--sp-6);
  max-width:var(--w-shell);margin:0 auto;
}
.sig .brand{
  font-family:var(--tech);font-weight:500;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:var(--dark-text);
}
.sig .brand span{opacity:.6;margin-left:.42em}
.sig .rule{width:34px;height:2px;background:var(--dark-accent);margin:var(--sp-4) 0 var(--sp-3)}
.sig .nm{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--t-fig-m);color:var(--dark-text)}
.sig .rl{margin-top:var(--sp-1);font-family:var(--label);font-size:var(--t-label);letter-spacing:3px;text-transform:uppercase;color:var(--dark-accent)}
.sig .ds{margin-top:var(--sp-3);font-size:var(--t-caption);line-height:1.5;color:var(--dark-text-2);max-width:30ch}
.fl{
  display:block;margin-bottom:var(--sp-4);font-family:var(--label);font-size:var(--t-label);
  letter-spacing:3px;text-transform:uppercase;color:var(--dark-text-2);
}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.foot-grid ul li{position:relative}
.foot-grid ul a,.foot-grid address{
  display:inline-block;font-style:normal;font-size:var(--t-caption);line-height:1.5;
  color:var(--dark-text);opacity:.86;
  transition:color var(--dur-micro),opacity var(--dur-micro),transform var(--dur-micro) var(--ease);
}
.foot-grid ul li::before{
  content:"–";position:absolute;left:0;top:0;color:var(--dark-accent);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--dur-micro),transform var(--dur-micro) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .foot-grid ul li:has(a:is(:hover,:focus-visible))::before{opacity:1;transform:translateX(0)}
  .foot-grid ul li:has(a:is(:hover,:focus-visible)) a{transform:translateX(14px)}
}
.foot-grid ul a:is(:hover,:focus-visible){color:var(--dark-accent);opacity:1}
.foot-plate{
  margin:var(--sp-8) calc(var(--gutter) * -1) 0;width:calc(100% + var(--gutter) * 2);
  height:clamp(190px,26vw,330px);overflow:hidden;
  transition:clip-path 2s cubic-bezier(.33,1,.68,1);
}
.foot-plate.is-armed{clip-path:inset(0 100% 0 0)}
.foot-plate.is-armed.is-drawn{clip-path:inset(0 0 0 0)}
.foot-plate img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 82%;
  filter:invert(1);mix-blend-mode:screen;opacity:.42;
}
.endmark{overflow:hidden;padding:0 0 var(--sp-6);margin-top:var(--sp-8);border-top:1px solid var(--dark-border)}
.endmark span{
  display:block;white-space:nowrap;font-family:var(--tech);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.4rem,11.4vw,10rem);letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(201,210,216,.34);
  margin-left:calc(var(--gutter) * -.2);padding-top:var(--sp-6);
}
.legal{
  max-width:var(--w-shell);margin:var(--sp-8) auto 0;padding-top:var(--sp-5);
  border-top:1px solid var(--dark-border);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);justify-content:space-between;
  font-size:var(--t-meta);letter-spacing:.02em;color:var(--dark-text-2);
}
.legal a{color:var(--dark-text-2);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--dark-accent)}
@media (max-width:1200px){ .foot-grid{grid-template-columns:1.4fr 1fr 1.3fr} .foot-grid>:last-child{grid-column:1/-1} }
@media (max-width:900px){
  .foot-rules{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>:first-child{grid-column:1/-1}
}
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} .foot-grid>*{grid-column:auto} }
@media (prefers-reduced-motion:reduce){
  .foot-plate{clip-path:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ------------------------------------------- capability figure band -- */
/* Brand illustrations are duotone cut-outs on white: shown whole, on a
   raised panel, never cropped into a photo frame. */
.cap-figure{
  max-width:var(--w-shell);margin:0 auto;padding:0 var(--gutter) var(--rhythm-section);
  box-sizing:content-box;
}
.cap-figure img{
  display:block;width:100%;height:clamp(220px,30vw,420px);object-fit:contain;
  background:var(--paper-hi);border:1px solid var(--line-2);border-bottom:0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:var(--sp-6);filter:saturate(.85);
}
/* Title block, as on a drawing sheet: figure number, what it shows, and the
   plain fact that it is an illustration, not to scale. Stamped by _chrome.py
   from the image's alt text. */
.plate-title{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  border:1px solid var(--line-2);border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--paper-hi);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.plate-title>span{padding:12px var(--sp-5);border-left:1px solid var(--line-2);white-space:nowrap}
.plate-title>span:first-child{border-left:0;color:var(--petrol)}
.plate-title>span:nth-child(2){white-space:normal;letter-spacing:.08em;text-transform:none;color:var(--ink-2);font-size:13px}
@media (max-width:720px){
  .plate-title{grid-template-columns:auto minmax(0,1fr)}
  .plate-title>span:nth-child(n+3){display:none}
}

/* ------------------------------------------------------- photo slot -- */
/* A client photo at assets/photos/<key>.jpg (see _images.py). Until the file
   exists the <img> 404s and stays transparent; a labelled frame of the final
   size says what goes there. On load the slot gets .has-photo and the photo
   covers the box. html.img-placeholders (SHOW_IMAGE_PLACEHOLDERS) shows the
   frames; without it an empty slot shows its fallback or a paper tone. */
.ph-slot{position:relative;overflow:hidden;background:var(--paper-lo)}
.ph-slot:has(>picture),.ph-slot:has(>img:not(.ph-img)){background:none}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.ph-slot.has-photo .ph-img{opacity:1}
.ph-slot.has-photo>:not(.ph-img){visibility:hidden}
.img-pending{display:none}
html.img-placeholders .ph-slot:not(.has-photo) .img-pending{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  padding:var(--sp-4);border:1px dashed var(--steel);
  background:repeating-linear-gradient(135deg,var(--paper-hi) 0 14px,var(--paper) 14px 15px);
}
html.img-placeholders .ph-slot:not(.has-photo)>:not(.ph-img):not(.img-pending){visibility:hidden}
.img-pending-tag,.img-pending-file{font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.img-pending-file{letter-spacing:.02em!important;text-transform:none!important;color:var(--petrol);word-break:break-all}
.sector-tab .ph-slot{max-width:440px;margin:var(--sp-5) 0;border-radius:var(--r-md)}
.sector-tab .ph-slot .sector-img{margin:0}
.sector-tab .ph-slot.has-photo{height:200px}
/* figure band: a photo fills a wide 21:9 plate instead of the white sheet */
.cap-figure .band-ph{border-radius:var(--r-sm) var(--r-sm) 0 0}
.cap-figure .band-ph .ph-img{height:100%;padding:0;border:0;border-radius:0;background:none;filter:none;object-fit:cover}
.cap-figure .band-ph.has-photo{border:1px solid var(--line-2);border-bottom:0}
.cap-figure .band-ph.has-photo,html.img-placeholders .cap-figure .band-ph:not(.has-photo){aspect-ratio:21/9}
.cap-figure .band-ph.has-photo>picture,html.img-placeholders .cap-figure .band-ph:not(.has-photo)>picture{display:none}
.plate-title .k-ph{display:none}
.cap-figure:has(.has-photo) .plate-title .k-ph{display:inline}
.cap-figure:has(.has-photo) .plate-title .k-ill,.cap-figure:has(.has-photo) .plate-title .k-nts{display:none}

/* ------------------------------------------ shared page components -- */
/* Moved here from the inline <style> of every page on 27·09·2026: these
   rules were byte-identical in all sixteen. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--tech);font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body.is-loading{overflow:hidden}
canvas{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.brand{pointer-events:auto;font-family:var(--tech);font-weight:500;letter-spacing:.02em; font-size:clamp(13px,1.15vw,17px);letter-spacing:.1em; text-transform:uppercase;white-space:nowrap;}
.brand span{opacity:.52;margin-left:.42em}
button:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:var(--r-sm)}
.est a:focus-visible{outline-color:var(--dark-accent)}
main{position:relative;z-index:1;background:var(--paper)}
.sec{padding:var(--rhythm-section) var(--gutter);border-top:1px solid var(--line-2)}
.sec-alt{background:var(--paper-hi)}
.shell{max-width:var(--w-shell);margin:0 auto}
.sec h2{font-family:var(--display);font-weight:600;text-transform:none; font-size:var(--t-h2);line-height:1.06;letter-spacing:-.02em;color:var(--ink); max-width:26ch;}
.sec h2.statement{font-size:var(--t-statement);line-height:1.02;max-width:16ch}
.sub{margin-top:var(--sp-4);max-width:60ch;color:var(--ink-3); font-size:var(--t-body-sm);line-height:1.62;font-weight:500;}
.lbl{font-family:var(--tech);font-weight:400;font-size:var(--t-label);letter-spacing:3px; text-transform:uppercase;color:var(--ink-3);}
.more{font-family:var(--label);font-size:var(--t-meta);letter-spacing:.1em; text-transform:uppercase;color:var(--orange);}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.pos-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8) var(--sp-9);margin-top:var(--sp-2)}
.pos-copy p{margin-top:var(--sp-5);max-width:56ch; font-size:var(--t-body-sm);line-height:1.68;color:var(--ink-2);}
.layer{list-style:none;border-top:1px solid var(--line);margin-top:var(--sp-3)}
.layer li{display:grid;grid-template-columns:3ch 1fr;gap:var(--sp-4); padding:var(--sp-4) 0;border-bottom:1px solid var(--line-2);}
.layer i{font-style:normal;font-family:var(--data);font-size:var(--t-meta);color:var(--orange);padding-top:2px}
.layer h3{font-family:var(--tech);font-weight:500;font-size:var(--t-body-sm);letter-spacing:.01em;color:var(--ink)}
.layer p{margin-top:var(--sp-1);font-size:var(--t-caption);line-height:1.55;color:var(--ink-3)}
.lens{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);margin-top:var(--sp-5)}
.lens span{display:inline-flex;align-items:center;gap:.6em}
.lens span::before{content:"";width:14px;height:2px;background:var(--orange)}
.mth-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-9);margin-top:var(--rhythm-block);align-items:start}
.mth-copy p{max-width:56ch;font-size:var(--t-body-sm);line-height:1.68;color:var(--ink-2)}
.mth-copy p+p{margin-top:var(--sp-5)}
.mth-copy .mth-link{margin-top:var(--sp-6)}
.est .lbl{color:var(--dark-text-2)}
.est-note{margin-top:var(--sp-4);font-size:var(--t-caption);line-height:1.55;color:var(--dark-text-2)}
.est-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.ops{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
.op .route{font-family:var(--label);font-size:var(--t-meta);letter-spacing:.08em;color:var(--orange)}
.op h3{margin-top:var(--sp-3);font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:1.16;color:var(--ink)}
.op dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4); padding:var(--sp-2) 0;border-bottom:1px solid var(--line-2);}
.op dd{font-family:var(--tech);font-size:var(--t-meta);color:var(--ink);text-align:right}
.op-index{list-style:none;margin-top:var(--sp-7);border-top:1px solid var(--line)}
.op-index li{display:grid;grid-template-columns:1.1fr 1fr auto;gap:var(--sp-2) var(--sp-5); padding:var(--sp-3) 0;border-bottom:1px solid var(--line-2); font-family:var(--label);font-size:var(--t-label);letter-spacing:.05em;}
.op-index b{font-weight:400;color:var(--ink)}
.op-index span{color:var(--ink-3)}
.op-index .fig{text-align:right;color:var(--ink-2)}
.sec-more{margin-top:var(--sp-6)}
.intel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
.pub-cover .k{font-family:var(--label);font-size:var(--t-label);letter-spacing:.16em; text-transform:uppercase;color:var(--dark-accent);}
.pub-cover h3{font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:1.1;color:var(--dark-text)}
.pub-body p{font-size:var(--t-caption);line-height:1.6;color:var(--ink-2)}
.pub-meta{margin-top:auto;display:flex;justify-content:space-between;gap:var(--sp-3); font-family:var(--label);font-size:var(--t-label);letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3);}
.js .s-reveal{opacity:0;transform:translateY(18px); transition:opacity var(--dur-section) var(--ease),transform var(--dur-section) var(--ease); transition-delay:calc(var(--d,0)*var(--stagger));}
.js .s-reveal.in{opacity:1;transform:none}
.cta{display:flex;gap:.7rem;margin-top:clamp(1.6rem,3.4vh,2.6rem);flex-wrap:wrap}

/* ============================================================
   LINE ICONS (web/_icons.py) — one weight at every size
   ============================================================ */
svg.ico{display:block;overflow:visible}
svg.ico *{vector-effect:non-scaling-stroke;stroke-width:1.5}

/* ============================================================
   PAGE BANNER (_images.banner) — first section of every interior page.
   Title, lede and figures over a full-bleed photograph. One height, one
   type scale, one gradient on every page so they read as a system.
   ============================================================ */
.pg-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(620px,82vh,760px);padding:clamp(112px,12vw,168px) var(--gutter) clamp(48px,5.5vw,80px);
  background:var(--ocean);color:var(--dark-text)}
.pg-banner>.shell{position:relative;width:100%}
.pg-banner-bg{position:absolute;inset:0;z-index:-1}
.pg-banner-bg .ph-slot{position:absolute;inset:0;aspect-ratio:auto!important;background:var(--ocean)}
.pg-banner-bg .ph-img,.pg-banner-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,62% 50%)}
.pg-banner-fb{opacity:0;transition:opacity .5s var(--ease)}
.pg-banner-bg.has-fb .pg-banner-fb{opacity:1}
.pg-banner-bg.has-fb .ph-slot:not(.has-photo){background:none}
/* the overlay: navy from the left where the text sits, and from the bottom */
.pg-banner-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,42,69,.94) 0%,rgba(11,42,69,.8) 38%,rgba(11,42,69,.3) 72%,rgba(11,42,69,.18) 100%),
             linear-gradient(0deg,rgba(11,42,69,.9) 0%,rgba(11,42,69,0) 48%)}
/* pending: a quiet frame on navy, label bottom-right, clear of the title */
html.img-placeholders .pg-banner-ph:not(.has-photo) .img-pending{
  inset:clamp(76px,7vw,96px) var(--gutter) auto auto;width:min(340px,40%);height:auto;justify-content:flex-start;
  background:rgba(11,42,69,.55);border-color:rgba(201,210,216,.4);z-index:1}
html.img-placeholders .pg-banner-bg.has-fb .pg-banner-ph:not(.has-photo) .img-pending{background:rgba(11,42,69,.72)}
.pg-banner .img-pending-tag,.pg-banner .img-pending-what{color:var(--dark-text-2)}
.pg-banner .img-pending-file{color:var(--petrol-bright)}
.pg-banner .crumb{margin-bottom:var(--sp-5);color:var(--dark-text-2)}
.pg-banner .crumb a{color:var(--dark-text-2)}
.pg-banner .crumb a:hover{color:var(--dark-text)}
.pg-banner h1{font-family:var(--display);font-weight:600;font-size:var(--t-h1);line-height:1.02;letter-spacing:-.02em;
  color:var(--dark-text);max-width:18ch;text-wrap:balance}
.pg-banner .lede{margin-top:var(--sp-5);max-width:56ch;font-family:var(--tech);font-weight:500;font-size:var(--t-lead);
  line-height:1.5;color:var(--dark-text-2)}
.pg-banner .mast-meta{display:grid;grid-template-columns:repeat(4,minmax(0,max-content));gap:var(--sp-4) var(--sp-8);
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(201,210,216,.22)}
.pg-banner .mast-meta div b{display:block;font-family:var(--data);font-weight:500;font-size:var(--t-fig-m);
  color:var(--dark-text);font-variant-numeric:tabular-nums;margin-bottom:var(--sp-1)}
.pg-banner .mast-meta div b i{font-style:normal;font-size:.7em;color:var(--petrol-bright);margin-left:.15em}
.pg-banner .mast-meta .lbl{display:block;max-width:26ch;color:var(--dark-text-2)}
@media (max-width:700px){
  .pg-banner{min-height:600px;padding-top:112px}
  .pg-banner-bg .ph-img,.pg-banner-fb{object-position:var(--focus-m,72% 50%)}
  .pg-banner-bg::after{background:linear-gradient(0deg,rgba(11,42,69,.95) 0%,rgba(11,42,69,.82) 55%,rgba(11,42,69,.5) 100%)}
  .pg-banner .mast-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5)}
  html.img-placeholders .pg-banner-ph:not(.has-photo) .img-pending{inset:76px var(--gutter) auto;width:auto;padding:var(--sp-3)}
  html.img-placeholders .pg-banner-ph:not(.has-photo) .img-pending-what{display:none}
  html.img-placeholders .pg-banner:has(.pg-banner-ph:not(.has-photo)){padding-top:172px}
}
.img-pending-what{font-family:var(--tech);font-size:var(--t-caption);line-height:1.4;color:var(--ink-3)}

/* layer list with a small image per layer (capabilities · The spine, Rev. G) */
.layer.layer-ph-list li{grid-template-columns:3ch minmax(0,1fr) 128px;align-items:start}
.layer-ph{border-radius:var(--r-sm)}
@media (max-width:600px){ .layer.layer-ph-list li{grid-template-columns:3ch minmax(0,1fr) 84px} }
html.img-placeholders .layer-ph:not(.has-photo) .img-pending{padding:var(--sp-2)}
.layer-ph .img-pending-tag,.layer-ph .img-pending-what{display:none}
.layer-ph .img-pending-file{font-size:10px;line-height:1.3}

/* ---------------------------------------------------------------- logo -- */
/* 29·09·2026: the brand is the "SZ &" monogram, inlined as SVG paths by
   _chrome.py from assets/sz-logo-inline.svg (web/_logo.py). SZ takes the
   link colour, & takes --logo-amp. Height follows each .brand font-size. */
.brand{display:inline-flex;align-items:center;line-height:0;--logo-amp:var(--petrol)}
.brand .logo{display:block;height:2em;width:auto}
.sig .brand .logo{height:2.6em}
.sig .brand,html.menu-open .sitebar .brand{--logo-amp:var(--petrol-bright)}
.sig .slogan{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--t-fig-m);line-height:1.25;color:var(--dark-text);max-width:22ch}
.sig .slogan+.rl{margin-top:var(--sp-3)}