/* ============================================================
   JL Collective — "The Standing Record"
   The site as the firm's own ledger: every section a numbered
   entry, every claim registered against a ruled hairline,
   sealed in brass on near-black paper. One traveling lamp.
   Hand-written. No frameworks.
   ============================================================ */

:root{
  color-scheme:dark;

  /* grounds — ink-black paper with a navy soul */
  --ink-0:#080D14;                     /* the page */
  --ink-1:#060A10;                     /* contact, footer, the deep band */
  --panel:#0D141F;                     /* entry cards, the certificate */
  --panel-2:#111926;                   /* raised state — nothing is ever lighter */

  /* rules — light as hairlines, never as fields */
  --rule:rgba(200,169,106,.16);
  --rule-hi:rgba(200,169,106,.45);
  --rule-quiet:rgba(246,242,234,.08);

  /* ink — cream is for headings and the seal ring only */
  --cream:#F6F2EA;
  --body:#C6C0B3;
  --mono-ink:#8E8878;
  --mono-dim:#6E695E;                  /* decorative furniture only, never copy */

  /* metal */
  --brass:#C8A96A;
  --brass-deep:#8A7244;
  --wax:#4E211D;                       /* used exactly once: the contact stamp */

  /* type */
  --serif:"Bodoni Moda", Didot, "Bodoni MT", serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --max:1180px;
  --rail-w:72px;

  --deboss:0 1px 0 rgba(246,242,234,.06), 0 -1px 1px rgba(0,0,0,.85);
}

*{ margin:0; padding:0; box-sizing:border-box }
html{ background:var(--ink-0); -webkit-text-size-adjust:100%; scrollbar-color:#39414F transparent }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }

body{
  background:var(--ink-0);
  color:var(--body);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the paper: a whisper of grain so the black reads as material */
body::after{
  content:""; position:fixed; inset:0; z-index:90;
  pointer-events:none; opacity:.10; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the lamp: one warm light for the whole building; JS carries it */
.lamp{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(720px 540px at var(--lx,62%) var(--ly,32%),
    rgba(200,169,106,.075), rgba(200,169,106,.02) 55%, transparent 72%);
}

::selection{ background:var(--brass); color:#080D14 }

img,svg{ max-width:100%; display:block }
a{ color:var(--body) }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(24px,7vw,96px); position:relative }

/* ---------- the ledger's spine: fixed left rail ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:40;
  display:none;
}
@media (min-width:1120px){ .js .rail{ display:block } }
.rail::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(var(--rail-w) - 1px);
  width:1px; background:var(--rule);
}
.rail-tick{
  position:absolute; left:calc(var(--rail-w) - 8px); top:12vh;
  width:15px; height:2px; background:var(--brass);
  transition:top .18s ease-out;
}
.rail-index{
  position:absolute; left:0; top:16vh; bottom:16vh; width:100%;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
}
.rail-index a{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--mono-ink); text-decoration:none; padding:4px 8px;
}
.rail-index a:hover{ color:var(--body) }
.rail-index a.active{ color:var(--brass) }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--cream); text-shadow:var(--deboss) }
h1{ font-size:clamp(38px,4.6vw,60px); line-height:1.1; letter-spacing:.002em; max-width:21ch; text-wrap:balance }
.kicker{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:34px; height:1px; background:var(--brass); opacity:.6 }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(8,13,20,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
header.site.scrolled{ border-bottom-color:var(--rule) }
.head-inner{ display:flex; align-items:center; gap:18px; padding-top:14px; padding-bottom:14px }
.mark{ display:flex; align-items:center; gap:12px; text-decoration:none }
.mark .mono{ flex:none; display:flex; width:40px; height:40px }
.mark .name{
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream); white-space:nowrap;
}
@media (max-width:349px){ .mark .name{ display:none } }
nav.site-nav{ display:flex; gap:clamp(10px,1.8vw,24px); align-items:center; margin-left:auto }
nav.site-nav a{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mono-ink); text-decoration:none;
  padding:6px 2px; border-bottom:1px solid transparent;
}
nav.site-nav a:hover{ color:var(--body); border-bottom-color:var(--rule-hi) }
nav.site-nav a.active{ color:var(--brass) }
nav.site-nav a.cta{
  border:1px solid var(--rule-hi); color:var(--brass);
  padding:8px 14px; border-radius:2px;
}
nav.site-nav a.cta:hover{ background:rgba(200,169,106,.07); transform:translateY(1px); color:var(--brass) }
.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--rule-hi);
  color:var(--body); font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:9px 12px; cursor:pointer; border-radius:2px;
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:clip; padding:clamp(72px,11vh,140px) 0 clamp(56px,8vh,104px) }
.hero .wrap{ z-index:1 }

.clerk{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mono-ink);
  margin-bottom:30px;
}
.clerk .entry-no{ color:var(--brass) }
.clerk time{ font-variant-numeric:tabular-nums; color:inherit; font-style:normal }

/* the top hairline draws itself in */
.hero .toprule{
  position:absolute; left:0; right:0; top:clamp(48px,8vh,96px); height:1px;
  background:var(--rule-hi); transform-origin:left center;
}
.js .hero .toprule{ transform:scaleX(0); animation:ruleDraw .6s cubic-bezier(.16,1,.3,1) .1s forwards }
@keyframes ruleDraw{ to{ transform:scaleX(1) } }

.hero .kicker{ margin-bottom:30px }
.hero h1{ margin:0 0 4px }
.js .hero h1{ opacity:0; transform:translateY(1px); animation:setType .45s ease-out .5s forwards }
@keyframes setType{ to{ opacity:1; transform:none } }

.ledger-rule{ height:1px; background:var(--rule-quiet); margin:26px 0 22px; max-width:640px; transform-origin:left center }
.js .ledger-rule{ transform:scaleX(0); animation:ruleDraw .7s cubic-bezier(.16,1,.3,1) .9s forwards }

.stand{ font-size:17px; max-width:56ch; color:var(--body) }
.js .hero .stand,.js .hero .cta-row,.js .hero .cred-row{ opacity:0; animation:setType .5s ease-out forwards }
.js .hero .stand{ animation-delay:1.05s }
.js .hero .cta-row{ animation-delay:1.2s }
.js .hero .cred-row{ animation-delay:1.35s }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }
.btn{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; border-radius:2px;
  padding:14px 22px; transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn.primary{ border:1px solid var(--brass); color:var(--brass) }
.btn.primary:hover{ background:rgba(200,169,106,.08); transform:translateY(1px) }
.btn.ghost{ border:1px solid var(--rule-quiet); color:var(--body) }
.btn.ghost:hover{ border-color:var(--rule-hi); transform:translateY(1px) }
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible{
  outline:1px solid var(--brass); outline-offset:3px;
}

/* the funnel, kept as ledger lines */
.cred-row{ margin-top:40px; max-width:560px; display:grid; gap:10px }
.cred-row span{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mono-ink);
}
.cred-row span::after{
  content:""; flex:1; order:2; border-bottom:1px dotted var(--rule);
  transform:translateY(-3px); min-width:40px;
}
.cred-row span:first-child{ color:var(--body) }

/* the seal inscribes at right */
.hero-seal{
  position:absolute; right:clamp(2%,4vw,6%); top:50%; transform:translateY(-54%);
  width:min(32vw,352px); z-index:1; pointer-events:none;
}
.hero-seal svg{ width:100%; height:100%; overflow:visible }
.hero-seal .ring{ stroke-dasharray:566; stroke-dashoffset:0 }
.js .hero-seal .ring{ stroke-dashoffset:566; animation:ringDraw 1.2s cubic-bezier(.4,0,.2,1) 1.1s forwards }
@keyframes ringDraw{ to{ stroke-dashoffset:0 } }
.hero-seal .tick{ transform-origin:120px 120px }
.js .hero-seal .tick{ opacity:0; animation:tickStamp .18s ease-out forwards }
.js .hero-seal .tick:nth-of-type(1){ animation-delay:2.2s }
.js .hero-seal .tick:nth-of-type(2){ animation-delay:2.34s }
.js .hero-seal .tick:nth-of-type(3){ animation-delay:2.48s }
@keyframes tickStamp{ 0%{ opacity:0; transform:scale(1.15) } 100%{ opacity:1; transform:scale(1) } }
.hero-seal .letter{ opacity:1 }
.js .hero-seal .letter{ opacity:0; animation:setType .7s ease-out 2.6s forwards }
/* the foil catch: a masked specular that shifts with the pointer (arrives after the letters) */
.js .hero-seal .foil{ opacity:0; animation:foilIn .8s ease-out 3.1s forwards }
@keyframes foilIn{ to{ opacity:.9 } }
.hero-seal .foil{
  position:absolute; left:0; right:0; top:0; aspect-ratio:1; pointer-events:none; opacity:.9;
  background:linear-gradient(115deg, transparent calc(var(--foil,50%) - 12%),
    rgba(234,211,148,.30) var(--foil,50%), transparent calc(var(--foil,50%) + 12%));
  -webkit-mask:var(--seal-mask) center/contain no-repeat;
          mask:var(--seal-mask) center/contain no-repeat;
  transition:opacity .3s ease;
}

/* ---------- sections as entries ---------- */
section.block{ position:relative; padding:clamp(64px,9vh,110px) 0 0 }
section.block[id]{ scroll-margin-top:72px }
section.block .wrap.sec{ padding-bottom:clamp(56px,8vh,96px) }
/* every entry closes with the double total-rule */
section.block .wrap.sec::after{
  content:""; display:block; margin-top:clamp(44px,6vh,72px);
  border-top:1px solid var(--rule-hi); border-bottom:1px solid var(--rule);
  height:4px;
}
section.block.last .wrap.sec::after{ display:none }

.sec-label{
  position:relative;
  display:flex; align-items:baseline; gap:18px; margin-bottom:34px;
  border-bottom:1px solid var(--rule); padding-bottom:14px;
}
.sec-label::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--rule-hi); transform:scaleX(0); transform-origin:left center;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .15s;
}
.js .sec-label.in::after{ transform:scaleX(1) }
@media (prefers-reduced-motion:reduce){ .sec-label::after{ display:none } }
.sec-label .num{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
.sec-label h2{
  font-size:clamp(20px,2.2vw,25px); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500;
}
.sec-label .folio{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--mono-dim); font-variant-numeric:tabular-nums;
}
.sec-body h3{ font-size:clamp(24px,2.8vw,34px); line-height:1.18; max-width:24ch; margin-bottom:22px; text-wrap:balance }
.step h4,.person h4,.vert h4{ text-wrap:balance }
.stand,.sec-body>p,.band .attr,.contact-note{ text-wrap:pretty }
.sec-body>p{ max-width:62ch; margin-bottom:16px }

/* entrance: quiet settle, hairlines draw */
.js .reveal{ opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease }
.js .reveal.in{ opacity:1; transform:none }
.js .reveal.d1{ transition-delay:60ms }
.js .reveal.d2{ transition-delay:120ms }

/* ---------- 01: the certificate ---------- */
.cert{
  position:relative; margin-top:34px; max-width:720px;
  background:var(--panel);
  border:1px solid var(--rule); outline:1px solid var(--rule-quiet); outline-offset:4px;
  padding:26px clamp(20px,3vw,34px) 24px;
}
.cert .corner{ position:absolute; width:8px; height:8px; border-color:var(--brass); border-style:solid; border-width:0; opacity:.8 }
.cert .corner.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px }
.cert .corner.tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px }
.cert .corner.bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px }
.cert .corner.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px }
.ship-title{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:18px;
}
.ship-flow{ list-style:none }
.ship-flow li{
  display:grid; grid-template-columns:minmax(120px,150px) minmax(90px,110px) 1fr;
  gap:8px 18px; align-items:baseline;
  padding:13px 2px; border-top:1px solid var(--rule-quiet);
}
.ship-flow li:first-child{ border-top:0 }
.ship-flow li:hover{ border-top-color:var(--rule-hi) }
.ship-flow .k{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mono-ink);
}
.ship-flow strong{ font-family:var(--serif); font-weight:500; font-size:19px; color:var(--cream); text-shadow:var(--deboss) }
.ship-flow em{ font-style:normal; font-size:14px; color:var(--body) }

/* ---------- 02: the tariff page ---------- */
.vert-list{ margin-top:8px }
.vert{
  display:grid; grid-template-columns:minmax(52px,64px) minmax(180px,240px) 1fr;
  gap:8px 24px; align-items:baseline;
  padding:22px 4px; border-top:1px solid var(--rule);
  transition:border-color .2s ease, background .2s ease;
}
.vert:last-child{ border-bottom:1px solid var(--rule) }
.vert:hover{ border-top-color:var(--rule-hi); background:rgba(246,242,234,.015) }
.vert .vi{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  color:var(--brass-deep); font-variant-numeric:tabular-nums;
}
.vert:hover .vi{ color:var(--brass) }
.vert h4{ font-size:21px; font-weight:500 }
.vert p{ font-size:15px; max-width:56ch }

/* ---------- 03: three postings on one thread ---------- */
.steps{ position:relative; margin-top:10px; max-width:680px }
.steps::before{
  content:""; position:absolute; left:15px; top:16px; bottom:16px; width:1px;
  background:var(--rule);
}
.step{ position:relative; display:flex; gap:26px; padding:20px 0 20px }
.step .s-num{
  position:relative; z-index:1; flex:none;
  width:31px; height:31px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--brass); background:var(--ink-0); border:1px solid var(--rule-hi);
}
.js .step .s-num{ transform:scale(1.12); opacity:0; transition:transform .12s ease-out, opacity .12s ease-out }
.js .step.in .s-num{ transform:scale(1); opacity:1 }
.step h4{ font-size:20px; margin-bottom:8px }
.step h4 span{ color:var(--body); font-size:15px; font-family:var(--sans) }
.step p{ font-size:15px; max-width:54ch }
.step em{ font-family:var(--serif); font-style:italic; color:var(--cream) }

/* ---------- the promise band ---------- */
.band{ position:relative; background:var(--ink-1); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:clip; margin-top:clamp(64px,9vh,110px) }
.band-inner{ padding:clamp(56px,8vh,88px) 0 }
.band blockquote{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(24px,3vw,36px); line-height:1.25; color:var(--cream);
  max-width:26ch; margin:18px 0 14px; text-shadow:var(--deboss); text-wrap:balance;
}
.band .attr{ font-size:15px; color:var(--body); max-width:56ch }
.band-deco{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:min(38vw,360px); height:min(38vw,360px); pointer-events:none;
}

/* ---------- 04: the signatories ---------- */
.people{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px }
.person{
  background:var(--panel); border:1px solid var(--rule);
  padding:26px 26px 24px; transition:border-color .2s ease, transform .12s ease;
}
.person:hover{ border-color:var(--rule-hi); transform:translateY(1px) }
.plate{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border:1px solid var(--rule-hi);
  font-family:var(--serif); font-weight:500; font-size:20px; color:var(--brass);
  letter-spacing:.06em; margin-bottom:18px; text-shadow:var(--deboss);
}
.person h4{ font-size:22px; margin-bottom:4px }
.person .role{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mono-ink); margin-bottom:14px;
}
.person p{ font-size:14.5px }
.vert-note{ margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--mono-ink) }

/* ---------- 05: the register index ---------- */
.faq{ margin-top:8px; counter-reset:faq }
.faq details{ border-top:1px solid var(--rule) }
.faq details:last-child{ border-bottom:1px solid var(--rule) }
.faq summary{
  list-style:none; cursor:pointer; counter-increment:faq;
  display:flex; align-items:baseline; gap:14px;
  padding:17px 2px; font-weight:500; font-size:16.5px; color:var(--body);
  transition:color .15s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:counter(faq,decimal-leading-zero);
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.12em;
  color:var(--mono-dim); font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.faq summary::after{
  content:""; flex:1; order:2; border-bottom:1px dotted var(--rule);
  transform:translateY(-3px); min-width:24px; margin-left:12px;
}
.faq summary:hover{ color:var(--cream) }
.faq details[open] summary{ color:var(--cream) }
.faq details[open] summary::before{ color:var(--brass) }
.faq .a{ overflow:hidden }
.faq .a p{
  padding:2px 0 20px 34px; font-size:15px; max-width:60ch;
  border-left:1px solid var(--rule-hi); margin-left:5px; padding-left:28px;
}
.faq .a a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--rule-hi) }
.faq .a a:hover{ border-bottom-color:var(--brass) }

/* ---------- 06: contact — the signature page ---------- */
section.block.deep{ background:var(--ink-1); border-top:1px solid var(--rule); margin-top:clamp(64px,9vh,110px); padding-top:clamp(56px,8vh,88px) }
section.block.deep .wrap.sec::after{ display:none }
.contact-line a{
  overflow-wrap:anywhere;
  font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); color:var(--cream);
  text-decoration:none; border-bottom:1px solid var(--rule-hi); padding-bottom:2px;
  text-shadow:var(--deboss);
}
.contact-line a:hover{ border-bottom-color:var(--brass) }
.contact-note{ margin-top:18px; max-width:58ch; font-size:15px }

/* the entry form: ledger lines, not boxes (JS-only path; the email link above serves everyone else) */
.entry-form{ display:none }
.js .entry-form{ display:block; margin-top:40px; max-width:640px }
.entry-form .ef-grid{ display:grid; gap:26px }
.entry-form label{ display:block }
.entry-form .lab{
  display:block; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mono-ink); margin-bottom:6px;
}
.entry-form input{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule-quiet);
  color:var(--cream); font-family:var(--sans); font-size:16px; padding:6px 2px 8px;
  border-radius:0; transition:border-color .2s ease;
}
.entry-form input:focus{ border-bottom-color:var(--rule-hi); outline:none }
.entry-form button{
  margin-top:30px; cursor:pointer; background:none;
  border:1px solid var(--brass); color:var(--brass); border-radius:2px;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; padding:14px 24px;
  transition:transform .12s ease, background .12s ease;
}
.entry-form button:hover{ background:rgba(200,169,106,.08); transform:translateY(1px) }
.ef-note{ margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--mono-ink) }

/* the posting: your inquiry becomes an entry */
.posting{ margin-top:34px; max-width:640px; display:none }
.posting.show{ display:block }
.posting .prow{
  display:flex; align-items:center; gap:18px;
}
.posting .pline{
  flex:1; display:flex; align-items:baseline; gap:12px; min-width:0; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--body); font-variant-numeric:tabular-nums;
}
.posting .pline::after{
  content:""; flex:1; order:2; border-bottom:1px dotted var(--rule); transform:translateY(-3px); min-width:30px;
}
.posting .pstate{ order:3; color:var(--brass) }
.posting .pseal{ position:relative; flex:none }
.posting .pseal::before{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--wax) 62%, transparent), transparent 70%);
}
.posting .pseal svg{ position:relative }
.js .posting.show .pseal{ animation:waxStamp .16s ease-out .5s backwards }
@keyframes waxStamp{ 0%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
.posting .ptotal{ margin-top:16px; border-top:1px solid var(--rule-hi); border-bottom:1px solid var(--rule); height:4px; transform-origin:left center }
.js .posting.show .ptotal{ animation:ruleDraw .5s cubic-bezier(.16,1,.3,1) .2s backwards }
.posting .pnote{ margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--mono-ink) }
.posting .pactions{ margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--mono-ink) }
.posting .pactions a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--rule-hi) }
.posting .pactions a:hover{ border-bottom-color:var(--brass) }

/* ---------- footer ---------- */
footer.site{ background:var(--ink-1); border-top:1px solid var(--rule); position:relative; z-index:1 }
.foot-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;
  padding-top:56px; padding-bottom:44px;
}
.foot-tag{ margin-top:16px; font-size:14px; max-width:38ch }
.colophon{ margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--mono-ink); max-width:44ch }
.f-lab{
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mono-ink); margin-bottom:14px;
}
.foot-nav{ display:flex; flex-direction:column; gap:9px }
.foot-nav a,.foot-contact a{ overflow-wrap:anywhere; color:var(--body); text-decoration:none; font-size:14px; border-bottom:1px solid transparent; width:fit-content }
.foot-nav a:hover,.foot-contact a:hover{ border-bottom-color:var(--rule-hi) }
.foot-contact p{ margin-top:10px; font-size:13.5px; color:var(--mono-ink) }
.foot-inner{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  border-top:1px solid var(--rule-quiet);
  padding-top:20px; padding-bottom:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mono-ink);
}
.foot-links{ display:flex; gap:18px }
.foot-links a{ color:var(--mono-ink); text-decoration:none }
.foot-links a:hover{ color:var(--body) }

/* ---------- legal pages ---------- */
header:not(.site) .head-inner{ border-bottom:1px solid var(--rule) }
header:not(.site) nav{ margin-left:auto; display:flex; gap:20px }
header:not(.site) nav a{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mono-ink); text-decoration:none;
}
header:not(.site) nav a:hover{ color:var(--body) }
.legal{ padding-top:64px; padding-bottom:80px; max-width:840px }
.legal h1{ font-size:clamp(30px,4vw,42px); margin-bottom:10px }
.legal .updated{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:36px;
}
.legal h2{
  font-size:15px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  margin:38px 0 14px; padding-top:18px; border-top:1px solid var(--rule);
}
.legal p,.legal li{ font-size:15px; max-width:66ch; margin-bottom:14px }
.legal ul{ padding-left:22px }
.legal a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--rule-hi) }
.legal a:hover{ border-bottom-color:var(--brass) }

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--panel-2); color:var(--cream); padding:12px 18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
}
.skip:focus{ left:12px; top:12px }

/* ---------- small screens ---------- */
@media (max-width:1060px){
  .hero-seal{ position:static; transform:none; width:172px; height:172px; margin:48px 0 0 }
  .hero-seal .foil{ display:none }
}
@media (max-width:880px){
  .foot-top{ grid-template-columns:1fr; gap:30px }
  .people{ grid-template-columns:1fr }
  .hero-seal{ position:static; transform:none; width:172px; height:172px; margin:48px 0 0 }
  .hero-seal .foil{ display:none }
  .vert{ grid-template-columns:minmax(44px,52px) 1fr }
  .vert p{ grid-column:2 }
  .ship-flow li{ grid-template-columns:1fr; gap:3px }
}
@media (max-width:1000px){
  nav.site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--ink-1); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; gap:0; padding:10px 24px 18px;
  }
  nav.site-nav.open{ display:flex }
  nav.site-nav a{ padding:12px 2px; width:100% }
  nav.site-nav a.cta{ border:0; padding:12px 2px }
  .menu-btn{ display:block }
  .sec-label{ flex-wrap:wrap; gap:8px 14px }
  .sec-label .folio{ display:none }
  .band-deco{ opacity:.4 }
}
@media (max-width:520px){
  .step h4 span{ display:block; margin-top:2px; line-height:1.4 }
}
@media (max-width:480px){
  .cred-row span::after{ min-width:0 }
  .cred-row span{ letter-spacing:.1em }
}

/* ---------- reduced motion: the page arrives settled ---------- */
@media (prefers-reduced-motion:reduce){
  .js .hero-seal .foil{ animation:none; opacity:.9 }
  .js .hero .toprule,.js .ledger-rule{ animation:none; transform:none }
  .js .hero h1,.js .hero .stand,.js .hero .cta-row,.js .hero .cred-row{ animation:none; opacity:1; transform:none }
  .js .hero-seal .ring{ animation:none; stroke-dashoffset:0 }
  .js .hero-seal .tick,.js .hero-seal .letter{ animation:none; opacity:1; transform:none }
  .js .reveal{ opacity:1; transform:none; transition:none }
  .js .step .s-num{ opacity:1; transform:none }
  .rail-tick{ transition:none }
  .btn,.person,.entry-form button{ transition:none }
  .js .posting.show .pseal,.js .posting.show .ptotal{ animation:none }
}


/* ---------- the jewel: the inscribed seal becomes machined metal ---------- */
.hero .hero-gl{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; opacity:0; transition:opacity 1.6s ease;
  z-index:1;
}
html.gl .hero .hero-gl{ opacity:1 }
/* the engraving yields to the metal; the caption stays */
.hero-seal svg,.hero-seal .foil{ transition:opacity 1.2s ease }
html.gl-seal .hero-seal svg{ opacity:0 }
html.gl-seal .hero-seal .foil{ animation:none; opacity:0 }