/* ================================================================== */
/* GIANT ENTITY v4, "Void and phosphor", the shared stylesheet.        */
/* Tokens from brand\giant-entity-brand.md v2.                         */
/* Never hand edit a value here without changing the brand source.     */
/* Shared by index.html, register.html, method.html and terms.html:    */
/* one sheet, so the four pages cannot drift apart.                    */
/* ================================================================== */
@font-face{
  font-family:"Archivo Expanded";
  src:url("fonts/Archivo-Expanded-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/PublicSans-var.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fragment Mono";
  src:url("fonts/FragmentMono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --void:#0A0C0B;
  --void-2:#101413;
  --ink:#ECE7DA;
  --ink-2:#8E9189;
  --line:#242926;
  --line-2:#3A413D;
  --node:#F0E3C0;
  --wax:#D8482A;
  --wax-hi:#EC6039;
  --font-display:"Archivo Expanded", "Arial Narrow", sans-serif;
  --font-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Fragment Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--void);color:var(--ink);
  font-family:var(--font-body);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--ink)}
img,svg{max-width:100%}
.shell{width:min(100% - 2*clamp(20px,4vw,72px), 2100px);margin-inline:auto}
section{padding-block:clamp(52px,6vw,108px);border-top:1px solid var(--line);position:relative}
h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,1.9vw,34px);line-height:1.18;letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:clamp(.9em,2vw,1.2em);padding-bottom:.45em;border-bottom:1px solid var(--line-2)}
h2 .sn{color:var(--wax-hi);margin-right:.45em}
h3{font-size:clamp(17px,1.2vw,20px);font-weight:600;margin-bottom:.35em}
p{max-width:66ch}
.mono{font-family:var(--font-mono);font-size:13px;color:var(--ink-2)}
.field{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--void);padding:10px 16px;z-index:120}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--node);outline-offset:3px}

/* ------------------------------------------------------------------ */
/* Page transitions: the masthead and the rail hold still while the    */
/* rest of the document changes. Pure CSS; a browser without the API   */
/* performs a normal navigation, and reduced motion turns it off.      */
/* ------------------------------------------------------------------ */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
.mast{view-transition-name:masthead}
.rail{view-transition-name:rail}

/* ------------------------------------------------------------------ */
/* The field: the assembly lives here, behind everything               */
/* ------------------------------------------------------------------ */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.page{position:relative;z-index:2}

/* ------------------------------------------------------------------ */
/* Pointer: the visitor is a node too                                  */
/* ------------------------------------------------------------------ */
.pointer{position:fixed;left:0;top:0;z-index:110;pointer-events:none;opacity:0;
  transition:opacity .3s ease}
body.pointer-on .pointer{opacity:1}
body.pointer-on,body.pointer-on a,body.pointer-on button,body.pointer-on summary,
body.pointer-on input,body.pointer-on textarea,body.pointer-on label{cursor:none}
.pointer .ring{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--node);border-radius:50%;opacity:.55;
  transition:width .18s ease, height .18s ease, margin .18s ease, opacity .18s ease, border-color .18s ease}
.pointer .dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--node);
  transition:width .18s ease, height .18s ease, margin .18s ease, background .18s ease}
.pointer .tag{position:absolute;left:0;top:0;transform:translate(26px,10px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--node);white-space:nowrap;opacity:0;transition:opacity .18s ease}
body.pt-link .pointer .ring{width:52px;height:52px;margin:-26px 0 0 -26px;opacity:.95}
body.pt-link .pointer .tag{opacity:.85}
body.pt-seal .pointer .ring{width:66px;height:66px;margin:-33px 0 0 -33px;opacity:1;border-color:var(--wax-hi)}
body.pt-seal .pointer .dot{background:var(--wax-hi)}
body.pt-seal .pointer .tag{opacity:.85;color:var(--wax-hi)}
body.pt-text .pointer .ring{width:2px;height:26px;margin:-13px 0 0 -1px;border-radius:0;
  border-width:0 0 0 1px;opacity:.8}
body.pt-text .pointer .dot{width:0;height:0;margin:0}
body.pt-down .pointer .ring{width:22px;height:22px;margin:-11px 0 0 -11px}

/* ------------------------------------------------------------------ */
/* Masthead: lockup, nav, nameplate, rule                              */
/* ------------------------------------------------------------------ */
.mast{padding-top:clamp(14px,1.6vw,26px)}
.mast-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-block:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.lockup .mono{color:var(--ink)}
.glyph{width:29px;height:29px;flex:none;display:block}
.g-hood{stroke:var(--node);stroke-width:1.1;fill:none;opacity:.42;stroke-linecap:round}
.g-edge{stroke:var(--node);stroke-width:1.3;opacity:.95;fill:none;stroke-linecap:round}
.g-node{fill:var(--node);opacity:1}
.g-eye{fill:var(--node);opacity:1}
.mast-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.mast-nav a{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:2px 0;white-space:nowrap;
  transition:color .2s ease}
.mast-nav a:hover{color:var(--node)}
.mast-nav a[aria-current="page"]{color:var(--wax-hi)}
.mast-top .open-note{white-space:nowrap}
.mast-top .open-note b{color:var(--wax-hi);font-weight:400}
.nameplate{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  text-align:center;letter-spacing:.05em;line-height:1;
  font-size:clamp(44px,7.2vw,150px);padding-block:clamp(18px,2.2vw,40px)}
.nameplate span{display:inline-block}
@media (max-width:900px){
  .mast-top{display:grid;justify-content:stretch;gap:8px;text-align:left}
  .mast-nav{flex-wrap:wrap;gap:14px}
}
@media (max-width:640px){
  .nameplate{font-size:18.5vw;line-height:.95;letter-spacing:.03em;padding-block:14px}
  .nameplate .np-a,.nameplate .np-b{display:block}
}
.mast-rule{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);height:5px}
/* depth pages: the nameplate steps down and the page states its purpose */
body.sub .nameplate{font-size:clamp(34px,4.2vw,84px);padding-block:clamp(12px,1.4vw,24px)}
.page-lede{padding-block:clamp(18px,2vw,30px)}
.page-lede p{font-size:clamp(16.5px,1.15vw,19.5px);color:var(--ink-2);max-width:70ch}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
header.hero{position:relative;padding-block:clamp(26px,3vw,54px) clamp(20px,2.2vw,40px)}
.hero-rules{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(12,1fr)}
.hero-rules i{border-left:1px solid var(--line);opacity:.5}
.hero-rules i:first-child{border-left:none}
.hero-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.hero-grid h1{grid-column:1 / 9;padding-right:clamp(20px,2.4vw,48px)}
.hero-grid .aside{grid-column:9 / 13;padding-left:clamp(18px,2vw,36px)}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.2vw,60px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
.hero .aside{display:grid;gap:clamp(16px,1.6vw,24px);justify-items:start;
  border-left:1px solid var(--line-2)}
.hero .sub{font-size:clamp(16.5px,1.15vw,19.5px);color:var(--ink-2);max-width:48ch}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
  .hero-grid h1,.hero-grid .aside{grid-column:auto;padding-right:0}
  .hero .aside{border-left:none;padding-left:0}
}
@media (max-width:640px){.hero-rules{display:none}}
.cta{display:inline-block;width:fit-content;background:var(--wax-hi);color:var(--void);
  padding:14px 24px;border:1px solid var(--wax-hi);text-decoration:none;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  transition:transform .15s ease, background .15s ease, box-shadow .25s ease}
.cta:hover{background:var(--node);border-color:var(--node);box-shadow:0 0 26px rgba(240,227,192,.22)}
.cta:active{transform:translateY(1px)}
.cta{position:relative}
.cta::before,.cta::after{content:"";position:absolute;width:7px;height:7px;pointer-events:none;
  border:1px solid var(--void);opacity:.55}
.cta::before{left:4px;top:4px;border-width:1px 0 0 1px}
.cta::after{right:4px;bottom:4px;border-width:0 1px 1px 0}

/* ------------------------------------------------------------------ */
/* Record grammar: shared by the workspace records, the method records */
/* and the registrar                                                   */
/* ------------------------------------------------------------------ */
.records{display:grid;border-top:1px solid var(--line)}
.record{display:grid;grid-template-columns:170px 1fr;gap:14px;padding-block:clamp(14px,1.5vw,22px);
  border-bottom:1px solid var(--line);position:relative;transition:opacity .3s ease}
.record .field{padding-top:3px;transition:color .25s ease}
.record p{font-size:15.5px;color:var(--ink-2);transition:color .25s ease}
.record::before{content:"";position:absolute;left:-14px;top:0;bottom:-1px;width:2px;background:var(--wax-hi);
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease}
body.js .record.on::before{transform:scaleY(1)}
body.js .record.on .field{color:var(--wax-hi)}
body.js .record.on p{color:var(--ink)}
@media (max-width:640px){.record{grid-template-columns:1fr;gap:4px}.record::before{left:-8px}}
.records.wide .record{grid-template-columns:220px 1fr}
@media (max-width:640px){.records.wide .record{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ */
/* The workspace section: the reset and the record                     */
/* ------------------------------------------------------------------ */
.workspace-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,72px);align-items:stretch}
.workspace-grid > div:last-child{display:flex;flex-direction:column}
@media (max-width:1080px){.workspace-grid{grid-template-columns:1fr}}
.workspace-lede{margin-bottom:clamp(20px,2.2vw,34px)}
/* the panel fills its column the way the anatomy stage does, so the
   section's right side is composed rather than left over */
.contrast{border:1px solid var(--line);background:#0D100F;padding:clamp(12px,1.3vw,20px);
  flex:1;display:flex;flex-direction:column}
.contrast .c-stage{position:relative;flex:1;min-height:clamp(320px,26vw,560px);background:#080A09}
@media (max-width:1080px){.contrast .c-stage{flex:none;min-height:0;aspect-ratio:16/9}}
@media (max-width:640px){.contrast .c-stage{aspect-ratio:1/1}}
.contrast canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-caps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,28px);margin-top:12px}
.c-caps .cap{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);line-height:1.55}
.c-caps .cap b{color:var(--node);font-weight:400}
@media (max-width:640px){.c-caps{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ */
/* Anatomy: the interactive node map and the part list                 */
/* ------------------------------------------------------------------ */
.anatomy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,72px);align-items:stretch}
.anatomy > div:last-child{display:flex;flex-direction:column}
@media (max-width:1080px){.anatomy{grid-template-columns:1fr}}
.anatomy-lede{margin-bottom:clamp(20px,2.2vw,34px)}
.part-list{display:grid;border-top:1px solid var(--line)}
.part-btn{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:start;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line);color:inherit;font:inherit;
  padding:clamp(13px,1.4vw,20px) 4px;cursor:pointer;position:relative}
.part-btn .pn{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding-top:3px;transition:color .2s ease}
.pglyph{width:30px;height:30px;flex:none;margin-top:1px;opacity:.85;transition:opacity .2s ease}
.pglyph .pg-edge{stroke:var(--node);stroke-width:1.1;fill:none;stroke-linecap:round;opacity:.9}
.pglyph .pg-node{fill:var(--node)}
.pglyph .pg-frame{stroke:var(--node);stroke-width:1;fill:none;stroke-dasharray:2.5 4;opacity:.75}
.part-btn .pt{display:block;font-weight:600;font-size:clamp(16px,1.15vw,19px);transition:color .2s ease}
.part-btn .pd{display:block;font-size:15px;color:var(--ink-2);margin-top:4px;max-width:52ch;line-height:1.5}
.part-btn::before{content:"";position:absolute;left:-1px;top:0;bottom:-1px;width:2px;background:var(--wax-hi);
  transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
.part-btn[aria-pressed="true"]::before{transform:scaleY(1)}
.part-btn[aria-pressed="true"] .pt{color:var(--node)}
.part-btn[aria-pressed="true"] .pn{color:var(--wax-hi)}
.part-btn[aria-pressed="true"] .pglyph{opacity:1}
.part-btn:hover .pt{color:var(--node)}
.stage{position:relative;border:1px solid var(--line);background:#0D100F;flex:1;min-height:clamp(340px,32vw,560px)}
@media (max-width:1080px){.stage{min-height:0;aspect-ratio:1/.72}}
@media (max-width:640px){.stage{aspect-ratio:1/1}}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.ghost-btn{background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;transition:border-color .2s ease, color .2s ease, background .2s ease}
.ghost-btn:hover{border-color:var(--node);color:var(--node);background:rgba(240,227,192,.05)}
.ghost-btn[disabled]{opacity:.45}
body:not(.pointer-on) .ghost-btn[disabled]{cursor:default}
.stage-note{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);min-height:1.6em}
.stage-note b{color:var(--node);font-weight:400}
.scale-line{margin-top:clamp(30px,3vw,52px);font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,1.5vw,27px);text-transform:uppercase;letter-spacing:.08em;max-width:38ch;
  padding-left:clamp(16px,1.6vw,26px);border-left:2px solid var(--wax)}
.scale-line em{font-style:normal;color:var(--wax-hi)}
/* the worked commission stage is wider than it is tall */
.worked-wrap .stage{min-height:0;aspect-ratio:16/7;flex:none}
@media (max-width:640px){.worked-wrap .stage{aspect-ratio:1/1}}
.worked-lede{margin-bottom:clamp(20px,2.2vw,34px)}

/* ------------------------------------------------------------------ */
/* Method: the assembly schematic                                      */
/* ------------------------------------------------------------------ */
.method-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,3vw,64px);align-items:start}
@media (max-width:1000px){.method-grid{grid-template-columns:1fr}}
.schematic{border:1px solid var(--line);background:#0D100F;padding:clamp(14px,1.5vw,24px);position:relative}
.schematic svg{display:block;width:100%;height:auto}
.schematic .cap{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:12px}
.sch-ghost line{stroke:var(--node);stroke-width:1;opacity:.12}
.sch-part{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sch-part circle{fill:none;stroke:var(--ink-2);stroke-width:1;opacity:.38;
  transition:opacity .4s ease, fill .4s ease, stroke .4s ease}
.sch-part.lit circle{fill:var(--node);stroke:var(--node);opacity:1}
.sch-part.own circle{fill:#FFFDF6;stroke:#FFFDF6}
.sch-halo{fill:url(#coreGlow);opacity:0;transition:opacity .7s ease}
.sch-halo.lit{opacity:1}
.sch-link{stroke:var(--node);stroke-width:1;fill:none;opacity:0;transition:opacity .5s ease}
.sch-link.lit{opacity:.5}
.sch-link.plan{opacity:.11}
.sch-studio{transition:opacity .6s ease, transform .6s ease}
.sch-studio.gone{opacity:0;transform:translateX(-30px)}
.sch-ring{stroke:var(--wax-hi);fill:none;stroke-width:1.2;opacity:0;transition:opacity .5s ease;stroke-dasharray:14 7}
.sch-ring.lit{opacity:.85}
.sch-bracket{color:var(--wax-hi);stroke:var(--wax-hi);fill:none;stroke-width:1;opacity:0;transition:opacity .4s ease}
.sch-bracket.lit{opacity:.85}
.sch-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;fill:var(--ink-2);text-transform:uppercase}
@media (prefers-reduced-motion: reduce){
  .sch-part,.sch-halo,.sch-link,.sch-studio,.sch-ring,.sch-bracket{transition:none !important}
}
.sch-steps{display:flex;gap:8px;margin-top:14px}
.sch-steps button{width:34px;height:34px;background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--font-mono);font-size:12.5px;cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease}
.sch-steps button:hover{border-color:var(--node);color:var(--node)}
.sch-steps button[aria-current="true"]{border-color:var(--wax-hi);color:var(--wax-hi);background:rgba(236,96,57,.08)}

/* ------------------------------------------------------------------ */
/* The ledger                                                          */
/* ------------------------------------------------------------------ */
.ledger{background:rgba(16,20,19,.66);border:1px solid var(--line-2)}
.lrow{display:grid;grid-template-columns:130px minmax(0,7fr) minmax(0,5fr) 130px 200px 56px;align-items:center}
.lhead{border-bottom:1px solid var(--line-2)}
.lhead .hc{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:12px 16px;white-space:nowrap}
.entry{border-bottom:1px solid var(--line)}
.entry summary{cursor:pointer;list-style:none;position:relative}
.entry summary::-webkit-details-marker{display:none}
.entry summary:hover{background:rgba(240,227,192,.045)}
.entry summary:focus-visible{outline:2px solid var(--node);outline-offset:-2px}
.lc{padding:14px 16px}
.lc.no{font-family:var(--font-mono);font-size:14px;white-space:nowrap;color:var(--ink)}
.lc.work{font-weight:500;font-size:clamp(16px,1.15vw,19px)}
.lc.parts{font-family:var(--font-mono);font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lc.yr{font-family:var(--font-mono);font-size:14px;color:var(--ink-2)}
.lc.st{padding-block:10px}
.lc.tog{font-family:var(--font-mono);font-size:20px;color:var(--ink-2);text-align:center;
  transition:transform .2s ease, color .2s ease}
.entry[open] .lc.tog{transform:rotate(45deg);color:var(--wax-hi)}
/* One seal at full strength per view, per the brand's roundel rule: the
   resting stamps are watermarks and the row you are reading is the stamp. */
.seal{width:88px;height:88px;display:block;opacity:.24;rotate:-1deg;transition:opacity .25s ease}
.entry:nth-of-type(3) .seal,a.lrow:nth-of-type(3) .seal{rotate:-2.5deg}
.entry:nth-of-type(4) .seal,a.lrow:nth-of-type(4) .seal{rotate:-.5deg}
.entry:nth-of-type(5) .seal,a.lrow:nth-of-type(5) .seal{rotate:-3deg}
.entry summary:hover .seal,.entry[open] .seal,.entry summary:focus-visible .seal{opacity:1}
.entry.house .lc.no{color:var(--node)}
.house-mark{width:88px;height:88px;display:block;opacity:.9}
@media (max-width:860px){.lhead{display:none}}

/* the home ledger: each row is a link into the register's back room */
a.lrow{text-decoration:none;border-bottom:1px solid var(--line)}
a.lrow:hover{background:rgba(240,227,192,.045)}
a.lrow:hover .seal,a.lrow:focus-visible .seal{opacity:1}
a.lrow:hover .lc.work{color:var(--node)}
a.lrow .lc.tog{font-size:17px}
a.lrow.house .lc.no{color:var(--node)}

/* dossier body */
.dossier{border-top:1px solid var(--line);background:rgba(16,20,19,.92);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.4vw,52px);
  padding:clamp(18px,2vw,40px) 16px clamp(24px,2.6vw,48px)}
.dossier .drec{display:grid;grid-template-columns:190px 1fr;gap:14px;
  padding-block:clamp(10px,1.1vw,16px);border-top:1px solid var(--line)}
.dossier .drec:first-child{border-top:none}
.dossier .drec .field{padding-top:3px}
.dossier .drec p{font-size:15.5px;color:var(--ink-2);max-width:72ch}
.dossier .plate{align-self:end}
@media (max-width:980px){
  .dossier{grid-template-columns:1fr}
  .dossier .drec{grid-template-columns:1fr;gap:2px}
}
.plate{border:1px solid var(--line);background:#0D100F;padding:clamp(12px,1.3vw,20px)}
.plate .frame{position:relative;aspect-ratio:16/10;background:#080A09;overflow:hidden}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate .cap{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}

/* open row (No. 005) */
.lrow.open-row{background:rgba(236,96,57,.05);text-decoration:none}
.lrow.open-row:hover .lc.work{color:var(--wax-hi)}
.lrow.open-row .lc.st{font-family:var(--font-mono);font-size:13px;white-space:nowrap;color:var(--ink)}
@media (max-width:860px){.lrow.open-row .lc.st{white-space:normal}}
.dot-open{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--wax-hi);margin-right:8px;vertical-align:0;
  box-shadow:0 0 10px rgba(236,96,57,.8)}
.ledger-note{margin-top:14px;max-width:80ch;font-family:var(--font-body);font-size:14px}
.ledger-note .dag{color:var(--wax-hi)}
.ledger-note a{color:var(--ink)}
.ledger-note a:hover{color:var(--node)}

/* Below 860 the ledger stops pretending to be a table: number, title and
   parts stack, the seal holds the right edge, the toggle keeps its column. */
@media (max-width:860px){
  .lrow{grid-template-columns:minmax(0,1fr) 52px 30px;
    grid-template-areas:"no seal tog" "work seal tog" "parts seal tog";
    align-items:center;row-gap:3px;padding:14px 16px}
  .lc{padding:0}
  .lc.no{grid-area:no}
  .lc.work{grid-area:work;font-size:18px;line-height:1.25}
  .lc.parts{grid-area:parts}
  .lc.yr,.lhead .hc.yr{display:none}
  .lc.st{grid-area:seal;justify-self:center;padding:0}
  .lc.tog{grid-area:tog}
  .lrow.open-row{grid-template-columns:minmax(0,1fr) 30px;
    grid-template-areas:"no tog" "work tog" "parts tog" "st tog"}
  .lrow.open-row .lc.st{grid-area:st;justify-self:start}
  .seal,.house-mark{width:48px;height:48px}
  .dossier .drec{grid-template-columns:1fr;gap:2px}
}

/* entrance and stamp: the animated path only. body.anim is added by
   entity.js when motion is allowed, so the still page is the default. */
body.anim .entry, body.anim .lrow.open-row, body.anim a.lrow{opacity:0;transform:translateY(8px)}
body.anim .entry.in, body.anim .lrow.open-row.in, body.anim a.lrow.in{opacity:1;transform:none;transition:opacity .25s ease, transform .25s ease}
body.anim .entry .seal, body.anim .entry .house-mark, body.anim a.lrow .seal, body.anim a.lrow .house-mark{opacity:0;scale:1.55}
body.anim .entry.in .seal, body.anim a.lrow.in .seal{opacity:.24;scale:1;
  transition:opacity .18s ease .28s, scale .18s cubic-bezier(.2,1.4,.4,1) .28s}
body.anim .entry.house.in .house-mark, body.anim a.lrow.house.in .house-mark{opacity:.9;scale:1;
  transition:opacity .18s ease .28s, scale .18s cubic-bezier(.2,1.4,.4,1) .28s}
body.anim .entry.in summary:hover .seal, body.anim .entry.in[open] .seal, body.anim a.lrow.in:hover .seal{opacity:1;transition-delay:0s}
body.anim .dot-open{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
body.anim .entry[open] .dossier{animation:dossier-in .28s ease}
@keyframes dossier-in{from{opacity:0;transform:translateY(6px)}}

/* ------------------------------------------------------------------ */
/* The specimen book                                                   */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Glass. Every raised surface is a glass instrument panel: the entity  */
/* behind the page reads through it, blurred and warm. The page itself  */
/* stays un-glassed, because a register is documents, not windows.      */
/* Browsers without backdrop-filter keep the solid translucent panels.  */
/* ------------------------------------------------------------------ */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  /* Document surfaces get the full glass. Drawing surfaces (.stage,
     .schematic, .contrast, .plate) get NONE: a blurred glow under a
     hairline schematic reads as dirt on the instrument, and diagrams
     are machines, not starbursts. */
  .transcript{
    background:rgba(16,20,19,.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.12);
    backdrop-filter:blur(16px) saturate(1.12);
    box-shadow:inset 0 1px 0 rgba(240,227,192,.06)}
  .dossier{background:rgba(16,20,19,.68);
    -webkit-backdrop-filter:blur(16px) saturate(1.12);
    backdrop-filter:blur(16px) saturate(1.12)}
  .dock{background:rgba(16,20,19,.62);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    backdrop-filter:blur(18px) saturate(1.12)}
  /* The ledger and the specification panel sit over the two formations
     whose parts must stay COUNTABLE (the register coupling, and the
     lattice vacancy at the socket). Tint and lamplight only, and a blur
     too small to melt a light into bokeh. */
  .ledger,.spec{
    background:rgba(16,20,19,.55);
    -webkit-backdrop-filter:blur(3px) saturate(1.08);
    backdrop-filter:blur(3px) saturate(1.08);
    box-shadow:inset 0 1px 0 rgba(240,227,192,.06)}
}

.trade-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,2.4vw,36px)}
.trade-tab{background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease}
.trade-tab:hover{border-color:var(--node);color:var(--node)}
.trade-tab[aria-pressed="true"]{border-color:var(--wax-hi);color:var(--wax-hi);background:rgba(236,96,57,.08)}
/* without JavaScript the tabs disappear and all six specimens stack,
   so the complete book is always on the page */
body:not(.js) .trade-tabs{display:none}
.trade + .trade{margin-top:clamp(40px,4.4vw,72px)}
body.js .trade + .trade{margin-top:0}
.trade-head{margin-bottom:clamp(16px,1.8vw,26px)}
.trade-head h3{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,1.5vw,26px);
  text-transform:uppercase;letter-spacing:.04em;margin:3px 0 5px}
.t-premise{color:var(--ink-2);font-size:15.5px}
/* The counter transcript: one working moment per trade, shown as the
   exchange everyone already knows, annotated with the stamps a bare
   chat window could never earn. Complete without JavaScript: every
   line and every stamp note is in the markup; the enhancement is
   pacing and focus, never information. */
.transcript{border:1px solid var(--line-2);background:rgba(16,20,19,.72);
  padding:clamp(18px,2vw,32px);max-width:1400px}
.t-ask{display:grid;gap:6px;margin-bottom:clamp(18px,2vw,28px)}
.t-ask .t-q{font-size:clamp(17px,1.25vw,21px);font-weight:600;max-width:60ch}
.t-reply{border-left:2px solid var(--line-2);padding-left:clamp(16px,1.8vw,28px);
  display:grid;gap:clamp(14px,1.6vw,22px)}
/* the reply line and its marginalia: notes live in the margin column,
   the way annotations live in the margin of a transcript */
.t-line{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(18px,2.2vw,40px);align-items:start}
.t-line .t-body p{font-size:15.5px;max-width:72ch}
.t-line.wax .t-body > p{color:var(--wax-hi)}
.t-margin{display:grid;gap:9px;border-left:1px solid var(--line);padding-left:clamp(12px,1.4vw,18px)}
@media (max-width:1000px){
  .t-line{grid-template-columns:1fr;row-gap:8px}
  .t-margin{border-left:none;padding-left:0}
}
.t-stamp{display:inline-block;background:rgba(240,227,192,.04);border:1px solid var(--line-2);
  color:var(--ink-2);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;margin:8px 8px 0 0;cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease}
.t-stamp:hover{color:var(--node);border-color:var(--node)}
.t-stamp[aria-pressed="true"]{color:var(--node);border-color:var(--node);background:rgba(240,227,192,.09)}
.t-stamp.wax{color:var(--wax-hi);border-color:rgba(236,96,57,.55)}
.t-stamp.wax[aria-pressed="true"]{color:var(--wax-hi);border-color:var(--wax-hi);background:rgba(236,96,57,.09)}
.t-snote{font-size:14px;color:var(--ink-2);max-width:56ch;line-height:1.55}
body.js .t-snote{display:none}
body.js .t-snote.on{display:block}
.t-cap{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-top:clamp(16px,1.8vw,24px)}
/* the reply is paced onto the page when its trade is chosen; the still
   page is the finished transcript */
body.anim .trade .t-line{opacity:0;transform:translateY(9px)}
body.anim .trade .t-line.shown{opacity:1;transform:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1)}

/* ------------------------------------------------------------------ */
/* Terms                                                               */
/* ------------------------------------------------------------------ */
.tariff{max-width:1400px}
.trow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,4fr);gap:clamp(16px,1.8vw,32px);
  padding-block:clamp(18px,2vw,30px);border-bottom:1px solid var(--line)}
.trow h3{margin-bottom:0}
.trow .what{font-size:15.5px;color:var(--ink-2);max-width:60ch}
.trow .fee{font-family:var(--font-mono);font-size:14px;color:var(--ink)}
.trow .fee .dag{color:var(--wax-hi)}
.trow.lead .fee b{font-weight:400;color:var(--node)}
@media (max-width:900px){.trow{grid-template-columns:1fr;gap:8px}}
.fine{margin-top:clamp(18px,2vw,28px);display:grid;gap:4px}
.fine p{font-size:14px;color:var(--ink-2);max-width:none}
.fine .dag{color:var(--wax-hi)}

/* questions taken at the counter */
.qa-list{border-top:1px solid var(--line);max-width:1400px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;position:relative;
  display:grid;grid-template-columns:110px 1fr 40px;gap:14px;align-items:baseline;
  padding-block:clamp(14px,1.5vw,22px)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:rgba(240,227,192,.045)}
.qa summary:focus-visible{outline:2px solid var(--node);outline-offset:-2px}
.qa .q-no{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-left:4px}
.qa .q-t{font-weight:600;font-size:clamp(16px,1.15vw,19px)}
.qa .q-tog{font-family:var(--font-mono);font-size:20px;color:var(--ink-2);text-align:center;
  transition:transform .2s ease, color .2s ease}
.qa[open] .q-tog{transform:rotate(45deg);color:var(--wax-hi)}
.qa .q-a{padding:0 0 clamp(16px,1.8vw,26px) 124px}
.qa .q-a p{font-size:15.5px;color:var(--ink-2);max-width:72ch}
.qa .q-a p + p{margin-top:.6em}
@media (max-width:640px){
  .qa summary{grid-template-columns:1fr 40px;grid-template-areas:"no tog" "t tog";row-gap:4px}
  .qa .q-no{grid-area:no}.qa .q-t{grid-area:t}.qa .q-tog{grid-area:tog}
  .qa .q-a{padding-left:4px}
}

/* ------------------------------------------------------------------ */
/* Registrar and commission                                            */
/* ------------------------------------------------------------------ */
.registrar{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,3.4vw,72px);align-items:start}
@media (max-width:900px){.registrar{grid-template-columns:1fr}}
.signature{border-left:1px solid var(--line-2);padding-left:clamp(18px,2vw,36px);
  display:grid;gap:14px;justify-items:start}
@media (max-width:900px){.signature{border-left:none;padding-left:0}}
.signature svg{width:clamp(84px,7vw,128px);height:auto;display:block}
.commission-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,3.4vw,72px);align-items:start}
@media (max-width:900px){.commission-grid{grid-template-columns:1fr}}
.commission-grid .lead-line{margin-bottom:clamp(14px,1.6vw,22px)}
.fields{display:grid;gap:0}
.frow{display:grid;grid-template-columns:270px 1fr;gap:12px;align-items:baseline;
  padding-block:clamp(12px,1.3vw,18px);border-bottom:1px solid var(--line)}
@media (max-width:640px){.frow{grid-template-columns:1fr;gap:2px}}
.frow .v{font-size:15.5px;color:var(--ink-2)}
.intake{display:grid;gap:0;border-top:1px solid var(--line)}
.intake .irow{display:grid;grid-template-columns:270px 1fr;gap:12px;align-items:start;
  padding-block:clamp(12px,1.3vw,18px);border-bottom:1px solid var(--line)}
@media (max-width:640px){.intake .irow{grid-template-columns:1fr;gap:6px}}
.intake label{padding-top:5px}
.intake input,.intake textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--font-body);font-size:15.5px;padding:5px 0;resize:none}
.intake input::placeholder,.intake textarea::placeholder{color:#5E625C}
.intake input:focus,.intake textarea:focus{outline:none;border-bottom-color:var(--node)}
.intake-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(16px,1.8vw,26px)}
.intake-count{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.intake-count b{color:var(--node);font-weight:400}
.apply-block{border-left:1px solid var(--line-2);padding-left:clamp(18px,2vw,36px);display:grid;gap:clamp(20px,2.2vw,32px);align-content:start}
@media (max-width:900px){.apply-block{border-left:none;padding-left:0;margin-top:26px}}
.spec{border:1px solid var(--line-2);background:rgba(16,20,19,.72)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line-2)}
.spec-state{color:var(--ink-2)}
.spec-state.ready{color:var(--wax-hi)}
.spec svg{display:block;width:100%;height:auto;padding:6px 12px 0}
.spec-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  fill:var(--ink-2);opacity:.55;transition:opacity .35s ease, fill .35s ease}
.spec-course{stroke:var(--node);stroke-width:1;opacity:0;transition:opacity .45s ease}
.spec-part{fill:none;stroke:var(--ink-2);stroke-width:1;opacity:.34;
  transition:opacity .4s ease, fill .4s ease, stroke .4s ease}
.spec-stile{stroke:var(--line-2);stroke-width:1;fill:none}
.spec-seat{transition:transform .55s cubic-bezier(.22,1,.36,1)}
.spec-row.set .spec-part{fill:var(--node);stroke:var(--node);opacity:1}
.spec-row.set .spec-course{opacity:.45}
.spec-row.set .spec-label{opacity:1;fill:var(--node)}
.spec-foot{padding:10px 16px 14px;font-size:12px;line-height:1.5}
@media (prefers-reduced-motion: reduce){.spec-seat,.spec-part,.spec-course,.spec-label{transition:none !important}}
.apply-direct{display:grid;gap:12px;justify-items:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.intake-note{margin-top:14px;font-size:12.5px;line-height:1.55;max-width:60ch}
.intake-note.sent{color:var(--node)}
.spec-state.sent{color:var(--node)}
.intake.sending{opacity:.6;pointer-events:none}
.intake.sent .irow,.intake.sent .intake-bar{opacity:.5}
.intake-note.warn{color:var(--wax-hi)}
.email{font-family:var(--font-mono);font-size:clamp(16px,1.3vw,22px)}
.copy-btn{border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  padding:2px 0;cursor:pointer;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.copy-btn:hover{border-color:var(--wax-hi);color:var(--wax-hi)}

/* the standing invitation at the foot of a depth page */
.next-step{display:flex;align-items:center;gap:clamp(16px,2vw,32px);flex-wrap:wrap;
  padding-block:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
.next-step .mono{font-size:14px}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
footer{margin-top:clamp(40px,4vw,72px);padding-block:clamp(26px,3vw,44px);
  background-image:radial-gradient(circle, var(--ink-2) 1.1px, transparent 1.6px);
  background-size:16px 4px;background-repeat:repeat-x;background-position:top left;
  display:grid;grid-template-columns:1fr auto;gap:14px;color:var(--ink-2);font-size:14px}
footer .fname{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
footer .insp{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-align:right;display:grid;gap:2px}
@media (max-width:700px){footer{grid-template-columns:1fr}footer .insp{text-align:left}}

/* ------------------------------------------------------------------ */
/* Rail and dock                                                       */
/* ------------------------------------------------------------------ */
.rail{position:fixed;left:max(14px, calc(50% - 1050px - 62px));top:50%;transform:translateY(-50%);z-index:40;display:none;padding-left:12px}
@media (min-width:1200px){
  body.js .rail{display:grid}
  /* The rail is fixed furniture. Between about 1200px and 2260px the shell
     fills the window and the rail has nowhere to stand, so it lands on the
     copy. The page reserves the gutter instead of hoping for one, on both
     sides so the masthead stays centred. */
  body.js .page{padding-inline:clamp(58px,4.4vw,76px)}
}
.rail{gap:16px;justify-items:start}
.rail a{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);text-decoration:none;padding:1px 3px}
.rail a:hover,.rail a.cur{color:var(--wax-hi)}
.rail .track{position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.rail .prog{position:absolute;inset:0;background:var(--wax-hi);transform-origin:top;transform:scaleY(1)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    body.js .rail .prog{animation:railgrow linear both;animation-timeline:scroll(root)}
  }
}
@keyframes railgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--void-2);
  border-top:1px solid var(--line-2);box-shadow:0 -20px 26px -14px rgba(10,12,11,.95);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dock.on{transform:none}
body.dock-on .page{padding-bottom:62px}
@media (prefers-reduced-motion: reduce){.dock{transition:none}}
.dock-inner{width:min(100% - 2*clamp(20px,4vw,72px), 2100px);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding-block:10px}
.dock .no{font-family:var(--font-mono);font-size:14px;white-space:nowrap}
.dock .work{font-weight:500;white-space:nowrap}
.dock .st{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);white-space:nowrap}
.dock .cta{margin-left:auto;padding:9px 18px;font-size:12.5px}
@media (max-width:700px){.dock .st{display:none}}
/* the dock is fixed, so an overflowing button never shows up in
   scrollWidth: it has to be sized, not measured */
@media (max-width:620px){.dock .work{display:none}.dock .cta{padding:9px 14px}}
@media (max-width:380px){.dock .no{display:none}}

@media print{
  .rail,.dock,.copy-btn,.skip,#field,.pointer{display:none !important}
}