/* ============================================================================
   Climb Japan Guide — TOP page
   Implementation of "Climb Japan Guide TOP.dc.html" (Claude Design project).
   Colour and type values are taken from that design file; the shared tokens
   match DESIGN.md v4.0 §2 / §3.
   ========================================================================== */

:root{
  /* Surfaces — 和紙 */
  --bg:        #F2E9D8;
  --bg-raised: #FBF6EA;
  --bg-sunken: #E5D9C0;   /* sidebar / support band */
  --bg-map:    #F2EAD6;
  --bg-ink:    #14110D;

  /* Ink — 墨 */
  --ink:       #14110D;
  --ink-2:     #2E2A22;
  --ink-3:     #4A4234;   /* mono labels */
  --ink-4:     #5C5344;   /* section asides */
  --ink-invert:#FBF6EA;

  /* 藍 Indigo */
  --indigo:      #143A63;
  --indigo-light:#2C5480;

  /* 朱 Vermilion */
  --vermilion:      #B3341C;
  --vermilion-hover:#8F2814;

  /* 金 Gold */
  --gold:      #A87413;
  --gold-hover:#8A5E0F;
  --gold-fill: #D9A22B;
  --gold-text: #E8C766;

  /* Rules */
  --rule:      #14110D;
  --rule-soft: #C9BB9C;
  --rule-invert:      rgba(251,246,234,.28);
  --rule-invert-faint:rgba(251,246,234,.18);

  /* Placeholder hatching (design-file stand-ins for real artwork) */
  --hatch-a: #E2D6BC;
  --hatch-b: #EAE0CA;

  /* Type */
  --f-display:"Bitter", Georgia, serif;
  --f-body:"Inter","Zen Kaku Gothic New", system-ui, sans-serif;
  --f-jp:"Shippori Mincho B1", serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --gutter: 34px;
  --sidebar-w: 272px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; }

a{ color:var(--indigo); }
a:hover{ color:var(--vermilion); }

:focus-visible{
  outline:3px solid var(--vermilion);
  outline-offset:2px;
}

/* ── Shared atoms ──────────────────────────────────────────────────────── */

.label{
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
}
.label--gold{ color:var(--gold-text); }

.stack{ display:flex; flex-direction:column; gap:14px; }

.h2{
  margin:0;
  font:700 clamp(28px,3.4vw,38px)/1.28 var(--f-display);
  color:var(--ink);
}
.h2--invert{ color:var(--ink-invert); }

.tick{ width:52px; height:1px; background:var(--vermilion); }
.tick--gold{ background:var(--gold-fill); }

.prose{
  margin:0;
  max-width:680px;
  font:400 17px/1.9 var(--f-body);
  color:var(--ink-2);
}
.prose--invert{ color:rgba(251,246,234,.92); }

.link{
  font:600 16px/1 var(--f-body);
  text-decoration:none;
  padding-bottom:3px;
}
.link--vermilion{ color:var(--vermilion); border-bottom:1px solid var(--vermilion); }
.link--indigo{ color:var(--indigo); border-bottom:1px solid var(--indigo); }

.section{ padding:56px var(--gutter) 48px; }
.section--flush{ padding-top:0; }

.sechead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.sechead__aside{
  margin:0 0 6px;
  max-width:330px;
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-4);
}
.sechead__aside--narrow{ max-width:290px; }
.sechead__aside--wide{ max-width:400px; }

/* Buttons — woodblock stamp: hard shadow, press-in on click */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  min-height:48px;
  text-decoration:none;
  font:700 17px/1 var(--f-body);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:translate(2px,2px); box-shadow:none !important; }

.btn--primary{
  background:var(--vermilion);
  color:var(--ink-invert);
  box-shadow:4px 4px 0 var(--rule);
}
.btn--ghost{
  background:rgba(251,246,234,.1);
  color:var(--ink-invert);
  border:1px solid rgba(251,246,234,.6);
  font-weight:600;
}
.btn--paper{
  align-self:flex-start;
  margin-top:6px;
  background:var(--bg-raised);
  color:var(--ink);
  font-size:16.5px;
  box-shadow:4px 4px 0 var(--rule);
}
.btn--premium{
  justify-content:space-between;
  padding:15px 18px;
  background:var(--gold);
  color:var(--ink-invert);
  font-size:16px;
  box-shadow:4px 4px 0 var(--rule);
}

@media (hover:hover){
  .btn--primary:hover{ background:var(--vermilion-hover); color:var(--ink-invert); }
  .btn--ghost:hover{ background:rgba(251,246,234,.2); color:var(--ink-invert); }
  .btn--paper:hover{ background:#fff; color:var(--ink); }
  .btn--premium:hover{ background:var(--gold-hover); color:var(--ink-invert); }
}

/* Artwork not supplied yet. The frame holds the slot open and stays quiet —
   the token itself lives on in data-token so it can be filled later. */
[data-placeholder]{
  display:grid;
  place-items:center;
  background:var(--hatch-a);
  font-size:0;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.shell{
  display:flex;
  min-height:100vh;
  background:var(--bg);
}
.main{ flex:1; min-width:0; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.sidebar{
  width:var(--sidebar-w);
  flex:none;
  position:sticky;
  top:0;
  height:100vh;
  padding:28px 24px;
  background:var(--bg-sunken);
  border-right:1px solid var(--rule-soft);
  display:flex;
  flex-direction:column;
  gap:28px;
}

.brand{ display:flex; gap:14px; align-items:flex-start; }
.brand__seal{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  background:var(--indigo);
  color:var(--bg);
  font:800 20px/1 var(--f-jp);
}
.brand__seal--paper{
  width:40px; height:40px;
  background:var(--bg);
  color:var(--ink);
  font-size:21px;
}
.brand__text{ display:flex; flex-direction:column; gap:3px; }
.brand__name{
  font:700 19px/1.15 var(--f-display);
  letter-spacing:.04em;
}

.sidenav{ display:flex; flex-direction:column; gap:2px; }
.sidenav__title{ padding:0 0 10px; }
.sidenav__item{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:11px 12px;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
  border-left:4px solid transparent;
  font:500 17px/1 var(--f-body);
}
.sidenav__num{
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:#6B5A36;
}
.sidenav__item.is-active{
  background:var(--bg);
  border-left-color:var(--vermilion);
  font-weight:700;
}
.sidenav__item.is-active .sidenav__num{ color:var(--vermilion); }
@media (hover:hover){
  .sidenav__item:hover{
    background:var(--bg);
    border-left-color:var(--vermilion);
    color:var(--ink);
  }
}

.note{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  background:var(--bg);
  border:1px solid var(--rule-soft);
}
.note__body{
  margin:0;
  font:400 15.5px/1.7 var(--f-body);
  color:#3A342A;
}

.sidebar__foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 26px;
  flex-wrap:wrap;
  padding:13px var(--gutter);
  background:var(--bg-raised);
  border-bottom:1px solid var(--rule);
}
.topbar__nav{ display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; }
.topbar__link{
  font:600 15px/1 var(--f-body);
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--vermilion);
  padding-bottom:3px;
}
.topbar__link--indigo{ color:var(--indigo); border-bottom-color:var(--indigo); }
@media (hover:hover){
  .topbar__link:hover{ color:var(--vermilion); }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  height:560px;
  overflow:hidden;
  background:var(--indigo);
}
.hero__img,
.hero__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero__img{ object-fit:cover; object-position:center 38%; }
.hero__canvas{ opacity:0; transition:opacity .8s ease; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,17,13,.5) 0%,
    rgba(20,17,13,0) 34%,
    rgba(20,17,13,.06) 55%,
    rgba(20,17,13,.78) 100%);
}
.hero__kicker{
  position:absolute; top:26px; left:var(--gutter);
  display:flex; align-items:center; gap:12px;
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:rgba(251,246,234,.96);
}
.hero__rule{ width:26px; height:1px; background:rgba(251,246,234,.7); }
.hero__vertical{
  position:absolute; top:26px; right:var(--gutter);
  writing-mode:vertical-rl;
  font:800 17px/1 var(--f-jp);
  letter-spacing:.32em;
  color:rgba(251,246,234,.92);
  padding:14px 6px;
  border-left:1px solid rgba(251,246,234,.45);
  border-right:1px solid rgba(251,246,234,.45);
}
.hero__body{
  position:absolute;
  left:var(--gutter); right:var(--gutter); bottom:34px;
  display:flex; flex-direction:column; gap:20px;
}
.hero__title{
  margin:0;
  max-width:min(830px, calc(100% - 110px));
  font:700 clamp(38px,4.4vw,54px)/1.1 var(--f-display);
  letter-spacing:.01em;
  color:var(--ink-invert);
  text-wrap:pretty;
  text-shadow:0 2px 24px rgba(20,17,13,.5);
}
.hero__lede{
  margin:0;
  max-width:560px;
  font:400 17.5px/1.75 var(--f-body);
  color:rgba(251,246,234,.95);
}
.hero__actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ── "Now open" strip ──────────────────────────────────────────────────── */

.strip{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:14px var(--gutter);
  background:var(--bg-ink);
  color:var(--bg);
}
.strip__flag{ color:var(--gold-text); }
.strip__text{ font:500 15.5px/1.4 var(--f-body); }
.strip__fill{ flex:1; min-width:24px; height:1px; background:rgba(242,233,216,.25); }
.strip__link{
  font:600 15px/1 var(--f-body);
  color:var(--bg);
  text-decoration:none;
  border-bottom:1px solid var(--gold-fill);
  padding-bottom:2px;
}
@media (hover:hover){ .strip__link:hover{ color:var(--gold-text); } }

/* ── Mission ───────────────────────────────────────────────────────────── */

.mission{ padding-top:56px; }
.mission__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:36px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
}
.factsheet{
  margin:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--rule);
  background:var(--bg-raised);
}
.factsheet__row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:0 18px;
  padding:15px 20px;
  border-bottom:1px solid rgba(20,17,13,.2);
}
.factsheet__row:last-child{ border-bottom:0; }
.factsheet dt{ line-height:1.6; }
.factsheet dd{
  margin:0;
  font:400 16px/1.8 var(--f-body);
  color:var(--ink);
}
.factsheet dd a{ color:var(--vermilion); }

.linkrow{ display:flex; gap:20px; flex-wrap:wrap; margin-top:6px; }

/* ── Etiquette ─────────────────────────────────────────────────────────── */

.etiquette{
  position:relative;
  padding:60px var(--gutter);
  background:var(--indigo);
  color:var(--ink-invert);
  overflow:hidden;
}
.etiquette__hatch{
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(251,246,234,.045) 0 12px,transparent 12px 24px);
  pointer-events:none;
}
.etiquette__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:36px;
}
.etiquette__head{ gap:18px; max-width:760px; }

.authornote{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px;
  max-width:760px;
  background:var(--vermilion);
  border:1px solid var(--rule);
  box-shadow:4px 4px 0 var(--rule);
}
.authornote__label{ color:var(--ink-invert); line-height:1; }
.authornote__body{
  margin:0;
  font:400 15.5px/1.85 var(--f-body);
  color:var(--ink-invert);
}

.rules{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--rule-invert);
}
.rule{
  display:grid;
  grid-template-columns:64px minmax(200px,320px) minmax(240px,1fr);
  gap:0 24px;
  padding:24px 4px;
  align-items:start;
  border-bottom:1px solid var(--rule-invert-faint);
}
.rule:last-child{ border-bottom:0; }
.rule__num{
  width:44px; height:44px;
  justify-self:center;
  margin-top:2px;
  display:grid; place-items:center;
  border:1px solid rgba(251,246,234,.45);
  color:rgba(251,246,234,.96);
  font:800 22px/1 var(--f-jp);
}
.rule__img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(251,246,234,.3);
}
.rule__text{ display:flex; flex-direction:column; gap:8px; }
.rule__title{
  margin:0;
  font:700 22px/1.35 var(--f-display);
  color:var(--ink-invert);
}
.rule__body{
  margin:0;
  font:400 15.5px/1.85 var(--f-body);
  color:rgba(251,246,234,.76);
}

/* ── Area map ──────────────────────────────────────────────────────────── */

.map__wrap{ gap:10px; min-width:0; }
.map{
  position:relative;
  border:1px solid var(--rule-soft);
  background:var(--bg-map);
  min-height:260px;
  overflow:hidden;
}
.map img,
.map svg{ display:block; width:100%; height:auto; }
.map--tall{ min-height:300px; }
.map--short{ min-height:190px; }
.map__hint{ margin:0; line-height:1.7; letter-spacing:.04em; }

/* ── Quick answers (tile nav) ──────────────────────────────────────────── */

.gates{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
}
.gate{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:22px;
  aspect-ratio:1/.82;
  background:var(--bg-raised);
  border:1px solid var(--rule-soft);
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, border-color .15s ease;
}
.gate__num{
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--vermilion);
}
.gate__kanji{
  font:800 28px/1 var(--f-jp);
  color:var(--indigo);
}
.gate__label{ font:700 19px/1.45 var(--f-display); }

.gate--indigo{
  background:var(--indigo);
  border-color:var(--indigo);
  color:var(--ink-invert);
}
.gate--indigo .gate__num,
.gate--indigo .gate__kanji{ color:var(--gold-fill); }

/* Not yet written — the tile keeps its place in the grid but does not link */
.gate--soon{
  background:var(--bg);
  color:var(--ink-4);
  cursor:default;
}
.gate--soon .gate__num{ color:var(--ink-4); }
.gate--soon .gate__kanji{ color:var(--rule-soft); }
.gate--soon .gate__label{ color:var(--ink-4); }
.gate__soon{
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-4);
}

@media (hover:hover){
  .gate:hover{ background:#fff; border-color:var(--vermilion); color:var(--ink); }
  .gate--indigo:hover{ background:var(--indigo-light); border-color:var(--indigo-light); color:var(--ink-invert); }
  .gate--soon:hover{ background:var(--bg); border-color:var(--rule-soft); color:var(--ink-4); }
}

/* ── Shop not open yet ─────────────────────────────────────────────────────
   The Ko-fi shop is still being set up. Paid products keep their gold
   identity (DESIGN.md §2 — gold marks paid) but lose the filled ground,
   the shadow and the click affordance, so nothing looks live that is not. */

.is-soon{ cursor:default; box-shadow:none !important; }
.is-soon:active{ transform:none !important; }

.btn.is-soon{ background:transparent; }
.btn--premium.is-soon{ color:var(--gold); border:1px solid var(--gold); }
.btn--primary.is-soon{ color:var(--vermilion); border:1px solid var(--vermilion); }

.bundle.is-soon{ box-shadow:4px 4px 0 var(--gold) !important; }
.pack.is-soon .pack__shop,
.pack.is-soon .pack__price{ color:var(--ink-4); }

.soonmark{
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  white-space:nowrap;
}

@media (hover:hover){
  .pack.is-soon:hover{ background:var(--bg-raised); border-color:var(--rule-soft); }
  .bundle.is-soon:hover{ box-shadow:4px 4px 0 var(--gold) !important; }
  .btn--premium.is-soon:hover{ background:transparent; color:var(--gold); }
  .btn--primary.is-soon:hover{ background:transparent; color:var(--vermilion); }
}

/* Button whose destination is not built yet */
.btn--soon{
  align-self:flex-start;
  margin-top:6px;
  background:transparent;
  color:rgba(251,246,234,.8);
  border:1px solid rgba(251,246,234,.45);
  font-size:16.5px;
  font-weight:600;
  cursor:default;
}

/* ── Premium guides ────────────────────────────────────────────────────── */

.packs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-bottom:18px;
}
.pack{
  display:flex;
  flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--rule-soft);
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, border-color .15s ease;
}
@media (hover:hover){
  .pack:hover{ background:#fff; border-color:var(--vermilion); color:var(--ink); }
}
.pack__thumb{
  height:150px;
  border-bottom:1px solid var(--rule-soft);
}
.pack__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.pack__meta{ display:flex; align-items:center; gap:9px; }
.pack__seal{
  width:26px; height:26px;
  display:grid; place-items:center;
  border:1px solid var(--vermilion);
  color:var(--vermilion);
  font:800 15px/1 var(--f-jp);
}
.pack__code{ letter-spacing:.14em; }
.pack__title{ font:700 21px/1.4 var(--f-display); }
.pack__desc{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-2);
}
.pack__foot{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:auto;
  padding-top:8px;
}
.pack__price{ font:700 24px/1 var(--f-display); color:var(--indigo); }
.pack__shop{
  margin-left:auto;
  font:600 14px/1 var(--f-body);
  color:var(--ink-4);
}

.packs__pitch{ margin:0 0 16px; max-width:640px; line-height:1.85; }

.bundle{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 32px;
  background:var(--bg-ink);
  color:var(--ink-invert);
  text-decoration:none;
  border:2px solid var(--gold);
  box-shadow:6px 6px 0 var(--gold);
  transition:box-shadow .15s ease;
}
@media (hover:hover){
  .bundle:hover{ box-shadow:10px 10px 0 var(--gold); color:var(--ink-invert); }
}
.bundle__thumb{
  flex:1 1 240px;
  min-width:200px;
  height:210px;
  background:rgba(251,246,234,.07);
  color:rgba(251,246,234,.95);
}
.bundle__body{
  flex:3 1 320px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 0;
}
.bundle__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.bundle__badge{
  padding:6px 12px;
  background:var(--gold);
  color:var(--ink);
  font:700 13px/1.3 var(--f-mono);
  letter-spacing:.1em;
  white-space:nowrap;
}
.bundle__areas{
  font:500 13.5px/1 var(--f-body);
  color:rgba(251,246,234,.95);
}
.bundle__title{ font:700 clamp(28px,3.2vw,36px)/1.22 var(--f-display); }
.bundle__desc{
  font:400 15.5px/1.75 var(--f-body);
  color:rgba(251,246,234,.93);
  max-width:520px;
}
.bundle__price{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  padding:26px 30px 26px 0;
  white-space:nowrap;
}
.bundle__was{
  font:400 15.5px/1.8 var(--f-body);
  color:rgba(251,246,234,.6);
  text-decoration:line-through;
}
.bundle__now{ font:700 clamp(36px,4vw,46px)/1 var(--f-display); color:var(--gold); }
.bundle__save{ color:var(--vermilion); line-height:1; }

/* ── Support ───────────────────────────────────────────────────────────── */

.support{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:center;
  gap:40px;
  padding:52px var(--gutter);
  background:var(--bg-sunken);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.support .stack{ gap:16px; }
.support .prose{ max-width:560px; color:#4A4438; line-height:1.85; }
.support__cta{ align-self:flex-start; margin-top:6px; font-size:16.5px; }
.support__img{
  height:230px;
  border:1px solid var(--rule-soft);
  background:var(--hatch-a);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer{
  padding:44px var(--gutter) 30px;
  background:var(--bg-ink);
  color:var(--bg);
}
.footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:26px;
  border-bottom:1px solid rgba(242,233,216,.2);
}
.footer__name{
  font:700 18px/1.15 var(--f-display);
  letter-spacing:.04em;
}
.footer__tagline{
  font:400 15.5px/1.8 var(--f-body);
  color:rgba(242,233,216,.65);
  max-width:320px;
}
.footer__nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer__nav a{
  font:500 15.5px/1 var(--f-body);
  color:rgba(242,233,216,.95);
  text-decoration:none;
}
@media (hover:hover){ .footer__nav a:hover{ color:var(--gold-fill); } }

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:20px;
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:rgba(242,233,216,.78);
}
.footer__legal{ max-width:640px; }
.footer__farewell{
  font:800 17px/1 var(--f-jp);
  letter-spacing:.18em;
}

/* ── Document pages (About / Contact / Legal / Thanks) ─────────────────── */

.doc{ padding:56px var(--gutter) 76px; }
.doc__inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:38px;
}
.doc__head{ display:flex; flex-direction:column; gap:14px; }
.doc__title{
  margin:0;
  font:700 clamp(32px,4vw,44px)/1.15 var(--f-display);
  color:var(--ink);
  text-wrap:pretty;
}
.doc__lede{
  margin:0;
  font:400 19px/1.7 var(--f-body);
  color:var(--ink-2);
}

.docsec{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:32px;
  border-top:1px solid var(--rule);
  scroll-margin-top:20px;
}
.docsec__title{
  margin:0;
  font:700 clamp(22px,2.6vw,27px)/1.35 var(--f-display);
  color:var(--ink);
}
.docsec h3{
  margin:10px 0 0;
  font:700 20px/1.4 var(--f-display);
  color:var(--ink);
}
.docsec p{
  margin:0;
  font:400 17px/1.85 var(--f-body);
  color:var(--ink-2);
}
.docsec ul,
.docsec ol{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font:400 17px/1.8 var(--f-body);
  color:var(--ink-2);
}
.docsec ol{ padding-left:24px; }
.docsec li::marker{ color:var(--vermilion); font-weight:700; }

/* Data tables inside articles — the grade converter and friends.
   Wide tables scroll inside their own frame; the page never scrolls sideways. */
.tablewrap{
  overflow-x:auto;
  border:1px solid var(--rule);
  background:var(--bg-raised);
}
.dtable{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
}
.dtable th{
  padding:12px 14px;
  background:var(--bg-ink);
  color:var(--ink-invert);
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  text-align:left;
  white-space:nowrap;
}
.dtable td{
  padding:12px 14px;
  border-top:1px solid var(--rule-soft);
  font:400 16px/1.65 var(--f-body);
  color:var(--ink-2);
  vertical-align:top;
}
.dtable tbody tr:nth-child(even){ background:var(--bg); }
.dtable td strong{ color:var(--ink); }
.dtable__hint{
  margin:0;
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-4);
}

/* Table of contents — legal page */
.toc{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px 22px;
  background:var(--bg-raised);
  border:1px solid var(--rule);
}
.toc__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin:0;
  padding:0;
  list-style:none;
}
.toc__list a{
  font:600 15.5px/1 var(--f-body);
  color:var(--indigo);
  text-decoration:none;
  border-bottom:1px solid var(--indigo);
  padding-bottom:3px;
}
@media (hover:hover){ .toc__list a:hover{ color:var(--vermilion); border-bottom-color:var(--vermilion); } }

/* Callout — affiliate disclosure sits in the vermilion variant */
.callout{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px;
  border:1px solid var(--rule);
  box-shadow:4px 4px 0 var(--rule);
  background:var(--bg-raised);
}
.callout--tan{ background:var(--bg-sunken); }

/* Doc blockquote — sample email / quoted notice in article pages */
.docsec blockquote{
  margin:0;
  padding:18px 22px;
  border:1px solid var(--rule);
  border-left-width:4px;
  background:var(--bg-sunken);
}
.docsec blockquote p{ margin:0; font-family:var(--f-mono); font-size:14px; line-height:1.8; }
.callout__label{ line-height:1; color:var(--ink-3); }
.callout p{
  margin:0;
  font:400 15.5px/1.85 var(--f-body);
  color:var(--ink-2);
}

/* Vermilion is a dark ground — its text must invert. Declared after the
   base rules above so it wins on equal specificity. */
.callout--vermilion{ background:var(--vermilion); }
.callout--vermilion .callout__label,
.callout--vermilion p,
.callout--vermilion li,
.callout--vermilion strong{ color:var(--ink-invert); }
.callout--vermilion a{ color:var(--ink-invert); text-decoration:underline; }

/* Breadcrumb back-link */
.crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
  text-decoration:none;
}
@media (hover:hover){ .crumb:hover{ color:var(--vermilion); } }

/* Compact brand lockup for the document-page top bar */
.topbar__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.topbar__seal{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  background:var(--indigo);
  color:var(--bg);
  font:800 15px/1 var(--f-jp);
}
.topbar__wordmark{
  font:700 15px/1 var(--f-display);
  letter-spacing:.04em;
}
@media (hover:hover){ .topbar__brand:hover .topbar__wordmark{ color:var(--vermilion); } }

/* ── Contact form (Netlify Forms) ──────────────────────────────────────── */

.form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field__label{ line-height:1; }
.field__hint{
  font:400 14.5px/1.6 var(--f-body);
  color:var(--ink-4);
}
.input,
.textarea,
.select{
  width:100%;
  padding:13px 14px;
  background:#FFFDF6;
  border:1px solid var(--rule);
  border-radius:0;
  color:var(--ink);
  font:400 17px/1.6 var(--f-body);
  -webkit-appearance:none;
  appearance:none;
}
.textarea{ min-height:180px; resize:vertical; }
.select{
  background-image:none;
  cursor:pointer;
}
.input:focus,
.textarea:focus,
.select:focus{ outline:3px solid var(--vermilion); outline-offset:1px; }

.form__hp{ position:absolute; left:-9999px; }
.form__submit{ align-self:flex-start; }

/* ── Area pages — hero band ────────────────────────────────────────────── */

.areahero{
  position:relative;
  padding:56px var(--gutter) 44px;
  background:var(--indigo);
  color:var(--ink-invert);
  overflow:hidden;
  scroll-margin-top:20px;
}
.areahero__hatch{
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(251,246,234,.045) 0 12px,transparent 12px 24px);
  pointer-events:none;
}
.areahero__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:820px;
}
.areahero__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--gold-text);
}
.areahero__rule{ width:26px; height:1px; background:var(--gold-fill); }
.areahero__title{
  margin:0;
  font:700 clamp(38px,4.4vw,54px)/1.14 var(--f-display);
  letter-spacing:.01em;
  text-wrap:pretty;
}
.areahero__lede{
  margin:0;
  max-width:640px;
  font:400 19px/1.7 var(--f-body);
  color:rgba(251,246,234,.9);
}
.areahero__vertical{
  position:absolute; top:34px; right:var(--gutter);
  writing-mode:vertical-rl;
  font:800 17px/1 var(--f-jp);
  letter-spacing:.32em;
  color:rgba(251,246,234,.92);
  padding:14px 6px;
  border-left:1px solid rgba(251,246,234,.4);
  border-right:1px solid rgba(251,246,234,.4);
}

.quickfacts{
  display:flex;
  gap:26px 34px;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--rule-invert);
}
.quickfact{ display:flex; flex-direction:column; gap:5px; }
.quickfact__n{
  font:700 24px/1 var(--f-display);
  color:var(--gold-fill);
}
.quickfact__t{
  font:400 13.5px/1.4 var(--f-body);
  color:rgba(251,246,234,.78);
}

/* ── Area pages — crag cards ───────────────────────────────────────────── */

.cragcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.cragcard{
  display:flex;
  flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--rule-soft);
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, border-color .15s ease;
}
@media (hover:hover){
  .cragcard:hover{ background:#fff; border-color:var(--vermilion); color:var(--ink); }
}
.cragcard__thumb{
  height:170px;
  border-bottom:1px solid var(--rule-soft);
}
.cragcard__body{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}
.cragcard__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cragcard__seal{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--vermilion);
  color:var(--vermilion);
  font:800 15px/1 var(--f-jp);
}
.cragcard__mode{ letter-spacing:.14em; }
.cragcard__title{ font:700 24px/1.35 var(--f-display); }
.cragcard__desc{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-4);
}
.cragcard__more{
  margin-top:auto;
  padding-top:6px;
  font:600 14px/1 var(--f-body);
  color:var(--vermilion);
}

/* ── Area pages — accordion ────────────────────────────────────────────── */

.band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:36px;
  padding:48px var(--gutter);
  background:var(--bg-sunken);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.band__head{ gap:14px; }
.band--center{ align-items:center; }
.band__thumb{
  height:220px;
  border:1px solid var(--rule);
}

.accgroup{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--rule-soft);
}
.acc{ border-bottom:1px solid #D6C9AB; }
.acc:last-child{ border-bottom:0; }

.acc__head{
  width:100%;
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:0 18px;
  padding:18px 2px;
  min-height:48px;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  color:var(--ink);
}
.acc__seal{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid #BFAE8C;
  color:var(--ink-3);
  font:800 18px/1 var(--f-jp);
}
.acc__title{ font:700 20px/1.4 var(--f-display); }
.acc__label{
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--vermilion);
  white-space:nowrap;
  justify-self:end;
}
.acc__panel{
  padding:0 2px 20px 70px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.acc__panel p{
  margin:0;
  font:400 15.5px/1.85 var(--f-body);
  color:var(--ink-4);
}
@media (hover:hover){
  .acc__head:hover .acc__title{ color:var(--vermilion); }
}

/* ── Crag pages — shared atoms ─────────────────────────────────────────── */

/* Inline Japanese decorative run — needs its own family so it does not
   inherit Bitter or the mono label stack from its parent. */
.jp{
  font-family:var(--f-jp);
  font-weight:800;
  font-style:normal;
}
/* Vertical Japanese rule-of-thumb set beside a section head */
.vrun{
  writing-mode:vertical-rl;
  font:800 15px/1 var(--f-jp);
  letter-spacing:.34em;
  color:var(--ink-3);
  height:96px;
  flex:none;
}
.vrun--invert{ color:rgba(251,246,234,.6); height:150px; }

.label--invert{ color:rgba(251,246,234,.8); }

.link--gold{ color:var(--gold); border-bottom:1px solid var(--gold); }
@media (hover:hover){ .link--gold:hover{ color:var(--gold-hover); } }

/* Small stamped badge — problem / legend classification */
.badge{
  align-self:flex-start;
  padding:5px 10px;
  border:1px solid var(--rule);
  font:700 12.5px/1.3 var(--f-mono);
  letter-spacing:.12em;
  white-space:nowrap;
}
.badge--vermilion{ background:var(--vermilion); color:var(--ink-invert); }
.badge--indigo{ background:var(--indigo); color:var(--ink-invert); }
.badge--tan{ background:var(--bg-sunken); color:var(--ink); }
.badge--ink{ background:var(--bg-ink); color:var(--ink-invert); }

/* Info table — mono key left, prose value right (DESIGN.md §5) */
.datalist{
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(20,17,13,.22);
}
.datarow{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:0 18px;
  padding:12px 0;
  border-bottom:1px solid rgba(20,17,13,.16);
}
.datarow:last-child{ border-bottom:0; }
.datarow__k{
  font:700 12.5px/1.7 var(--f-mono);
  letter-spacing:.12em;
  color:var(--ink-3);
}
.datarow__k--alert{ color:var(--vermilion); }
.datarow__v{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-2);
  min-width:0;
  overflow-wrap:anywhere;
}
.datalist--tight .datarow{ grid-template-columns:104px 1fr; }

/* Bordered cell grid — rainy-day options, after-climbing options */
.cellgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border:1px solid var(--rule);
}
.cell{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px;
  background:var(--bg-raised);
  border-right:1px solid var(--rule);
}
.cell:last-child{ border-right:0; }
.cell__title{ font:700 20px/1.35 var(--f-display); color:var(--ink); }
.cell__note{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-4);
}
.cell__link{ align-self:flex-start; margin-top:2px; }

/* ── Crag pages — hero media + fact bar ────────────────────────────────── */

.areahero--media .areahero__media{
  position:absolute;
  inset:0;
}
.areahero__scrim{
  position:absolute;
  inset:0;
  background:rgba(20,17,13,.66);
  pointer-events:none;
}

.factbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:var(--bg-ink);
  color:var(--bg);
}
.factbar__cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 22px;
  border-right:1px solid rgba(239,230,210,.2);
}
.factbar__cell:last-child{ border-right:0; }
.factbar__v{ font:700 16.5px/1.4 var(--f-body); }

/* On-this-page anchor strip (the sidebar carries site nav, not section nav) */
.pagenav{
  display:flex;
  align-items:center;
  gap:10px 22px;
  flex-wrap:wrap;
  padding:14px var(--gutter);
  background:var(--bg-raised);
  border-bottom:1px solid var(--rule);
}
.pagenav__link{
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
  text-decoration:none;
}
@media (hover:hover){ .pagenav__link:hover{ color:var(--vermilion); } }

/* ── Crag pages — overview panel ───────────────────────────────────────── */

.infopanel{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px;
  padding:34px;
  background:var(--bg-sunken);
  border:1px solid var(--rule);
}
.infopanel__col{ display:flex; flex-direction:column; gap:14px; }
.infopanel__col .prose{ color:var(--ink-4); }

/* ── Crag pages — season bar ───────────────────────────────────────────── */

.seasonbar{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  border:1px solid var(--rule);
  min-width:0;
}
.seasoncell{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 4px;
  text-align:center;
  background:var(--bg-raised);
  border-right:1px solid var(--rule);
}
.seasoncell:last-child{ border-right:0; }
.seasoncell__m{
  font:700 12.5px/1 var(--f-mono);
  letter-spacing:.06em;
  color:var(--ink-3);
}
.seasoncell__s{
  font:700 13px/1.3 var(--f-body);
  color:var(--ink-4);
  overflow-wrap:anywhere;
}
.seasoncell--good{ background:var(--bg-sunken); }
.seasoncell--good .seasoncell__s{ color:var(--ink-2); }
.seasoncell--prime{ background:var(--indigo); }
.seasoncell--prime .seasoncell__m{ color:rgba(251,246,234,.92); }
.seasoncell--prime .seasoncell__s{ color:var(--ink-invert); }

/* ── Crag pages — accordion variants ───────────────────────────────────── */

/* Head layouts. Base .acc__head is 52px 1fr auto (seal · title · toggle). */
.acc__head--meta{ grid-template-columns:52px 1fr 160px auto; }
.acc__head--data{ grid-template-columns:160px 1fr auto; }
.acc__head--plain{ grid-template-columns:1fr 160px auto; }

/* `display:flex` on .acc__panel outranks the UA rule for [hidden], so the
   collapsed state has to be restated here. */
.acc__panel[hidden]{ display:none; }

.acc__lead{ display:flex; flex-direction:column; gap:6px; }
.acc__sub{
  font:400 15.5px/1.7 var(--f-body);
  color:var(--ink-4);
}
.acc__key{
  font:700 12.5px/1.7 var(--f-mono);
  letter-spacing:.14em;
  color:var(--ink-3);
}
.acc__line{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-2);
}
.acc__meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  font:700 12.5px/1.5 var(--f-mono);
  letter-spacing:.06em;
  color:var(--ink-3);
}
.acc__meta--alert{ color:var(--vermilion); }
.acc__seal--alert{ border-color:var(--vermilion); color:var(--vermilion); }
.acc__panel--flush{ padding-left:2px; }
.acc__panel--data{ padding-left:178px; }
.accgroup--ink{ border-top-color:var(--rule); }
.accgroup--spaced{ margin-top:20px; }
.accgroup--ink .acc{ border-bottom-color:rgba(20,17,13,.22); }

/* Dark ground */
.accgroup--invert{ border-top:1px solid var(--rule-invert); }
.accgroup--invert .acc{ border-bottom:1px solid var(--rule-invert-faint); }
.accgroup--invert .acc__head{ color:var(--ink-invert); }
.accgroup--invert .acc__seal{
  border-color:rgba(251,246,234,.5);
  color:rgba(251,246,234,.92);
}
.accgroup--invert .acc__sub{ color:rgba(251,246,234,.72); }
.accgroup--invert .acc__panel p{ color:rgba(251,246,234,.8); }
@media (hover:hover){
  .accgroup--invert .acc__head:hover .acc__title{ color:var(--gold-text); }
}

/* ── Crag pages — dark rules band ──────────────────────────────────────── */

.darkband{
  position:relative;
  padding:52px var(--gutter);
  background:var(--indigo);
  color:var(--ink-invert);
  overflow:hidden;
  scroll-margin-top:20px;
}
.darkband__hatch{
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(251,246,234,.045) 0 12px,transparent 12px 24px);
  pointer-events:none;
}
.darkband__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.darkband__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.darkband__head .stack{ max-width:700px; }

/* Rule chips — the five national rules restated under a local band */
.chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:1px solid rgba(251,246,234,.35);
}
.chip{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:16px 18px;
  border-right:1px solid rgba(251,246,234,.25);
}
.chip:last-child{ border-right:0; }
.chip__k{
  font:700 12.5px/1 var(--f-mono);
  letter-spacing:.16em;
  color:rgba(251,246,234,.8);
}
.chip__v{ font:700 15.5px/1.5 var(--f-body); }

/* ── Crag pages — star problems ────────────────────────────────────────── */

.problemcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
}
.problemcard{
  display:flex;
  flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--rule);
  box-shadow:4px 4px 0 var(--rule);
}
.problemcard__media{
  aspect-ratio:16/9;
  border-bottom:1px solid var(--rule);
}
.problemcard__body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
}
.problemcard__name{ font:700 20px/1.35 var(--f-display); color:var(--ink); }
.problemcard__desc{
  font:400 15.5px/1.75 var(--f-body);
  color:var(--ink-4);
}

/* ── Crag pages — local legends ────────────────────────────────────────── */

.legendcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
}
.legendcard{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
  background:var(--bg);
  border:1px solid var(--rule);
}
.legendcard__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.legendcard__grade{
  font:700 12.5px/1.5 var(--f-mono);
  letter-spacing:.08em;
  color:var(--vermilion);
}
.legendcard__name{ font:700 21px/1.35 var(--f-display); color:var(--ink); }
.legendcard__note{
  font:400 15.5px/1.8 var(--f-body);
  color:var(--ink-4);
}

/* ── Crag pages — crowd forecast ───────────────────────────────────────── */

.crowdlegend{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.crowdlegend__item{
  display:flex;
  align-items:center;
  gap:8px;
  font:700 12.5px/1 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
}
.swatch{
  width:16px; height:16px;
  flex:none;
  border:1px solid var(--rule);
}
.swatch--quiet{ background:var(--bg-sunken); }
.swatch--moderate{ background:var(--indigo); }
.swatch--busy{ background:var(--vermilion); }

.crowd{
  display:grid;
  grid-template-columns:110px repeat(3,minmax(0,1fr));
  border:1px solid var(--rule);
  min-width:0;
}
.crowd__h{
  padding:12px 14px;
  background:var(--bg-ink);
  color:var(--bg);
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.14em;
  border-left:1px solid rgba(239,230,210,.3);
}
.crowd__h:first-child{ border-left:0; }
.crowd__season{
  padding:14px;
  background:var(--bg-sunken);
  border-top:1px solid var(--rule);
  font:700 15.5px/1.4 var(--f-body);
}
.crowd__cell{
  padding:14px;
  background:var(--bg-raised);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
  font:700 12.5px/1.5 var(--f-mono);
  color:var(--ink-3);
  overflow-wrap:anywhere;
}

/* ── Crag pages — topo sheets (mitake-topo.html) ───────────────────────── */

.areahero--media .areahero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  display:block;
}

.topocards{
  display:flex;
  flex-direction:column;
  gap:30px;
}
.topocard{
  display:flex;
  flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--rule);
  box-shadow:4px 4px 0 var(--rule);
}
.topocard__head{
  display:flex;
  align-items:baseline;
  gap:8px 16px;
  flex-wrap:wrap;
  padding:14px 20px;
  border-bottom:1px solid var(--rule);
}
.topocard__num{
  font:700 13px/1 var(--f-mono);
  letter-spacing:.1em;
  color:var(--vermilion);
}
.topocard__name{ font:700 20px/1.35 var(--f-display); color:var(--ink); }
.topocard__jp{ font:800 15px/1.4 var(--f-jp); color:var(--ink-3); }
.topocard__open{
  margin-left:auto;
  font:700 12.5px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
  text-decoration:none;
  white-space:nowrap;
}
@media (hover:hover){ .topocard__open:hover{ color:var(--vermilion); } }
.topocard__media{
  display:block;
  background:var(--hatch-a);
}
.topocard__media img{ display:block; width:100%; height:auto; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width:920px){
  :root{ --gutter:20px; }
  .topocard__head{ padding:12px 14px; }
  .topocard__open{ margin-left:0; }

  .shell{ flex-direction:column; }
  .sidebar{
    position:static;
    width:auto;
    height:auto;
    padding:20px;
    border-right:0;
    border-bottom:1px solid var(--rule);
  }
  .sidebar__foot{ margin-top:0; }

  .hero{ height:auto; min-height:520px; }
  .hero__body{ position:static; padding:180px 0 34px; }
  .hero__img,
  .hero__canvas{ position:absolute; }

  .rule{
    grid-template-columns:44px minmax(0,1fr);
    gap:16px 16px;
  }
  .rule__img{ grid-column:2; }
  .rule__text{ grid-column:2; }

  .areahero__vertical{ display:none; }

  .acc__head{
    grid-template-columns:36px minmax(0,1fr);
    gap:8px 14px;
  }
  .acc__label{ grid-column:2; justify-self:start; }
  .acc__panel{ padding-left:50px; }

  /* Crag pages */
  .acc__head--meta{ grid-template-columns:36px minmax(0,1fr); }
  .acc__head--data,
  .acc__head--plain{ grid-template-columns:minmax(0,1fr); }
  .acc__head--meta .acc__meta,
  .acc__head--data .acc__line,
  .acc__head--plain .acc__meta{ grid-column:2; }
  .acc__head--data .acc__line,
  .acc__head--data .acc__key,
  .acc__head--data .acc__label,
  .acc__head--plain .acc__meta,
  .acc__head--plain .acc__label{ grid-column:1; justify-self:start; }
  .acc__panel--data{ padding-left:2px; }

  .infopanel{ padding:22px; gap:24px; }
  .seasonbar{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .seasoncell{ border-bottom:1px solid var(--rule); }
  .seasoncell:nth-child(6n){ border-right:0; }
  .seasoncell:nth-child(n+7){ border-bottom:0; }

  .datarow{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .datalist--tight .datarow{ grid-template-columns:minmax(0,1fr); }

  .cell{ border-right:0; border-bottom:1px solid var(--rule); }
  .cell:last-child{ border-bottom:0; }
  .chip{ border-right:0; border-bottom:1px solid rgba(251,246,234,.25); }
  .chip:last-child{ border-bottom:0; }
  .factbar__cell{ border-right:0; border-bottom:1px solid rgba(239,230,210,.2); }
  .factbar__cell:last-child{ border-bottom:0; }

  .crowd{ grid-template-columns:88px repeat(3,minmax(0,1fr)); }
  .crowd__h,
  .crowd__season,
  .crowd__cell{ padding:11px 9px; }
  .vrun{ display:none; }
}

@media (max-width:560px){
  .gates{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bundle__price{ padding:0 20px 26px; align-items:flex-start; }
  .bundle__body{ padding:26px 20px 0; }
}

/* ── Cookie consent bar ────────────────────────────────────────────────── */

.consent{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px 26px;
  flex-wrap:wrap;
  padding:18px var(--gutter);
  background:var(--bg-ink);
  border-top:1px solid var(--gold);
  color:var(--ink-invert);
}
.consent__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:720px;
}
.consent__label{ color:var(--gold-text); line-height:1; }
.consent__text{
  margin:0;
  font:400 15.5px/1.7 var(--f-body);
  color:rgba(251,246,234,.92);
}
.consent__link{
  color:var(--ink-invert);
  text-decoration:underline;
}
@media (hover:hover){ .consent__link:hover{ color:var(--gold-text); } }
.consent__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.consent__btn{ padding:13px 24px; min-height:44px; font-size:16px; }

/* A button that has to read as a link (the consent reset) */
.linkbtn{
  background:none;
  border:0;
  padding:0 0 3px;
  cursor:pointer;
  font-family:inherit;
}

/* Current-choice readout on the privacy page */
.consent__state{
  font:700 13px/1.4 var(--f-mono);
  letter-spacing:.1em;
  color:var(--ink-3);
}

/* ── Motion / print ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
  .hero__canvas{ display:none; }
}

@media print{
  .sidebar,.hero__canvas,.strip__fill{ display:none; }
  body{ background:#fff; }
  .btn,.pack,.gate,.bundle,.authornote{ box-shadow:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}