/* Flight Fuels LP rebuild concept
   Archetype: aeronautical chart sheet + fuel datasheet.
   One source of truth for grid, baseline and colour. Spacing is a multiple of --bl (8px).

   CLIENT KNOBS (one number each, see NOTES.md):
   KNOB 1  --accent-action : the colour of every "Request fuel" button and link (brand blue).
   KNOB 2  --cover-ratio-desktop : how tall the home-page photo is on wide screens (16/7 = cinematic strip).
   KNOB 3  --section-gap : vertical breathing room between sections, in baseline units.
*/

@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/b612mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/b612mono-700-latin.woff2") format("woff2")}

:root{
  /* grid */
  --cols:4; --gutter:16px; --margin:16px; --bl:8px; --maxw:1360px;
  --section-gap:8;                    /* KNOB 3: baseline units of padding above and below a section (mobile) */
  --cover-ratio-desktop:16/7;         /* KNOB 2 */
  /* paper + ink (light, default) */
  --paper:#ffffff; --paper-2:#f4f3ef; --paper-3:#e9e7e0;
  --ink:#272625; --ink-2:#5b584f; --ink-3:#7d796f;
  --line:rgba(39,38,37,.18); --line-strong:rgba(39,38,37,.42); --grat:rgba(39,38,37,.075);
  --gold:#a09360; --gold-text:#766b40;
  --accent-action:#086ad8;            /* KNOB 1 */
  --action-ink:#ffffff;
  --focus:#086ad8;
  --scrim:rgba(39,38,37,.55);
  --font-sans:"Montserrat",system-ui,"Segoe UI",Arial,sans-serif;
  --font-mono:"B612 Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark) and (prefers-color-scheme:light){
  :root:not([data-theme="light"]){
    --paper:#1b1a19; --paper-2:#272625; --paper-3:#33312e;
    --ink:#f1efe8; --ink-2:#c6c2b7; --ink-3:#95918a;
    --line:rgba(241,239,232,.2); --line-strong:rgba(241,239,232,.5); --grat:rgba(241,239,232,.085);
    --gold:#b9ac78; --gold-text:#cdc08d;
    --accent-action:#5aa2f2; --action-ink:#121110; --focus:#8ec0ff;
    --scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1b1a19; --paper-2:#272625; --paper-3:#33312e;
  --ink:#f1efe8; --ink-2:#c6c2b7; --ink-3:#95918a;
  --line:rgba(241,239,232,.2); --line-strong:rgba(241,239,232,.5); --grat:rgba(241,239,232,.085);
  --gold:#b9ac78; --gold-text:#cdc08d;
  --accent-action:#5aa2f2; --action-ink:#121110; --focus:#8ec0ff;
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (min-width:900px){
  :root{--cols:12; --gutter:24px; --margin:48px; --section-gap:14}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--font-sans);
  font-feature-settings:"kern";-webkit-font-smoothing:antialiased;min-height:100svh}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-color:var(--line-strong);text-underline-offset:.15em}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--gold);color:#fff}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);font-weight:400;letter-spacing:0}
.skip{position:absolute;left:var(--margin);top:-100px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:60;font-weight:600}
.skip:focus{top:8px}

/* grid primitives */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}

/* type scale: body 16, h2 ~2x, one display size, mono data 12-13 */
h1{font-weight:800;line-height:.94;letter-spacing:-.025em;text-transform:uppercase;font-size:clamp(2.5rem,7vw,5rem);text-wrap:balance}
h2{font-weight:700;line-height:1.08;letter-spacing:-.015em;font-size:clamp(1.625rem,2.6vw,2.5rem);text-wrap:balance}
h3{font-weight:700;line-height:1.2;font-size:1.0625rem}
@media (min-width:1200px){h1{font-size:5rem}.title h1{font-size:4.75rem}}
.lede{font-size:1.0625rem;line-height:1.5;color:var(--ink-2);max-width:60ch}
.meas{max-width:62ch}
p + p{margin-top:calc(var(--bl)*2)}
small,.small{font-size:.8125rem}

/* ---------- actions ---------- */
.act{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  background:var(--accent-action);color:var(--action-ink);font-weight:700;text-decoration:none;
  border:1px solid transparent;transition:background .35s var(--ease),transform .35s var(--ease)}
.act:hover{filter:brightness(1.08)}
.act:active{transform:translateY(1px)}
.act--sm{min-height:44px;padding:0 16px;font-size:.9375rem}
.act--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.act--line:hover{filter:none;border-color:var(--ink)}
.tel{font-family:var(--font-mono);font-size:1rem;text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.tel:hover{text-decoration-color:currentColor}
.more{font-family:var(--font-sans);font-size:.9375rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
.more:hover{text-decoration-color:var(--ink)}

/* ---------- header ---------- */
.top{position:relative;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.top__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{width:150px;height:auto}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.top__tools{display:flex;align-items:center;gap:6px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);color:var(--ink)}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme .i-sun{display:none}
:root[data-theme="dark"] .theme .i-sun{display:block}
:root[data-theme="dark"] .theme .i-moon{display:none}
@media (prefers-color-scheme:dark) and (prefers-color-scheme:light){
  :root:not([data-theme="light"]) .theme .i-sun{display:block}
  :root:not([data-theme="light"]) .theme .i-moon{display:none}
}
.menu{gap:8px;width:auto;padding:0 12px;font-size:.875rem;font-weight:600}
.top .act--sm{display:none}
@media (max-width:899px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--margin) 16px}
  .top[data-nav="open"] .nav{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{min-height:52px;font-size:1.125rem;font-weight:600;padding:0 4px;border-bottom:1px solid var(--line);width:100%}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav a[aria-current="page"]::after{content:"";width:8px;height:8px;background:var(--gold);margin-left:auto}
}
@media (min-width:900px){
  .top{position:sticky;top:0}
  .top__bar{min-height:68px}
  .brand img{width:180px}
  .menu{display:none}
  .nav a{font-size:.875rem;padding:0 9px}
}
@media (min-width:1100px){
  .nav a{font-size:.9375rem;padding:0 12px}
  .top .act--sm{display:inline-flex;margin-left:10px}
}

/* chart title block: breadcrumb + sheet index */
.marg{border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.marg .wrap{display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.marg a{text-decoration:none;color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.marg a:hover{color:var(--ink)}
.marg ol{display:flex;gap:8px}
.marg ol li{display:inline-flex;align-items:center;min-height:44px}
.marg ol li + li::before{content:"/";margin-right:8px;color:var(--ink-3)}
.marg [aria-current]{color:var(--ink)}
.marg__right{white-space:nowrap}

/* ---------- sections ---------- */
.sec{padding-block:calc(var(--bl)*var(--section-gap));border-top:1px solid var(--line);position:relative}
.sec--flush{border-top:0}
@media (min-width:900px){
  .sec::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;
    background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px calc(100% / 24));opacity:.9}
  .sec--flush::before{display:none}
}
.sec__head{grid-column:1/-1;margin-bottom:calc(var(--bl)*3)}
.sec__body{grid-column:1/-1}
.sec__note{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);margin-top:calc(var(--bl)*2);line-height:1.5}
@media (min-width:900px){
  .sec__head{grid-column:1/5;margin-bottom:0;position:sticky;top:calc(68px + var(--bl)*3);align-self:start}
  .sec__body{grid-column:5/-1}
  .sec__head--wide{grid-column:1/-1;position:static;margin-bottom:calc(var(--bl)*5);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
  .sec__head--wide h2{grid-column:1/7}
  .sec__head--wide .sec__note{grid-column:8/-1;margin:0}
  .sec__body--wide{grid-column:1/-1}
}

/* ---------- cover (home) ---------- */
.cover{position:relative;border-top:0;padding-top:0}
.cover__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.cover__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.cover__legend{background:var(--paper);padding:calc(var(--bl)*4) 0 0}
.cover__legend h1{margin-bottom:calc(var(--bl)*3)}
.cover__legend .lede{margin-bottom:calc(var(--bl)*4)}
.cover__act{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
@media (min-width:900px){
  .cover__media{aspect-ratio:var(--cover-ratio-desktop)}
  .cover__inner{position:relative}
  .cover__legend{width:min(70%,960px);margin-top:calc(var(--bl)*-28);position:relative;padding:calc(var(--bl)*5) calc(var(--bl)*5) 0 0;
    background:var(--paper);border-top:4px solid var(--gold)}
  .cover__legend::before{content:"";position:absolute;left:0;top:-4px;width:112px;height:4px;background:var(--ink)}
}

/* chart legend strip: the grades we carry */
.codes{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:thin}
.codes li{flex:0 0 auto;scroll-snap-align:start}
.code{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:.8125rem;white-space:nowrap;text-decoration:none;background:var(--paper)}
.code:hover{border-color:var(--ink);background:var(--paper-2)}
.code b{font-weight:700;margin-right:8px;color:var(--gold-text)}
.legend{padding-block:calc(var(--bl)*3)}
.legend .wrap{display:grid;gap:12px}
.legend__label{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;align-self:center}
@media (min-width:900px){
  .legend .wrap{grid-template-columns:auto 1fr;gap:24px;align-items:center}
  .legend{background:
    linear-gradient(to right,var(--grat) 1px,transparent 1px) 0 0/calc(100% / 24) 100%,
    linear-gradient(to bottom,var(--grat) 1px,transparent 1px) 0 0/100% calc(var(--bl)*3);
    border-top:1px solid var(--line)}
}

/* datasheet: general data */
.data{border-top:1px solid var(--line-strong)}
.data div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:calc(var(--bl)*1.75) 0;border-bottom:1px solid var(--line)}
.data dt{font-size:.875rem;color:var(--ink-2);font-weight:500}
.data dd{margin:0;font-family:var(--font-mono);font-size:.9375rem;line-height:1.45}
.data dd small{display:block;font-family:var(--font-sans);color:var(--ink-3);margin-top:2px}

/* the four verbs: a real sequence, so numbered */
.chain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--bl)*4) var(--gutter)}
.chain li{border-top:1px solid var(--line-strong);padding-top:calc(var(--bl)*1.5)}
.chain .n{font-family:var(--font-mono);font-size:.75rem;color:var(--gold-text);display:block;margin-bottom:calc(var(--bl)*1.5)}
.chain figure{aspect-ratio:4/3;overflow:hidden;margin-bottom:calc(var(--bl)*2);background:var(--paper-3)}
.chain img{width:100%;height:100%;object-fit:cover}
.chain h3{margin-bottom:6px}
.chain p{font-size:.9375rem;color:var(--ink-2)}
@media (min-width:900px){.chain{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* split: photo + text */
.split{grid-column:1/-1;display:grid;gap:calc(var(--bl)*4) var(--gutter)}
.split figure{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.split img{width:100%;height:100%;object-fit:cover}
.split figcaption,.cap{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);margin-top:8px;line-height:1.5}
.split__text h2{margin-bottom:calc(var(--bl)*3)}
@media (min-width:900px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .split figure{grid-column:1/8}
  .split__text{grid-column:8/-1;padding-top:calc(var(--bl)*2)}
  .split--rev figure{grid-column:6/-1;grid-row:1}
  .split--rev .split__text{grid-column:1/6;grid-row:1}
}

/* coverage: map + province list */
.map-panel{position:relative;border:1px solid var(--line-strong);background:
  linear-gradient(to right,var(--grat) 1px,transparent 1px) 0 0/calc(100% / 12) 100%,
  linear-gradient(to bottom,var(--grat) 1px,transparent 1px) 0 0/100% calc(var(--bl)*5),var(--paper)}
.map-panel svg{width:100%;height:auto}
.map-panel .map-note{font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:6px 12px 10px;border-top:1px solid var(--line)}
@media (min-width:700px){.map-panel .map-note{position:absolute;left:12px;bottom:10px;padding:0;border:0}}
.map-prov{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.map-prov.map-served{fill:var(--paper-3)}
.map-label{font-family:var(--font-mono);font-size:11px;fill:var(--ink-3);letter-spacing:.06em}
.map-site circle{fill:var(--gold);stroke:var(--paper);stroke-width:2;transition:transform .4s var(--ease);transform-box:fill-box;transform-origin:center}
.map-site text{font-family:var(--font-mono);font-size:11px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.map-site--phone circle{fill:var(--paper);stroke:var(--gold);stroke-width:2}
.map-site:hover circle,.map-site:focus circle,.map-site.is-hot circle{transform:scale(1.6)}
.map-site:focus{outline:none}
.map-site:focus-visible circle{outline:2px solid var(--focus)}
.map-ring{fill:transparent;stroke:var(--accent-action);stroke-width:1.5;stroke-opacity:0;vector-effect:non-scaling-stroke}
.map-site.is-hot .map-ring{stroke-opacity:1}
.map-hit{fill:transparent;stroke:none}
.provlist{display:grid;grid-template-columns:1fr;gap:0 24px;font-family:var(--font-mono);font-size:.875rem;line-height:1.5}
.provlist li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.provlist b{font-weight:700;color:var(--gold-text);min-width:2.5ch}
.provlist span{margin-left:auto;color:var(--ink-3);font-size:.75rem;white-space:nowrap}
@media (min-width:600px){.provlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.map-site > circle:not(.map-hit):not(.map-ring){r:8}.map-site text{font-size:15px}.map-site .map-ring{r:15}}

/* tanks teaser: big numerals */
.bignum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);border-top:1px solid var(--line-strong)}
.bignum div{padding-top:calc(var(--bl)*2)}
.bignum .code-id{font-family:var(--font-mono);font-size:.8125rem;color:var(--gold-text);display:block;margin-bottom:4px}
.bignum .num{font-weight:800;font-size:clamp(2.75rem,7vw,5rem);line-height:1;letter-spacing:-.03em;display:block}
.bignum .num small{font-size:.35em;font-weight:600;letter-spacing:0;color:var(--ink-2);margin-left:4px}
.bignum p{font-size:.875rem;color:var(--ink-2);margin-top:8px}

/* ---------- tables (datasheet) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem;border-top:2px solid var(--ink)}
.tbl th,.tbl td{text-align:left;padding:calc(var(--bl)*1.5) 10px calc(var(--bl)*1.5) 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.tbl tbody th{font-family:var(--font-sans);font-weight:600;font-size:.9375rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--font-mono);padding-right:0;white-space:nowrap}
.tbl caption{text-align:left;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);padding-bottom:8px;caption-side:bottom}
.tbl a{text-decoration:none;font-family:var(--font-mono);white-space:nowrap;border-bottom:1px solid var(--line-strong)}
.tbl a:hover{border-color:currentColor}

/* general-data sheet: label | mono value | note */
.sheet tbody th{width:28%}
.sheet td:nth-child(2){font-family:var(--font-mono);font-size:.9375rem;white-space:nowrap}
.sheet td:nth-child(3){font-size:.875rem;color:var(--ink-2)}
@media (max-width:599px){
  .sheet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sheet tr{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:2px 12px;padding:calc(var(--bl)*1.5) 0;border-bottom:1px solid var(--line)}
  .sheet th,.sheet td{border:0;padding:0}
  .sheet tbody th{width:auto;grid-row:1/3}
  .sheet td:nth-child(2){white-space:normal}
  .sheet td:nth-child(3){grid-column:2}
}

/* call sheet: desk | name | call for | phone */
.callsheet tbody th{font-family:var(--font-mono);font-weight:700;font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-text);width:18%;padding-top:calc(var(--bl)*2.25)}
.callsheet td:nth-child(2){font-weight:600;white-space:nowrap}
.callsheet td:nth-child(3){font-size:.875rem;color:var(--ink-2)}
.callsheet td.num .tel{min-height:0;font-size:1rem}
@media (max-width:699px){
  .callsheet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .callsheet tr{display:grid;grid-template-columns:1fr;gap:2px;padding:calc(var(--bl)*2) 0;border-bottom:1px solid var(--line)}
  .callsheet th,.callsheet td{border:0;padding:0}
  .callsheet tbody th{width:auto;margin-bottom:4px}
  .callsheet td.num{text-align:left;padding-top:4px}
  .callsheet td.num .tel{min-height:44px;font-size:1.0625rem}
}
.split--sub{margin-top:calc(var(--bl)*7)}
.as-h2{font-weight:700;line-height:1.15;letter-spacing:-.01em;font-size:clamp(1.375rem,2vw,1.75rem);margin-bottom:calc(var(--bl)*2)}

/* availability matrix */
.matrix tbody th{width:34%}
.matrix tbody th small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;color:var(--ink-3);margin-top:2px;letter-spacing:.04em}
.matrix td{font-family:var(--font-mono);font-size:.8125rem;text-align:center;padding-left:4px;padding-right:4px}
.matrix thead th{text-align:center;padding-left:4px;padding-right:4px}
.matrix thead th:first-child{text-align:left}
.matrix td.y{color:var(--ink);font-weight:700}
.matrix td.n{color:var(--ink-3)}
.matrix td.a{color:var(--gold-text)}
.matrix td.y::before{content:"";display:inline-block;width:9px;height:9px;background:var(--gold);margin-right:6px;vertical-align:0}
.matrix-key{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-2);margin-top:calc(var(--bl)*2)}
.matrix-key span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;vertical-align:0;border:1px solid var(--line-strong)}
.matrix-key .k-y::before{background:var(--gold);border-color:var(--gold)}
.matrix-key .k-a::before{border-color:var(--gold-text)}

/* spec table */
.spec th.model{font-family:var(--font-mono);font-weight:700;font-size:1rem;letter-spacing:0;color:var(--ink);text-transform:none}
.spec td{font-family:var(--font-mono);padding-left:12px}
.decode{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:.9375rem;align-items:baseline}
.decode dt{font-family:var(--font-mono);font-weight:700;font-size:1.125rem;color:var(--gold-text)}
.decode dd{margin:0;color:var(--ink-2)}

/* call sheet */
.calls{border-top:2px solid var(--ink)}
.calls li{display:grid;grid-template-columns:1fr;gap:2px 16px;padding:calc(var(--bl)*2) 0;border-bottom:1px solid var(--line)}
.calls .role{font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-text);display:block;margin-bottom:4px}
.calls .who{font-weight:600}
.calls .tel{font-size:1.0625rem;justify-self:start}
.calls .for{font-size:.875rem;color:var(--ink-2)}
@media (min-width:600px){
  .calls li{grid-template-columns:140px 1fr auto;align-items:center}
  .calls .role{grid-column:1;grid-row:1/3;align-self:start;padding-top:5px;margin:0}
  .calls .who{grid-column:2;grid-row:1}
  .calls .for{grid-column:2;grid-row:2}
  .calls .tel{grid-column:3;grid-row:1/3;align-self:center}
}
.tollfree{display:block;font-family:var(--font-mono);font-weight:700;font-size:clamp(1.75rem,5.5vw,2.75rem);letter-spacing:-.03em;text-decoration:none;line-height:1.1;white-space:nowrap}
.tollfree:hover{color:var(--accent-action)}

/* ---------- forms ---------- */
.form{display:grid;gap:calc(var(--bl)*2.5)}
.form .row{display:grid;gap:calc(var(--bl)*2.5)}
@media (min-width:600px){.form .row{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px}
.field label span{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:0;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#b3261e}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form__foot small{color:var(--ink-3)}
.done{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:calc(var(--bl)*3) 0}
.done h3{margin-bottom:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- gallery ---------- */
.plates{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--bl)*3) var(--gutter)}
.plates li{grid-column:1/-1}
.plates figure{position:relative}
.plates button{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);border:1px solid transparent}
.plates button:hover{border-color:var(--ink)}
.plates img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.plates button:hover img{transform:scale(1.02)}
.plates figcaption{display:flex;gap:12px;font-size:.875rem;margin-top:8px;color:var(--ink-2)}
.plates figcaption b{font-family:var(--font-mono);font-weight:700;font-size:.75rem;color:var(--gold-text);padding-top:3px}
@media (min-width:700px){
  .plates li{grid-column:span 6}
  .plates li.w7{grid-column:span 7}.plates li.w5{grid-column:span 5}.plates li.w4{grid-column:span 4}.plates li.w8{grid-column:span 8}.plates li.w12{grid-column:span 12}
  .plates li.w12 button{aspect-ratio:21/9}
}
.light{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:96vh}
.light::backdrop{background:var(--scrim)}
.light img{max-height:84vh;width:auto;max-width:100%;margin:auto}
.light__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--paper);color:var(--ink);padding:10px 12px 10px 16px;font-family:var(--font-mono);font-size:.8125rem}
.light__bar button{min-height:44px;padding:0 14px;border:1px solid var(--line-strong);font-weight:600}

/* ---------- subpage title block ---------- */
.title{padding-top:calc(var(--bl)*5);padding-bottom:calc(var(--bl)*5)}
.title h1{grid-column:1/-1;font-size:clamp(2.25rem,6.4vw,4.75rem);margin-bottom:calc(var(--bl)*2)}
.title .lede{grid-column:1/-1;max-width:64ch}
.title__meta{grid-column:1/-1;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);margin-top:calc(var(--bl)*3);display:flex;flex-wrap:wrap;gap:8px 24px}
.title__meta span{padding-left:14px;position:relative}
.title__meta span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;background:var(--gold)}
.plate{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.plate img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .title{padding-top:calc(var(--bl)*8);padding-bottom:calc(var(--bl)*7)}
  .title h1{grid-column:1/9}
  .title .lede{grid-column:1/9}
  .plate{aspect-ratio:21/8}
}

/* ---------- location index ---------- */
.loc-layout{grid-column:1/-1;display:grid;gap:calc(var(--bl)*5) var(--gutter)}
@media (min-width:900px){
  .loc-layout{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .loc-map{grid-column:1/8;position:sticky;top:calc(68px + var(--bl)*3)}
  .loc-index{grid-column:8/-1}
}
.loc-index h2{font-family:var(--font-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-text);padding:0 0 8px;border-bottom:2px solid var(--ink);margin-top:calc(var(--bl)*5)}
.loc-index h2:first-child{margin-top:0}
.index li{display:grid;grid-template-columns:2.5ch 1fr;gap:4px 14px;padding:calc(var(--bl)*2) 0;border-bottom:1px solid var(--line);scroll-margin-top:100px;transition:background .3s var(--ease)}
.index li.is-hot{background:var(--paper-2);box-shadow:-12px 0 0 var(--paper-2),12px 0 0 var(--paper-2)}
.index .n{font-family:var(--font-mono);font-weight:700;color:var(--gold-text);padding-top:2px}
.index h3{font-size:1rem}
.index .place{font-size:.875rem;color:var(--ink-2)}
.index address{font-style:normal;font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);margin-top:6px;line-height:1.5}
.index .tel{font-size:.9375rem;margin-top:6px;display:inline-block}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-strong);padding-block:calc(var(--bl)*6) calc(var(--bl)*14);font-size:.875rem;color:var(--ink-2)}
.foot .grid{row-gap:calc(var(--bl)*4)}
.foot__brand{grid-column:1/-1}
.foot__brand img{width:150px;margin-bottom:12px}
.foot__brand address{font-style:normal;font-family:var(--font-mono);font-size:.8125rem;line-height:1.6}
.foot__nav{grid-column:1/-1}
.foot__nav ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.foot__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot__nav a:hover{color:var(--ink)}
.foot__meta{grid-column:1/-1;font-family:var(--font-mono);font-size:.75rem;line-height:1.7;color:var(--ink-3)}
.foot__meta a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot__meta a:hover{color:var(--ink)}
@media (min-width:900px){
  .foot{padding-bottom:calc(var(--bl)*8)}
  .foot__brand{grid-column:1/5}
  .foot__nav{grid-column:5/9}
  .foot__nav ul{grid-template-columns:1fr 1fr}
  .foot__meta{grid-column:9/-1;text-align:right}
}

/* ---------- mobile dock: call + request ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-top:1px solid var(--line-strong);padding:8px var(--margin) max(8px,env(safe-area-inset-bottom))}
.dock a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-weight:700;text-decoration:none;font-size:.9375rem}
.dock .dock__call{color:var(--ink);border:1px solid var(--line-strong);margin-right:8px;font-family:var(--font-mono);font-weight:700}
.dock .dock__req{background:var(--accent-action);color:var(--action-ink)}
.dock svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1100px){.dock{display:none}}
@media (min-width:900px) and (max-width:1099px){.foot{padding-bottom:calc(var(--bl)*14)}}

/* ---------- 404 ---------- */
.off{min-height:60svh;display:grid;align-content:center;padding-block:calc(var(--bl)*10)}
.off .n404{font-family:var(--font-mono);font-weight:700;font-size:clamp(4rem,18vw,12rem);line-height:.9;letter-spacing:-.04em;color:var(--paper-3);-webkit-text-stroke:1px var(--line-strong)}
.off ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(var(--bl)*4)}

/* ---------- motion: one authored moment ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.map-site{opacity:0;transition:opacity .5s var(--ease) calc(var(--i,0)*45ms)}
.map-panel.in .map-site,.map-site:focus{opacity:1}
@media (prefers-reduced-motion:reduce){
  .reveal,.map-site{opacity:1;transform:none;transition:none}
  .plates img,.map-site circle,.act{transition:none}
}
.no-js .reveal,.no-js .map-site{opacity:1;transform:none}

@media print{.top,.dock,.marg{display:none}.sec{break-inside:avoid}}
