/* Sherwood: responsive title and a scroll-led painted landscape. */
html,body{overflow-x:clip}
.hero-inner{width:100%;max-width:1200px;min-width:0;padding:24px clamp(20px,4vw,64px)}
#hero h1{font-size:clamp(2rem,10.5vw,8.5rem);white-space:nowrap;display:block;width:100%;padding-inline:.04em;letter-spacing:.05em}
#legend{max-width:none;padding:clamp(5rem,12vh,9rem) 0 0}
.legend-heading{max-width:var(--maxw);margin:0 auto;padding:0 24px 2rem}
.legend-journey{position:relative;isolation:isolate;padding-bottom:20svh}
.legend-art{position:relative;margin:0;background:var(--loam-deep);border-block:1px solid var(--hairline-strong)}
.legend-art__viewport{position:relative;overflow:hidden;aspect-ratio:3/2}
.legend-art__image{display:block;width:100%;height:auto;max-width:none}
.legend-art__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,6,.12),transparent 25%,transparent 70%,rgba(6,10,6,.48))}
.legend-art figcaption{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 2rem;padding:1rem clamp(20px,4vw,64px);color:var(--parchment);background:var(--loam-deep);min-height:0}
.legend-art__name{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.legend-art__credit{font-size:.62rem;color:var(--parchment-dim);letter-spacing:.04em}
.legend-art__tools{position:sticky;top:24px;height:0;padding-left:clamp(18px,3vw,48px);display:none;align-items:flex-start;gap:12px;z-index:4;pointer-events:none}
.legend-art__pause{pointer-events:auto}
.legend-art__meter{margin-top:19px}
.legend-art__pause{padding:.7rem .9rem;border:1px solid rgba(233,225,204,.55);border-radius:3px;color:var(--parchment);background:rgba(6,10,6,.85);font:500 .65rem 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.legend-art__pause:hover{background:var(--parchment);color:var(--loam)}
.legend-art__meter{width:80px;height:2px;background:rgba(233,225,204,.35)}
.legend-art__meter span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--legend-progress,0));transform-origin:left}
.legend-story{position:relative;z-index:2;pointer-events:none}
.legend-card{pointer-events:auto}
.legend-beat{max-width:var(--maxw);padding:1.5rem 24px;margin:0 auto}
.legend-card p:last-child,.legend-card .flag:last-child{margin-bottom:0}
.legend-card .flag{color:var(--parchment-dim)}
.legend-card .pull{margin-top:.3rem}
.legend-card .dim{color:var(--parchment)}
.legend-motion .legend-art{position:sticky;top:0;height:100svh;border-bottom:0}
.legend-motion .legend-art__viewport{position:absolute;inset:0;aspect-ratio:auto}
.legend-motion .legend-art__image{position:absolute;left:0;top:0;will-change:transform}
.legend-motion .legend-art figcaption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(6,10,6,.9));padding-top:2.5rem;border-top:0;pointer-events:none}
.legend-motion .legend-art__tools{display:flex}
.legend-motion .legend-story{margin-top:-10svh}
.legend-motion .legend-beat{display:flex;align-items:center;min-height:92svh;max-width:1440px;padding:12svh clamp(24px,5vw,80px)}
.legend-motion .legend-beat:nth-child(-n+2){justify-content:flex-end}
.legend-motion .legend-beat:nth-child(n+3){justify-content:flex-start}
.legend-motion .legend-card{width:min(33rem,44%);padding:clamp(24px,3vw,42px);background:rgba(6,13,8,.94);border:1px solid rgba(233,225,204,.2);border-radius:3px;box-shadow:0 18px 60px rgba(0,0,0,.2)}
.legend-motion .legend-card p{font-size:1rem;line-height:1.8}
.legend-motion .legend-card .pull{font-size:1.3rem}
.legend-motion .legend-card .flag{font-size:.68rem}
@media(max-width:800px){
  .legend-motion .legend-card{width:min(34rem,100%);padding:24px}
  .legend-motion .legend-beat{justify-content:center!important;min-height:100svh;padding:24svh 20px}
  .legend-art__tools{top:16px}
  .legend-art figcaption{gap:.25rem}
  .legend-art__name{font-size:.6rem;letter-spacing:.13em}
  .legend-art__credit{font-size:.55rem}
}
@media(max-width:560px){
  /* Keep this after the base gauges rule so the small-screen layout wins. */
  .gauges{grid-template-columns:1fr}
  .gcol+.gcol{border-left:0;border-top:1px solid var(--hairline)}
  .verifybox input{min-width:0;width:100%;flex-basis:100%}
  .modes{max-width:100%;flex-wrap:wrap}
  .maplayout,.mapside{min-width:0}
  .hero-meta{max-width:40ch;margin-inline:auto;line-height:1.9}
}
@media(prefers-reduced-motion:reduce){
  .legend-journey{padding-bottom:0}
  .legend-art__image{will-change:auto}
}
@media print{
  .legend-art{position:relative!important;height:auto!important}
  .legend-art__viewport{position:relative!important;aspect-ratio:3/2!important}
  .legend-art__image{width:100%!important;height:auto!important;transform:none!important}
  .legend-art__tools{display:none!important}
  .legend-motion .legend-story{margin-top:0}
  .legend-motion .legend-beat{display:block;min-height:0;padding:1rem 24px}
  .legend-motion .legend-card{width:100%}
}