@charset "utf-8";
/* Moderoot — The As-Built. Drafting sheet world: paper ground, graphite hairlines,
   drafting-blue drawing lines, redline reserved as the only signal colour. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/plex-sans-var.woff2") format("woff2-variations"),url("../fonts/plex-sans-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#f7f6f2; --paper-2:#eeede6; --paper-3:#e4e3da;
  --ink:#1f252b; --ink-2:#545e68; --ink-3:#5f6870;
  --rule:#c8c9c2; --rule-2:#a9aba3;
  --blue:#0f4a47; --blue-line:#17706a; --blue-wash:#e4efeb;
  --red:#b3311f; --red-lite:#f0836d; --red-wash:#f7e6e2;
  --dark:#12302e; --dark-2:#1a423e;

  --sans:"Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --u:24px;                       /* the drawing grid module: everything keys to it */
  --margin:clamp(2.25rem,5.2vw,4.5rem);   /* sheet edge margin, holds the datum strip */
  --pad:clamp(1.15rem,4vw,2.5rem);
  --maxw:1360px;
  --ease:cubic-bezier(.16,.84,.32,1);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--u) * 2.4)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.62 var(--sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  /* the drafting grid, printed on the paper itself */
  background-image:
    linear-gradient(to right,rgba(31,37,43,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,37,43,.045) 1px,transparent 1px);
  background-size:var(--u) var(--u);
}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--red)}

/* browser surfaces, themed off the palette rather than left to the UA */
::selection{background:var(--red);color:#fff}
:root{caret-color:var(--red);scrollbar-color:var(--rule-2) var(--paper-2);scrollbar-width:thin;accent-color:var(--red)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.dark :focus-visible,.titleblock :focus-visible{outline-color:var(--red-lite)}

/* ---------------------------------------------------------------- type */
.label{font:600 .6875rem/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.note{font:400 .75rem/1.5 var(--mono);letter-spacing:.01em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lead{font-size:clamp(1.0625rem,1.7vw,1.28rem);line-height:1.55;color:var(--ink-2);max-width:56ch}
.prose{max-width:68ch}
.prose p + p{margin-top:.85em}

h2.sheet-title{
  font:700 clamp(1.85rem,4.4vw,3.15rem)/.98 var(--cond);
  letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;max-width:19ch;
}
h3{font:700 clamp(1.2rem,2.3vw,1.6rem)/1.08 var(--cond);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}

/* ---------------------------------------------------------------- shell */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* every section is a drawing sheet: an edge datum strip on the left margin */
.sheet{position:relative;padding-block:clamp(3.25rem,7vw,5.5rem);border-top:1px solid var(--rule)}
.sheet > .wrap{position:relative;padding-left:calc(var(--pad) + var(--margin))}
.datum{
  position:absolute;left:var(--pad);top:0;width:var(--margin);height:100%;
  border-right:1px solid var(--rule);
}
.datum span{
  position:absolute;top:1.35rem;left:50%;
  transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font:600 .6875rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
/* tick marks down the datum, like a drawing sheet's edge scale */
.datum::after{
  content:"";position:absolute;right:-1px;top:0;width:7px;height:100%;
  background-image:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px var(--u));
}

/* ---------------------------------------------------------------- title block bar */
.titleblock{
  position:sticky;top:0;z-index:60;background:var(--dark);color:var(--paper);
  border-bottom:1px solid #000;
}
.titleblock .wrap{display:flex;align-items:stretch;gap:0;min-height:calc(var(--u) * 2.2)}
.tb-mark{display:flex;align-items:center;gap:.6rem;flex:none;padding-right:1.1rem;border-right:1px solid #2c5a55;text-decoration:none;color:inherit}
.tb-mark:hover{color:inherit}
.tb-mark .wordmark{font:700 1.32rem/1 var(--cond);letter-spacing:.11em;text-transform:uppercase}
.tb-mark .legal{font:400 .625rem/1 var(--mono);color:#93afa9;letter-spacing:.02em;margin-top:.28rem}
.tb-nav{display:flex;align-items:center;gap:0;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-nav a{
  font:600 .70rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  color:#c3d6d1;text-decoration:none;padding:.85rem .85rem;white-space:nowrap;
  border-left:1px solid #2c5a55;
}
.tb-nav a:hover{color:var(--paper);background:var(--dark-2)}
.tb-call{
  display:flex;align-items:center;gap:.5rem;background:var(--red);color:#fff;text-decoration:none;
  flex:none;white-space:nowrap;
  padding:0 clamp(.85rem,2vw,1.4rem);font:700 .84rem/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;
  border-left:1px solid #000;
}
.tb-call:hover{background:#932717;color:#fff}
.tb-call svg{width:15px;height:15px;flex:none}

/* ---------------------------------------------------------------- hero */
.hero{border-top:0;padding-top:clamp(2.25rem,5vw,4rem);padding-bottom:0}
.hero .wrap{padding-left:calc(var(--pad) + var(--margin))}
.hero-head{max-width:none}
h1{
  font:700 clamp(2.45rem,6.6vw,5.1rem)/.9 var(--cond);
  letter-spacing:-.022em;text-transform:uppercase;text-wrap:balance;margin:0;max-width:20ch;
}
h1 .thin{font-weight:600;color:var(--ink-2)}
.hero-sub{margin-top:1.15rem;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font:700 .875rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.35rem;border:1px solid var(--red);
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 2px 0 0 rgba(31,37,43,.22),0 6px 12px -8px rgba(31,37,43,.45)}
.btn-primary:hover{background:#932717;border-color:#932717;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}

/* ---------------------------------------------------------------- the plan */
.plan-frame{
  margin-top:clamp(1.75rem,4vw,2.75rem);
  border:1px solid var(--ink);background:var(--paper);
  box-shadow:0 1px 0 0 var(--rule),0 8px 13px -9px rgba(31,37,43,.4);
}
.plan-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.plan-scroll > svg{display:block;width:100%;min-width:940px;height:auto}
.plan-legend{
  display:flex;flex-wrap:wrap;gap:.35rem 1.35rem;align-items:baseline;
  border-top:1px solid var(--ink);padding:.7rem 1rem;background:var(--paper-2);
}
.plan-legend dt{font:600 .6875rem/1.4 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan-legend dd{font:400 .75rem/1.4 var(--mono);color:var(--ink-2);display:flex;align-items:center;gap:.42rem}
.swatch{width:16px;height:0;border-top:2px solid var(--blue-line);flex:none}
.swatch.dash{border-top-style:dashed}
.swatch.sig{border-top-color:var(--red)}

/* --- SVG plan internals --- */
.pl-grid{stroke:#1f252b;stroke-opacity:.07;stroke-width:1}
.pl-wall{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:miter}
.pl-part{fill:none;stroke:var(--ink);stroke-width:2.4}
.pl-thin{fill:none;stroke:var(--ink-3);stroke-width:1.1}
.pl-furn{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:1.1}
.pl-hatch{fill:url(#hatch);stroke:none}
.pl-room{font:600 13px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-3)}
.pl-dim{font:400 12.5px/1 var(--mono);fill:var(--ink-3)}
.pl-run{fill:none;stroke:var(--blue-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 5}
.pl-trunk{stroke-width:3;stroke-dasharray:none}

/* live zones: hover/focus lights the run and the marker. state carried by the
   material itself (the line darkens and thickens), not by an added badge. */
.zone{cursor:pointer}
.zone .pl-run,.zone .pl-trunk{transition:stroke .18s var(--ease),stroke-width .18s var(--ease)}
.zone .kx{fill:var(--paper);stroke:var(--ink);stroke-width:2;transition:fill .18s var(--ease),stroke .18s var(--ease)}
.zone .kt{font:700 14px/1 var(--cond);fill:var(--ink);text-anchor:middle;letter-spacing:.02em}
.zone .kl{stroke:var(--ink);stroke-width:1.1;fill:none}
.zone .kn{font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-2)}
.zone:hover .pl-run,.zone:hover .pl-trunk,.zone:focus-visible .pl-run,.zone:focus-visible .pl-trunk{stroke:var(--red);stroke-width:3.4}
.zone:hover .kx,.zone:focus-visible .kx{fill:var(--red);stroke:var(--red)}
.zone:hover .kt,.zone:focus-visible .kt{fill:#fff}
.zone:hover .kn,.zone:focus-visible .kn{fill:var(--red)}
.zone:focus{outline:none}
.zone:focus-visible .kx{stroke-width:3}

/* the one authored moment: the runs draw outward from the rack, once, on load */
@media (prefers-reduced-motion:no-preference){
  .pl-run,.pl-trunk{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.5s var(--ease) forwards}
  .pl-run{animation-delay:.35s}
  .z2 .pl-run{animation-delay:.5s} .z3 .pl-run{animation-delay:.62s}
  .z4 .pl-run{animation-delay:.74s} .z5 .pl-run{animation-delay:.86s} .z6 .pl-run{animation-delay:.98s}
  .zone .kx,.zone .kt,.zone .kl,.zone .kn{opacity:0;animation:ink .5s var(--ease) forwards}
  .z1 .kx,.z1 .kt,.z1 .kl,.z1 .kn{animation-delay:1.0s}
  .z2 .kx,.z2 .kt,.z2 .kl,.z2 .kn{animation-delay:1.08s}
  .z3 .kx,.z3 .kt,.z3 .kl,.z3 .kn{animation-delay:1.16s}
  .z4 .kx,.z4 .kt,.z4 .kl,.z4 .kn{animation-delay:1.24s}
  .z5 .kx,.z5 .kt,.z5 .kl,.z5 .kn{animation-delay:1.32s}
  .z6 .kx,.z6 .kt,.z6 .kl,.z6 .kn{animation-delay:1.40s}
  /* hover must not be fought by the finished animation */
  .zone:hover .pl-run,.zone:hover .pl-trunk{stroke-dasharray:6 5}
  .zone:hover .pl-trunk{stroke-dasharray:none}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{opacity:1}}

/* ---------------------------------------------------------------- schedule */
.sched-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;justify-content:space-between;margin-bottom:clamp(1.4rem,3vw,2.1rem)}
.sched{border-top:2px solid var(--ink)}
.row{border-bottom:1px solid var(--rule)}
.row:target{background:var(--red-wash)}
.row:target .rk{background:var(--red);color:#fff;border-color:var(--red)}
.row > summary{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.8rem,2.2vw,1.5rem);
  padding:clamp(.85rem,2vw,1.15rem) 0;cursor:pointer;list-style:none;
}
.row > summary::-webkit-details-marker{display:none}
.row > summary:hover .rn{color:var(--red)}
.row > summary:hover .rk{border-color:var(--red);color:var(--red)}
.row[open] > summary .rk{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.row[open]:target > summary .rk{background:var(--red);border-color:var(--red);color:#fff}
.rk{
  font:500 .8125rem/1 var(--mono);font-variant-numeric:tabular-nums;
  border:1px solid var(--rule-2);color:var(--ink-2);
  padding:.42rem .5rem;min-width:2.6rem;text-align:center;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.rn{font:700 clamp(1.12rem,2.5vw,1.72rem)/1.08 var(--cond);text-transform:uppercase;letter-spacing:.01em;transition:color .16s var(--ease)}
.rn .rs{display:block;font:400 .8125rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2);margin-top:.22rem;max-width:46ch}
.rx{position:relative;width:19px;height:19px;flex:none}
.rx::before,.rx::after{content:"";position:absolute;background:var(--ink-2);transition:transform .22s var(--ease),background .16s var(--ease)}
.rx::before{left:0;top:9px;width:19px;height:1.5px}
.rx::after{left:9px;top:0;width:1.5px;height:19px}
.row[open] .rx::after{transform:rotate(90deg)}
.row > summary:hover .rx::before,.row > summary:hover .rx::after{background:var(--red)}

.rbody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);padding:.35rem 0 clamp(1.9rem,3.8vw,2.7rem)}
.rbody .prose{max-width:60ch}
.specs{margin-top:1.25rem;border-top:1px solid var(--rule)}
.specs div{display:grid;grid-template-columns:11.5rem 1fr;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule)}
.specs dt{font:600 .6875rem/1.5 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.specs dd{font:400 .8125rem/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
figure.plate{margin:0}
figure.plate img{width:100%;border:1px solid var(--ink);filter:saturate(.82) contrast(1.03)}
figure.plate figcaption{margin-top:.5rem;font:400 .6875rem/1.5 var(--mono);color:var(--ink-3)}

/* ---------------------------------------------------------------- section elevation */
.sect-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.elev{border:1px solid var(--ink);background:var(--paper);box-shadow:0 7px 12px -9px rgba(31,37,43,.38)}
.elev svg{width:100%;height:auto;display:block}
.el-slab{fill:url(#hatch);stroke:var(--ink);stroke-width:2}
.el-line{fill:none;stroke:var(--ink);stroke-width:2}
.el-thin{fill:none;stroke:var(--ink-3);stroke-width:1.1}
.el-furn{fill:var(--paper-2);stroke:var(--ink);stroke-width:1.6}
.el-run{fill:none;stroke:var(--blue-line);stroke-width:2.4;stroke-linecap:round}
.el-lab{font:600 12px/1 var(--cond);letter-spacing:.15em;text-transform:uppercase;fill:var(--ink-2)}
.el-key{font:500 11.5px/1 var(--mono);fill:var(--red)}
.el-dim{font:400 11px/1 var(--mono);fill:var(--ink-3)}
.layers{margin-top:1.6rem;border-top:2px solid var(--ink)}
.layers li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--rule)}
.layers .lk{font:500 .75rem/1.5 var(--mono);color:var(--red);font-variant-numeric:tabular-nums}
.layers h3{font-size:clamp(1.02rem,1.8vw,1.24rem);margin-bottom:.22rem}
.layers p{font-size:.9375rem;color:var(--ink-2);max-width:48ch}

/* ---------------------------------------------------------------- ikwadise */
.ikw{background:var(--paper-2)}
.ikw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
.ikw-plate{position:relative;border:1px solid var(--ink);background:var(--paper);padding:10px;box-shadow:0 8px 13px -9px rgba(31,37,43,.42)}
.ikw-plate img{width:100%;border:1px solid var(--rule-2);filter:saturate(.8) contrast(1.03)}
.ikw-plate .stamp{
  position:absolute;right:-8px;bottom:58px;background:var(--paper);
  border:2px solid var(--red);color:var(--red);padding:.44rem .7rem;
  font:700 .6875rem/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-2.4deg);box-shadow:0 4px 8px -6px rgba(31,37,43,.5);
}
.feat{margin-top:1.5rem;border-top:2px solid var(--ink)}
.feat li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;padding:.78rem 0;border-bottom:1px solid var(--rule);align-items:start}
.feat svg{width:17px;height:17px;flex:none;margin-top:.2rem;color:var(--blue)}
.feat b{font-weight:600}
.feat span{font-size:.9375rem;color:var(--ink-2)}
.provenance{margin-top:1.5rem;border-left:1px solid var(--red);padding-left:1.1rem}
.provenance p{font-size:.9375rem;color:var(--ink-2);max-width:52ch}
.provenance p + p{margin-top:.6em}

/* ---------------------------------------------------------------- contact */
.contact{background:var(--dark);color:var(--paper);border-top:0}
.contact .datum{border-right-color:#2c5a55}
.contact .datum span{color:#93afa9}
.contact .datum::after{background-image:repeating-linear-gradient(to bottom,#2c5a55 0 1px,transparent 1px var(--u))}
.contact h2.sheet-title{color:var(--paper)}
.contact .lead{color:#c3d6d1}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start;margin-top:clamp(1.5rem,3.4vw,2.2rem)}
.ctas{display:flex;flex-direction:column;gap:.7rem;align-items:stretch;max-width:23rem}
.contact .btn-primary{justify-content:center;padding-block:1.05rem;box-shadow:none}
.contact .btn-ghost{color:var(--paper);border-color:#3a6d67;justify-content:center;padding-block:1.05rem}
.contact .btn-ghost:hover{background:var(--dark-2);border-color:#5d918a;color:var(--paper)}
.tb-fields{border-top:1px solid #2c5a55}
.tb-fields div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid #2c5a55}
.tb-fields dt{font:600 .6875rem/1.5 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#93afa9}
.tb-fields dd{font:400 .8125rem/1.5 var(--mono);color:var(--paper);font-variant-numeric:tabular-nums}
.tb-fields dd a{color:var(--paper);text-decoration-color:#5d918a}
.tb-fields dd a:hover{color:var(--red-lite)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--dark);color:#93afa9;border-top:1px solid #2c5a55;padding-block:1.5rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;justify-content:space-between}
.foot p{font:400 .75rem/1.6 var(--mono)}
.foot a{color:#c3d6d1}
.foot a:hover{color:var(--red-lite)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .tb-nav{display:none}
}
@media (max-width:960px){
  .rbody,.sect-wrap,.ikw-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .rbody{gap:1.4rem}
  figure.plate{order:-1}
  .specs div,.tb-fields div{grid-template-columns:8.5rem 1fr}
}
@media (max-width:640px){
  :root{--u:20px;--margin:1.9rem}
  body{font-size:1rem}
  .tb-mark .legal{display:none}
  .tb-call{margin-left:auto}
  .plan-scroll{cursor:grab}
  .specs div,.tb-fields div{grid-template-columns:minmax(0,1fr);gap:.15rem;padding-block:.5rem}
  .row > summary{grid-template-columns:auto 1fr auto;gap:.7rem}
  .ctas{max-width:none}
  .layers li,.feat li{gap:.7rem}
}
@media print{
  .titleblock,.tb-call{position:static}
  body{background-image:none}
  .row .rbody{display:grid!important}
}

/* zone-owned furniture answers to its callout too */
.zone .pl-furn{transition:fill .18s var(--ease),stroke .18s var(--ease)}
.zone:hover .pl-furn,.zone:focus-visible .pl-furn{fill:var(--red-wash);stroke:var(--red)}
.zone:hover .pl-dim,.zone:focus-visible .pl-dim{fill:var(--red)}

/* standalone links inside notation blocks need a real target height (WCAG 2.5.8) */
.specs dd a,.tb-fields dd a{display:inline-block;padding-block:.3rem}

/* the drawing must survive printing, where the reveal animation never runs */
@media print{
  .zone .kx,.zone .kt,.zone .kl,.zone .kn{opacity:1;animation:none}
  .pl-run,.pl-trunk{stroke-dashoffset:0;animation:none}
}

/* ------------------------------------------------ contact sheet title block */
/* A real drawing carries the firm's mark in a paper title block, not on the
   ground. That is also what lets a white-background logo sit on a dark sheet. */
/* white label stock, not sheet cream: it is what lets the supplied logo,
   which carries a white ground, sit in the title block without a seam */
.tb-panel{background:#fff;border:1px solid var(--ink);padding:clamp(1rem,2.4vw,1.5rem)}
.brandmark{display:block;width:100%;max-width:15rem;height:auto;margin:0 auto clamp(.9rem,2vw,1.3rem)}
.brandmark-fallback{
  display:block;text-align:center;font:700 2rem/1 var(--cond);letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);
}
.brandmark-fallback b{
  display:block;margin-top:.4rem;font:600 .6875rem/1 var(--cond);
  letter-spacing:.2em;color:var(--ink-3);
}
.tb-panel-fields{margin-top:0;border-top:1px solid var(--ink)}
.tb-panel-fields div{grid-template-columns:7.5rem 1fr}
@media (max-width:640px){
  .tb-panel-fields div{grid-template-columns:minmax(0,1fr)}
}

/* contact: both columns begin at the same line, so the sheet has no dead quarter */
.contact-grid{align-items:start}
.contact-grid .ctas{margin-top:clamp(1.4rem,3vw,2rem)}

/* ---------------------------------------------- CSP-safe utility classes */
/* The site ships style-src 'self', so no element may carry a style attribute.
   These replace the handful that used to be inline. */
.sprite{position:absolute}
.lead-gap{margin-top:1rem}
.prose-note{margin-top:.9em;color:var(--ink-2)}
.plate-caption{margin-top:.6rem}