/* ─────────────────────────────────────────────────────────────
   Township landing, test redesign, round 5. Scoped to body.home.

   The owner kept the full-bleed hero and sent every other section back
   to the round-two layouts, without the floating island images. Their
   explicit asks from round three stay: the pill nav, the dot and ring
   cursor, and a marquee a notch smaller than the round-two one.
   ───────────────────────────────────────────────────────────── */
body.home{
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --night:#1b150e;
  --glow:#f7efe5;
  --gold:#e9c38f;
}
body.home::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── pill nav (asked for in round three) ───────────────────── */
body.home .nav{position:fixed;top:14px;left:0;right:0;z-index:60;background:transparent;
  border:0;backdrop-filter:none;pointer-events:none}
body.home .pill{
  pointer-events:auto;margin:0 auto;width:min(960px,calc(100% - 28px));height:52px;
  display:flex;align-items:center;gap:22px;padding:0 7px 0 24px;border-radius:999px;
  background:rgba(27,21,14,.3);border:1px solid rgba(247,239,229,.2);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
body.home .wm{font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:-.01em;
  color:var(--glow);margin-right:auto;transition:color .4s}
body.home .pill a.link{font-size:13.5px;color:var(--glow);opacity:.8;transition:opacity .2s,color .4s}
body.home .pill a.link:hover{opacity:1}
body.home .pill .btn{padding:9px 17px;font-size:13.5px;background:var(--glow);color:var(--ink);border-color:var(--glow)}
body.home .pill .burger{margin-left:0;border-radius:999px;border-color:rgba(247,239,229,.35)}
body.home .pill .burger span,body.home .pill .burger span::before,body.home .pill .burger span::after{background:var(--glow)}
body.home .pill .burger[aria-expanded=true] span{background:transparent}
body.home .nav.solid .pill{background:rgba(247,239,229,.84);border-color:var(--line);
  box-shadow:0 12px 32px -20px rgba(36,29,20,.45)}
body.home .nav.solid .wm{color:var(--ink)}
body.home .nav.solid .pill a.link{color:var(--sec)}
body.home .nav.solid .pill a.link:hover{color:var(--ink)}
body.home .nav.solid .pill .btn{background:var(--ink);color:var(--card);border-color:var(--ink)}
body.home .nav.solid .pill .burger{border-color:var(--line-2)}
body.home .nav.solid .pill .burger span,body.home .nav.solid .pill .burger span::before,
body.home .nav.solid .pill .burger span::after{background:var(--ink)}
body.home .nav.solid .pill .burger[aria-expanded=true] span{background:transparent}
body.home .sheet{inset:76px 14px auto 14px;border-radius:22px;border:1px solid var(--line)}
/* the founder's X, at the very top so a visitor can check who is behind this in one tap */
body.home .pill a.xlink{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;
  font-size:13px;color:var(--glow);border:1px solid rgba(247,239,229,.35);border-radius:999px;
  white-space:nowrap;transition:background .2s,color .4s,border-color .4s}
body.home .pill a.xlink svg{width:13px;height:13px;fill:currentColor;flex:none}
body.home .pill a.xlink:hover{background:rgba(247,239,229,.14)}
body.home .nav.solid .pill a.xlink{color:var(--ink);border-color:var(--line-2)}
body.home .nav.solid .pill a.xlink:hover{background:rgba(36,29,20,.06)}
@media (max-width:820px){
  body.home .pill{gap:8px;padding:0 6px 0 18px}
  body.home .pill .btn{display:inline-flex}
  body.home .pill a.xlink{width:38px;height:38px;padding:0;justify-content:center}
  body.home .pill a.xlink span{display:none}
}

/* ── the frame (approved, kept) ────────────────────────────── */
body.home section.hero-x{padding:0;border:0;height:210vh;position:relative}
.hx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.hx-frame{position:absolute;inset:-3%;will-change:transform;transform:scale(1.04)}
.hx-frame img{width:100%;height:100%;object-fit:cover;display:block}
.hx-shade{position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:linear-gradient(to top,rgba(27,21,14,.94) 0%,rgba(27,21,14,.62) 30%,rgba(27,21,14,0) 62%),
    linear-gradient(to bottom,rgba(27,21,14,.5) 0%,rgba(27,21,14,0) 22%)}
.hx-top{position:absolute;left:0;right:0;top:92px;display:flex;justify-content:space-between;gap:20px;
  padding:0 clamp(20px,4vw,56px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(247,239,229,.74);opacity:0;animation:hxfade 1s var(--ease) .9s forwards}
.hx-body{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:40px;will-change:transform,opacity;
  padding:0 clamp(20px,4vw,56px) clamp(28px,5.5vh,60px)}
.hx-title{font-family:var(--serif);font-weight:400;text-transform:uppercase;color:var(--glow);
  font-size:clamp(46px,9.4vw,164px);line-height:.86;letter-spacing:-.025em;margin:0}
.hx-title em{font-style:italic;color:var(--gold);text-transform:none;letter-spacing:-.01em}
.hx-title .ln{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.hx-title .ln>span{display:block;transform:translateY(108%);animation:hxrise 1.15s var(--ease) forwards}
.hx-title .ln:nth-child(1)>span{animation-delay:.12s}
.hx-title .ln:nth-child(2)>span{animation-delay:.24s}
.hx-title .ln:nth-child(3)>span{animation-delay:.36s}
.hx-title .ln:nth-child(4)>span{animation-delay:.48s}
@keyframes hxrise{to{transform:none}}
@keyframes hxfade{to{opacity:1;transform:none}}
.hx-side{max-width:360px;padding-bottom:.4vw;opacity:0;transform:translateY(14px);
  animation:hxfade .9s var(--ease) .8s forwards}
.hx-lede{color:rgba(247,239,229,.84);font-size:15.5px;line-height:1.55;margin:0 0 18px}
.hx-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn.hx-btn{background:var(--glow);color:var(--ink);border-color:var(--glow)}
.btn.hx-btn:hover{background:#fff}
.btn.hx-ghost{background:transparent;color:var(--glow);border-color:rgba(247,239,229,.5)}
.btn.hx-ghost:hover{background:rgba(247,239,229,.12)}
@media (max-width:820px){
  body.home section.hero-x{height:170vh}
  .hx-body{flex-direction:column;align-items:flex-start;gap:22px}
  .hx-side{max-width:none}
  .hx-top .hx-right{display:none}
  .hx-title{font-size:clamp(44px,13.2vw,90px)}
}

/* ── shared rhythm (round two) ─────────────────────────────── */
/* tighter than round two: at full width every seam between sections was about 300px
   of empty paper, which read as a gap rather than as breathing room */
body.home section{padding:clamp(52px,5vw,80px) 0}
body.home h2{font-size:clamp(38px,5.6vw,84px);line-height:1;letter-spacing:-.022em}
body.home h2 em{font-style:italic;color:var(--bronze)}

/* the number */
.fl-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:end}
.fl-big{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.fl-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:6px}
.fl-big .fl-n{font-family:var(--serif);font-size:clamp(130px,20vw,310px);line-height:.78;
  letter-spacing:-.045em;color:var(--ink)}
.fl-copy{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;margin-top:26px}
.fl-copy .lede{margin:0}
.fl-read{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:56px}
.fl-read .fr{padding:24px 24px 28px;border-right:1px solid var(--line)}
.fl-read .fr:first-child{padding-left:0}
.fl-read .fr:last-child{border-right:0}
.fl-read .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.fl-read .v{font-family:var(--mono);font-size:clamp(22px,2.8vw,38px);color:var(--ink)}
.fl-read .fr:first-child .v{color:var(--bronze)}
.fl-notes{display:flex;gap:28px;flex-wrap:wrap}
.fl-notes .hint{margin-top:14px;font-size:12px}
/* no township yet: the section is the idea alone, without a row of zeros */
#floor.stats-off .fl-big,#floor.stats-off .fl-read,#floor.stats-off .fl-notes{display:none}
#floor.stats-off .fl-grid{grid-template-columns:1fr}
/* the plates sit closer to the copy when the numbers are not between them */
#floor.stats-off .plates{margin-top:44px}
body.home #floor.stats-off{padding-bottom:clamp(44px,4.2vw,68px)}
@media (max-width:820px){
  .fl-grid,.fl-copy{grid-template-columns:1fr;gap:18px}
  .fl-big{align-items:flex-start;text-align:left}
  .fl-read{grid-template-columns:1fr}
  .fl-read .fr{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}
}

/* ledger, the dark band */
body.home section.dark{background:var(--night);color:var(--glow);border-top:0}
.dark .eyebrow{color:var(--gold)}
.dark .eyebrow::after{background:rgba(247,239,229,.14)}
.dark h2{color:var(--glow)}
.dark .lede,.dark .hint{color:rgba(247,239,229,.66)}
.dark .tablewrap{background:transparent;border-color:rgba(247,239,229,.16)}
.dark th{color:rgba(247,239,229,.5);border-bottom-color:rgba(247,239,229,.14)}
.dark td{color:rgba(247,239,229,.72);border-bottom-color:rgba(247,239,229,.1)}
.dark td.ev{color:var(--glow)}
.dark td.hash a{color:var(--gold)}
.dark .tag{border-color:rgba(247,239,229,.25);color:rgba(247,239,229,.7)}
.dark .tag.levy{color:var(--gold);border-color:rgba(233,195,143,.5)}
body.home section.dark + section{border-top:0}

/* charter, an editorial list */
.ch-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.ch-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.ch-head .lede{margin:0 0 .4em}
.ch-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ch-list li{display:grid;grid-template-columns:130px 1fr 1.25fr;gap:32px;align-items:baseline;
  padding:32px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.ch-list li:hover{padding-left:14px}
.ch-n{font-family:var(--serif);font-size:clamp(46px,5vw,76px);line-height:.9;color:var(--bronze)}
.ch-list h3{font-size:clamp(30px,3.4vw,48px);line-height:1}
.ch-list p{margin:0;color:var(--sec);font-size:15.5px;max-width:52ch}
@media (max-width:820px){
  .ch-head{grid-template-columns:1fr;gap:18px}
  .ch-list li{grid-template-columns:1fr;gap:10px;padding:26px 0}
}

/* round 8: the lone township beside its five articles. The figure stays in
   view while the list scrolls past it, so the picture reads as the thing the
   articles describe rather than as a decoration between sections. */
.ch-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,84px);align-items:start}
.ch-fig{position:sticky;top:96px;margin:0}
.ch-fig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 52%;
  border-radius:4px;background:var(--paper-2)}
.ch-fig figcaption{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.ch-body .ch-list li{grid-template-columns:clamp(64px,6vw,96px) 1fr;column-gap:24px;row-gap:10px}
.ch-body .ch-list li p{grid-column:2}
@media (max-width:900px){
  .ch-body{grid-template-columns:1fr}
  .ch-fig{position:static}
  .ch-fig img{aspect-ratio:16/11}
}
@media (max-width:820px){
  .ch-body .ch-list li{grid-template-columns:1fr}
  .ch-body .ch-list li p{grid-column:auto}
}

/* reserves marquee, a notch smaller than round two (asked in round three) */
body.home .marquee.big{padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.marquee.big .track{gap:0;animation-duration:64s}
.marquee.big .track span{font-family:var(--serif);font-size:clamp(44px,6.6vw,104px);line-height:1;
  color:var(--ink);letter-spacing:-.02em;padding:0 .32em}
.marquee.big .track span:nth-child(even){font-style:italic;color:var(--bronze)}

/* how it works */
.hw{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.hw .step{padding:34px 28px 38px;border-right:1px solid var(--line)}
.hw .step:first-child{padding-left:0}
.hw .step:last-child{border-right:0}
.hw .step .n{font-family:var(--serif);font-size:clamp(70px,7.4vw,118px);line-height:.85;
  color:transparent;-webkit-text-stroke:1.2px var(--bronze);letter-spacing:-.03em;margin-bottom:22px}
@media (max-width:980px){
  .hw{grid-template-columns:1fr 1fr}
  .hw .step:nth-child(2){border-right:0}
  .hw .step:nth-child(3){padding-left:0}
  .hw .step{border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .hw{grid-template-columns:1fr}
  .hw .step{padding-left:0;border-right:0}
}

/* faq */
.fq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.fq-head{position:sticky;top:112px}
.fq .faq{border-top:1px solid var(--ink)}
body.home .q summary{font-size:clamp(20px,2vw,26px);padding:26px 0}
@media (max-width:820px){.fq{grid-template-columns:1fr;gap:26px}.fq-head{position:static}}

/* closing: a whole frame of clouds, no island in it */
body.home section.cl{position:relative;padding:0;min-height:90vh;display:flex;align-items:flex-end;
  overflow:hidden;border-top:0;background:var(--night)}
.cl-frame{position:absolute;inset:0}
.cl-frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);
  transition:transform 2.2s var(--ease)}
.cl.in .cl-frame img{transform:scale(1)}
.cl-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(27,21,14,.92) 0%,rgba(27,21,14,.5) 55%,rgba(27,21,14,.25) 100%)}
.cl-body{position:relative;width:100%;padding-top:140px;padding-bottom:clamp(44px,8vh,90px)}
.cl-title{color:var(--glow);text-transform:uppercase;font-size:clamp(46px,8.6vw,146px)!important;
  line-height:.88!important;letter-spacing:-.025em}
.cl-title em{text-transform:none;font-style:italic;color:var(--gold)}
.cl-body .lede{color:rgba(247,239,229,.82)}
.cl-body .eyebrow{color:var(--gold)}
.cl-body .eyebrow::after{background:rgba(247,239,229,.18)}
.cl-body .cta{justify-content:flex-start}
body.home footer{border-top:0}

/* ── footer brand: the same serif wordmark as the pill, no mark image ─
   The column-heading rule (.fgrid .col b) used to catch the brand and turn
   it into a small grey mono label next to the logo image. */
body.home footer .fwm{font-family:var(--serif);font-size:clamp(34px,3.4vw,46px);line-height:1;
  letter-spacing:-.015em;color:var(--ink)}
body.home footer .ftag{color:var(--sec);font-size:15px;max-width:34ch;margin-top:4px}

/* ── reduced motion: same layout, nothing moves ─────────────── */
@media (prefers-reduced-motion:reduce){
  body.home section.hero-x{height:auto}
  .hx-pin{position:relative}
  .hx-title .ln>span,.hx-side,.hx-top{animation:none;transform:none;opacity:1}
  .marquee.big .track{animation:none}
  .cl-frame img{transform:none;transition:none}
  .ch-list li{transition:none}
}