/* ==========================================================================
   japow.tokyo
   A 16-bit console interface, borrowed from the hero art and used straight:
   flat fills, hard offset shadows, no curves anywhere, dithered transitions
   between sections instead of gradients.
   ========================================================================== */

:root{
  /* Palette pulled from the hero illustration */
  --ink:      #0B1626;   /* midnight navy — the dark ground */
  --ink-2:    #14263D;   /* raised panel on dark */
  --ink-3:    #24405F;   /* hairline / border on dark */
  --snow:     #F4F8FC;   /* the light ground — blue-cast, never cream */
  --snow-2:   #E1EBF5;
  --sky:      #3D8FD6;
  --sky-lt:   #8FC7EE;
  --vermilion:#DC2F3A;   /* the flag, the 歓迎 sign, the suit */
  --gold:     #F2B33D;   /* festival banners, lantern light */
  --cedar:    #4CAF6D;   /* 初級 green */

  --dim-d:    #9FB4CC;   /* muted text on dark */
  --dim-l:    #4A5F78;   /* muted text on light */
  --rule-d:   #2A415E;
  --rule-l:   #C3D5E6;
  --ref:      #9BB2C7;   /* non-Japan comparison bars */

  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --px:   'Silkscreen', ui-monospace, monospace;
  --jp:   'DotGothic16', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1220px;
  --unit: 30px;          /* one metre of snow, in pixels */
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--snow);
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

::selection{ background:var(--gold); color:var(--ink); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--ink);
  padding:.75rem 1.25rem; font-family:var(--px); font-size:.8rem;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.jp{ font-family:var(--jp); font-weight:400; }


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:40;
  background:rgba(11,22,38,.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--rule-d);
}
.bar__in{
  max-width:var(--maxw); margin-inline:auto; padding:.7rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* Regular weight, no drop shadow. Silkscreen Bold closes the notch in the W
   and the wordmark reads as JAPOM; the light cut keeps it a W. */
.mark{
  font-family:var(--px); font-weight:400; text-decoration:none;
  font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);
  letter-spacing:.07em; color:var(--snow);
}
.mark__tld{ color:var(--sky-lt); }

.nav{ display:flex; gap:clamp(.9rem,2.2vw,2rem); }
.nav a{
  font-family:var(--px); font-size:clamp(.62rem,.55rem + .2vw,.75rem);
  text-decoration:none; color:var(--dim-d);
  text-transform:uppercase; letter-spacing:.03em;
  padding-block:.35rem; border-bottom:3px solid transparent;
  transition:color .12s linear, border-color .12s linear;
}
.nav a:hover,.nav a:focus-visible{ color:var(--snow); border-bottom-color:var(--gold); }

/* On a phone a two-line sticky bar eats a sixth of the screen for the whole
   scroll. Keep every link, give the bar up. */
@media (max-width:660px){
  .bar{ position:static; }
  .bar__in{ flex-direction:column; align-items:flex-start; gap:.6rem; padding-block:.9rem 1rem; }
  .nav{ gap:.15rem 1.25rem; flex-wrap:wrap; }
}

/* keep section headings clear of the sticky bar when jumping to an anchor */
section[id]{ scroll-margin-top:4.5rem; }


/* --------------------------------------------------------------------------
   Hero — full-bleed art, with the headline in an SNES message box
   -------------------------------------------------------------------------- */
.hero{ position:relative; background:var(--ink); }

.hero__frame{ position:relative; overflow:hidden; }
.hero__art{
  width:100%; height:clamp(300px,58vw,760px); object-fit:cover;
  object-position:62% 42%;
}
.hero__frame::after{           /* keeps the message box legible over the art */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,22,38,.92) 0%, rgba(11,22,38,.45) 26%, rgba(11,22,38,0) 55%);
}
@media (min-width:900px){
  .hero__frame::after{
    background:
      linear-gradient(to top, rgba(11,22,38,.75) 0%, rgba(11,22,38,0) 40%),
      linear-gradient(to right, rgba(11,22,38,.88) 0%, rgba(11,22,38,.35) 42%, rgba(11,22,38,0) 66%);
  }
}
.hero__snow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.hero__box{
  --pip:linear-gradient(var(--gold),var(--gold));
  position:relative;
  width:min(100% - (var(--gut) * 2), 640px);
  margin:-3rem auto 0;
  /* four gold studs, the way a console dialogue frame is riveted */
  background:
    var(--pip) 7px 7px/8px 8px no-repeat,
    var(--pip) calc(100% - 7px) 7px/8px 8px no-repeat,
    var(--pip) 7px calc(100% - 7px)/8px 8px no-repeat,
    var(--pip) calc(100% - 7px) calc(100% - 7px)/8px 8px no-repeat,
    var(--ink-2);
  border:3px solid var(--sky-lt);
  box-shadow:0 0 0 3px var(--ink), 10px 10px 0 rgba(0,0,0,.55);
  padding:clamp(1.75rem,4vw,2.4rem);
}
@media (min-width:900px){
  .hero__box{
    position:absolute; left:var(--gut); bottom:clamp(2rem,6vw,4.5rem);
    margin:0; width:min(560px, 52vw);
  }
}
.hero__h1{
  font-family:var(--sans);
  font-variation-settings:'wdth' 88,'wght' 780;
  font-size:clamp(1.9rem, 1.15rem + 3.2vw, 3.5rem);
  line-height:1.02; letter-spacing:-.022em;
  margin:.85rem 0 0; text-wrap:balance;
}
.hero__sub{
  color:var(--dim-d); margin-top:1rem; max-width:46ch;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
}
.hero__act{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:1.75rem; }

.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--px); font-size:.8rem; letter-spacing:.02em;
  background:var(--vermilion); color:#fff;
  padding:.95rem 1.4rem;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover,.btn:focus-visible{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }

.lnk{
  font-family:var(--px); font-size:.72rem; color:var(--sky-lt);
  text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:2px;
}
.lnk:hover,.lnk:focus-visible{ color:var(--gold); }


/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */
.sec{ padding-block:clamp(3.5rem,8vw,7rem); }
.sec--dark{ background:var(--ink); color:var(--snow); }
.sec--light{ background:var(--snow); color:var(--ink); }

.eyebrow{
  font-family:var(--px); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.eyebrow i{ font-style:normal; opacity:.5; }
.eyebrow .jp{ font-size:.95rem; letter-spacing:.08em; }
/* once the eyebrow wraps, the separator is left dangling — drop it */
@media (max-width:520px){ .eyebrow i{ display:none; } }
.sec--light .eyebrow{ color:#B07406; }

.h2{
  font-variation-settings:'wdth' 86,'wght' 760;
  font-size:clamp(1.65rem,1.1rem + 2.3vw,2.9rem);
  line-height:1.06; letter-spacing:-.02em;
  margin:.7rem 0 0; text-wrap:balance;
}
.lede{
  margin-top:1.1rem; max-width:58ch;
  color:var(--dim-d); font-size:clamp(1rem,.95rem + .3vw,1.15rem);
}
.sec--light .lede{ color:var(--dim-l); }


/* --------------------------------------------------------------------------
   Dithered section transitions — ordered dither, the way a 16-bit tileset
   fades one colour into another without a gradient
   -------------------------------------------------------------------------- */
.dither{ display:block; height:40px; line-height:0; }
.dither i{ display:block; height:8px; }

.dither--down{ background:var(--snow); }          /* dark  -> light */
.dither--up  { background:var(--ink);  }          /* light -> dark  */
.dither--down i{ --c:var(--ink); }
.dither--up   i{ --c:var(--snow); }

.dither i:nth-child(1){ background:var(--c); }
.dither i:nth-child(2){
  background-image:repeating-conic-gradient(from 0deg, var(--c) 0% 75%, transparent 0% 100%);
  background-size:8px 8px;
}
.dither i:nth-child(3){
  background-image:repeating-conic-gradient(from 0deg, var(--c) 0% 25%, transparent 0% 50%);
  background-size:8px 8px;
}
.dither i:nth-child(4){
  background-image:repeating-conic-gradient(from 0deg, var(--c) 0% 25%, transparent 0% 100%);
  background-size:8px 8px;
}
.dither i:nth-child(5){
  background-image:repeating-conic-gradient(from 0deg, var(--c) 0% 25%, transparent 0% 100%);
  background-size:16px 16px;
}


/* --------------------------------------------------------------------------
   The weather diagram
   -------------------------------------------------------------------------- */
.dgm{ margin-top:clamp(2rem,5vw,3.25rem); }
.dgm__svg{
  width:100%; height:auto;
  shape-rendering:crispEdges;
  border:2px solid var(--rule-d);
  background:#0E1D31;
}
.dgm-cold{ fill:var(--sky-lt); opacity:.85; }
.dgm-land{ fill:#2C4A6B; }
.dgm-landsnow{ fill:#8AAAC9; }
.dgm-sea{ fill:#1E5C93; }
.dgm-warm{ fill:var(--gold); }
.dgm-vap{ fill:#7FB4DE; opacity:.7; }
.dgm-mtn{ fill:#E6F0FA; }
.dgm-mtnshade{ fill:#B4CDE4; }
.dgm-mtnbase{ fill:#1F4A3C; }
.dgm-snow{ fill:#fff; }
.dgm-lbl{ font-family:var(--px); font-size:15px; fill:var(--snow); letter-spacing:.04em; }
.dgm-lbl--dim{ fill:var(--dim-d); opacity:.6; }
.dgm-note{ font-family:var(--px); font-size:13px; fill:var(--sky-lt); }
.dgm-note--warm{ fill:var(--gold); }
.dgm-note--snow{ fill:#fff; }

.steps{
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:1fr; margin-top:clamp(2rem,5vw,3rem);
}
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }

.step{ border-top:3px solid var(--sky); padding-top:1.15rem; }
.step__q{
  font-family:var(--px); font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);
  color:var(--gold); line-height:1;
}
.step__h{
  font-size:1.12rem; font-variation-settings:'wdth' 92,'wght' 700;
  line-height:1.28; margin-top:.8rem;
}
.step__h .jp{ color:var(--sky-lt); font-size:.95rem; letter-spacing:.08em; }
.step__p{ color:var(--dim-d); margin-top:.65rem; font-size:.97rem; }


/* --------------------------------------------------------------------------
   SIGNATURE — snowfall drawn to scale, one block per metre
   -------------------------------------------------------------------------- */
.chart{
  --unit:30px;   /* one metre */
  --gap:6px;     /* mortar between slabs */
  --cap:6px;     /* lit top edge of each slab */
  margin-top:clamp(2.5rem,6vw,4rem);
}

.chart__plot{
  position:relative;
  padding-left:3.4rem;
  border-bottom:3px solid var(--ink);
  min-height:calc(15 * var(--unit));
}

.chart__axis{
  position:absolute; left:0; bottom:0; width:3rem;
  height:calc(15 * var(--unit));
}
.chart__axis span{
  position:absolute; left:0; right:.5rem;
  bottom:calc(var(--m) * var(--unit));
  transform:translateY(50%);
  font-family:var(--px); font-size:.62rem; color:var(--dim-l);
  text-align:right; white-space:nowrap;
}

.chart__marks{
  position:absolute; left:3.4rem; right:0; bottom:0; z-index:3;
  height:calc(15 * var(--unit)); pointer-events:none;
}
/* Reference heights. The label needs a solid chip or it drowns in the bars. */
.mk{
  position:absolute; left:0; right:0; bottom:calc(var(--m) * var(--unit));
  border-top:2px dashed var(--vermilion);
}
.mk i{
  position:absolute; top:3px; left:0; white-space:nowrap;
  font-style:normal; font-size:.68rem; letter-spacing:.01em;
  color:var(--vermilion); background:var(--snow);
  padding:.1rem .45rem .1rem 0;
}
.mk b{ font-family:var(--px); font-size:.66rem; }

.chart__cols{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; gap:clamp(.35rem,1.2vw,1rem);
  height:calc(15 * var(--unit));
}
.col{ position:relative; flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; }

.col__fill{
  --fill:var(--sky);
  display:block; width:100%;
  height:calc(var(--m) * var(--unit));
  background-image:
    /* lit cap on every metre */
    repeating-linear-gradient(to top,
      transparent 0 calc(var(--unit) - var(--gap) - var(--cap)),
      rgba(255,255,255,.5) calc(var(--unit) - var(--gap) - var(--cap)) calc(var(--unit) - var(--gap)),
      transparent calc(var(--unit) - var(--gap)) var(--unit)),
    /* the slab itself */
    repeating-linear-gradient(to top,
      var(--fill) 0 calc(var(--unit) - var(--gap)),
      transparent calc(var(--unit) - var(--gap)) var(--unit));
}
/* Comparison resorts: same slabs, no lit cap, so they sit back a plane
   without disappearing. */
.col--ref .col__fill{
  --fill:var(--ref);
  background-image:repeating-linear-gradient(to top,
      var(--fill) 0 calc(var(--unit) - var(--gap)),
      transparent calc(var(--unit) - var(--gap)) var(--unit));
}
/* a beat of air where Japan stops and everywhere else starts */
.col:nth-child(6){ margin-left:clamp(.75rem,2vw,1.75rem); }

/* The bars are drawn at full height by default, so the chart is correct with
   no JS at all. Script collapses them only once it can animate them back. */
.chart.is-anim .col__fill{ height:0; }
.chart.is-anim.is-in .col__fill{
  height:calc(var(--m) * var(--unit));
  transition:height .7s steps(15) var(--d,0s);
}

.col__n{
  position:absolute; bottom:calc(var(--m) * var(--unit) + 6px);
  left:0; right:0; text-align:center;
  font-family:var(--px); font-size:clamp(.6rem,.5rem + .3vw,.8rem);
  color:var(--ink);
}
.col--ref .col__n{ color:var(--dim-l); }

.col__l{
  position:absolute; top:calc(100% + .55rem); left:0; right:0;
  font-size:clamp(.62rem,.55rem + .25vw,.8rem); line-height:1.2;
  font-variation-settings:'wdth' 82,'wght' 680;
  text-align:center; color:var(--ink);
  overflow-wrap:anywhere;
}
.col__l span{
  display:block; font-variation-settings:'wdth' 88,'wght' 400;
  font-size:.86em; color:var(--dim-l); margin-top:.15rem;
}
.col--ref .col__l{ color:var(--dim-l); }

.chart__cap{
  margin-top:5.25rem; padding-top:1.5rem;
  border-top:2px solid var(--rule-l);
  display:grid; gap:1rem; max-width:66ch;
}
.chart__cap p{ color:var(--dim-l); }
.chart__cap b{ color:var(--ink); font-variation-settings:'wdth' 100,'wght' 700; }
/* A whole sentence in pixel caps is a slog to read. Footnotes stay in the
   body face; the pixel font is for labels and numbers. */
.chart__src{ font-size:.82rem; opacity:.85; }

@media (max-width:760px){
  .chart{ --unit:19px; --gap:4px; --cap:3px; }
  .chart__plot{ padding-left:3rem; }
  .chart__axis{ width:2.6rem; }
  .chart__axis span{ font-size:.55rem; }
  .chart__marks{ left:3rem; }
  .mk i{ font-size:.62rem; }
  .col__l{ writing-mode:vertical-rl; text-orientation:mixed; height:6.5rem; margin-inline:auto; text-align:left; }
  .col__l span{ margin:0 0 0 .2rem; }
  .chart__cap{ margin-top:8rem; }
  .col__n{ font-size:.55rem; }
}


/* --------------------------------------------------------------------------
   Resort cards
   -------------------------------------------------------------------------- */
.cards{
  display:grid; gap:clamp(1.1rem,2.2vw,1.6rem);
  grid-template-columns:1fr; margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .cards{ grid-template-columns:repeat(3,1fr); } }

.card{
  position:relative;
  background:var(--ink-2);
  border:2px solid var(--ink-3);
  box-shadow:7px 7px 0 rgba(0,0,0,.45);
  padding:clamp(1.25rem,2.4vw,1.6rem);
  display:flex; flex-direction:column;
  transition:transform .09s steps(2), box-shadow .09s steps(2), border-color .09s linear;
}
.card:hover{ transform:translate(3px,3px); box-shadow:4px 4px 0 rgba(0,0,0,.45); border-color:var(--sky); }

.card__rgn{
  font-family:var(--px); font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sky-lt);
  display:flex; align-items:baseline; gap:.5rem;
}
.card__rgn .jp{ font-size:.8rem; color:var(--dim-d); letter-spacing:.06em; }

.card__snow{
  position:absolute; top:1rem; right:1.1rem;
  font-family:var(--px); line-height:1; color:var(--gold);
  display:flex; align-items:baseline; gap:.12rem;
}
.card__snow b{ font-size:2rem; font-weight:700; }
.card__snow i{ font-size:.85rem; font-style:normal; }

.card__h{
  margin-top:.6rem; padding-right:3.5rem;
  font-variation-settings:'wdth' 86,'wght' 750;
  font-size:1.35rem; line-height:1.1; letter-spacing:-.015em;
}
.card__h .jp{
  display:block; margin-top:.35rem;
  font-size:.85rem; letter-spacing:.06em; color:var(--sky-lt);
  font-variation-settings:normal;
}
.card__p{ margin-top:.9rem; color:var(--dim-d); font-size:.93rem; }

.spec{
  margin-top:1.15rem; padding-top:1rem; border-top:2px solid var(--ink-3);
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1rem;
}
.spec div{ display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }
.spec dt{
  font-family:var(--px); font-size:.58rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim-d);
}
.spec dd{ margin:0; font-family:var(--px); font-size:.72rem; color:var(--snow); }

/* Japanese piste colours: 初級 green, 中級 red, 上級 black. Solid black
   vanishes on a dark card, so 上級 gets a 50% dither instead — still the
   darkest block, but you can see where it starts. */
.split{ display:flex; height:12px; margin-top:1.15rem; border:2px solid var(--ink); }
.split__seg{ display:block; width:calc(var(--w) * 1%); }
.split__seg--b{ background:var(--cedar); }
.split__seg--i{ background:var(--vermilion); }
.split__seg--a{
  background-color:#050C16;
  background-image:repeating-conic-gradient(#7E97B5 0% 25%, transparent 0% 50%);
  background-size:4px 4px;
}

.key{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.6rem;
  font-family:var(--px); font-size:.6rem; color:var(--dim-d);
}
.key li{ display:flex; align-items:center; gap:.3rem; }
.key .jp{ font-size:.8rem; color:var(--snow); letter-spacing:.04em; }
.key__d{ width:9px; height:9px; display:block; border:1px solid var(--ink); }
.key__d--b{ background:var(--cedar); }
.key__d--i{ background:var(--vermilion); }
.key__d--a{
  background-color:#050C16; border-color:var(--ink);
  background-image:repeating-conic-gradient(#7E97B5 0% 25%, transparent 0% 50%);
  background-size:4px 4px;
}

.card__acc{
  margin-top:auto; padding-top:1.15rem;
  font-family:var(--px); font-size:.63rem; color:var(--sky-lt); letter-spacing:.02em;
}
.card__acc i{ font-style:normal; color:var(--gold); padding-inline:.15rem; }


/* --------------------------------------------------------------------------
   Routes
   -------------------------------------------------------------------------- */
.routes{
  display:grid; gap:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:1fr; margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:900px){ .routes{ grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3.5rem); } }

.routes__h{
  font-variation-settings:'wdth' 88,'wght' 750;
  font-size:1.3rem; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding-bottom:.6rem; border-bottom:3px solid var(--ink);
}
.routes__h .jp{ font-size:.9rem; color:var(--dim-l); font-variation-settings:normal; }
.routes__pre{ margin-top:.9rem; color:var(--dim-l); font-size:.93rem; max-width:52ch; }

.route{ margin-top:1.9rem; }
.route__d{
  font-variation-settings:'wdth' 84,'wght' 700; font-size:1.02rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.route__d .jp{ font-size:.82rem; color:var(--dim-l); font-variation-settings:normal; }

.line{ display:flex; flex-direction:column; margin-top:.85rem; }

.stop{ display:flex; align-items:baseline; gap:.6rem; position:relative; padding-left:1.4rem; }
.stop::before{
  content:''; position:absolute; left:0; top:.42em;
  width:12px; height:12px; background:var(--sky); border:2px solid var(--ink);
}
.stop--end::before{ background:var(--vermilion); }
.stop b{ font-variation-settings:'wdth' 92,'wght' 700; font-size:.95rem; }
.stop span{ font-family:var(--jp); font-size:.82rem; color:var(--dim-l); }

.leg{
  position:relative; padding-left:1.4rem; margin-left:0;
  padding-block:.5rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.leg::before{
  content:''; position:absolute; left:5px; top:0; bottom:0;
  width:2px;
  background:repeating-linear-gradient(to bottom, var(--dim-l) 0 4px, transparent 4px 8px);
}
.leg b{
  font-family:var(--px); font-size:.6rem; font-weight:400;
  color:var(--dim-l); text-transform:uppercase; letter-spacing:.04em;
}
.leg span{
  font-family:var(--px); font-size:.68rem; color:var(--ink);
  background:var(--snow-2); padding:.1rem .4rem;
}

.aside{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  background:var(--ink); color:var(--snow);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--gold);
  padding:clamp(1.25rem,3vw,1.85rem);
  max-width:70ch;
}
.aside__h{
  font-family:var(--px); font-size:.75rem; color:var(--gold);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.6rem;
}
.aside__h .jp{ font-size:.95rem; text-transform:none; letter-spacing:.08em; }
.aside p{ color:var(--dim-d); font-size:.95rem; }


/* --------------------------------------------------------------------------
   Before you ride
   -------------------------------------------------------------------------- */
.notes{
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:1fr; margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:680px){ .notes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .notes{ grid-template-columns:repeat(3,1fr); } }

.note{ border-left:4px solid var(--vermilion); padding-left:1.1rem; }
.note__jp{
  font-family:var(--jp); font-size:1.45rem; line-height:1.1;
  color:var(--gold); letter-spacing:.06em;
}
.note__h{
  margin-top:.4rem; font-size:1rem;
  font-variation-settings:'wdth' 90,'wght' 700;
}
.note p{ color:var(--dim-d); font-size:.93rem; margin-top:.55rem; }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{ background:var(--ink); border-top:2px solid var(--rule-d); padding-top:clamp(2.5rem,6vw,4rem); }
.foot__in{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:840px){ .foot__in{ grid-template-columns:1.1fr 1fr; gap:3rem; } }

.mark--foot{ font-size:1.35rem; display:inline-block; }
.foot__tag{ margin-top:.9rem; color:var(--dim-d); max-width:38ch; font-size:.95rem; }

.foot__meta{ display:grid; gap:1.25rem; align-content:start; }
.foot__meta p{ color:var(--dim-d); font-size:.87rem; }
.foot__meta b{
  font-family:var(--px); font-size:.6rem; color:var(--sky-lt);
  text-transform:uppercase; letter-spacing:.05em;
}

.foot__base{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-block:1.25rem;
  border-top:2px solid var(--rule-d);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--dim-d);   /* Silkscreen has no © glyph */
}
.foot__base .jp{ font-family:var(--jp); font-size:.85rem; color:var(--sky-lt); }


/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}