/* Instruction Panel (iowa-fleet family). Port of the Quad Cities Roadside design, "The Printed Instruction
   Panel" (05-design, 2026-10-26): a coated-white board printed in two spot inks, --spot (fusee red: the call
   as a filled strip, everything else in it only as thin marks) and --ink (all type and rules), then scored,
   perforated and die-cut. One vertical fold-score axis; panels hang from it by a hairline score with end
   ticks; the call is a perforated tear strip; one rounded die-cut window frames the photo. 8px unit, 1px
   rules, no shadows, no radius but the 32px die corners. Light only.
   Mobile first: the base rules are the phone; min-width queries open the board (421, 768, 901, 1100, 1200).
   Brand design.vars re-skin the tokens in :root (palette and font names). */

/* ---------- faces: self-hosted, OFL (assets/fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-wdth-wght.woff2") format("woff2-variations"),url("/assets/fonts/archivo-latin-wdth-wght.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;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:"Atkinson Hyperlegible Next";src:url("/assets/fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2-variations"),url("/assets/fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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}
/* metric-matched fallbacks while the faces load (the source's measurements: Archivo at 75% width / 800, at 68% / 800, Atkinson at 400) */
@font-face{font-family:"Archivo Fallback";src:local("Arial Narrow"),local("ArialNarrow"),local("Liberation Sans Narrow");size-adjust:98.4%;ascent-override:89.4%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback 68";src:local("Arial Narrow"),local("ArialNarrow"),local("Liberation Sans Narrow");size-adjust:90.7%;ascent-override:97%;descent-override:23.2%;line-gap-override:0%}
@font-face{font-family:"Atkinson Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica Neue");size-adjust:97.7%;ascent-override:100.3%;descent-override:32.8%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --board:#FBFBF8;        /* the coated board: page ground, theme colour */
  --label:#FFFFFF;        /* stuck-on labels: wordmark, cards, ticket, form, strips at rest */
  --ink:#141414;          /* all type, scores, hairline frames, focus rings */
  --spot:#C8102E;         /* fusee red: a filled area means "call"; otherwise thin marks only */
  --on-spot:#FFFFFF;      /* type and glyph on a spot strip */
  --wordmark:#1F2933;     /* a typeset wordmark (when the brand has no logo image) */
  --silver:#B8BDC3;       /* defined as in the source, used by nothing */
  --font-display:"Archivo","Archivo Fallback","Arial Narrow",sans-serif;
  --font-h1:"Archivo","Archivo Fallback 68","Arial Narrow",sans-serif;   /* every H1 is set at 68% width */
  --font-text:"Atkinson Hyperlegible Next","Atkinson Fallback",system-ui,sans-serif;

  --u:8px;
  --s1:calc(var(--u)*1); --s2:calc(var(--u)*2); --s3:calc(var(--u)*3); --s4:calc(var(--u)*4);
  --s5:calc(var(--u)*5); --s6:calc(var(--u)*6); --s8:calc(var(--u)*8); --s10:calc(var(--u)*10);
  --axis:var(--s2);       /* the fold score, from the board edge (176px from 901px up) */
  --reach:var(--s2);      /* from the content edge back to the axis (32px from 901px up) */
  --gutter:var(--s2);
  --page-max:calc(var(--u)*170);

  --hair:1px; --rule:4px; --tick:9px; --tick-step:calc(var(--u)*8);
  --perf-w:2px; --perf-dash:6px; --perf-step:12px; --perf-inset:6px;
  --die:calc(var(--u)*4);
  --target:44px; --target-lg:48px;
  --ring:3px; --ring-gap:3px; --nudge:2px; --nick-travel:calc(var(--u)/2);
  --dock-space:calc(var(--u)*14);     /* room kept clear of the docked call bar on phones */
  --stick-space:var(--s2);            /* room kept clear of the stuck header (the inline script sets it) */
  --ws-tight:.14em; --ws:.1em;
  --nick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h17M12 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.16,1,.3,1); --ease-peel:cubic-bezier(.34,1.32,.64,1);
  --t-peel:.42s; --t-dock:.38s; --t-unfold:.56s;
  color-scheme:only light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--board);scroll-padding-top:var(--stick-space);scroll-padding-bottom:var(--dock-space)}
body{margin:0;min-width:320px;background:var(--board);color:var(--ink);font:400 1.125rem/1.55 var(--font-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
::selection{background:var(--spot);color:var(--on-spot)}
:focus-visible{outline:var(--ring) solid var(--ink);outline-offset:var(--ring-gap)}
a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px;text-decoration-color:var(--spot)}
a:hover{text-decoration-thickness:3px}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-family:var(--font-h1)}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd,figure{margin:0;padding:0}
svg .r{stroke:var(--spot);mix-blend-mode:multiply}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-100px;z-index:50;display:flex;align-items:center;min-height:var(--target);padding:var(--s1) var(--s2);background:var(--ink);color:var(--board);font:700 1rem/1 var(--font-display);text-decoration:none}
.skip:focus{top:var(--s2)}
.tel{font-weight:700;white-space:nowrap;text-decoration-thickness:2px}
.go{flex:none;width:20px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--t-peel) var(--ease)}
.go--out{width:12px;height:12px}
.picto{width:48px;height:48px;color:var(--ink)}

/* ---------- the board: one fold-score axis, top to bottom ---------- */
.board{position:relative;max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter) 0 calc(var(--axis) + var(--reach))}
.board::before{content:"";position:absolute;top:0;bottom:0;left:var(--axis);width:var(--hair);background:var(--ink);pointer-events:none}
/* panels hang from the axis, joined to it by a horizontal score with tick ends */
.panel{position:relative;padding:var(--s6) 0;transform-origin:0 0}
.score{position:absolute;top:0;left:calc(-1*var(--reach));right:0;height:var(--hair);background:var(--ink)}
.score::before,.score::after{content:"";position:absolute;top:calc((var(--tick) - var(--hair))/-2);width:var(--hair);height:var(--tick);background:var(--ink)}
.score::before{left:var(--reach)} .score::after{right:0}
@media (min-width:901px){
  :root{--axis:calc(var(--u)*22);--reach:var(--s4);--gutter:var(--s3)}
  .board::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--axis) - (var(--tick) - var(--hair))/2);width:var(--tick);pointer-events:none;background:repeating-linear-gradient(to bottom,var(--ink) 0 var(--hair),transparent var(--hair) var(--tick-step))}
  .panel{padding:var(--s8) 0}
}

/* ---------- type ---------- */
.h2{font-weight:800;font-stretch:75%;font-size:clamp(1.75rem,1.1rem + 1.8vw,2.5rem);line-height:1;text-transform:uppercase;word-spacing:var(--ws);margin-bottom:var(--s3);max-width:26ch}
.name{font-weight:800;font-stretch:68%;font-size:clamp(1.875rem,8.6vw,2.5rem);line-height:.98;text-transform:uppercase;word-spacing:var(--ws-tight);max-width:18ch}
.name--sheet{max-width:none;padding-bottom:var(--s2);border-bottom:var(--rule) solid var(--ink);font-size:clamp(2.125rem,10vw,3rem);line-height:.95}
.name--doc{position:relative;z-index:0;max-width:none;padding-bottom:var(--s2);font-size:clamp(2.75rem,12vw,3.5rem);line-height:.9}
.name--doc::after{content:"";position:absolute;left:0;bottom:0;width:calc(var(--u)*12);height:var(--rule);background:var(--spot);mix-blend-mode:multiply}
.name--slip{max-width:14ch;min-width:0}
/* the stamp: a decorative "24/7" (or the exit number) over the title, a spot bar printed under its foot */
.stamp{position:relative;z-index:0;display:block;width:fit-content;margin-bottom:var(--s2);font:900 min(clamp(3.75rem,18vw,5.5rem),26vw)/.8 var(--font-display);font-stretch:125%;letter-spacing:-.03em;mix-blend-mode:multiply}
.stamp::before{content:"";position:absolute;z-index:-1;left:0;bottom:calc(.065em - var(--s1)/2);height:var(--s1);width:calc(var(--u)*13);background:var(--spot);mix-blend-mode:multiply}
.stamp small{display:block;margin-bottom:var(--s1);font:700 1rem/1 var(--font-display);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase}
.stamp--sheet,.stamp--exit{font-size:min(clamp(3.25rem,16vw,4.5rem),26vw)}
.title{display:flex;align-items:flex-end;gap:var(--s2)}
.title > h1{min-width:0}
.picto--title{display:none;flex:none}
.lead{max-width:60ch;font-size:1.0625rem}
.lead > * + *{margin-top:var(--s2)}
@media (min-width:421px){.picto--title{display:block}}
@media (min-width:768px){
  .name{font-size:clamp(2.25rem,1.4rem + 2vw,3.375rem)}
  .name--sheet{font-size:clamp(2.5rem,1.5rem + 2.8vw,4.25rem)}
  .name--doc{font-size:clamp(3rem,2rem + 3vw,4.5rem);padding-bottom:var(--s3)}
  .stamp{font-size:clamp(4.5rem,2.2rem + 6vw,7.5rem);margin-bottom:var(--s3)}
  .stamp::before{width:calc(var(--u)*16)}
  .stamp--sheet,.stamp--exit{font-size:clamp(3.5rem,1.8rem + 4.4vw,6rem)}
  .stamp--sheet::before,.stamp--exit::before{width:calc(var(--u)*13)}
  .title{gap:var(--s3)}
  .picto--title{width:var(--s8);height:var(--s8)}
  .lead{font-size:1.125rem}
}
@media (min-width:901px){.name{max-width:22ch}.name--sheet,.name--doc{max-width:none}.name--slip{max-width:14ch}}

/* running text from the copy: 36rem measure; "- " lists hang on a hairline spine with a spot nick per item,
   "1. " lists are printed steps with the number in a square spot ring */
.prose > * + *{margin-top:var(--s2)}
.prose > p,.prose > ul:not([class]),.prose > h3,.prose > h4{max-width:36rem}
.prose h3{margin-top:var(--s4);font:800 1.25rem/1.15 var(--font-display);font-stretch:85%;text-transform:uppercase;word-spacing:var(--ws);letter-spacing:0}
.prose h4{margin-top:var(--s3);font:800 1.0625rem/1.2 var(--font-display);font-stretch:88%;text-transform:uppercase;letter-spacing:.02em;word-spacing:var(--ws)}
.prose h3 + *,.prose h4 + *{margin-top:var(--s1)}
.prose > :first-child{margin-top:0}
.prose strong{font-weight:700}
.prose ul:not([class]){list-style:none;position:relative;z-index:0}
.prose ul:not([class]) > li{--nick-y:calc(var(--u)/2 + .775em);position:relative;min-height:var(--s5);padding:calc(var(--u)/2) 0 calc(var(--u)/2) var(--s5)}
.prose ul:not([class]) > li::before{content:"";position:absolute;left:calc(var(--s2) - var(--s1) + var(--hair)/2);top:calc(var(--nick-y) - 1.5px);width:var(--s2);height:var(--ring);background:var(--spot);mix-blend-mode:multiply}
.prose ul:not([class]) > li:not(:last-child)::after{content:"";position:absolute;z-index:-1;left:var(--s2);top:var(--nick-y);bottom:calc(-1*var(--nick-y));width:var(--hair);background:var(--ink)}
.prose ol:not([class]){list-style:none;counter-reset:step;max-width:44rem;border-top:var(--hair) solid var(--ink)}
.prose ol:not([class]) > li{counter-increment:step;position:relative;min-height:calc(var(--s5) + var(--s4));padding:var(--s2) 0 var(--s2) calc(var(--s5) + var(--s3));border-bottom:var(--hair) solid var(--ink)}
.prose ol:not([class]) > li::before{content:counter(step);position:absolute;left:0;top:var(--s2);display:grid;place-items:center;width:var(--s5);height:var(--s5);border:var(--ring) solid var(--spot);font:900 1.25rem/1 var(--font-display);font-stretch:110%;mix-blend-mode:multiply}

/* ---------- go-links: a printed label with an arrow nick ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);min-height:var(--target-lg);max-width:100%;padding:var(--s1) var(--s2);border:var(--hair) solid var(--ink);background:var(--label);text-decoration:none;font:700 1rem/1.15 var(--font-display);font-stretch:95%;text-transform:uppercase;letter-spacing:.03em;word-spacing:var(--ws);overflow-wrap:anywhere}
.chip .go{color:var(--spot)}
.chip:hover,.chip:focus-visible{border-bottom:var(--rule) solid var(--spot);padding-bottom:calc(var(--s1) - var(--rule) + var(--hair))}
.chip:hover .go,.chip:focus-visible .go{transform:translateX(var(--nick-travel))}

/* ---------- header ---------- */
.top-slot{min-height:var(--top-h,auto)}
.top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark menu" "nav nav";align-items:center;gap:var(--s2);padding-top:var(--s2)}
.wordmark{grid-area:mark;position:relative;z-index:2;display:block;justify-self:start;max-width:100%;background:var(--label);border:var(--hair) solid var(--ink);padding:var(--s1) calc(var(--u)*1.5);color:var(--wordmark);text-decoration:none}
.wordmark img{width:calc(var(--u)*17);height:auto;object-fit:cover}  /* the box ratio is the image's own, or --logo-ratio (family.mjs) */
.wordmark-t{display:block;max-width:12em;font:900 1.0625rem/1 var(--font-display);font-stretch:85%;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
/* the header call: a small white label with a spot top rule; it peels on hover and focus */
.top-call{grid-area:call;display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--target);padding:0 var(--s2);border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--spot);background:var(--label);color:var(--ink);text-decoration:none;font:900 .9375rem/1 var(--font-display);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase;transform-origin:50% 0;transition:transform var(--t-peel) var(--ease-peel)}
.top-call .ph{width:18px;height:18px;flex:none;color:var(--spot)}
.top-call:hover,.top-call:focus-visible{transform:perspective(400px) rotateX(16deg)}
.top > .top-call{display:none;justify-self:end}
/* the phone Menu (shown once the inline script has bound it: .menu-ready); without JS the links show */
.menu{display:none;grid-area:menu;align-items:center;gap:var(--s1);min-height:var(--target-lg);padding:0 var(--s2);border:var(--hair) solid var(--ink);border-radius:0;background:var(--label);color:var(--ink);font:800 1rem/1 var(--font-display);font-stretch:95%;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.menu svg{width:22px;height:22px;flex:none}
.menu svg path{transition:transform var(--t-peel) var(--ease),opacity var(--t-peel) var(--ease);transform-origin:12px 12px}
.menu[aria-expanded="true"]{background:var(--ink);color:var(--board)}
.menu[aria-expanded="true"] .m1{transform:translateY(6px)}
.menu[aria-expanded="true"] .m3{transform:translateY(-6px)}
.menu:hover{border-bottom:var(--rule) solid var(--spot);padding-bottom:calc(var(--rule) - var(--hair))}
.menu-ready .menu{display:inline-flex}
.nav{grid-area:nav;width:100%}
.nav ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));gap:0 var(--s2);border-top:var(--hair) solid var(--ink)}
.nav a{display:flex;align-items:center;min-height:var(--target);padding:var(--s1) 0;border-bottom:var(--rule) solid transparent;font:700 .8125rem/1.3 var(--font-display);letter-spacing:.03em;word-spacing:var(--ws);text-transform:uppercase;text-decoration:none}
.nav a:hover{border-bottom-color:var(--ink)}
.nav a[aria-current="page"],.nav a[aria-current="true"]{border-bottom-color:var(--spot)}
.menu-ready .nav{display:none}
.menu-ready .top.is-open .nav{display:block;border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--spot);background:var(--label)}
.menu-ready .top.is-open .nav ul{display:block;border-top:0}
.menu-ready .top.is-open .nav li + li{border-top:var(--hair) solid var(--ink)}
.menu-ready .top.is-open .nav a{justify-content:space-between;min-height:var(--target-lg);padding:0 var(--s2);font-size:1rem;letter-spacing:.04em}
.menu-ready .top.is-open .nav a::after{content:"";flex:none;width:20px;height:12px;background:var(--spot);-webkit-mask:var(--nick) no-repeat center/contain;mask:var(--nick) no-repeat center/contain}
/* landscape phones: the white-label call joins the wordmark and Menu */
@media (max-width:767.98px) and (max-height:480px){
  .top{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"mark call menu" "nav nav nav"}
  .top > .top-call{display:inline-flex}
}
@media (min-width:768px){
  .top{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark call" "nav nav";gap:var(--s2) var(--s3);padding-top:var(--s3)}
  .top > .top-call{display:inline-flex}
  .menu,.menu-ready .menu{display:none}
  .nav,.menu-ready .nav{display:block;justify-self:start;width:auto;margin-left:calc(-1*var(--s1))}
  .nav ul{display:flex;flex-wrap:wrap;border-top:0}
  .nav a{padding:0 var(--s1);font-size:.9375rem;letter-spacing:.04em}
  .wordmark img{width:calc(var(--u)*19)}
  /* once the first strip has scrolled past, the header sticks, compact, on its own board strip with a score under it */
  .top.is-stuck{position:fixed;z-index:30;top:0;left:0;right:0;margin-inline:auto;max-width:var(--page-max);padding:var(--s1) var(--gutter) var(--s1) calc(var(--axis) + var(--reach));background:var(--board)}
  .top.is-stuck::after{content:"";position:absolute;bottom:0;left:var(--axis);right:var(--gutter);height:var(--hair);background:var(--ink)}
  .top.is-stuck .wordmark{padding:calc(var(--u)/2) var(--s1)}
  .top.is-stuck .wordmark img{width:calc(var(--u)*12)}
  .top.is-stuck .wordmark-t{font-size:.9375rem}
}
@media (min-width:901px){
  .wordmark{margin-left:calc(-1*(var(--axis) + var(--reach)) + var(--s3))}  /* pokes across the axis toward the board edge */
  .wordmark img{width:calc(var(--u)*21)}
  .wordmark-t{font-size:1.25rem}
}
@media (min-width:1200px){
  .top{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark nav call"}
  .nav,.menu-ready .nav{justify-self:end;margin-left:0}
  .nav a{padding:0 calc(var(--u)*1.5)}
}

/* ---------- tear strip: the call ---------- */
/* The strip sits on its own dieline and peels from its top perforation. */
.tear{position:relative;z-index:0;background:var(--board)}
.tear::before{content:"";position:absolute;inset:0;z-index:-1;border:var(--hair) solid var(--ink)}
.tear-link{position:relative;container-type:inline-size;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);min-height:var(--s10);padding:var(--s2);background:var(--spot);color:var(--on-spot);text-decoration:none;transform-origin:50% var(--perf-inset);transition:transform var(--t-peel) var(--ease-peel)}
.tear-link::before,.tear-link::after{content:"";position:absolute;left:0;right:0;height:var(--perf-w);background:repeating-linear-gradient(90deg,var(--board) 0 var(--perf-dash),transparent var(--perf-dash) var(--perf-step))}
.tear-link::before{top:var(--perf-inset)} .tear-link::after{bottom:var(--perf-inset)}
.tear-link:hover,.tear-link:focus-visible{transform:perspective(1600px) translateY(-3px) rotateX(9deg) scaleX(.99)}
.tear-link:focus-visible{outline:var(--ring) solid var(--ink);outline-offset:calc(var(--ring-gap) + 1px)}
@supports selector(:has(*)){
  .tear-link:focus-visible{outline:none}
  .tear:has(> .tear-link:focus-visible){outline:var(--ring) solid var(--ink);outline-offset:calc(var(--ring-gap) + 1px)}
}
.tear-word{font:900 min(clamp(1.25rem,6.4vw,1.625rem),11cqi)/1 var(--font-display);font-stretch:115%;text-transform:uppercase;letter-spacing:.01em}
.tear-num{display:flex;align-items:center;gap:var(--s1);min-width:0;white-space:nowrap;font:800 min(clamp(1.125rem,5.6vw,1.5rem),9cqi)/1 var(--font-display);font-stretch:88%;letter-spacing:.04em}
.tear-num .ph{flex:none;width:22px;height:22px}
/* an in-page strip shows its printed rest state (white label, ink type, spot top rule) while a full strip is on screen */
.tear.is-yielding .tear-link{background:var(--label);color:var(--ink);box-shadow:inset 0 0 0 var(--hair) var(--ink),inset 0 var(--rule) 0 var(--spot)}
.tear.is-yielding .tear-link::before,.tear.is-yielding .tear-link::after{opacity:0}
.tear.is-yielding .tear-num .ph{color:var(--spot)}
[data-dock-yield] .tear-link{transition:transform var(--t-peel) var(--ease-peel),background-color var(--t-dock) var(--ease),color var(--t-dock) var(--ease)}
@media (min-width:768px){
  .tear-link{min-height:calc(var(--u)*11);padding:var(--s2) var(--s3);column-gap:var(--s3)}
  .tear-word{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
  .tear-num{gap:calc(var(--u)*1.5);font-size:min(clamp(1.5rem,1rem + 1.4vw,2.375rem),9cqi)}
  .tear-num .ph{width:28px;height:28px}
  .tear--compact .tear-link{min-height:calc(var(--u)*9)}
  .tear--compact .tear-word{font-size:clamp(1.375rem,1.1rem + .8vw,1.875rem)}
  .tear--compact .tear-num{font-size:min(clamp(1.25rem,1rem + .7vw,1.625rem),9cqi)}
  .tear--compact .tear-num .ph{width:22px;height:22px}
}

/* the docked call bar (phones): always on without JS; with JS it docks once the first strip has scrolled past */
.callbar{position:fixed;z-index:40;left:0;right:0;bottom:0}
@media (max-width:767.98px){
  html:not(.js) .board,.dock-on .board{padding-bottom:var(--dock-space)}
  .js .callbar{transform:translateY(calc(100% + var(--s4)));visibility:hidden}
  .js .callbar.is-docked{transform:none;visibility:visible}
  .dock-armed .callbar{transition:transform var(--t-dock) var(--ease),visibility 0s linear var(--t-dock)}
  .dock-armed .callbar.is-docked{transition:transform var(--t-dock) var(--ease),visibility 0s}
}
@media (min-width:768px){.callbar{display:none}}

/* ---------- the call ticket: the 24/7 line, the from-prices with the price note, the ask; a stub under the strip ---------- */
.ticket{container-type:inline-size;border:var(--hair) solid var(--ink);border-top:0;background:var(--label);padding:var(--s2)}
.ticket-line{font:700 1.0625rem/1.4 var(--font-text)}
.ticket-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s2);border-top:var(--hair) solid var(--ink)}
.ticket-prices > div{min-width:0;padding:var(--s1) var(--s1) var(--s1) 0;border-bottom:var(--hair) solid var(--ink)}
.ticket-prices > div:nth-child(even){padding-left:var(--s2);border-left:var(--hair) solid var(--ink)}
.ticket-prices dt{font:700 .875rem/1.25 var(--font-display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.ticket-prices dd{margin-top:calc(var(--u)/2);font:800 1.375rem/1.1 var(--font-display);font-stretch:110%;letter-spacing:.01em;font-variant-numeric:tabular-nums lining-nums}
.ticket-prices dd small{font-size:.68em;font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.04em}
.ticket-prices dd.dd-call{font-size:1rem;font-stretch:90%;text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.ticket-note{margin-top:var(--s2);font-size:1rem;line-height:1.45}
.ticket-ask{display:flex;align-items:flex-start;gap:var(--s1);margin-top:var(--s2);font-weight:700;line-height:1.4}
.ticket-ask .i{flex:none;width:24px;height:24px;margin-top:1px}
@container (min-width:34rem){
  .ticket-prices{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ticket-prices > div,.ticket-prices > div:nth-child(even){padding-left:var(--s2);border-left:var(--hair) solid var(--ink)}
  .ticket-prices > div:first-child{padding-left:0;border-left:0}
}
@media (min-width:768px){.ticket{padding:var(--s2) var(--s3) var(--s3)}}

/* ---------- the die-cut window: the photo fills the die line; a perforated cut line runs around it ---------- */
.fig{min-width:0}
.window{position:relative;display:block;overflow:hidden;border:var(--hair) solid var(--ink);border-radius:var(--die);background:var(--ink);outline:var(--perf-w) dashed var(--ink);outline-offset:var(--perf-inset)}
.window img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.fig figcaption{margin-top:calc(var(--perf-inset) + var(--s2));font-size:1rem;line-height:1.4}

/* ---------- first screens ---------- */
/* answer first. phones: title, lead, call, window; wide: title and lead beside the window,
   the call across under them, or the call beside the title when there is no photo */
.panel--front{padding:0 0 var(--s5)}
.front{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "lead" "call" "win";padding-top:var(--s3)}
.front-copy{grid-area:copy;min-width:0}
.front > .callset{grid-area:call;margin-top:var(--s3)}
.front > .lead{grid-area:lead;margin-top:var(--s3)}
.front > .fig{grid-area:win;margin-top:var(--s4)}
@media (min-width:901px){
  .panel--front{padding-bottom:var(--s6)}
  .front{column-gap:var(--s5);align-items:start;padding-top:var(--s5)}
  .front.has-win{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"copy win" "lead win" "call call"}
  .front.no-win{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"copy call" "lead call"}
  .front.has-win > .callset{margin-top:var(--s5)}
  .front.no-win > .callset{margin-top:0}
  .front > .fig{margin-top:0}
  .front.has-win .window img{aspect-ratio:5/4;max-height:max(14rem,calc(100svh - 22rem))}
  .front.front--reading{max-width:calc(var(--u)*88);grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "lead" "call" "win"}
  .front.front--reading > .callset{margin-top:var(--s4)}
  .front.front--reading > .fig{margin-top:var(--s5)}
  .front.front--reading .window img{aspect-ratio:2/1;max-height:none}
}
/* short phones: the stamp, title and gaps tighten so the strip stays in the first screen */
@media (max-width:767.98px) and (max-height:700px){
  .front,.sheet{padding-top:var(--s2)}
  .stamp{font-size:min(3.25rem,26vw);margin-bottom:var(--s1)}
  .stamp--sheet,.stamp--exit{font-size:min(2.75rem,22vw)}
  .stamp small{margin-bottom:calc(var(--u)/2);font-size:.875rem}
  .name{font-size:clamp(1.75rem,8vw,2.125rem)}
  .front > .callset,.side > .callset{margin-top:var(--s2)}
}

/* the sheet (service, town, exit, pair, problem, county): the title and the page on the left; the call and the
   window in a side column that stays pinned beside the page on wide screens tall enough to hold it */
.sheet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lead" "call" "win" "rest";padding-top:var(--s3)}
.sheet-head{grid-area:head;min-width:0}
.side{display:contents}
.side > .callset{grid-area:call;margin-top:var(--s3)}
.side > .fig{grid-area:win;margin-top:var(--s4)}
.sheet > .lead{grid-area:lead;margin-top:var(--s3)}
.sheet-rest{grid-area:rest;min-width:0;margin-top:var(--s5)}
@media (min-width:901px){
  .sheet{grid-template-columns:minmax(0,1.3fr) minmax(calc(var(--u)*40),1fr);grid-template-areas:"head side" "lead side" "rest side";column-gap:var(--s6);align-items:start;padding-top:var(--s5)}
  .side{grid-area:side;display:flex;flex-direction:column;gap:var(--s4)}
  .side > .callset,.side > .fig{margin-top:0}
  .side .window img{aspect-ratio:5/4}
  .sheet > .lead{margin-top:var(--s3)}
  .sheet-rest{margin-top:var(--s3)}
}
@media (min-width:901px) and (min-height:700px){
  .side{position:sticky;top:var(--s3)}
  .side .window img{max-height:calc(100svh - var(--u)*66)}
}

/* ---------- services strip (hub): a white label, one cell per service with its pictogram ---------- */
.strip{margin-top:var(--s5);border:var(--hair) solid var(--ink);background:var(--label)}
.strip-top{padding:var(--s2);border-bottom:var(--hair) solid var(--ink)}
.strip-head{font-weight:800;font-stretch:75%;font-size:clamp(1.375rem,1.1rem + 1vw,2rem);line-height:1;text-transform:uppercase;word-spacing:var(--ws)}
.strip-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin:0 calc(-1*var(--hair)) calc(-1*var(--hair)) 0}
.strip-list li{min-width:0;background:var(--label);border-right:var(--hair) solid var(--ink);border-bottom:var(--hair) solid var(--ink)}
.strip-cell{display:flex;align-items:center;gap:var(--s2);height:100%;min-height:calc(var(--u)*9);padding:var(--s1) var(--s2) calc(var(--s1) - var(--rule));border-bottom:var(--rule) solid transparent;text-decoration:none;font:800 1rem/1.15 var(--font-display);font-stretch:88%;text-transform:uppercase;letter-spacing:.02em;word-spacing:var(--ws)}
.strip-cell .picto{flex:none;width:40px;height:40px}
.strip-cell .row{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--s1);min-width:0}
.strip-cell .go{color:var(--spot)}
a.strip-cell:hover,a.strip-cell:focus-visible{background:var(--board);border-bottom-color:var(--spot)}
a.strip-cell:focus-visible{outline-offset:calc(-1*(var(--ring) + var(--nudge)))}
a.strip-cell:hover .go,a.strip-cell:focus-visible .go{transform:translateX(var(--nick-travel))}
@media (min-width:421px){
  .strip-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-cell{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--s2);min-height:calc(var(--u)*15);padding:var(--s2) calc(var(--u)*1.5) calc(var(--s2) - var(--rule))}
  .strip-cell .row{align-items:flex-start}
  .strip-cell .row .go{margin-top:calc(var(--u)/2)}
}
@media (min-width:768px){
  .strip-top{padding:var(--s2) var(--s3)}
  .strip-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip-cell{padding:var(--s2) var(--s2) calc(var(--s2) - var(--rule));font-size:1.0625rem}
  .strip-cell .picto{width:48px;height:48px}
}
@media (min-width:1100px){
  .strip-list{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}
  .strip-cell{min-height:calc(var(--u)*17)}
}

/* ---------- the rate sheet (hub, cost): a ruled table under a printed head, the price note beside it ---------- */
.rates-sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.panel--front > .rates-sheet{margin-top:var(--s5)}
.rates-wrap{min-width:0;container:rates / inline-size}
.rates-head{margin:0;padding:var(--s2);border:var(--hair) solid var(--ink);border-bottom:0;background:var(--label);font:800 clamp(1.375rem,1.1rem + 1vw,2rem)/1 var(--font-display);font-stretch:75%;text-transform:uppercase;word-spacing:var(--ws)}
.rates{width:100%;border-collapse:separate;border-spacing:0;background:var(--label);border:var(--hair) solid var(--ink)}
.rates thead th{padding:var(--s1) var(--s2);text-align:left;border-bottom:var(--rule) solid var(--ink);font:700 .9375rem/1.4 var(--font-display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.rates thead th:last-child{text-align:right}
.rates tbody tr{position:relative}
.rates tbody th,.rates tbody td{padding:0;text-align:left;font-weight:inherit;vertical-align:middle;border-bottom:var(--rule) solid transparent}
.rates tbody tr + tr > *{border-top:var(--hair) solid var(--ink)}
.rates .svc{display:flex;align-items:center;min-height:calc(var(--u)*9);padding:var(--s2);text-decoration:none;font:800 1.125rem/1.1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;word-spacing:var(--ws);overflow-wrap:anywhere}
.rates a.svc::after{content:"";position:absolute;inset:0}  /* the whole row is the link */
.rates .svc-t{display:block}
.rates .svc-end{white-space:nowrap}
.rates .svc .go{display:inline-block;vertical-align:middle;margin:-.15em 0 0 calc(var(--u)*1.5);color:var(--spot)}
.rates a.svc:focus-visible{outline:none}
.rates a.svc:focus-visible::after{outline:var(--ring) solid var(--ink);outline-offset:calc(-1*(var(--ring) + var(--nudge) + var(--rule)))}
.rates td.price{padding:var(--s2);text-align:right;white-space:nowrap;font:800 1.125rem/1 var(--font-display);font-stretch:100%;letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums}
.rates td.price--call{white-space:normal;font-size:.875rem;font-stretch:90%;text-transform:uppercase;line-height:1.2}
.rates tbody tr:has(a.svc):hover > *,.rates tbody tr:has(a.svc:focus-visible) > *{background:var(--board);border-bottom-color:var(--spot)}
.rates tbody tr:hover .go,.rates tbody tr:has(a.svc:focus-visible) .go{transform:translateX(var(--nick-travel))}
/* a narrow column (a phone with large text): each row stacks, the price under the name; the heads stay for assistive tech */
@container rates (max-width:20rem){
  .rates,.rates thead,.rates tbody{display:block}
  .rates{border-top:var(--rule) solid var(--ink)}
  .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rates tbody tr{display:block;border-bottom:var(--rule) solid transparent}
  .rates tbody tr + tr{border-top:var(--hair) solid var(--ink)}
  .rates tbody th,.rates tbody td,.rates tbody tr + tr > *{display:block;border-bottom:0;border-top:0}
  .rates tbody tr:has(a.svc):hover,.rates tbody tr:has(a.svc:focus-visible){background:var(--board);border-bottom-color:var(--spot)}
  .rates .svc{min-height:var(--target);padding-bottom:0}
  .rates td.price{padding:calc(var(--u)/4) var(--s2) var(--s2);text-align:left;white-space:normal;font-size:.9375rem;font-weight:700}
}
.legend{border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--ink);background:var(--label);padding:var(--s3) var(--s2)}
.legend-note{font-size:1rem;line-height:1.5}
.legend-checked{margin-top:var(--s2);padding-top:var(--s2);border-top:var(--hair) solid var(--ink);font:700 1rem/1.4 var(--font-text)}
@media (min-width:768px){
  .rates-head{padding:var(--s2) var(--s3)}
  .rates thead th{padding:var(--s1) var(--s3)}
  .rates .svc{padding:var(--s2) var(--s3);font-size:1.375rem}
  .rates td.price{padding:var(--s2) var(--s3);font-size:1.5rem;font-stretch:110%}
  .rates td.price--call{font-size:.9375rem}
  .legend{padding:var(--s3)}
}
@media (min-width:901px){.rates-sheet{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);align-items:start}}

/* ---------- what is included (service pages): a perforated label, the price printed as one figure ---------- */
.kit{position:relative;border:var(--hair) solid var(--ink);background:var(--label);padding:var(--s5) var(--s2) var(--s3) var(--s3)}
.kit::before{content:"";position:absolute;left:0;right:0;top:var(--s2);border-top:var(--perf-w) dashed var(--ink)}
.kit .h2{margin-bottom:var(--s2)}
.kit-text{max-width:36rem;padding-top:var(--s2);border-top:var(--rule) solid var(--ink)}
.from-fig{margin-top:var(--s4);padding-top:var(--s3);border-top:var(--hair) solid var(--ink)}
.from{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);width:fit-content;max-width:100%;mix-blend-mode:multiply}
.from small{font:800 clamp(1.5rem,1.1rem + 1vw,2rem)/1 var(--font-display);font-stretch:75%;text-transform:uppercase;word-spacing:var(--ws)}
.from b{position:relative;z-index:0;min-width:0;font:900 clamp(2.25rem,1.3rem + 2.4vw,3.25rem)/.9 var(--font-display);font-stretch:115%;letter-spacing:.01em;overflow-wrap:anywhere}
.from b::before{content:"";position:absolute;z-index:-1;left:0;bottom:calc(.065em - var(--s1)/2);height:var(--s1);width:calc(var(--u)*10);background:var(--spot);mix-blend-mode:multiply}
.from--call b{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);font-stretch:85%;text-transform:uppercase}
.from-note{margin-top:var(--s2);max-width:36rem;font-size:1rem;line-height:1.5}
.checked{margin-top:var(--s1);font:700 1rem/1.4 var(--font-text)}
@media (min-width:768px){.kit{padding:var(--s6) var(--s5) var(--s5)}}

/* ---------- the exit sheet: exits run down the fold axis, the number in the margin, a spot nick across the
   axis per exit, a hairline score from the axis per row; the hard stop (ink rule, spot bar) closes it ---------- */
.exits{list-style:none;position:relative;max-width:52rem;margin-top:var(--s3);margin-bottom:var(--s4);border-bottom:var(--rule) solid var(--ink)}
.exits::before{content:"";position:absolute;top:0;left:calc(-1*var(--reach));right:0;height:var(--hair);background:var(--ink)}
.exits::after{content:"";position:absolute;bottom:-6px;left:calc(-1*(var(--reach) + var(--s2)));width:calc(var(--reach) + var(--s4));height:var(--s1);background:var(--spot);mix-blend-mode:multiply}
.exits li{position:relative;display:grid;grid-template-columns:min(5.5rem,30vw) minmax(0,1fr);align-items:center;min-height:var(--s8);padding:var(--s1) 0}
.exits li::before{content:"";position:absolute;top:calc(50% - 1.5px);left:calc(-1*var(--reach) - var(--s3)/2);width:var(--s3);height:3px;background:var(--spot);mix-blend-mode:multiply}
.exits li + li::after{content:"";position:absolute;top:0;left:calc(-1*var(--reach));right:0;height:var(--hair);background:var(--ink)}
.x-no{padding:var(--s1) var(--s2) var(--s1) 0;font:900 min(1.75rem,9vw)/.9 var(--font-display);font-stretch:125%;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.x-w{display:block;margin-bottom:calc(var(--u)/2);font:700 .8125rem/1 var(--font-display);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase}
.x-txt{min-width:0;padding:var(--s1) 0;font-size:1.0625rem;line-height:1.45}
@media (min-width:901px){
  .exits::after{left:calc(-1*(var(--axis) + var(--reach)));width:calc(var(--axis) + var(--reach) + var(--s4))}
  .exits li{grid-template-columns:calc(var(--axis) - var(--s3)) calc(var(--s3) + var(--reach)) minmax(0,1fr);margin-left:calc(-1*(var(--axis) + var(--reach)));min-height:var(--s10)}
  .exits li + li::after{left:var(--axis)}
  .exits li::before{left:calc(var(--axis) - var(--s2));width:var(--s4)}
  .x-no{justify-self:end;text-align:right;padding:var(--s1) 0;font-size:min(clamp(2.25rem,1.6rem + 1.4vw,3rem),calc(var(--axis)*.3))}
  .x-w{font-size:.9375rem}
  .x-txt{grid-column:3;padding-right:var(--s2)}
}
.slip .exits li,.receipt .exits li{margin-left:0}

/* ---------- index rows: a list of internal links printed as tear-off rows on a white label ---------- */
.rows{list-style:none;margin-top:var(--s3);border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--ink);background:var(--label);max-width:52rem}
.rows li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name go" "desc desc";gap:var(--s1) var(--s2);align-items:center;padding:var(--s2) var(--s2) calc(var(--s2) - var(--rule));border-bottom:var(--rule) solid transparent}
.rows li + li::before{content:"";position:absolute;left:0;right:0;top:calc(-1*var(--perf-w)/2);height:var(--perf-w);background:repeating-linear-gradient(90deg,var(--ink) 0 var(--perf-dash),transparent var(--perf-dash) var(--perf-step))}
.row-a{grid-area:name;font:800 1.25rem/1.1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.01em;word-spacing:var(--ws)}
.rows li.solo .row-a{text-decoration:none}
.rows li.solo .row-a::after{content:"";position:absolute;inset:0}  /* the whole row takes the tap */
.rows li.solo .row-a:focus-visible{outline:none}
.rows li.solo:has(.row-a:focus-visible){outline:var(--ring) solid var(--ink);outline-offset:calc(-1*(var(--ring) + var(--nudge)));z-index:1}
.rows li.solo:hover,.rows li.solo:focus-within{background:var(--board);border-bottom-color:var(--spot)}
.row-d{grid-area:desc;max-width:62ch;font-size:1rem;line-height:1.45}
.rows .go{grid-area:go;color:var(--spot)}
.rows li:hover .go,.rows li:focus-within .go{transform:translateX(var(--nick-travel))}
@media (min-width:768px){
  .rows li{grid-template-columns:minmax(10rem,16rem) minmax(0,1fr) auto;grid-template-areas:"name desc go";gap:var(--s2) var(--s3);align-items:start;padding:var(--s3) var(--s3) calc(var(--s3) - var(--rule))}
  .row-a{font-size:1.375rem}
  .row-d{padding-top:2px}
  .rows .go{margin-top:calc(var(--u)*.75)}
}
/* a numbered list of links: the line numbers print on the fold axis, a hairline box each (an order, not a rank) */
@media (min-width:901px){
  ol.rows{counter-reset:line}
  ol.rows li{counter-increment:line}
  ol.rows li::after{content:counter(line);position:absolute;top:var(--s3);left:calc(-1*(var(--reach) + var(--hair) + var(--s3)));display:grid;place-items:center;width:var(--s6);height:var(--s6);background:var(--board);border:var(--hair) solid var(--ink);font:800 1.375rem/1 var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums}
}

/* ---------- questions and answers: one white label under a heavy ink rule, a printed Q and a spot A ---------- */
.qa{background:var(--label);border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--ink);padding:0 var(--s2);max-width:52rem}
.qa-row{padding:var(--s3) 0;border-bottom:var(--hair) solid var(--ink)}
.qa-row:last-child{border-bottom:0}
.qa-q{position:relative;padding-left:calc(var(--s3) + var(--s1));max-width:40ch;font:800 1.1875rem/1.15 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:0;word-spacing:var(--ws)}
.qa-q::before{content:"Q";content:"Q" / "";position:absolute;left:0;top:-.05em;font:900 1.375rem/.9 var(--font-display);font-stretch:125%}
.qa-a{margin-top:var(--s2)}
.qa-a::before{content:"A";content:"A" / "";float:left;margin:calc(var(--u)/4) var(--s1) 0 0;font:700 1.375rem/.9 var(--font-display);font-stretch:125%;color:var(--spot);mix-blend-mode:multiply}
.qa-a .prose{max-width:62ch}
@media (min-width:768px){
  .qa{padding:0 var(--s4)}
  .qa-row{padding:var(--s4) 0}
  .qa-q{padding-left:var(--s6);font-size:1.375rem}
  .qa-q::before{font-size:1.75rem}
  .qa-a{position:relative;padding-left:var(--s6)}
  .qa-a::before{float:none;position:absolute;left:0;top:.15em;margin:0;font-size:1.75rem}
}

/* ---------- the request form (the generator's Netlify form): a white card, fields as bare labels over a rule ---------- */
.order-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.order-call{display:none}
@media (min-width:1100px){
  .order-wrap--call{grid-template-columns:minmax(0,calc(var(--u)*96)) minmax(calc(var(--u)*34),1fr);gap:var(--s6)}
  .order-wrap--call .order-call{display:block;position:sticky;top:calc(var(--stick-space) + var(--s2))}
}
.order-card{border:var(--hair) solid var(--ink);background:var(--label);padding:var(--s3) var(--s2) var(--s3) var(--s3);max-width:calc(var(--u)*96)}
.order-head{border-bottom:var(--rule) solid var(--ink);padding-bottom:var(--s2);margin-bottom:var(--s2)}
.order-head .h2{margin-bottom:0}
.order{display:grid}
.order__field{position:relative;padding:var(--s1) 0 var(--s3)}
.order__field label{display:block;font:700 .9375rem/1.4 var(--font-display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.order input,.order select,.order textarea{display:block;width:100%;min-height:var(--target-lg);margin:0;padding:calc(var(--u)*1.5) 0 var(--s1);border:0;border-bottom:var(--hair) solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:400 1.125rem/1.4 var(--font-text);caret-color:var(--spot);-webkit-appearance:none;appearance:none}
.order textarea{min-height:calc(var(--u)*13);padding-top:var(--s1);resize:vertical;line-height:1.5}
.order select{padding-right:var(--s5);cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M6 0v17M1 12l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E") no-repeat right var(--s1) center/12px 20px}
@supports selector(:has(*)){
  .order select{background-image:none}
  /* the arrow nick, turned down the page, centred on the select's 48px box */
  .order__field:has(> select)::after{content:"";position:absolute;right:calc(var(--u)/2);bottom:calc(var(--s3) + 18px);width:20px;height:12px;background:var(--spot);-webkit-mask:var(--nick) no-repeat center/contain;mask:var(--nick) no-repeat center/contain;transform:rotate(90deg);pointer-events:none}
}
.order input:focus,.order select:focus,.order textarea:focus{outline:none;border-bottom:var(--ring) solid var(--ink);padding-bottom:calc(var(--s1) - (var(--ring) - var(--hair)))}
.order__note{margin:var(--s1) 0 0;font:400 1rem/1.45 var(--font-text)}
.order__submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--s8);margin-top:var(--s2);padding:var(--s1) var(--s2);background:var(--ink);color:var(--board);border:0;border-top:var(--rule) solid var(--spot);border-radius:0;font:900 1.25rem/1 var(--font-display);font-stretch:115%;text-transform:uppercase;letter-spacing:.06em;word-spacing:var(--ws);cursor:pointer}
.order__submit:hover{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:3px;text-underline-offset:6px}
.order__submit:focus-visible{outline:var(--ring) solid var(--spot);outline-offset:var(--ring-gap)}
@media (min-width:768px){
  .order-card{padding:var(--s4)}
  .order-head{margin-bottom:var(--s3)}
  .order__submit{font-size:1.375rem}
}

/* ---------- related links, sources, the route ---------- */
.more .chips{margin-top:0}
.more--col .chips{flex-direction:column;max-width:40rem}
.more--col .chip{display:flex;justify-content:space-between;width:100%}
.src{padding:var(--s5) 0 var(--s3);font-size:1rem}
.src-h{margin-bottom:var(--s2);font:800 1.125rem/1.1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.src-list{list-style:none;max-width:48rem;border-top:var(--hair) solid var(--ink)}
.src-list li{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);padding:calc(var(--u)/2) 0;border-bottom:var(--hair) solid var(--ink)}
.src-list a{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--target);font-weight:700;overflow-wrap:anywhere}
.src-list .go--out{color:var(--spot)}
.src-list a:hover .go--out,.src-list a:focus-visible .go--out{transform:translate(2px,-2px)}
.src-d{font-size:.9375rem}
.src-checked{margin-top:var(--s2);font-weight:700}
.route{margin-top:var(--s3);padding-top:var(--s1);border-top:var(--hair) solid var(--ink)}
.route ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2)}
.route li{display:flex;align-items:center;gap:var(--s2);min-height:var(--target);font:700 .9375rem/1.1 var(--font-display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.route li:not(:last-child)::after{content:"";flex:none;width:var(--hair);height:var(--s2);background:var(--ink);transform:skewX(-20deg)}
.route a{display:inline-flex;align-items:center;min-height:var(--target)}
.route--board{margin-top:var(--s5);padding-top:0;border-top:0}
.sheet-rest > .route{margin-top:var(--s4)}

/* ---------- closing banner: the second full strip between two spot rules (outside <main>) ---------- */
.panel--banner{padding-bottom:var(--s5)}
.banner{border-top:var(--rule) solid var(--spot);border-bottom:var(--rule) solid var(--spot);padding:var(--s5) 0}
.banner h2{max-width:22ch;font:900 clamp(1.875rem,1.2rem + 2.8vw,3.75rem)/1 var(--font-display);font-stretch:72%;text-transform:uppercase;word-spacing:var(--ws)}
.banner p{margin-top:var(--s2);max-width:60ch}
.banner .tear{margin-top:var(--s4);max-width:calc(var(--u)*84)}
@media (min-width:1100px){
  .banner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 var(--s6);align-items:end}
  .banner .tear{margin-top:0;max-width:none}
}

/* ---------- footer: the bottom flap ---------- */
.flap{position:relative;margin-top:var(--s4);padding:var(--s6) 0 var(--s5)}
.flap-edge{position:absolute;top:0;left:calc(-1*var(--reach));right:0;height:var(--hair);background:var(--ink)}
.flap-edge::before,.flap-edge::after{content:"";position:absolute;top:calc((var(--tick) - var(--hair))/-2);width:var(--hair);height:var(--tick);background:var(--ink)}
.flap-edge::before{left:var(--reach)} .flap-edge::after{right:0}
.flap-perf{position:absolute;top:var(--s3);left:calc(-1*var(--reach));right:0;border-top:var(--perf-w) dashed var(--spot);mix-blend-mode:multiply}
.flap-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.flap .wordmark{margin:0}
.flap .wordmark img{width:calc(var(--u)*18)}
.flap-call{max-width:100%;flex-wrap:wrap;padding-block:var(--s1)}
.flap-area{margin-top:var(--s3);max-width:60ch;font-weight:700}
.flap nav{margin-top:var(--s2)}
.flap nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--s1);margin-left:calc(-1*var(--s1))}
.flap nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s1);font:700 .9375rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws);text-decoration:none}
.flap nav a:hover{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:3px}
.flap nav a[aria-current="page"],.flap nav a[aria-current="true"]{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:var(--rule);text-underline-offset:6px}
.flap-copy{margin-top:var(--s2);font-size:1rem}
/* the flap's services column: hairline rows under a full rule, each with a spot arrow mark */
.flap-svc{margin-top:var(--s3)}
.flap-h{margin-bottom:var(--s1);font:800 .9375rem/1 var(--font-display);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase}
.flap .flap-svc ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 var(--s3);margin-left:0;border-top:var(--rule) solid var(--ink)}
.flap .flap-svc li{border-bottom:var(--hair) solid var(--ink)}
.flap .flap-svc a{display:flex;justify-content:space-between;gap:var(--s2);width:100%;padding:0;line-height:1.15}
.flap .flap-svc .go{color:var(--spot)}
.flap .flap-svc a:hover .go{transform:translateX(3px)}
.flap-nav{margin-top:var(--s2)}

/* ---------- key takeaways: a stuck-on summary label, ruled under a full rule, a spot arrow mark per line ---------- */
.panel--sum{padding-block:var(--s4)}
.sum{max-width:calc(var(--u)*92);background:var(--label);border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--ink);padding:var(--s2) var(--s3) var(--s2)}
.sum .sum-h{max-width:none;margin-bottom:var(--s1);font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem)}
.sum .takeaways{list-style:none;margin:0;padding:0}
.sum .takeaways li{position:relative;max-width:64ch;padding:var(--s1) 0 var(--s1) var(--s4);line-height:1.45}
.sum .takeaways li + li{border-top:var(--hair) solid var(--ink)}
.sum .takeaways li::before{content:"";position:absolute;left:0;top:calc(var(--s1) + .73em - 6px);width:20px;height:12px;background:var(--spot);-webkit-mask:var(--nick) center/contain no-repeat;mask:var(--nick) center/contain no-repeat;mix-blend-mode:multiply}
@media (min-width:901px){.panel--sum{padding-block:var(--s5)}}
@media (forced-colors:active){.sum .takeaways li::before{forced-color-adjust:none;background:CanvasText}}

/* ---------- about: one reading column ---------- */
.reading > .panel > :not(.score){max-width:calc(var(--u)*88)}
.callset--compact .ticket-prices dd{font-size:1.25rem}

/* ---------- legal pages (privacy, terms): the title with its spot foot rule, the operator mark, an index,
   numbered clauses hung from the axis, one strip at the end ---------- */
.panel--title{padding:var(--s4) 0 var(--s3)}
.panel--title .lead{margin-top:var(--s3)}
.opmark{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1);align-items:start;max-width:calc(var(--u)*76);margin-top:var(--s3);padding:var(--s2);border:var(--hair) solid var(--ink);border-top:var(--rule) solid var(--ink);background:var(--label)}
.opmark-mark{width:32px;height:32px}
.opmark p{font:600 1.0625rem/1.45 var(--font-text)}
.toc{max-width:calc(var(--u)*76);margin-bottom:var(--s4);border:var(--hair) solid var(--ink);background:var(--label)}
.toc ol{list-style:none}
.toc li + li{border-top:var(--hair) solid var(--ink)}
.toc a{display:flex;align-items:center;gap:var(--s2);min-height:var(--target-lg);padding:var(--s1) var(--s2) calc(var(--s1) - var(--rule));border-bottom:var(--rule) solid transparent;text-decoration:none;font:700 1rem/1.2 var(--font-display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
.toc a > span:not(.n){flex:1}
.toc .n{flex:none;width:var(--s2);font:800 1.125rem/1 var(--font-display);font-stretch:75%}
.toc .go{color:var(--spot);transform:rotate(90deg)}
.toc a:hover,.toc a:focus-visible{background:var(--board);border-bottom-color:var(--spot)}
.toc a:hover .go,.toc a:focus-visible .go{transform:rotate(90deg) translateX(var(--nick-travel))}
.toc a:focus-visible{outline-offset:calc(-1*(var(--ring) + var(--nudge)))}
.clause{padding:var(--s5) 0}
.clause-n{position:absolute;top:var(--s1);left:calc(-1*var(--reach));width:var(--reach);text-align:center;font:800 1rem/1 var(--font-display);font-stretch:75%}
.clause .prose{max-width:29em}
.panel--call{padding:var(--s5) 0 var(--s3)}
.callset--end{max-width:calc(var(--u)*76)}
@media (min-width:421px){.opmark{grid-template-columns:auto minmax(0,1fr);gap:var(--s2)}}
@media (min-width:768px){
  .opmark{margin-top:var(--s4);padding:var(--s2) var(--s3) var(--s2) var(--s2)}
  .opmark-mark{width:40px;height:40px}
  .opmark p{font-size:1.125rem}
}
@media (min-width:901px){
  .panel--title{padding:var(--s5) 0 var(--s4)}
  .clause{padding:var(--s6) 0}
  .clause-n{font-size:1.125rem}
}
@media (min-width:1200px){
  .doc.has-toc{display:grid;grid-template-columns:minmax(0,calc(var(--u)*76)) minmax(calc(var(--u)*36),calc(var(--u)*44));justify-content:space-between;column-gap:var(--s6)}
  .doc.has-toc > *{grid-column:1}
  .doc.has-toc > .toc{grid-column:2;grid-row:1 / span 99;align-self:start;position:sticky;top:calc(var(--stick-space) + var(--s3));margin:var(--s5) 0 0}
}

/* ---------- contact: the dispatch slip (title, window in its corner, the strip bled across it, the form on it) ---------- */
.panel--slip{padding:var(--s3) 0 var(--s5)}
.slip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head win" "intro intro" "call call" "secs secs" "fill fill" "foot foot";column-gap:var(--s2);align-items:start;max-width:calc(var(--u)*120);padding:var(--s5) var(--s2) var(--s2);border:var(--hair) solid var(--ink);background:var(--label)}
.slip.no-win{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "intro" "call" "secs" "fill" "foot"}
.slip::before{content:"";position:absolute;left:0;right:0;top:var(--s2);border-top:var(--perf-w) dashed var(--ink)}
.slip-head{grid-area:head;min-width:0}
.slip-win{grid-area:win;width:calc(var(--u)*13)}
.slip-win .window{outline-offset:calc(var(--perf-inset) - 2px)}
.slip-win .window img{aspect-ratio:4/5}
.slip-call{grid-area:call;margin:var(--s3) calc(-1*var(--s2)) 0}
.slip-call .ticket{border-inline:0}
.slip-intro{grid-area:intro;margin-top:var(--s3)}
.slip-secs{grid-area:secs;margin-top:var(--s4)}
.slip-sec + .slip-sec{margin-top:var(--s4)}
.slip-fill{grid-area:fill;margin-top:var(--s5)}
.slip .order-card{max-width:none;padding:0;border:0;background:none}
.slip-foot{grid-area:foot;margin-top:var(--s3)}
.slip-foot .route{margin-top:0}
@media (max-width:360px){.slip-win{width:calc(var(--u)*10)}}
@media (min-width:768px){
  .slip{grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--u)*32));grid-template-areas:"head win" "intro win" "call call" "secs secs" "fill fill" "foot foot";column-gap:var(--s3);padding:var(--s5) var(--s3) var(--s2)}
  .slip.no-win{grid-template-areas:"head" "intro" "call" "secs" "fill" "foot"}
  .slip-win{width:auto}
  .slip-win .window{outline-offset:var(--perf-inset)}
  .slip-win .window img{aspect-ratio:3/2}
  .slip-call{margin:var(--s5) calc(-1*var(--s3)) 0}
}
@media (min-width:1100px){
  .panel--slip{padding-top:var(--s5)}
  .slip{grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--u)*40));column-gap:var(--s5);padding:var(--s6) var(--s5) var(--s3)}
  .slip-call{margin-inline:calc(-1*var(--s5))}
  .slip-call .ticket{padding-inline:var(--s5)}
}

/* ---------- thank-you and 404: the receipt slip (perforated head, torn sawtooth foot, the call inside) ---------- */
.panel--receipt{--hang:var(--reach);margin-top:var(--s3);padding:0 0 var(--s5)}
.panel--receipt > .score{right:auto;width:calc(min(100%,var(--u)*130) + var(--hang))}
.receipt{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "call" "win";gap:var(--s3);max-width:calc(var(--u)*130);padding:var(--s5) var(--s3) var(--s3);background:var(--label);border:var(--hair) solid var(--ink);border-bottom:0}
.receipt::before{content:"";position:absolute;left:0;right:0;top:var(--s2);border-top:var(--perf-w) dashed var(--ink)}
/* the torn foot: a sawtooth, white above the cut and the ink hairline on it (the data-URI colours are --label and --ink) */
.receipt::after{content:"";position:absolute;top:100%;left:calc(-1*var(--hair));right:calc(-1*var(--hair));height:calc(var(--s1) + var(--hair));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17' preserveAspectRatio='none'%3E%3Cpath d='M0 0H24L12 16Z' fill='%23fff'/%3E%3Cpath d='M0 .5L12 16.5L24 .5' fill='none' stroke='%23141414' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/var(--s2) 100%;background-repeat:round no-repeat}
.receipt-copy{grid-area:copy;min-width:0}
.receipt-head{display:flex;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:var(--rule) solid var(--ink)}
.receipt-mark{flex:none;width:var(--s6);height:var(--s6);color:var(--ink)}
.receipt-head h1{padding-top:calc(var(--u)/2)}
.receipt-lead,.receipt-secs{max-width:52ch}
.receipt-secs{margin-top:var(--s2)}
.receipt-secs > * + *{margin-top:var(--s2)}
.receipt-secs > .prose + .h2--slip{margin-top:var(--s3)}
.h2--slip{margin-bottom:var(--s1);font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.receipt-win{grid-area:win}
.receipt-win .window{margin:var(--s1)}
.receipt-call{grid-area:call}
.ways{margin-top:var(--s4)}
.ways-h{margin-bottom:var(--s2);font:800 1.125rem/1.1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.04em;word-spacing:var(--ws)}
@media (min-width:901px){
  .panel--receipt{margin-top:var(--s5)}
  .receipt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy win" "call call";column-gap:var(--s5);padding:var(--s6) var(--s5) var(--s5)}
  .receipt.no-win{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "call"}
  .receipt::after{height:calc(var(--s2) + var(--hair));background-size:var(--s3) 100%}
  .receipt-head{gap:var(--s3);margin-bottom:var(--s3);padding-bottom:var(--s3)}
  .receipt-mark{width:var(--s8);height:var(--s8)}
}

/* ---------- cost page: the price notes, numbered, a spot rule under each numeral's foot ---------- */
.notes{list-style:none;border-top:var(--rule) solid var(--ink)}
.notes > li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s2);padding:var(--s4) 0;border-bottom:var(--hair) solid var(--ink)}
.notes > li:last-child{border-bottom:0}
/* phones: the numeral sits beside its heading only; the note runs full width beneath (the source's phone rule) */
.notes > li > div{display:contents}
.note-n{position:relative;z-index:0;align-self:start;justify-self:start;min-width:1.2em;font:900 2.25rem/.8 var(--font-display);font-stretch:125%;letter-spacing:-.03em;mix-blend-mode:multiply}
.note-n::before{content:"";position:absolute;z-index:-1;left:0;right:calc(-1*var(--rule));bottom:calc(.065em - var(--s1)/2);height:var(--s1);background:var(--spot);mix-blend-mode:multiply}
.notes .h2{align-self:center;margin-bottom:0}
.notes li > div > .prose{grid-column:1 / -1;margin-top:var(--s2)}
@media (min-width:768px){
  .notes > li{grid-template-columns:var(--s10) minmax(0,1fr);gap:0 var(--s3);padding:var(--s5) 0}
  .notes > li > div{display:block;min-width:0}
  .notes .h2{margin-bottom:var(--s2)}
  .notes li > div > .prose{margin-top:0}
  .note-n{font-size:3rem}
}

/* ---------- motion: panels below the first screen unfold along their scores ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .js .panel.fold{transform:perspective(1200px) rotateX(-9deg)}
  .js .panel.unfold{transition:transform var(--t-unfold) var(--ease)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- print: marks as borders, the call as ink on board ---------- */
@media print{
  .callbar,.skip,.menu,.order-call{display:none!important}
  .top,.top.is-stuck{position:static!important}
  .menu-ready .nav{display:block!important}
  .panel{transform:none!important}
  .side{position:static!important}
  .tear-link{background:none!important;color:#141414!important;border:var(--rule) solid #141414!important;box-shadow:none!important;transform:none!important}
  .tear-link::before,.tear-link::after{display:none}
  .tear-num .ph{color:var(--spot)}
  .order__submit{background:none!important;color:var(--ink)!important;border:var(--hair) solid var(--ink)!important;border-top:var(--rule) solid var(--spot)!important}
  .board::before{background:none;border-left:var(--hair) solid var(--ink)}
  .board::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .score,.flap-edge,.exits::before,.exits li + li::after{background:none;height:0;border-top:var(--hair) solid var(--ink)}
  .score::before,.score::after,.flap-edge::before,.flap-edge::after{background:none;width:0;border-left:var(--hair) solid var(--ink)}
  .exits li::before{background:none;height:0;border-top:3px solid var(--spot)}
  .exits::after{background:none;height:0;border-top:var(--s1) solid var(--spot)}
  .receipt::after{display:none}
  .receipt{border-bottom:var(--hair) solid var(--ink)}
  .rates tbody tr > *{background:none!important;border-bottom-color:transparent!important}
}

/* ---------- forced colours: system colours carry the states and the marks ---------- */
@media (forced-colors:active){
  *,*::before,*::after{mix-blend-mode:normal!important}
  .board::before,.score,.score::before,.score::after,.flap-edge,.flap-edge::before,.flap-edge::after,.top.is-stuck::after,.exits::before,.exits::after,.exits li::before,.exits li + li::after,.stamp::before,.from b::before,.note-n::before,.name--doc::after,.prose ul:not([class]) > li::before,.prose ul:not([class]) > li::after{forced-color-adjust:none;background:CanvasText}
  .board::after{forced-color-adjust:none;background:repeating-linear-gradient(to bottom,CanvasText 0 var(--hair),transparent var(--hair) var(--tick-step))}
  .stamp::before,.from b::before,.note-n::before{bottom:-.2em;height:var(--nudge)}  /* without the overprint the foot rule moves clear of the figure */
  .flap-perf{forced-color-adjust:none;border-top-color:CanvasText}
  .nav a,.strip-cell,.toc a,.rows li,.rates tbody th,.rates tbody td{border-bottom-color:Canvas}
  .nav a:hover,a.strip-cell:hover,a.strip-cell:focus-visible,.toc a:hover,.toc a:focus-visible,.rows li.solo:hover{border-bottom-color:CanvasText}
  .nav a[aria-current="page"],.nav a[aria-current="true"]{border-bottom-color:Highlight}
  .tear-link{border:var(--hair) solid LinkText}
  .tear-link::before,.tear-link::after,.rows li + li::before{display:none}
  .order__submit{border:var(--hair) solid ButtonText}
  .receipt::after{display:none}
  .receipt{border-bottom:var(--hair) solid CanvasText}
  .order__field:has(> select)::after{forced-color-adjust:none;background:CanvasText}
}

/* Sources fold (2026-11-08): closed by default, opens on tap */
.src-fold>summary{display:list-item;list-style:disclosure-closed inside;cursor:pointer;font-weight:700}
.src-fold[open]>summary{list-style-type:disclosure-open;margin-bottom:.5em}
.src-fold>summary::-webkit-details-marker{display:revert}

/* Logo fix (2026-11-08): a percentage max-width let the logo collapse to 0px in the auto grid column on wide screens */
.wordmark{width:max-content}
.wordmark img{max-width:none}