:root{
  --paper:#FCFBF7;
  --paper-dim:#F4F0E6;
  --ink:#191613;
  --ink-2:#221E1A;
  --cream:#EFE9DB;
  --cream-soft:#C9C2B2;
  --ink-soft:#57514A;
  --rule:#E3DFD5;
  --rule-dark:#3A342D;
  --red:#C2311C;
  --red-deep:#9C2413;
  --s1:#F9F6EE;--s2:#F1EBDB;--s3:#E7DFC9;--s4:#DACFB2;
  --display:'Libre Caslon Display','Iowan Old Style',Georgia,serif;
  --body:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.155rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ================= chrome ================= */
.bar{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.4rem clamp(1.25rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.32em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.wordmark b{color:var(--red);font-weight:500}
.bar-link{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  color:var(--red);text-decoration:none;white-space:nowrap;
}
.bar-link:hover{color:var(--red-deep)}
@media (max-width:28rem){
  .bar{padding-left:1.05rem;padding-right:1.05rem;gap:.7rem}
  .wordmark{font-size:.68rem;letter-spacing:.2em}
  .bar-link{font-size:.63rem;letter-spacing:.13em}
}
@media (max-width:21rem){
  .wordmark{font-size:.62rem;letter-spacing:.14em}
  .bar-link{font-size:.58rem;letter-spacing:.08em}
}

/* ================= structure ================= */
.page{display:block}
.col{max-width:44.5rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem)}
.col-wide{max-width:71rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem)}
section{padding:5.4rem 0 1.6rem}

.tick{position:relative;text-align:center;padding:3.6rem 0 0;user-select:none}
.tick::before{content:"";position:absolute;left:0;right:0;top:calc(3.6rem + .62em);border-top:1px solid var(--rule)}
.tick span{
  position:relative;background:var(--paper);padding:0 1.2rem;
  font-family:var(--mono);color:var(--red);font-size:1.05rem;
}

.eyebrow{
  display:flex;align-items:center;gap:1.1rem;
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.34em;color:var(--ink);margin-bottom:2.8rem;
  white-space:nowrap;
}
.eyebrow .rl{flex:1;border-top:1px solid var(--rule);min-width:2rem}
.eyebrow b{color:var(--red);font-weight:500;font-size:1.05rem;letter-spacing:0}
.eyebrow .sheet{font-size:.62rem;letter-spacing:.28em;color:var(--ink-soft)}
@media (max-width:44rem){
  .eyebrow{letter-spacing:.22em;gap:.8rem}
  .eyebrow .sheet{display:none}
  .eyebrow .rl{min-width:.5rem}
}
@media (max-width:26rem){
  .eyebrow{font-size:.68rem;letter-spacing:.14em;white-space:normal}
  .eyebrow .rl{display:none}
}
.sheet-solo{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;
  color:var(--ink-soft);text-align:right;margin-bottom:2.4rem;
}

p{margin-bottom:1.35rem;max-width:66ch}
.lede{font-size:1.28rem;line-height:1.6}
.strong-line{font-weight:700}
.disp-b{font-family:var(--body);font-weight:700;letter-spacing:0}
.disp{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.28;
  margin:2.3rem 0 1.6rem;max-width:24ch;text-wrap:balance;
}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance}
h2{font-size:clamp(2rem,5vw,3rem);line-height:1.13;margin-bottom:1.8rem;max-width:20ch;letter-spacing:-.01em}
.red{color:var(--red)}

/* ================= hero ================= */
.hero{position:relative;overflow:hidden;padding:clamp(4.5rem,10vh,7.5rem) 0 4.5rem}
.hero .col{position:relative;z-index:2}
#contours,#contours2,#contours3{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-x{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(-6rem,2vw,4rem);top:50%;transform:translateY(-50%);
  width:clamp(16rem,38vw,30rem);height:clamp(16rem,38vw,30rem);
}
.hero-x line{stroke:var(--ink);stroke-width:.35;opacity:.4}
.hero-x .xr{stroke:var(--red);stroke-width:2;opacity:1;stroke-linecap:square}
@media (max-width:47rem){
  .hero-x{display:none}
}
.hero h1{
  font-size:clamp(2.9rem,7.4vw,5rem);line-height:1.06;
  max-width:14ch;margin-bottom:1.3rem;letter-spacing:-.012em;
}
.hero .thesis{
  font-family:var(--body);font-style:italic;font-size:clamp(1.25rem,2.8vw,1.62rem);
  line-height:1.42;color:var(--ink-soft);max-width:30ch;margin-bottom:2.6rem;
}
.hero .find{font-size:1.28rem;margin-bottom:2.2rem}
.cred{color:var(--ink-soft);max-width:52ch}
.cred b{color:var(--ink);font-weight:700}
.price-line{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;
  margin:2.4rem 0 2.1rem;color:var(--ink);
}

/* ================= buttons ================= */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.24em;text-decoration:none;
  color:var(--paper);background:var(--red);
  padding:1.05rem 1.7rem;border:1px solid var(--red);
  transition:background .18s,border-color .18s;
}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* ================= reveal ================= */
.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ================= WHAT I SEE : the survey ================= */
.wis-grid{display:grid;grid-template-columns:minmax(0,40ch) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.wg-c{grid-column:1}
.wis-fig{grid-column:2;grid-row:1 / span 3;position:sticky;top:4.5rem;align-self:start}
.wis-end{border-top:1px solid var(--rule);margin-top:3rem;padding-top:2.2rem}
.wis-end p{max-width:66ch}
.wis-end p:last-child{margin-bottom:0}
.wis-fig svg{width:100%;height:auto;display:block}
.wis-cap{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  color:var(--ink-soft);margin-top:1rem;text-align:center;
}
.isee p{padding-left:1.4rem;border-left:1px solid var(--rule)}
/* map elements */
.mp .route{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 5;opacity:0;transition:opacity .9s ease}
.mp .link{fill:none;stroke:var(--ink-soft);stroke-width:.95;stroke-dasharray:2 5;opacity:0;transition:opacity .9s ease}
.mp .node{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box;transition:opacity .7s ease,transform .7s ease}
.mp .nlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;fill:var(--ink);
  paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.mp .ncirc{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.mp .cx{stroke:var(--red);stroke-width:3.4;stroke-linecap:square}
.mp .ring{fill:none;stroke:var(--ink);opacity:.12}
.mp .corner{stroke:var(--ink);stroke-width:1;opacity:.45}
.wis.st1 .g1,.wis.st2 .g2,.wis.st3 .g3,.wis.st4 .g4{opacity:1}
.wis.st1 .g1 .node,.wis.st2 .g2 .node,.wis.st3 .g3 .node,.wis.st4 .g4 .node{opacity:1;transform:none}
.wis.st1 .g1 .route,.wis.st2 .g2 .route,.wis.st3 .g3 .route,.wis.st4 .g4 .route{opacity:.85}
.wis.st5 .link{opacity:.7}
@media (max-width:60rem){
  .wis-grid{grid-template-columns:1fr}
  .wg-c{grid-column:auto}
  .wis-fig{grid-column:auto;grid-row:auto;position:static;max-width:26rem;margin:0 auto 2.5rem}
}

/* ================= portrait : field record ================= */
.who{display:grid;grid-template-columns:minmax(0,1fr) clamp(17rem,26vw,23rem);gap:clamp(2.4rem,4vw,4rem);align-items:start}
.who-rest{margin-top:2.1rem}
.who-line{max-width:none;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.2;margin:2.6rem 0 0}
.dossier{position:relative;padding:0 0 2.2rem}
.dossier img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.02)}
.dossier .corner{position:absolute;width:14px;height:14px;border-color:var(--ink)}
.dossier .c1{top:-7px;left:-7px;border-top:1px solid;border-left:1px solid}
.dossier .c2{top:-7px;right:-7px;border-top:1px solid;border-right:1px solid}
.dossier .c3{bottom:calc(2.2rem - 7px);left:-7px;border-bottom:1px solid;border-left:1px solid}
.dossier .c4{bottom:calc(2.2rem - 7px);right:-7px;border-bottom:1px solid;border-right:1px solid}
.dossier .marg{
  position:absolute;top:0;right:-2rem;height:calc(100% - 2.2rem);
  writing-mode:vertical-rl;display:flex;align-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.34em;color:var(--ink-soft);
}
.dossier .stamp{
  position:absolute;right:-1.1rem;bottom:3.4rem;width:5.2rem;height:5.2rem;
  border:1.5px solid var(--red);border-radius:50%;
  display:grid;place-items:center;transform:rotate(-11deg);
  color:var(--red);font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  background:rgba(252,251,247,.82);
}
.dossier .stamp::after{content:"";position:absolute;inset:5px;border:1px solid var(--red);border-radius:50%}
.dossier .stamp .sx{font-size:1.15rem;letter-spacing:0;line-height:1}
.dossier .cap{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;
  color:var(--ink-soft);margin-top:.9rem;
}
.dossier .cap b{color:var(--red);font-weight:500;margin-right:.6em}
@media (max-width:47rem){
  .who{grid-template-columns:1fr}
  .dossier{max-width:19rem;margin-right:1.6rem}
  .dossier .marg{right:-1.5rem}
  .dossier .stamp{right:-.8rem}
}

/* ================= dark chapters ================= */
.chapter{background:var(--ink);color:var(--cream);padding:6.5rem 0 5.5rem;position:relative;overflow:hidden}
.chapter p{color:var(--cream)}
.chapter .disp,.chapter h2{color:var(--paper)}
.chapter .eyebrow{color:var(--cream)}
.chapter .eyebrow .rl{border-color:var(--rule-dark)}
.chapter .eyebrow .sheet{color:var(--cream-soft)}
.chapter .strong-line{color:var(--paper)}
.warn{border-top:1px dashed var(--red);border-bottom:1px dashed var(--red)}
.warn .bnd{position:absolute;left:0;right:0;border-top:1px dashed rgba(194,49,28,.35)}
/* deed document */
.deedoc{position:relative;border:1px solid var(--rule-dark);padding:clamp(2.2rem,5vw,4rem);margin-top:.5rem}
.deedoc::after{content:"";position:absolute;inset:7px;border:1px solid var(--rule-dark);pointer-events:none}
.deedoc .dcor{position:absolute;width:12px;height:12px;border-color:var(--cream-soft);opacity:.7}
.deedoc .d1{top:-6px;left:-6px;border-top:1px solid;border-left:1px solid}
.deedoc .d2{top:-6px;right:-6px;border-top:1px solid;border-right:1px solid}
.deedoc .d3{bottom:-6px;left:-6px;border-bottom:1px solid;border-left:1px solid}
.deedoc .d4{bottom:-6px;right:-6px;border-bottom:1px solid;border-right:1px solid}
.deedoc .seal{
  position:absolute;top:-5.2rem;right:clamp(.5rem,4vw,2.6rem);width:6.4rem;height:6.4rem;
  border:1.5px solid var(--red);border-radius:50%;
  display:grid;place-items:center;transform:rotate(9deg);
  color:var(--red);font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  background:var(--ink);z-index:2;
}
.deedoc .seal::after{content:"";position:absolute;inset:6px;border:1px solid var(--red);border-radius:50%}
.deedoc .seal .sx{font-size:1.3rem;line-height:1;letter-spacing:0}
.deed-col{max-width:49.5rem}
.deed .eyebrow .sheet,.invest .eyebrow .sheet{display:none}
.deed h2{max-width:none;font-size:clamp(2.05rem,6vw,3.6rem)}
.deed h2 .red{white-space:nowrap}
@media (max-width:27rem){.deed h2 .red{white-space:normal}}

/* ================= david ================= */
.pull{
  font-family:var(--display);font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.32;max-width:24ch;margin:2.8rem 0 1.2rem;text-wrap:balance;
}
.attr{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;color:var(--ink-soft)}
.attr b{color:var(--red);font-weight:500;margin-right:.55em}

/* ---------- proof: the quote sits on the dig site ---------- */
.proof{overflow-x:clip}
.quote-dig{position:relative;padding:1.2rem 0 .4rem}
.qd{position:absolute;top:50%;right:-9rem;transform:translateY(-54%);width:24rem;height:24rem;pointer-events:none}
.qd circle{fill:none;stroke:var(--ink);opacity:.1}
.qd .qx{stroke:var(--red);stroke-width:2.6;stroke-linecap:square;opacity:.9}
.quote-dig .pull{position:relative;margin-top:1.6rem}
.quote-dig .attr{position:relative}
@media (max-width:47rem){.qd{right:-13rem;opacity:.8}}

/* ================= the ladder ================= */
.door-head h2{max-width:none;font-size:clamp(2.2rem,5.5vw,3.3rem);margin-bottom:1.1rem}
.door-sub{
  font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.45rem);
  color:var(--ink-soft);margin-bottom:1.4rem;
}
.apply-note{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--ink-soft);
  margin-bottom:3.2rem;
}
.rung{border-top:1px solid var(--rule);padding:2.6rem 0;position:relative}
.rung:last-of-type{border-bottom:1px solid var(--rule)}
.rung.front{
  border:1px solid var(--ink);padding:2.6rem clamp(1.4rem,4vw,2.4rem);
  margin-bottom:2.6rem;
}
.rung-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.rung h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,3vw,1.7rem)}
.rung.front h3 .xr-mark{color:var(--red)}
.price{
  font-family:var(--mono);font-size:.92rem;font-weight:500;
  letter-spacing:.05em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rung.front .price{color:var(--red)}
.rung .kicker{font-style:italic;color:var(--ink-soft);margin-bottom:1.2rem}
.rung .btn{margin-top:1rem}
.parcel{position:absolute;right:.4rem;top:5.6rem;width:7rem;opacity:.9;pointer-events:none}
.rung.r2 .parcel{width:8.6rem}
.rung.r3 .parcel{width:10.6rem;top:5.2rem}
.rung.r4 .parcel{width:14rem;right:-5.6rem;top:9.5rem}
.door-sec{overflow-x:clip}
.rung.r3 h3{font-size:clamp(1.45rem,3.2vw,1.85rem)}
.rung.r4 h3{font-size:clamp(1.55rem,3.5vw,2.05rem)}
.rung.r4{padding:3.2rem 0 3rem}
.rung.front .parcel{right:clamp(1.4rem,4vw,2.4rem);top:6rem}
.parcel svg{width:100%;height:auto;display:block}
.parcel .pl{fill:none;stroke:var(--ink);stroke-width:1;opacity:.55}
.parcel .pd{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:2 4;opacity:.45}
.parcel .ph{stroke:var(--ink);stroke-width:.6;opacity:.3}
.parcel .px{stroke:var(--red);stroke-width:2;stroke-linecap:square}
@media (min-width:55rem){
  .rung{padding-right:11.5rem}
  .rung.front{padding-right:12.5rem}
  .rung.r4{padding-right:11.5rem}
}
@media (max-width:55rem){.parcel{display:none}.rung p{max-width:66ch}}

/* ================= MINE : strata ================= */
.mine{margin:3rem 0 2.6rem;border:1px solid var(--rule)}
.mine-row{
  padding:1.9rem clamp(1.2rem,3vw,2.2rem);
  display:grid;grid-template-columns:4.6rem minmax(0,1fr) 6.5rem;gap:1.5rem;align-items:start;
}
.mine-row.m1{background:var(--s1)}
.mine-row.m2{background:var(--s2)}
.mine-row.m3{background:var(--s3)}
.mine-row.m4{background:var(--s4);border-bottom:3px solid var(--ink)}
.mine-letter{
  font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--red);
  text-align:center;padding-top:.1rem;
}
.mine-row h4{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.26em;margin-bottom:.55rem}
.mine-row p{margin-bottom:0}
.mine-depth{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;color:var(--ink-soft);
  text-align:right;align-self:center;
}
@media (max-width:40rem){
  .mine-row{grid-template-columns:2.8rem 1fr}
  .mine-letter{font-size:2.2rem}
  .mine-depth{display:none}
}

/* ---------- after the dig routes ---------- */
.routes{margin:2.2rem 0 1.6rem}
.route-row{border-top:1px solid var(--rule);padding:1.6rem 0;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1.6rem;align-items:baseline}
.route-row:last-child{border-bottom:1px solid var(--rule)}
.route-row p{margin-bottom:0}
.rmark{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.2em;color:var(--red);white-space:nowrap}
@media (max-width:40rem){.route-row{grid-template-columns:1fr;gap:.5rem}}

/* ================= walkaway ================= */
.walk{list-style:none;margin:1.8rem 0 1rem}
.walk li{padding:1rem 0 1rem 1.9rem;border-top:1px solid var(--rule);position:relative;max-width:66ch}
.walk li:last-child{border-bottom:1px solid var(--rule)}
.walk li::before{content:"\2715";position:absolute;left:.15rem;color:var(--red);font-family:var(--mono);font-size:.8rem;top:1.3rem}
.walk b{font-weight:700}

/* ================= investment : the signing ================= */
.invest{padding-bottom:5.5rem}
.signing{position:relative;border:1px solid var(--ink);padding:clamp(2.4rem,6vw,4.2rem) clamp(1.6rem,5vw,3.6rem) clamp(2.2rem,5vw,3.4rem);margin-top:1rem}
.signing::after{content:"";position:absolute;inset:8px;border:1px solid var(--rule);pointer-events:none}
.signing .scor{position:absolute;width:13px;height:13px;border-color:var(--ink)}
.signing .s1{top:-7px;left:-7px;border-top:1px solid;border-left:1px solid}
.signing .s2{top:-7px;right:-7px;border-top:1px solid;border-right:1px solid}
.signing .s3{bottom:-7px;left:-7px;border-bottom:1px solid;border-left:1px solid}
.signing .s4{bottom:-7px;right:-7px;border-bottom:1px solid;border-right:1px solid}
.signing .seal{
  position:absolute;top:-5.4rem;right:clamp(1rem,6vw,3rem);width:6.6rem;height:6.6rem;
  border:1.5px solid var(--red);border-radius:50%;
  display:grid;place-items:center;transform:rotate(-10deg);
  color:var(--red);font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  background:var(--paper);z-index:2;
}
.signing .seal::after{content:"";position:absolute;inset:6px;border:1px solid var(--red);border-radius:50%}
.signing .seal .sx{font-size:1.3rem;line-height:1;letter-spacing:0}
.sched{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;color:var(--ink-soft);margin-bottom:2rem}
.big-price{
  font-family:var(--display);font-size:clamp(3.6rem,10vw,6rem);
  line-height:1;margin-bottom:1.4rem;letter-spacing:-.01em;
}
.sigrow{border-top:1px dotted var(--ink-soft);margin-top:2.6rem;padding-top:1.3rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.sigx{font-family:var(--mono);color:var(--red);font-size:1.3rem}
.apps{font-style:italic;color:var(--ink-soft);font-size:1rem;margin:1.8rem 0 0}


/* ================= the application ================= */
.app-intro{color:var(--ink-soft);max-width:52ch}
.qform{margin-top:3rem}
.qgroup{border-top:1px solid var(--rule);padding:2.2rem 0}
.qgroup:last-of-type{border-bottom:1px solid var(--rule)}
.qnum{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.26em;color:var(--red);margin-bottom:.8rem}
.qtext{font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.35;margin-bottom:1.3rem;max-width:34ch;text-wrap:balance}
.qhint{font-style:italic;color:var(--ink-soft);font-size:1rem;margin:-.6rem 0 1.2rem}
.qform textarea,.qform input[type=text],.qform input[type=email]{
  width:100%;max-width:44rem;background:var(--paper);
  border:1px solid var(--cream-soft);padding:.95rem 1.1rem;
  font-family:var(--body);font-size:1.05rem;color:var(--ink);line-height:1.55;
  resize:vertical;
}
.qform textarea{min-height:6.5rem}
.qform textarea:focus,.qform input:focus{outline:none;border-color:var(--red)}
.qpair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:44rem}
@media (max-width:40rem){.qpair{grid-template-columns:1fr}}
.qlabel{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--ink-soft);display:block;margin-bottom:.5rem}
.rev-opts{display:flex;flex-wrap:wrap;gap:.8rem}
.rev-opts label{
  border:1px solid var(--cream-soft);padding:.7rem 1.2rem;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--ink);
  display:inline-flex;align-items:center;gap:.6rem;
}
.rev-opts input{accent-color:var(--red)}
.rev-opts label:has(input:checked){border-color:var(--red);color:var(--red)}
.qsubmit{margin-top:2.8rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.qsubmit .sigx{font-family:var(--mono);color:var(--red);font-size:1.3rem}
.req{color:var(--red)}

/* ================= friends : the letter ================= */
.fh2{font-size:clamp(1.7rem,3.6vw,2.35rem);margin-top:.4rem;max-width:24ch}
.sig{margin:2.2rem 0 1.6rem}
.sig-n{
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.3em;
  color:var(--red);margin-bottom:.75rem;padding-left:1.5rem;
}
.sig-quote{
  font-family:var(--display);font-size:clamp(1.35rem,3.2vw,1.9rem);
  line-height:1.35;max-width:26ch;text-wrap:balance;
  padding-left:1.4rem;border-left:2px solid var(--red);
}
.route-pair{display:grid;gap:1.6rem;margin:2rem 0 1.8rem;max-width:44rem}
@media (min-width:46rem){.route-pair{grid-template-columns:1fr 1fr;gap:2rem}}
.rt{border-top:1px solid var(--rule);padding-top:1.2rem}
.rt-n{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.28em;color:var(--red);margin-bottom:.8rem}
.rt p{margin-bottom:0;font-size:1.06rem}
.copyer{
  margin-top:1.5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;
  color:var(--ink);background:none;border:1px solid var(--cream-soft);
  padding:.7rem 1.1rem;cursor:pointer;
}
.copyer:hover{border-color:var(--red);color:var(--red)}
.copyer.done{border-color:var(--red);color:var(--red)}
.fee-frame{position:relative;border:1px solid var(--ink);padding:clamp(2.4rem,6vw,3.8rem) clamp(1.6rem,5vw,3.2rem) clamp(2rem,4vw,2.8rem);margin-top:2.6rem}
.fee-frame::after{content:"";position:absolute;inset:8px;border:1px solid var(--rule);pointer-events:none}
.fee-frame .seal{
  position:absolute;top:-3.7rem;right:clamp(1rem,6vw,3rem);width:4.4rem;height:4.4rem;
  border:1.5px solid var(--red);border-radius:50%;
  display:grid;place-items:center;transform:rotate(-10deg);
  color:var(--red);font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  background:var(--paper);z-index:2;text-align:center;
}
.fee-frame .seal::after{content:"";position:absolute;inset:6px;border:1px solid var(--red);border-radius:50%}
.fee-frame .seal .sx{font-size:1.05rem;line-height:1;letter-spacing:.02em}
.clip{border:1px solid var(--rule);background:var(--s1);padding:clamp(1.6rem,4vw,2.4rem);margin:2.2rem 0 1.6rem;position:relative}
.clip .cl{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--red);margin-bottom:1.2rem}
.clip p{margin-bottom:0;font-style:italic}

/* ================= decoder : the instrument ================= */
.dq-stage{display:none}
.dq-stage.on{display:block}
.dq-q{display:none}
.dq-q.on{display:block}
.dq-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--ink-soft);margin-bottom:.9rem}
.dq-head b{color:var(--red);font-weight:500}
.dq-line{height:2px;background:var(--rule);margin-bottom:2.6rem;max-width:44rem}
.dq-line i{display:block;height:2px;background:var(--red)}
.opts{display:grid;gap:.7rem;max-width:44rem;margin-top:1.6rem}
.opts label{
  border:1px solid var(--cream-soft);padding:1rem 1.2rem 1rem 3.1rem;position:relative;cursor:pointer;
  font-size:1.02rem;line-height:1.5;background:var(--paper);
}
.opts label::before{
  content:attr(data-l);position:absolute;left:1.1rem;top:1.15rem;
  font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);
}
.opts label:hover{border-color:var(--ink)}
.opts input{position:absolute;opacity:0}
.opts label:has(input:checked){border-color:var(--red)}
.opts label:has(input:checked)::before{color:var(--red)}
.dq-nav{display:flex;justify-content:space-between;align-items:center;max-width:44rem;margin-top:2.2rem}
.dq-back{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;color:var(--ink-soft);text-decoration:none;cursor:pointer;background:none;border:none;padding:.5rem 0}
.dq-back:hover{color:var(--ink)}
.dq-next{cursor:pointer}
.read-row{border-top:1px solid var(--rule);padding:1.9rem 0;display:grid;grid-template-columns:11.5rem minmax(0,1fr);gap:1.6rem;align-items:start;max-width:48rem}
.read-row:last-of-type{border-bottom:1px solid var(--rule)}
.read-row p{margin-bottom:0}
.read-label{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.26em;color:var(--ink)}
.read-word{display:block;color:var(--red);margin-top:.45rem;letter-spacing:.22em;font-size:.64rem}
.read-word span{display:none}
.read-depth{display:flex;gap:4px;margin-top:.8rem}
.read-depth i{width:1.5rem;height:.55rem;background:var(--s2);border:1px solid var(--rule)}
.read-depth i.f{background:var(--ink);border-color:var(--ink)}
.read-depth i.fr{background:var(--red);border-color:var(--red)}
.read-row.deep .read-label::after{content:"\2715\00a0 DEEPEST GROUND";display:block;color:var(--red);margin-top:.5rem;letter-spacing:.2em;font-size:.6rem}
.read-band{display:none}
.read-band.on{display:block}
@media (max-width:44rem){.read-row{grid-template-columns:1fr;gap:.9rem}}
footer a.fm{text-decoration:none}
footer a.fm:hover{color:var(--red)}

/* ================= footer ================= */
footer{
  border-top:1px solid var(--rule);margin-top:6rem;
  padding:2.4rem clamp(1.25rem,5vw,4rem);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline;
}
footer .fm{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;color:var(--ink-soft)}
footer .fm b{color:var(--red);font-weight:500}

.sent-note{display:none;margin-top:3rem;max-width:44rem}
body.sent .qform{display:none}
body.sent .sent-note{display:block}