@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root{
  --paper:#FBF6EE;
  --ink:#151021;
  --ink-soft:#4A4257;
  --line:#151021;
  --art:#F0186B;
  --capsule:#1B5CFF;
  --casino:#00A06A;
  --ice:#7A3BFF;
  --sun:#FFD400;
  --accent:var(--sun);
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(16px,.55vw + 15px,18px);line-height:1.62;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- MASTHEAD (in-flow, integrated, no sticky bar) ---------- */
.mast{background:var(--accent);color:var(--ink);border-bottom:3px solid var(--line);
  padding:clamp(1.6rem,4vw,3.4rem) 0 clamp(1.2rem,2.6vw,2rem)}
.mast .wrap{display:block}
.mast-mark{display:inline-block;text-decoration:none;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.1rem,7.2vw,5.1rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
  max-width:14ch}
.mast-mark span{display:block}
a.mast-mark .mast-h1{margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit}
.mast-back{display:inline-block;text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.9rem;
  border-bottom:2px solid var(--ink);padding-bottom:3px}
h1.mast-mark{cursor:default;margin:0}
.doc-kicker{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:1.3rem;margin:0;
  border-left:8px solid var(--accent);padding-left:.7rem}
.mast-sub{margin:clamp(.9rem,2vw,1.4rem) 0 0;max-width:46ch;font-size:clamp(1rem,.4vw + .92rem,1.18rem);
  font-weight:500}
.mast-meta{margin-top:1.5rem;font-family:var(--disp);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600}

/* ---------- CATEGORY BAND: four full-height strips, site-wide nav ---------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:3px solid var(--line)}
.band a{position:relative;text-decoration:none;color:#fff;background:var(--c);
  min-height:clamp(150px,17vw,230px);padding:1rem clamp(.7rem,1.4vw,1.3rem) 1.1rem;
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:3px solid var(--line);transition:filter .18s ease}
.band a:last-child{border-right:0}
.band a:hover{filter:brightness(1.12)}
.band .b-i{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.7rem);
  line-height:1;opacity:.62}
.band .b-n{font-family:var(--disp);font-weight:600;font-size:clamp(.82rem,1.35vw,1.22rem);
  line-height:1.08;letter-spacing:-.02em;text-transform:uppercase}
.band a[aria-current]{background:var(--ink)}
.band a[aria-current] .b-n{color:var(--c)}
.band a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--c)}

/* ---------- HERO ---------- */
.hero{margin:0;border-bottom:3px solid var(--line);aspect-ratio:24/9;width:100%;overflow:hidden;background:#c8ddd4}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* ---------- GENERIC SECTIONS ---------- */
.statement{background:var(--ink);color:var(--paper);padding:clamp(2.6rem,7vw,6rem) 0;
  border-bottom:3px solid var(--line)}
.statement p{font-family:var(--disp);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(1.35rem,3.5vw,2.7rem);line-height:1.24;margin:0;max-width:22ch}
.statement p em{font-style:normal;color:var(--sun)}
.statement .tail{font-family:var(--body);font-size:1.02rem;line-height:1.6;max-width:52ch;
  margin-top:2rem;color:#CFC7DB;letter-spacing:0}

.section{padding:clamp(2.4rem,6vw,5rem) 0;border-bottom:3px solid var(--line)}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;margin:0 0 1.1rem;color:var(--ink-soft)}
h2.big{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.7rem,4.6vw,3.2rem);line-height:1.02;margin:0 0 1.6rem}
.lede{font-size:clamp(1.05rem,.5vw + .95rem,1.3rem);max-width:60ch;font-weight:500}
.prose p{max-width:66ch}

/* ---------- HOME: RUNNING INDEX (no tiles, no grid of cards) ---------- */
.roster{border-top:1px solid rgba(21,16,33,.18)}
.roster-cat{display:grid;grid-template-columns:minmax(180px,.9fr) 2.4fr;gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.5rem,3vw,2.6rem) 0;border-bottom:1px solid rgba(21,16,33,.18)}
.roster-cat h3{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.05}
.roster-cat h3 a{text-decoration:none;border-bottom:5px solid var(--c);padding-bottom:2px}
.roster-cat h3 a:hover{background:var(--c);color:#fff;border-color:var(--ink)}
.roster-cat .r-sub{margin:.7rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.roster-list{margin:0;padding:0;list-style:none}
.roster-list li{padding:.55rem 0;border-bottom:1px dotted rgba(21,16,33,.3);
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.roster-list li:last-child{border-bottom:0}
.roster-list b{font-weight:700;font-size:1.06rem}
.roster-list span{color:var(--ink-soft);font-size:.9rem}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,4.5rem);align-items:start}
.split .aside{background:#fff;border:3px solid var(--line);padding:clamp(1.2rem,2.6vw,2rem);
  box-shadow:10px 10px 0 var(--accent)}
.split .aside h4{margin:0 0 .7rem;font-family:var(--disp);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.split .aside p{margin:0 0 .9rem;font-size:.96rem}
.split .aside p:last-child{margin-bottom:0}

/* ---------- HOTEL ENTRY: poster, one per viewport, not a card ---------- */
.entry{border-bottom:3px solid var(--line);padding:clamp(2.4rem,7vw,5.5rem) 0 clamp(2.4rem,6vw,4.5rem);
  min-height:min(86vh,860px);display:flex;align-items:center}
.entry .wrap{width:min(1180px,92vw)}
.entry-place{font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;margin:0 0 1rem}
.entry h3{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2rem,6.6vw,4.9rem);line-height:.95;margin:0 0 1.2rem;max-width:16ch}
.entry .note{font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:500;font-style:italic;
  margin:0 0 clamp(1.4rem,3vw,2.4rem);max-width:38ch}
.entry .rule{height:0;border-top:3px solid var(--line);margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.entry-body{margin-left:auto;width:min(100%,62ch)}
.entry-body p{margin:0 0 1.1rem}
.entry-body p:last-child{margin-bottom:0}
.entry.tone{background:var(--c);color:#fff}
.entry.tone .rule{border-top-color:rgba(255,255,255,.55)}
.entry.tone .entry-place{color:rgba(255,255,255,.82)}
.entry.pale{background:#fff}
.entry.pale .entry-place{color:var(--c)}
.entry.pale h3{color:var(--ink)}

/* ---------- TEXT PAGES ---------- */
.doc{padding:clamp(2.4rem,6vw,5rem) 0;border-bottom:3px solid var(--line)}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.4rem,4vw,4rem)}
.doc h1{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(2rem,5.4vw,3.6rem);line-height:.98;margin:0}
.doc h2{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:1.18rem;
  margin:2.2rem 0 .6rem}
.doc h2:first-child{margin-top:0}
.doc p{max-width:64ch}
.doc ul{max-width:64ch;padding-left:1.1rem}
.doc li{margin-bottom:.5rem}
.doc a{font-weight:600}
.mailbox{display:inline-block;background:var(--accent);border:3px solid var(--line);
  padding:.75rem 1.1rem;font-family:var(--disp);font-weight:600;text-decoration:none;
  font-size:1rem;box-shadow:7px 7px 0 var(--ink);margin-top:.6rem}

/* ---------- FOOTER: one wide band, statement-first, asymmetric ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(2.6rem,6vw,5rem) 0 clamp(1.6rem,3vw,2.6rem)}
.foot-top{display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(1.6rem,4vw,4rem);align-items:end}
.foot-say{font-family:var(--disp);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(1.4rem,4vw,3rem);line-height:1.14;margin:0;max-width:20ch}
.foot-say em{font-style:normal;color:var(--sun)}
.foot-colophon{font-size:.93rem;color:#C6BED4;margin:0}
.foot-colophon a{color:var(--sun);text-decoration:none;border-bottom:1px solid rgba(255,212,0,.45)}
.foot-colophon a:hover{background:var(--sun);color:var(--ink)}
.foot-rail{margin-top:clamp(2rem,4vw,3.4rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
  font-family:var(--disp);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#9A92A8}
.hero{max-width:100%}
@media (max-width:760px){.hero{aspect-ratio:3/2}}
.skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip:focus{left:.5rem;top:.5rem;width:auto;height:auto;position:fixed;background:var(--sun);color:var(--ink);padding:.6rem 1rem;z-index:9}

@media (max-width:900px){
  .split,.doc-grid,.roster-cat,.foot-top{grid-template-columns:1fr}
  .foot-top{align-items:start}
  .entry{min-height:0}
  .entry-body{margin-left:0}
}
@media (max-width:620px){
  .band{grid-template-columns:1fr 1fr}
  .band a{min-height:112px;border-bottom:3px solid var(--line)}
  .band a:nth-child(2n){border-right:0}
  .band a:nth-child(n+3){border-bottom:0}
  .split .aside{box-shadow:6px 6px 0 var(--accent)}
}