:root{
  --ink:#221c15;
  --ink-soft:#5c5347;
  --paper:#faf7f0;
  --paper2:#f2ede1;
  --line:#e0d9c8;
  --pine:#2f4230;
  --pine-lt:#4a6349;
  --moss:#7d8a5c;
  --clay:#b4552d;
  --gold:#c08a2e;
  --shadow:rgba(34,28,21,.10);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --hd:clamp(2.6rem,7vw,5.4rem);
  --h2:clamp(1.9rem,4vw,3.1rem);
  --h3:clamp(1.3rem,2.2vw,1.7rem);

  --gap:clamp(56px,9vw,132px);
  --wrap:1180px;
  --measure:660px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--clay);text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.1;margin:0}
p{margin:0 0 1.15em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.measure{max-width:var(--measure)}
.center{margin-left:auto;margin-right:auto}

/* eyebrow / small caps label */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--moss);
  margin:0 0 18px;
}

/* ---------- top bar ---------- */
.topbar{
  background:var(--pine);color:#e9e3d2;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:11px 0;position:relative;z-index:30;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar .tw{opacity:.72}
.langbar{display:flex;gap:2px;flex:none}
.langbar a{
  color:#e9e3d2;text-decoration:none;padding:3px 9px;border-radius:2px;
  letter-spacing:.16em;opacity:.55;transition:opacity .2s,background .2s;
}
.langbar a:hover{opacity:1}
.langbar a.on{opacity:1;background:rgba(255,255,255,.16)}
@media(max-width:700px){
  .topbar .tw{display:none}
  .topbar .wrap{justify-content:center}
}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:25;
  background:rgba(250,247,240,.88);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
  padding-top:0;padding-bottom:0;height:62px;overflow-x:auto;scrollbar-width:none}
nav .wrap::-webkit-scrollbar{display:none}
nav .brand{
  display:flex;align-items:center;gap:10px;flex:none;margin-right:auto;
  text-decoration:none;color:var(--ink);
}
nav .brand img{height:34px;width:auto}
nav .brand span{
  font-family:var(--sans);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
nav a.nl{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
  white-space:nowrap;flex:none;padding:6px 0;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
nav a.nl:hover{color:var(--pine);border-bottom-color:var(--pine)}
@media(max-width:860px){nav .brand span{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,92vh,880px);display:flex;
  align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.hero>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(20,26,18,.42) 0%,rgba(20,26,18,.14) 34%,rgba(20,26,18,.50) 76%,rgba(20,26,18,.72) 100%);
}
.hero .inner{text-align:center;padding:clamp(60px,10vh,110px) 22px;color:#fff;max-width:900px}
.hero .mark{
  width:clamp(230px,32vw,420px);height:auto;margin:0 auto clamp(26px,4vw,44px);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
.hero h1{
  font-family:var(--sans);font-weight:800;font-size:var(--hd);
  letter-spacing:-.02em;text-transform:uppercase;line-height:.92;
  text-shadow:0 3px 30px rgba(0,0,0,.5);margin:0 0 22px;
}
.hero .lede{
  font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.62;max-width:620px;
  margin:0 auto 34px;color:rgba(255,255,255,.94);
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero .kicker{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 20px;
}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:2px;
  background:var(--paper);color:var(--ink);
  transition:transform .2s,background .2s,color .2s;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn .ar{font-size:15px;line-height:1}
.herobtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* scroll cue */
.cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.7);text-decoration:none;display:flex;flex-direction:column;
  align-items:center;gap:7px;
}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent)}

/* ---------- sections ---------- */
section{padding:var(--gap) 0}
section.tight{padding:clamp(38px,6vw,72px) 0}
.sechead{margin-bottom:clamp(34px,5vw,62px)}
.sechead h2{
  font-family:var(--sans);font-weight:800;font-size:var(--h2);
  letter-spacing:-.02em;text-transform:uppercase;
}
.sechead .dek{
  font-size:1.12rem;color:var(--ink-soft);max-width:var(--measure);margin:18px 0 0;
}
h3{font-family:var(--sans);font-weight:700;font-size:var(--h3);letter-spacing:-.01em;margin:0 0 14px}
h4{font-family:var(--sans);font-weight:700;font-size:1.02rem;letter-spacing:.01em;margin:0 0 9px}

.alt{background:var(--paper2)}
.dark{background:var(--pine);color:#ece7d8}
.dark .sechead h2,.dark h3,.dark h4{color:#fff}
.dark .eyebrow{color:var(--moss)}
.dark .dek,.dark p{color:rgba(236,231,216,.82)}
.dark a{color:#e8c98a}

hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- editorial two-column ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,74px);align-items:center}
.split.narrowimg{grid-template-columns:.85fr 1fr}
@media(max-width:880px){.split,.split.narrowimg{grid-template-columns:1fr;gap:32px}}

/* ---------- photography ---------- */
figure{margin:0}
figure img{width:100%;border-radius:3px}
figcaption{
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);
  padding-top:12px;line-height:1.55;
}
figcaption b{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);margin-bottom:4px;
}
.dark figcaption{color:rgba(236,231,216,.66)}

/* full-bleed cinematic band */
.band{position:relative;isolation:isolate;margin:0}
.band img{width:100%;height:clamp(340px,62vh,660px);object-fit:cover}
.band .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(40px,9vw,90px) clamp(20px,5vw,56px) clamp(26px,4vw,46px);
  background:linear-gradient(transparent,rgba(18,22,16,.78));
  color:#fff;
}
.band .cap .in{max-width:var(--wrap);margin:0 auto}
.band .cap h3{color:#fff;margin-bottom:8px;max-width:640px}
.band .cap p{
  font-family:var(--sans);font-size:13px;letter-spacing:.03em;
  color:rgba(255,255,255,.8);max-width:560px;margin:0;
}

/* parallax-ish fixed band */
.fixedband{
  min-height:clamp(380px,64vh,620px);display:flex;align-items:center;
  background-size:cover;background-position:center;background-attachment:fixed;
  position:relative;isolation:isolate;
}
@media(hover:none){.fixedband{background-attachment:scroll}}
.fixedband::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,24,16,.52)}
.fixedband .quote{
  max-width:820px;margin:0 auto;text-align:center;color:#fff;
  padding:clamp(50px,8vw,90px) clamp(20px,5vw,56px);
}
.fixedband .quote p{
  font-size:clamp(1.4rem,3.2vw,2.35rem);line-height:1.34;font-style:italic;
  margin:0 0 22px;text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.fixedband .quote cite{
  font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.75);
}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(22px,3vw,38px)}
.card{background:transparent}
.card figure{overflow:hidden;border-radius:3px;margin-bottom:18px}
.card figure img{
  aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover figure img{transform:scale(1.045)}
.card h4{font-size:1.16rem;margin-bottom:8px}
.card p{font-size:.97rem;color:var(--ink-soft);margin:0}
.dark .card p{color:rgba(236,231,216,.76)}

.cards.plain .card{
  padding:30px 28px;background:var(--paper);border:1px solid var(--line);border-radius:3px;
}
.dark .cards.plain .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}

/* ---------- attraction rows ---------- */
.rows{display:flex;flex-direction:column;gap:clamp(44px,6vw,88px)}
.row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,62px);align-items:center}
.row:nth-child(even) figure{order:2}
.row figure img{aspect-ratio:3/2;object-fit:cover}
.row .meta{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin:0 0 12px;
}
.row h3{margin-bottom:12px}
@media(max-width:880px){
  .row,.row:nth-child(even) figure{grid-template-columns:1fr;order:0;gap:22px}
}

/* icon-only attraction (no photo) */
.iconrow{display:grid;grid-template-columns:104px 1fr;gap:26px;align-items:start}
.iconrow .icon{width:104px;height:104px;opacity:.85}
@media(max-width:600px){.iconrow{grid-template-columns:1fr}.iconrow .icon{width:78px;height:78px}}

/* ---------- pull quote ---------- */
.pull{
  border-left:2px solid var(--clay);padding:6px 0 6px 26px;margin:38px 0;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.46;font-style:italic;color:var(--ink);
  max-width:var(--measure);
}
.dark .pull{border-left-color:var(--gold);color:#fff}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:34px;text-align:center}
.stat .n{
  font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4.4vw,3.1rem);
  letter-spacing:-.03em;line-height:1;color:var(--pine);
}
.dark .stat .n{color:#fff}
.stat .l{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:11px;
}
.dark .stat .l{color:rgba(236,231,216,.7)}

/* ---------- lists ---------- */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;max-width:var(--measure)}
ol.steps li{counter-increment:s;position:relative;padding:0 0 26px 56px;margin:0}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--clay);
}
ol.steps li:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:26px;bottom:6px;width:1px;background:var(--line);
}

ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{position:relative;padding:0 0 12px 26px;font-size:1rem}
ul.ticks li::before{content:"—";position:absolute;left:0;color:var(--moss)}

/* charter numbered */
ol.charter{list-style:none;counter-reset:c;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 44px}
ol.charter li{counter-increment:c;padding-left:44px;position:relative;font-size:1rem}
ol.charter li::before{
  content:counter(c);position:absolute;left:0;top:-2px;
  font-family:var(--sans);font-weight:800;font-size:1.5rem;color:var(--gold);opacity:.75;
}

/* ---------- poster / feature ---------- */
.poster{
  background:var(--ink);color:#f3ecdb;border-radius:3px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
}
.poster img{height:100%;width:100%;object-fit:cover;min-height:340px}
.poster .body{padding:clamp(34px,4.6vw,62px)}
.poster h3{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:16px}
.poster p{color:rgba(243,236,219,.8)}
.poster .eyebrow{color:var(--gold)}
@media(max-width:880px){.poster{grid-template-columns:1fr}.poster img{min-height:260px}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(243,236,219,.72);padding:clamp(56px,7vw,92px) 0 40px;
  font-family:var(--sans);font-size:13px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:52px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr;gap:32px}}
footer img.fmark{width:132px;margin-bottom:20px;opacity:.95}
footer h5{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
footer a{color:rgba(243,236,219,.72);text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
footer .base{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;
  color:rgba(243,236,219,.5)}


/* ---------- long-form reading rhythm ---------- */
section .wrap>p,
section .wrap>h3,
section .wrap>ol.steps,
section .wrap>ul.ticks{max-width:var(--measure)}
section .wrap>h3{margin-top:2.4em}
section .wrap>h3:first-of-type{margin-top:0}

/* founder: portrait beside bio */
.founder{display:grid;grid-template-columns:.78fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.founder figure img{aspect-ratio:2/3;object-fit:cover}
.founder>div>p:first-child{margin-top:0}
@media(max-width:880px){.founder{grid-template-columns:1fr;gap:28px}
  .founder figure img{aspect-ratio:4/5}}

/* two-up sub-cards inside founder */
.founder .grid,.founder .cards{grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
@media(max-width:620px){.founder .grid,.founder .cards{grid-template-columns:1fr}}

/* The hand-drawn SVG map and its .legend strip were removed on 2026-08-07.
   Real baked OSM plates (.survey, below) show the same geography from real
   survey data, so the illustration was redundant and invited the reader to
   compare a drawing against a real map inside one section. The legend prose
   survived as .gpsnote in the .note block. */
.gpsnote{margin:14px 0 0}

/* survey: real baked OSM tiles, two scales, with a marker overlay.
   Tiles are baked into assets/ by tools/bake_map.py so no visitor request
   ever reaches a tile server. Marker offsets come from that script. */
.survey{margin-top:42px}
.survey .pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){.survey .pair{grid-template-columns:1fr;gap:34px}}

.plate{border:1px solid var(--line);background:var(--paper2);border-radius:3px;overflow:hidden}
.plate .frame{position:relative;overflow:hidden;background:#dfe6d4}
.plate .frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.03)}
.plate .cap{font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);padding:13px 18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.plate .cap b{color:var(--ink);font-weight:700}

/* the pin: a ring that keeps pulsing over nothing */
.pin{position:absolute;width:0;height:0}
.pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 0 3px rgba(250,247,240,.9),0 1px 5px rgba(0,0,0,.35)}
.pin b{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;
  border:2px dashed var(--clay);opacity:.75;animation:pinspin 26s linear infinite}
.pin span{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;white-space:nowrap;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;color:#fff;
  background:var(--clay);padding:4px 9px;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
@keyframes pinspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pin b{animation:none}}

/* coordinate readout under the plates */
.coords{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;margin-top:26px;overflow:hidden}
@media(max-width:760px){.coords{grid-template-columns:1fr 1fr}}
.coords div{background:var(--paper);padding:16px 18px}
.coords dt{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 5px}
.coords dd{margin:0;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink)}
.attrib{font-family:var(--sans);font-size:11px;color:var(--ink-soft);margin-top:14px}
.attrib a{color:var(--ink-soft)}

/* generic note box */
.note{
  background:var(--paper2);border-left:2px solid var(--moss);
  padding:22px 26px;font-size:.97rem;color:var(--ink-soft);margin:30px 0;
  max-width:var(--measure);
}
.dark .note{background:rgba(255,255,255,.05);border-left-color:var(--gold);color:rgba(236,231,216,.8)}

/* tourism bureau strip */
.bureaubar{
  background:var(--pine);color:#e9e3d2;text-align:center;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:14px 20px;
}

/* poster/event header strip */
.posterbar{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--moss);text-align:center;margin-bottom:16px;
}

/* practical info grid */
.practical{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- bottom-half components ---------- */
.stamp{
  display:inline-block;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--moss);
  border:1px solid var(--line);border-radius:2px;padding:9px 16px;margin-bottom:30px;
}
.rating{
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;line-height:1.6;
  color:var(--ink-soft);border-top:1px solid var(--line);
  padding-top:14px;margin:22px 0 0;max-width:520px;
}
.poster.feature{grid-template-columns:1fr}
.poster.feature>figure{margin:0}
.poster.feature>figure img{
  width:100%;height:clamp(280px,42vh,440px);object-fit:cover;border-radius:0;
}
.poster .kicker{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.poster .when{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,236,219,.6);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  padding:14px 0;margin:0 0 30px;line-height:1.7;
}
.poster .body>p,.poster .body>ul{max-width:var(--measure)}
.poster .pull{border-left-color:var(--gold);color:#fff;max-width:var(--measure)}
ul.sched{list-style:none;padding:0;margin:30px 0 0;max-width:var(--measure);
  border-top:1px solid rgba(255,255,255,.14)}
/* Hanging indent rather than a grid. The 13h30 entry has a <strong> lead-in,
   and as a direct child of a grid li that gets blockified into its own grid
   row no matter what display it is given, which stretched that one row to
   677px against ~81px for its neighbours. A hanging indent keeps the time in
   a fixed gutter, wraps continuation lines under it, and does not care how
   many inline elements the entry contains. */
ul.sched li{padding:15px 0 15px 96px;text-indent:-96px;
  font-size:.97rem;line-height:1.62;
  border-bottom:1px solid rgba(255,255,255,.09);color:rgba(243,236,219,.8)}
ul.sched li b{display:inline-block;width:78px;margin-right:18px;text-indent:0;
  vertical-align:baseline;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
ul.sched li strong{color:#fff;font-weight:700}
@media(max-width:620px){
  ul.sched li{padding-left:0;text-indent:0}
  ul.sched li b{display:block;width:auto;margin:0 0 4px}
}

/* ==================================================================
   Lower-half pass
   Goal: give #bureau onward the same vertical rhythm, hierarchy and
   finish as the upper half. Replaces accumulated inline styles.
   ================================================================== */

/* --- utilities replacing inline style attributes ------------------ */
.lede-note{margin-top:22px}
.signoff{margin-top:26px;color:var(--ink-soft);font-size:.97rem}
.pull.spaced{margin-top:34px}
.band.flush{margin-bottom:0}
footer .fnote{max-width:340px;margin:0}

/* --- attraction register ------------------------------------------
   Five 3:2 rows in a stack read as repetition. Numbering them and
   ruling between them turns the stack into a catalogue, which is the
   thing the Bureau claims it is keeping.                            */
.rows.register{gap:0}
.rows.register .row{
  counter-increment:reg;
  padding:clamp(40px,5.5vw,72px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.rows.register .row:first-child{border-top:0;padding-top:clamp(16px,2vw,28px)}
/* Keep the counter on #bureau, not on each register chunk: the band between
   entries 03 and 04 must be a sibling of .wrap, so the register is necessarily
   two containers. The continuation explicitly resumes at 03. */
#bureau{counter-reset:reg}
.rows.register{counter-reset:none}
.rows.register.continued{counter-reset:reg 3}
.rows.register .row>div{position:relative}
.rows.register .row h3::before{
  content:counter(reg,decimal-leading-zero);
  display:block;
  font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.22em;color:var(--gold);
  margin-bottom:12px;
}
.rows.register .row figure img{border-radius:3px}

/* The base .row grid is 1.05fr 1fr and the figure alternates sides via
   order, so the photo landed in the wider column on odd rows and the
   narrower one on even rows: 518px against 493px. Unnoticeable in one
   row, but this is a five-entry numbered catalogue where the photos sit
   in a vertical line, so the 25px stagger reads as sloppy. Reverse the
   template on even rows to keep the photo column a constant width.

   Scoped to the two-column breakpoint on purpose: unscoped, this rule
   outranks the stacking rule at max-width:860px by specificity, so even
   rows stayed side by side while odd rows stacked. */
@media(min-width:861px){
  .rows.register .row:nth-child(even){grid-template-columns:1fr 1.05fr}
  /* The second chunk begins with global entry 04, so restore the global
     odd/even photo rhythm rather than restarting it after the band. */
  .rows.register.continued .row:nth-child(odd){grid-template-columns:1fr 1.05fr}
  .rows.register.continued .row:nth-child(odd) figure{order:2}
  .rows.register.continued .row:nth-child(even){grid-template-columns:1.05fr 1fr}
  .rows.register.continued .row:nth-child(even) figure{order:0}
}

/* Alternating photo side is inherited from .row:nth-child(even).
   Keep the text column optically centred on tall entries.          */
@media(min-width:861px){
  .rows.register .row{align-items:center}
}

/* --- the Battue feature section ------------------------------------
   Split out of #bureau so the page changes background partway down
   instead of running 7000px of one tone.                            */
#battue{padding-top:clamp(46px,6vw,84px)}
#battue .poster.feature{
  box-shadow:0 18px 50px -28px var(--shadow);
}

/* --- doing: one unique creek band, one even six-card grid ----------
   A lone card photo made this grid 503/503/503/280/280/280. The band gives
   the section its photographic break without privileging one card; the
   modest floor keeps the six text cards equally paced when they stack. */
#doing .cards.plain .card{min-height:308px}

/* --- bureau closing matter ---------------------------------------- */
#bureau .signoff{
  border-top:1px solid var(--line);
  padding-top:22px;
  max-width:var(--measure);
}

/* --- the town charter ------------------------------------------------
   Nine rules are the town's emotional centre, not a footnote. The old
   auto-fit grid made them three small columns at desktop width (866px for
   the whole section). Two wider columns, a modestly larger reading size and
   longer pauses make the list read as a charter while keeping its calm,
   unornamented voice. */
#rules{padding:clamp(88px,11vw,156px) 0}
#rules .sechead{margin-bottom:clamp(36px,5vw,72px)}
#rules>.wrap>p{
  max-width:720px;font-size:clamp(1.08rem,1.55vw,1.28rem);line-height:1.65;
  margin-bottom:clamp(54px,8vw,96px);
}
#rules ol.charter{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(38px,4.5vw,60px) clamp(44px,7vw,96px);
}
#rules ol.charter li{
  padding-left:clamp(48px,4.2vw,64px);padding-top:2px;
  font-size:clamp(1.08rem,1.45vw,1.24rem);line-height:1.6;
}
#rules ol.charter li::before{
  content:counter(c,decimal-leading-zero);top:.72em;
  font-size:11px;letter-spacing:.16em;color:#e8c98a;opacity:1;
}
@media(max-width:620px){
  #rules ol.charter{grid-template-columns:1fr;gap:34px}
}

/* --- section head consistency in the lower half --------------------
   .stamp was floating loose above the sechead; tie them together.   */
.stamp+.sechead{margin-top:6px}

/* --- Battue restructure -------------------------------------------
   Measured before: #battue was one 2864px dark slab, 340px of photo
   then 2524px of body copy reversed out on ink, and the only section
   on the page with no .sechead. It now follows the same shape as
   #story: head on paper, narrative, pull quote, full-bleed band, then
   a compact dark panel carrying only the practical matter.          */
#battue>.wrap+.band{margin-top:clamp(46px,6vw,84px)}
#battue>.band+.wrap{margin-top:clamp(46px,6vw,84px)}
#battue .poster.feature{grid-template-columns:1fr}
#battue .poster.feature .body{padding:clamp(34px,4.4vw,58px)}
#battue .poster.feature .when{margin-bottom:8px}
#battue .poster .lede-note{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:20px;margin-top:26px;
  color:rgba(243,236,219,.72);max-width:var(--measure);
}

/* ---------- #shop: the souvenir shed -------------------------------
   Baked catalog from assets/shop.json (tools/bake_shop.py). No fetch,
   no cart JS, no storefront token in the page. Each card is a plain
   <form method="get"> pointed at Fourthwall's hosted checkout, so the
   whole section works with JavaScript disabled and the only
   third-party contact happens after a deliberate click.

   Card sizing mirrors .cards (auto-fit, 288px floor) so the shed sits
   in the same rhythm as the rest of the lower half.                  */
.goods{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(24px,3vw,40px);margin-top:clamp(34px,4.5vw,56px);
}
.good{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;
}
.good figure{margin:0;overflow:hidden;background:var(--paper2)}
/* Product shots are transparent 3:4 portrait art composited onto --paper2 by
   tools/bake_shop.py. Two bugs shipped in the first pass and both showed up
   as "poorly cut out": the alpha was flattened onto BLACK, and a forced 1/1
   aspect-ratio with object-fit:cover cropped 25% away, cutting hems and
   brims. Match the real 3:4 ratio and use `contain` so nothing is ever
   sliced; the padded background is the same paper as the card, so the photo
   has no visible edge. */
.good figure img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.good:hover figure img{transform:scale(1.03)}

/* Body is a column with the form pinned to the bottom, so cards with
   longer names still line their buy controls up across the row.      */
.goodbody{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.good h4{font-size:1.08rem;margin:0 0 4px}
.good .price{
  font-family:var(--sans);font-size:.95rem;font-weight:700;
  color:var(--ink);margin:0 0 18px;
}
.good .pfrom{
  font-weight:400;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}

.pick{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.pick label{display:flex;flex-direction:column;gap:6px}
.pick label span{
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.pick select{
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  padding:10px 12px;background:var(--paper2);
  border:1px solid var(--line);border-radius:2px;
  width:100%;cursor:pointer;
}
.pick select:focus-visible,.pick button:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.pick button{
  font-family:var(--sans);font-size:.76rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:var(--pine);
  border:1px solid var(--pine);border-radius:2px;
  padding:13px 16px;cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.pick button:hover{background:var(--clay);border-color:var(--clay)}

.shopnote{
  font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);
  margin-top:clamp(28px,3.5vw,44px);max-width:var(--measure);
}
.shopnote a{color:var(--clay);font-weight:700;white-space:nowrap}

@media(max-width:520px){
  .goods{grid-template-columns:1fr 1fr;gap:18px}
  .goodbody{padding:16px 16px 18px}
  .good h4{font-size:.98rem}
  .pick button{padding:12px 10px;letter-spacing:.14em}
}

/* ==================================================================
   Multi-page pass (2026-08-14)
   The site was two single-page documents of ~7000px each. It is now
   five sections per language, so the chrome has to carry the things a
   single page carried by scroll: where you are, and that there is a
   shop. Everything below serves one of those two jobs.
   ================================================================== */

/* --- current page marker in the nav -------------------------------
   A five-item nav with no state is a list of places you might be. */
nav a.nl.on{color:var(--pine);border-bottom-color:var(--pine)}

/* --- the merch banner ---------------------------------------------
   The point of the whole site is the shed. On one long page the shop
   section was reachable by scrolling; across five pages it needs a
   standing invitation on every one of them. It sits directly under the
   sticky nav rather than inside it, so it scrolls away and never eats
   viewport height on a phone, and it is an <aside> because it is not
   page navigation.

   Deliberately NOT position:sticky. Two reasons: a second sticky strip
   under a 62px sticky nav costs ~110px of a 667px phone viewport for
   the entire visit, and a permanently-pinned ad reads as a pop-up on a
   site whose whole voice is understated. It is loud once, at the top of
   every page, then it gets out of the way.                            */
.shopbar{
  display:block;background:var(--clay);color:#fff5ec;
  border-bottom:1px solid rgba(0,0,0,.14);
}
.shopbar .wrap{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,26px);flex-wrap:wrap;
  padding-top:13px;padding-bottom:13px;
}
.shopbar .sb-text{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  line-height:1.45;text-align:center;
}
.shopbar .sb-cta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--clay);background:#fff5ec;
  padding:9px 18px;border-radius:2px;
  transition:transform .2s ease,background .2s ease;
}
.shopbar .sb-cta:hover{transform:translateY(-1px);background:#fff}
.shopbar .sb-cta .ar{font-size:14px;line-height:1}
@media(max-width:540px){
  .shopbar .wrap{gap:10px;padding-top:11px;padding-bottom:11px}
  .shopbar .sb-text{font-size:12px}
}

/* --- product teaser row on the home page ---------------------------
   Four covers linking into the shed. Not buy forms: the checkout forms
   live on one page only, so the variant UUIDs have exactly one home and
   cannot drift between pages.                                         */
.shoptease{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(18px,2.6vw,32px);margin-top:clamp(30px,4vw,48px);
}
.tease{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;transition:transform .25s ease,border-color .25s ease;
}
.tease:hover{transform:translateY(-3px);border-color:var(--moss)}
.tease figure{margin:0;background:var(--paper2);overflow:hidden}
.tease figure img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
}
.tease .tname{
  font-family:var(--sans);font-size:.95rem;font-weight:700;
  padding:16px 16px 2px;
}
.tease .tprice{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);padding:0 16px 18px;
}

/* --- card headings that are links ---------------------------------- */
.card h4 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.card h4 a:hover{color:var(--clay);border-bottom-color:var(--clay)}
.dark .signoff a{color:#e8c98a}

/* --- utilities that replace the last inline style attributes --------
   Pin offsets and margin-top:24px used to be style="" attributes. The
   verify gate now forbids inline styles anywhere, not just below
   #bureau, so they need real rules. */
.card.spaced{margin-top:26px}
.pin{left:48.77%;top:52.29%}
.pin.centred{left:50%;top:50.07%}
.fixedband.grove{background-image:url('assets/grove.jpg')}

/* --- per-page spacing ---------------------------------------------
   With sections split across pages, the first section on a page sits
   directly under the merch banner and does not need a full --gap of
   air above it on top of the banner's own padding. */
.shopbar+section:not(.hero){padding-top:clamp(44px,6vw,84px)}
#charter-teaser{padding:clamp(64px,8vw,112px) 0}
#charter-teaser .pull{max-width:760px}
#gates .cards.plain .card{min-height:auto}
#doing .cards.plain .card{min-height:0}