/* The whole "one alphabet sized by width" system rides on Archivo's wdth
   axis. If fonts.googleapis.com is blocked the axis goes inert and every
   font-stretch value below does nothing, so the local stack is metric-matched
   to Archivo first: size-adjust and the vertical overrides are measured from
   Archivo 400 wdth-100 against Arial (avg advance over a mixed-case sample,
   hhea ascent/descent over unitsPerEm). Line breaks and rhythm survive the
   substitution; only the width contrast is lost, and it is a refinement here,
   never the thing that carries a hierarchy. */
@font-face{
  font-family:'Archivo Metric Fallback';
  src:local('Helvetica Neue'),local('Helvetica'),local('Arial');
  size-adjust:101.05%; ascent-override:86.89%; descent-override:20.78%;
  line-gap-override:0%;
}
:root{
  --sheet:#0B1E33; --deep:#071626; --well:#0E2740;
  --ink:#E9F1F8; --ink-2:#A8C4DE; --ink-3:#7FA0C0;
  --cyan:#57C4E8; --blue:#2E6CBD; --signal:#FF8358;
  --grid:rgba(87,196,232,.055); --grid-2:rgba(87,196,232,.10);
  --rule:rgba(120,180,225,.26);
  /* --rule-2 is the only boundary a ghost or small control has, so it is held
     at 3:1 on --sheet, not at the hairline weight of --rule. */
  --rule-2:rgba(120,180,225,.55);
  --v-sheet:#F2F6F9; --v-ink:#0B1E33; --v-ink-2:#3C5A78;
  --v-grid:rgba(46,108,189,.07); --v-grid-2:rgba(46,108,189,.13);
  --v-rule:rgba(46,108,189,.30); --v-signal:#C23A15;
  /* the boundary of a control on vellum: 3.24:1 on its own white fill and
     3.10:1 on the panel behind it. --v-rule is a hairline rule, not a control
     edge, and at 1.5:1 it cannot be the only thing identifying a field. */
  --v-ctl:#7691B4;
  --u:8px; --gut:clamp(20px,4.4vw,64px); --max:1360px;
  --half:calc(var(--max)/2);
  /* the left edge of the text column, measured the way .wrap measures it, so
     anything drawn in the margin can be anchored to the column instead of to
     the viewport. Percentages resolve per element, which is what we want. */
  --edge:calc(50% - min(50%,var(--half)) + var(--gut));
  --sans:'Archivo','Archivo Metric Fallback','Helvetica Neue',Helvetica,
    Arial,sans-serif;
  --mono:'Azeret Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
body{
  font-family:var(--sans); font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.6; color:var(--ink); background-color:var(--sheet);
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-2) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,120px 120px,120px 120px;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.06;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
::selection{background:var(--cyan);color:var(--deep)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--cyan);
  color:var(--deep);padding:10px 16px;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:1px}
.sheet--vellum :focus-visible{outline-color:var(--blue)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------- masthead --- */
.mast{position:sticky;top:0;z-index:40;background:rgba(7,22,38,.90);
  border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(6px)){
  .mast{background:rgba(7,22,38,.72);backdrop-filter:blur(10px) saturate(140%)}
}
.mast__in{max-width:var(--max);margin:0 auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:calc(var(--u)*2)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
/* The supplied raster carries the wordmark burned into it under the diamond.
   At 26px that band is a ~5px smear, so the mark is cropped to the diamond and
   the name is set in type beside it — at every width, including the phone. */
.mark__m{display:block;position:relative;width:29px;height:29px;
  overflow:hidden;flex:0 0 auto}
.mark__m img{position:absolute;left:-5px;top:-1px;width:40px;height:45px;
  max-width:none}
.mark__t{font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-stretch:78%;white-space:nowrap}
.nav{margin-left:auto;min-width:0}
.nav ul{display:flex;gap:calc(var(--u)*2.5)}
.nav a{font-size:.78rem;text-decoration:none;color:var(--ink-2);
  letter-spacing:.055em;padding:6px 0;position:relative;transition:color .18s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:13px;height:13px;flex:0 0 auto;color:var(--cyan);margin-top:.3em}
.sheet--vellum .ico{color:var(--blue)}
/* Under 900 the nav becomes the drawing index it already is: a strip you
   run along, never a hamburger that hides the sheet set. A strip with its
   scrollbar hidden and no other edge has to say so itself, or the last item
   simply is not there: the mask is the affordance. */
@media (max-width:900px){
  .nav{overflow-x:auto;scrollbar-width:none;padding-right:18px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav ul{gap:calc(var(--u)*2.25)}
  .nav a{white-space:nowrap;font-size:.75rem}
  /* the wordmark is this link; carrying it twice cost the strip its last item */
  .nav__dup{display:none}
}
@media (max-width:760px){.mast__in .btn--small{display:none}}
@media (max-width:560px){
  .mark__t{font-size:.62rem;letter-spacing:.09em;white-space:normal;
    line-height:1.14;max-width:8ch}
}

/* ------------------------------------------------------------- controls --- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:700;font-size:.86rem;letter-spacing:.045em;
  padding:14px 22px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),
  border-color .2s var(--ease),box-shadow .2s var(--ease);border-radius:0}
/* No resting shadow: this world has no drop shadows, so a zero-blur offset at
   rest was a costume. The lift belongs to the hover, where it means something. */
.btn--primary{background:var(--cyan);color:var(--deep)}
.btn--primary:hover{background:#7BD5F2;box-shadow:0 4px 14px -4px rgba(87,196,232,.55)}
.btn--primary:active{transform:translateY(1px);box-shadow:none}
.btn--ghost{border-color:var(--rule-2);color:var(--ink);font-family:var(--mono);
  font-size:.8rem;letter-spacing:.02em;font-weight:400}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn--small{padding:9px 14px;font-size:.74rem;border-color:var(--rule-2);
  color:var(--ink);flex:0 0 auto}
.btn--small:hover{border-color:var(--cyan);color:var(--cyan)}
.sheet--vellum .btn--primary{background:var(--blue);color:#fff}
.sheet--vellum .btn--primary:hover{background:#2559A0;
  box-shadow:0 4px 14px -4px rgba(46,108,189,.5)}

/* ----------------------------------------------------------------- rail --- */
/* The sheet index: numbers only, so it can never collide with the sheet it
   indexes. Each link carries its title as its accessible name.
   It is an index in the sheet's left margin, so it is set out from the text
   column, not from the viewport edge: pinned at left:15px it was an opaque
   plate sitting on the first pixels of every H2 and strip number on the whole
   1280/1366 laptop class, where the column starts at ~55-60px. translate
   (-100%) hangs its right edge 24px clear of the column, so the clearance is
   the same at 1400 as it is at 1920, and the gate is the width at which that
   clearance first exists. */
.rail{position:fixed;left:calc(var(--edge) - 24px);top:50%;
  transform:translate(-100%,-50%);z-index:30;display:none}
@media (min-width:1400px){.rail{display:block}}
/* an opaque plate, so the index stays legible over the vellum sheets too */
.rail ol{display:flex;flex-direction:column;gap:1px;background:var(--deep);
  border:1px solid var(--rule);padding:6px 4px}
.rail a{display:flex;align-items:center;gap:6px;text-decoration:none;
  padding:5px 3px;color:var(--ink-3);transition:color .2s}
.rail__n{font-family:var(--mono);font-size:.64rem;font-variant-numeric:tabular-nums}
.rail__m{display:block;width:14px;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .32s var(--ease)}
.rail a:hover,.rail a:focus-visible{color:var(--cyan)}
.rail a:hover .rail__m,.rail a:focus-visible .rail__m{transform:scaleX(.6)}
.rail a[aria-current="true"]{color:var(--ink)}
.rail a[aria-current="true"] .rail__n{color:var(--cyan)}
.rail a[aria-current="true"] .rail__m{transform:scaleX(1)}

/* ---------------------------------------------------------------- sheet --- */
.sheet{position:relative;padding:calc(var(--u)*11) 0 calc(var(--u)*12);
  border-top:1px solid var(--rule)}
.sheet:first-child{border-top:0}
.sheet--vellum{background-color:var(--v-sheet);color:var(--v-ink);
  background-image:
    linear-gradient(to right,var(--v-grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--v-grid) 1px,transparent 1px),
    linear-gradient(to right,var(--v-grid-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--v-grid-2) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,120px 120px,120px 120px;
  border-top-color:var(--v-rule)}

/* The notebook margin rule: two hairlines, the outer one flagged. .sheet is
   full-bleed but .wrap caps at --max and centres, so measuring these from the
   viewport left them 294px from the copy at 1920 — the direction's most
   load-bearing device, aligned to nothing. They are set out from the column. */
.sheet::before,.sheet::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;pointer-events:none}
.sheet::before{left:calc(var(--edge) - 14px);background:rgba(255,131,88,.30)}
.sheet::after{left:calc(var(--edge) - 10px);background:rgba(255,131,88,.13)}
.sheet--vellum::before{background:rgba(194,58,21,.34)}
.sheet--vellum::after{background:rgba(194,58,21,.14)}
@media (max-width:640px){.sheet::before,.sheet::after{display:none}}

/* ------------------------------------------------------ sheet head strip --- */
/* The underline is an element, not a border: it is the only thing on this
   strip that motion is ever allowed to touch. */
.strip{position:relative;display:flex;align-items:baseline;gap:14px;
  padding-bottom:9px;margin-bottom:calc(var(--u)*6)}
.strip__rule{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);transform-origin:left center}
.sheet--vellum .strip__rule{background:var(--v-rule)}
.strip__n{font-family:var(--mono);font-size:.78rem;font-weight:600;
  color:var(--cyan);font-variant-numeric:tabular-nums;flex:0 0 auto}
.sheet--vellum .strip__n{color:var(--blue)}
.strip__t{font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  font-stretch:76%;font-weight:600;color:var(--ink-2)}
.sheet--vellum .strip__t{color:var(--v-ink-2)}
.strip__r{margin-left:auto;font-family:var(--mono);font-size:.68rem;
  color:var(--ink-3);text-align:right}
.sheet--vellum .strip__r{color:var(--v-ink-2)}
@media (max-width:640px){.strip__r{display:none}}

/* ---------------------------------------------------------------- cover --- */
/* A ruled trace behind a line of text reads as a strike-through, and full
   bleed it struck three of the page's strongest lines: the hero pills, the
   third line of the lead, and a cyan terminal tick landing on the R of the
   regions note. The ruling therefore gets a band of its own, above the sheet
   strip, at every width — the cover's top padding is what reserves it, and
   the two are checked against each other by the gate. */
.sheet--cover{padding-top:calc(var(--u)*13);padding-bottom:calc(var(--u)*11);
  overflow:hidden}
.cover__band{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*11);
  pointer-events:none;opacity:.85}
.cover__rule,.found{position:absolute;left:0;top:0;width:100%;height:100%}
/* the drawing as the builder set it out: shown until the canvas proves it can
   paint the same drawing, which is the only thing that hides it */
.found *{vector-effect:non-scaling-stroke;fill:none}
.found__raw{stroke:rgba(255,131,88,.24);stroke-width:1.2}
.found__ruled{stroke:rgba(87,196,232,.52);stroke-width:1}
.found__tick{stroke:rgba(87,196,232,.8);stroke-width:1}
.cover__grid{position:relative;display:grid;gap:calc(var(--u)*6);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .cover__grid{grid-template-columns:minmax(0,1fr) 300px;
    gap:calc(var(--u)*8);align-items:end}
}
.display{font-size:clamp(2.55rem,7.6vw,6rem);font-stretch:112%;
  letter-spacing:-.032em;font-weight:700;margin:calc(var(--u)*2) 0 0}
.display span{display:block}
.display span:last-child{color:var(--cyan)}
.lead{max-width:66ch;margin-top:calc(var(--u)*3.5);font-size:1.06rem;
  color:var(--ink-2);line-height:1.65}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(var(--u)*4.5)}
.notes{margin-top:calc(var(--u)*6);border-top:1px solid var(--rule);
  padding-top:calc(var(--u)*2);max-width:62ch}
.notes__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sheet--vellum .notes__k{color:var(--v-ink-2)}
.notes__l li{display:flex;gap:12px;padding:7px 0;font-size:.92rem;
  color:var(--ink-2);border-bottom:1px solid rgba(120,180,225,.10)}
.notes__l li:last-child{border-bottom:0}
.sheet--vellum .notes__l li{color:var(--v-ink-2);
  border-bottom-color:rgba(46,108,189,.14)}
.cover__side{position:relative}

/* ---------------------------------------------------------- title block --- */
.titleblock{border:1px solid var(--rule);background:rgba(14,39,64,.55)}
.sheet--vellum .titleblock{border-color:var(--v-rule);background:rgba(255,255,255,.6)}
.field{display:grid;grid-template-columns:88px minmax(0,1fr);
  border-bottom:1px solid var(--rule)}
.titleblock--foot .field,.sheet--vellum .field{border-bottom-color:var(--v-rule)}
.field:last-child{border-bottom:0}
.field__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:11px 10px;
  border-right:1px solid var(--rule);align-self:stretch}
.sheet--vellum .field__k,.titleblock--foot .field__k{border-right-color:var(--v-rule)}
.field__v{padding:11px 12px;font-size:.86rem;color:var(--ink);min-width:0;
  overflow-wrap:anywhere}
.field__v a{color:var(--cyan);text-decoration:none;
  border-bottom:1px solid rgba(87,196,232,.4)}
.field__v a:hover{border-bottom-color:var(--cyan)}
.field--tall .field__v{line-height:1.9}

/* ------------------------------------------------------- generic blocks --- */
.intro{max-width:74ch;margin-bottom:calc(var(--u)*7)}
.head{font-size:clamp(1.6rem,3.1vw,2.55rem);font-stretch:106%;
  letter-spacing:-.022em;max-width:22ch}
.sub{font-size:1.02rem;font-stretch:104%;letter-spacing:-.005em;
  margin-bottom:calc(var(--u)*2)}
.sub--s{font-size:.92rem}
.body{margin-top:calc(var(--u)*2.5);max-width:70ch;color:var(--ink-2);
  line-height:1.7}
.body--s{font-size:.92rem}
.sheet--vellum .body{color:var(--v-ink-2)}

/* --------------------------------------------------------------- ledger --- */
/* A ruled ledger, not a card grid: the column rule does the work the gap
   would otherwise leave as a hole. */
.ledger{border-top:1px solid var(--rule)}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:calc(var(--u)*3) 0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){
  .ledger__row{grid-template-columns:minmax(0,284px) minmax(0,1fr);gap:0}
  .ledger__k{padding-right:calc(var(--u)*4)}
  .ledger__v{padding-left:calc(var(--u)*4);border-left:1px solid var(--rule)}
}
.ledger__k{font-size:1.08rem;font-stretch:104%;letter-spacing:-.012em}
.ledger__v{color:var(--ink-2);line-height:1.7;max-width:66ch}

/* ------------------------------------------------------------- services --- */
/* Three service lines, five sheets. The group rule is the heavy one and the
   name is printed on it once; the sheets under it are ruled lighter, because
   they are the same line seen from another angle, not five separate offers. */
.svcs{border-top:1px solid var(--rule)}
.line{border-bottom:1px solid var(--rule)}
.line:last-child{border-bottom:0}
.line__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:calc(var(--u)*4) 0 calc(var(--u)*1.5)}
.line__t{font-size:clamp(1.18rem,2.1vw,1.62rem);font-stretch:104%;
  letter-spacing:-.018em;max-width:34ch}
.line__s{margin-left:auto;font-family:var(--mono);font-size:.68rem;
  color:var(--ink-3);white-space:nowrap}
.svc{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*2);
  padding:calc(var(--u)*3.5) 0;
  border-top:1px solid rgba(120,180,225,.14)}
@media (min-width:820px){
  .svc{grid-template-columns:76px minmax(0,1fr);gap:0 calc(var(--u)*4)}
  .svc__body{grid-column:2}
  .svc__p{grid-column:2;margin-top:calc(var(--u)*3)}
}
/* Wide enough for the drawing's own arrangement: number, description,
   and the three defined actions as the sheet's right-hand notes column. */
@media (min-width:1160px){
  .svc{grid-template-columns:76px minmax(0,1fr) minmax(0,1fr);
    gap:0 calc(var(--u)*5)}
  .svc__p{grid-column:3;grid-row:1;margin-top:0;border-top:0;
    border-left:1px solid var(--rule);padding-left:calc(var(--u)*5)}
}
.svc__no{display:flex;align-items:center;gap:12px}
.svc__no span{font-family:var(--mono);font-size:.8rem;font-weight:600;
  color:var(--cyan);font-variant-numeric:tabular-nums}
.svc__no i{flex:1 1 auto;height:1px;background:var(--rule)}
@media (min-width:820px){
  .svc__no{flex-direction:column;align-items:flex-start;gap:10px}
  .svc__no i{flex:0 0 auto;width:44px;height:1px}
}
/* the angle is this sheet's own display line; the service name is the group's */
.svc__t{font-size:clamp(1.02rem,1.5vw,1.2rem);font-stretch:104%;
  letter-spacing:-.012em;max-width:32ch;color:var(--ink)}
.svc__p{margin-top:calc(var(--u)*3);border-top:1px solid rgba(120,180,225,.14);
  max-width:76ch}
.svc__p li{display:grid;grid-template-columns:34px minmax(0,1fr);
  gap:10px;padding:11px 0;border-bottom:1px solid rgba(120,180,225,.10);
  font-size:.93rem;color:var(--ink-2);align-items:start}
.svc__p li:last-child{border-bottom:0}
.leader{display:block;height:1px;background:var(--rule-2);margin-top:.72em}

/* ---------------------------------------------------------------- scope --- */
.scope{display:grid;gap:calc(var(--u)*6);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .scope{grid-template-columns:minmax(0,1fr) 340px;gap:calc(var(--u)*8)}
}
.scale{margin-top:calc(var(--u)*5);max-width:640px}
.dim{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;
  padding:calc(var(--u)*2.5) 0;border-bottom:1px solid var(--rule)}
.dim__line{position:relative;display:block;width:100%;height:14px}
.dim__ext{position:absolute;left:0;right:0;top:6px;height:1px;
  background:rgba(120,180,225,.20)}
.dim__seg{position:absolute;top:0;bottom:0;left:var(--a);
  width:calc(var(--b) - var(--a));transform-origin:left center;
  border-left:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.dim__seg::before{content:"";position:absolute;left:0;right:0;top:6px;
  height:1px;background:var(--cyan)}
.dim__ar{position:absolute;top:3.5px;width:8px;height:7px;background:var(--cyan)}
.dim__ar--l{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.dim__ar--r{right:0;clip-path:polygon(100% 50%,0 0,0 100%)}
/* the tolerance tail: where a published range runs on to its far limit. It is
   dashed because that end is a range, not a date. */
.dim__tol{position:absolute;top:0;bottom:0;left:var(--b);
  width:calc(var(--t) - var(--b));
  border-right:1px dashed rgba(87,196,232,.75)}
.dim__tol::before{content:"";position:absolute;left:0;right:1px;top:6px;
  height:1px;background:repeating-linear-gradient(to right,
    var(--cyan) 0 4px,transparent 4px 9px)}
/* Dimension text is small on a drawing. It is a measurement, not a boast. */
.dim__v{font-family:var(--mono);font-size:clamp(1.02rem,1.7vw,1.28rem);
  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  margin-top:9px}
.dim__n{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-stretch:78%;color:var(--ink-3)}
.spec{border:1px solid var(--rule);padding:calc(var(--u)*2.5);
  background:rgba(14,39,64,.5)}
.spec + .spec{margin-top:calc(var(--u)*2.5)}
/* A ruled cell pair like every other title block on the page. Ranged right,
   the labels broke to single-word orphans in the one panel called
   Specification. */
.spec__row{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);
  align-items:baseline;gap:6px 14px;padding:9px 0;
  border-bottom:1px solid rgba(120,180,225,.12)}
.spec__row:last-child{border-bottom:0}
.spec__v{font-family:var(--mono);font-size:.96rem;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.spec__k{font-size:.82rem;color:var(--ink-2);text-wrap:pretty}

/* --------------------------------------------------------------- entries --- */
/* Signed entries in a register, ruled into columns. Not three cards. */
.entries{display:grid;gap:0;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.entry{margin:0;padding:calc(var(--u)*4) 0;display:flex;flex-direction:column;
  border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:0}
@media (min-width:900px){
  .entries{grid-template-columns:repeat(3,minmax(0,1fr))}
  .entry{border-bottom:0;border-left:1px solid var(--rule);
    padding:calc(var(--u)*4) calc(var(--u)*4)}
  .entry:first-child{border-left:0;padding-left:0}
  .entry:last-child{padding-right:0}
}
.entry__q{margin:0;flex:1 1 auto}
.entry__q p{font-size:.95rem;line-height:1.72;color:var(--ink-2)}
.entry__q p::before{content:"\201C";color:var(--cyan)}
.entry__q p::after{content:"\201D";color:var(--cyan)}
.entry__sig{margin-top:calc(var(--u)*3.5)}
.entry__rule{display:block;height:1px;background:var(--rule-2);
  margin-bottom:10px}
.entry__n{display:block;font-size:.95rem;font-weight:700;font-stretch:104%}
.entry__r{display:block;margin-top:4px;font-family:var(--mono);font-size:.7rem;
  line-height:1.5;color:var(--ink-3)}

/* -------------------------------------------------------------- register --- */
.faq{display:grid;gap:calc(var(--u)*5);grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){
  .faq{grid-template-columns:minmax(0,318px) minmax(0,1fr);gap:calc(var(--u)*9)}
  .faq__head{position:sticky;top:92px;align-self:start}
  .faq__head .head{max-width:14ch}
}
.register{border-top:1px solid var(--v-rule)}
.q{border-bottom:1px solid var(--v-rule)}
.q__s{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;
  gap:10px;align-items:start;padding:calc(var(--u)*2.5) 0;cursor:pointer;
  list-style:none}
.q__s::-webkit-details-marker{display:none}
.q__n{font-family:var(--mono);font-size:.76rem;color:var(--blue);
  font-variant-numeric:tabular-nums;padding-top:.22em}
.q__t{font-size:1.01rem;font-weight:600;font-stretch:103%;letter-spacing:-.01em;
  line-height:1.4;max-width:56ch}
.q__m{position:relative;width:13px;height:13px;margin-top:.35em;
  justify-self:end}
.q__m::before,.q__m::after{content:"";position:absolute;background:var(--blue);
  transition:transform .28s var(--ease),opacity .28s var(--ease)}
.q__m::before{left:0;right:0;top:6px;height:1px}
.q__m::after{top:0;bottom:0;left:6px;width:1px}
.q[open] .q__m::after{transform:scaleY(0);opacity:0}
.q__a{padding:0 0 calc(var(--u)*3) 54px}
.q__a p{max-width:66ch;color:var(--v-ink-2);line-height:1.72;font-size:.95rem}
.q:hover .q__t{color:var(--blue)}
@media (max-width:640px){
  .q__s{grid-template-columns:32px minmax(0,1fr) 18px;gap:8px}
  .q__a{padding-left:40px}
}

/* ---------------------------------------------------------------- reach --- */
.reach{display:grid;gap:calc(var(--u)*6);grid-template-columns:minmax(0,1fr)}
@media (min-width:940px){
  .reach{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--u)*8)}
}
.chan{display:grid;grid-template-columns:96px minmax(0,1fr);
  align-items:baseline;gap:10px;padding:calc(var(--u)*2) 0;
  border-top:1px solid var(--v-rule);text-decoration:none;
  transition:background .2s var(--ease)}
.chan:hover{background:rgba(46,108,189,.06)}
.chan__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--v-ink-2)}
.chan__v{font-family:var(--mono);font-size:clamp(.95rem,2.2vw,1.22rem);
  font-weight:600;color:var(--v-ink);overflow-wrap:anywhere}
.chan:hover .chan__v{color:var(--blue)}
.booking{margin-top:calc(var(--u)*4);border:1px solid var(--v-rule);
  padding:calc(var(--u)*3);background:rgba(255,255,255,.65)}
.booking__t{font-weight:700;font-stretch:104%}
.booking__b{margin-top:6px;font-size:.9rem;color:var(--v-ink-2)}
.booking .btn{margin-top:calc(var(--u)*2.5)}
.help{margin-top:calc(var(--u)*4)}
.reach__form{border:1px solid var(--v-rule);padding:calc(var(--u)*4);
  background:rgba(255,255,255,.72)}
.fld{margin-bottom:calc(var(--u)*2.5)}
.fld label{display:block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--v-ink-2);
  margin-bottom:7px}
.req{color:var(--v-signal);text-decoration:none;border:0;margin-left:2px}
/* The hairline is the only thing identifying the control, so it is a control
   boundary and not a rule: --v-rule sits at 1.5:1 on the white fill, which
   1.4.11 does not allow for the one mechanism on the page that converts. */
.fld input,.fld textarea{width:100%;font:inherit;font-size:.95rem;
  color:var(--v-ink);background:#fff;border:1px solid var(--v-ctl);
  border-radius:0;padding:11px 12px;transition:border-color .2s,box-shadow .2s}
/* and a cell is sized to what it holds, everywhere else on this page */
.fld--m input{max-width:32ch}
.fld--s input{max-width:22ch}
.fld textarea{resize:vertical;min-height:120px;line-height:1.6}
.fld input:hover,.fld textarea:hover{border-color:rgba(46,108,189,.75)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(46,108,189,.18)}
/* Error state only after the visitor has actually interacted: an empty form
   on first paint is not a form full of mistakes. */
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--v-signal);
  box-shadow:0 0 0 3px rgba(194,58,21,.12)}
.composer__note{font-size:.8rem;color:var(--v-ink-2);line-height:1.6;
  border-left:1px solid var(--v-rule);padding-left:12px;max-width:52ch}
.composer__go{margin-top:calc(var(--u)*3)}
/* empty until the composer has actually handed the message over */
.composer__status:not(:empty){margin-top:calc(var(--u)*2);font-size:.85rem;
  color:var(--v-ink);border-left:2px solid var(--blue);padding-left:12px;
  max-width:52ch}

/* --------------------------------------------------------------- footer --- */
.foot{border-top:1px solid var(--rule);padding:calc(var(--u)*8) 0 calc(var(--u)*5);
  background:var(--deep)}
.foot__in{display:grid;gap:calc(var(--u)*5);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .foot__in{grid-template-columns:minmax(0,1fr) 320px;
    gap:calc(var(--u)*8);align-items:start}
}
.foot__a{display:flex;gap:calc(var(--u)*2.5);align-items:flex-start}
.foot__a img{width:34px;height:38px;flex:0 0 auto;opacity:.9}
.foot__blurb{color:var(--ink-2);max-width:56ch;line-height:1.7;font-size:.95rem}
.foot__nav li{display:inline}
.foot__nav li::after{content:" / ";color:var(--ink-3)}
.foot__nav li:last-child::after{content:""}
.foot__nav a{color:var(--cyan);text-decoration:none}
.foot__nav a:hover{text-decoration:underline}
.foot__c{grid-column:1/-1;border-top:1px solid var(--rule);
  padding-top:calc(var(--u)*2.5);font-family:var(--mono);font-size:.68rem;
  color:var(--ink-3)}

/* ------------------------------------------------------ narrow measures --- */
@media (max-width:720px){
  /* the cover keeps its taller head, which is where its ruled band lives */
  .sheet:not(.sheet--cover){padding:calc(var(--u)*7) 0 calc(var(--u)*8)}
  .sheet--cover{padding-bottom:calc(var(--u)*8)}
  .strip{margin-bottom:calc(var(--u)*4)}
  .intro,.faq__head{margin-bottom:calc(var(--u)*5)}
  .notes{margin-top:calc(var(--u)*4.5)}
  .field{grid-template-columns:82px minmax(0,1fr)}
  .chan{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---------------------------------------------------------------- motion --- */
/* Everything is visible by default. app.js only sets a from-state after it
   has proved the ticker is really running, so a frozen tab keeps the page —
   and the only thing it is allowed to set one on is a rule, never a row of
   live text. */
.strip__rule,#scale .dim__seg{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .cover__band{opacity:.85}
}
/* Native smooth scroll is the default and stays the default whenever Lenis
   is not actually driving; the class only lands once Lenis has constructed,
   and app.js then hands every in-page anchor to lenis.scrollTo. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  html.lenis{scroll-behavior:auto}
}

/* ----------------------------------------------------------------- print --- */
/* The concept finishing itself: on paper this is a working drawing set, so it
   prints as one. Vellum ground everywhere, every hairline to black, the title
   blocks and the dimension lines kept, and the screen furniture — the index
   rail, the sticky masthead, the skip link — dropped. */
@media print{
  :root{
    --sheet:#fff; --deep:#fff; --well:#fff;
    --ink:#000; --ink-2:#1B1B1B; --ink-3:#333;
    --cyan:#000; --blue:#000; --signal:#000;
    --grid:transparent; --grid-2:transparent;
    --rule:#000; --rule-2:#000;
    --v-sheet:#fff; --v-ink:#000; --v-ink-2:#1B1B1B;
    --v-grid:transparent; --v-grid-2:transparent;
    --v-rule:#000; --v-ctl:#000; --v-signal:#000;
  }
  body{background:#fff;background-image:none;color:#000;font-size:10.5pt}
  .sheet--vellum{background-color:#fff;background-image:none}
  .rail,.skip,.mast,.cover__band{display:none}
  .sheet{padding:14pt 0 18pt;border-top:1px solid #000;
    break-inside:auto;page-break-inside:auto}
  .wrap{max-width:none;padding:0}
  .sheet::before{left:-12pt}
  .sheet::after{left:-8pt}
  a{color:#000;text-decoration:none}
  .field__v a,.foot__nav a{border-bottom:1px solid #000}
  .btn{border:1px solid #000;background:#fff;color:#000}
  .titleblock{background:none}
  .spec,.booking,.reach__form{background:none}
  .svc,.entry,.dim,.line__head,.ledger__row,.q{break-inside:avoid;
    page-break-inside:avoid}
  .head,.line__t,.display{break-after:avoid;page-break-after:avoid}
  /* the register prints as a register: every answer on the page */
  .q__a{display:block;content-visibility:visible}
}