/* Merovale — design system
   Display: Bricolage Grotesque · Text: Instrument Sans
   Skeleton: fixed left rail (no top bar) · poster bands (no cards) · single-band footer */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#FFFCF2;
  --paper-2:#F4EFE2;
  --ink:#16121F;
  --ink-soft:#4B4459;
  --line:#DCD4C2;

  --art:#F5401F;
  --capsule:#2A46F0;
  --casino:#7A2BE2;
  --ice:#0093C4;
  --zest:#D8F03A;

  --rail:104px;
  --pad:clamp(20px,5vw,72px);
  --measure:66ch;

  --f-disp:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0 0 0 var(--rail);
  background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:clamp(16px,1.02vw,18px);line-height:1.62;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;line-height:0.98;letter-spacing:-0.025em;margin:0}
p{margin:0 0 1.05em}
::selection{background:var(--zest);color:var(--ink)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--rail);top:0;z-index:99;background:var(--ink);color:var(--paper);padding:12px 18px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- RAIL (replaces the header entirely) ---------- */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;
}
.rail-bar{display:contents}
.rail-burger{display:none}
.rail-panel{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
}
.rail-mark{
  display:flex;align-items:center;justify-content:center;
  height:var(--rail);border-bottom:1px solid rgba(255,252,242,.22);
  text-decoration:none;flex:0 0 auto;
}
.rail-mark b{
  font-family:var(--f-disp);font-weight:800;font-size:15px;letter-spacing:.34em;
  text-transform:uppercase;
}
.rail-mark:hover b{color:var(--zest)}
.rail-nav{flex:1 1 auto;display:flex;flex-direction:column}
.rail-nav a{
  flex:1 1 0;position:relative;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:16px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  border-bottom:1px solid rgba(255,252,242,.14);
  transition:background .18s ease,color .18s ease;
}
.rail-nav a .rn{
  font-family:var(--f-disp);font-weight:800;font-size:12px;letter-spacing:.1em;
  color:var(--c);
}
.rail-nav a .rt{
  font-family:var(--f-disp);font-weight:600;font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.02em;text-transform:uppercase;
}
.rail-nav a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.rail-nav a:hover{background:rgba(255,252,242,.07)}
.rail-nav a:hover::before,.rail-nav a[aria-current]::before{transform:scaleX(1)}
.rail-nav a[aria-current]{background:var(--c);color:#fff}
.rail-nav a[aria-current] .rn{color:rgba(255,255,255,.72)}
.rail-foot{
  flex:0 0 auto;padding:14px 0;text-align:center;
  border-top:1px solid rgba(255,252,242,.22);
}
.rail-foot a{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,252,242,.6);text-decoration:none;padding:5px 0;
}
.rail-foot a:hover{color:var(--zest)}

/* ---------- HERO (header lives inside it — no bar above) ---------- */
.open{padding:clamp(48px,7vw,104px) var(--pad) clamp(30px,4vw,56px);position:relative;overflow:hidden}
.open::after{
  content:"";position:absolute;right:calc(var(--pad) * -0.4);top:-14%;
  width:min(46vw,560px);aspect-ratio:1;border-radius:50%;
  background:var(--c,var(--zest));opacity:.18;pointer-events:none;
}
.kicker{
  font-family:var(--f-disp);font-weight:800;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.kicker::after{content:"";height:3px;flex:1 1 auto;max-width:180px;background:var(--c,var(--ink))}
.open h1{font-size:clamp(2.9rem,7.6vw,6.6rem);max-width:16ch;position:relative;z-index:1}
.open h1 em{font-style:normal;color:var(--c,var(--art))}
.open .dek{
  font-size:clamp(1.08rem,1.55vw,1.42rem);line-height:1.5;max-width:52ch;
  margin-top:clamp(22px,3vw,34px);color:var(--ink-soft);position:relative;z-index:1;
}
.open .facts{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;position:relative;z-index:1;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.open .facts span{border-bottom:3px solid var(--c,var(--ink));padding-bottom:3px}

/* ---------- HERO PHOTO ---------- */
.open .hero{
  margin:clamp(22px,3vw,36px) 0 clamp(18px,2.4vw,28px);
  border:3px solid var(--ink);line-height:0;overflow:hidden;
  max-width:min(720px,100%);
}
.open .hero img{display:block;width:100%;height:auto}

/* ---------- SHARED BLOCKS ---------- */
.band{padding:clamp(46px,6vw,92px) var(--pad)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-tint{background:var(--paper-2)}
.h-lg{font-size:clamp(2rem,4.4vw,3.6rem);max-width:20ch}
.h-md{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:58ch;color:var(--ink-soft);line-height:1.55}
.band-ink .lede{color:rgba(255,252,242,.76)}
.prose{max-width:var(--measure)}
.prose p:last-child{margin-bottom:0}

/* manifesto — oversized pull statement */
.manifesto{padding:clamp(46px,6vw,96px) var(--pad);background:var(--ink);color:var(--paper)}
.manifesto q{
  display:block;quotes:none;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.7rem,4.1vw,3.2rem);line-height:1.06;letter-spacing:-0.03em;max-width:24ch;
}
.manifesto q mark{background:none;color:var(--zest)}
.manifesto .after{
  margin-top:clamp(26px,3vw,40px);max-width:56ch;color:rgba(255,252,242,.72);
  border-left:4px solid var(--zest);padding-left:22px;
}
.manifesto .after p:last-child{margin-bottom:0}

/* ---------- HOME: category strips (full-width rows, not a tile grid) ---------- */
.strips{border-top:2px solid var(--ink)}
.strip{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,54px);align-items:start;
  padding:clamp(28px,3.6vw,48px) var(--pad);
  border-bottom:2px solid var(--ink);text-decoration:none;
  position:relative;transition:background .2s ease,color .2s ease;
}
.strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);transition:width .22s ease}
.strip:hover{background:var(--c);color:#fff}
.strip:hover::before{width:100%;opacity:.001}
.strip > *{position:relative;z-index:1}
.strip-head{display:flex;gap:clamp(14px,2vw,26px);align-items:baseline}
.strip-num{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.4rem);
  color:var(--c);letter-spacing:-0.02em;
}
.strip:hover .strip-num{color:rgba(255,255,255,.7)}
.strip-name{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.strip-blurb{margin:10px 0 0;color:var(--ink-soft);max-width:44ch}
.strip:hover .strip-blurb,.strip:hover .strip-roster{color:rgba(255,255,255,.85)}
.strip-roster{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.75}
.strip-roster b{font-weight:600;color:var(--ink)}
.strip:hover .strip-roster b{color:#fff}
.strip-go{
  font-family:var(--f-disp);font-weight:800;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;align-self:center;
  border:2px solid currentColor;padding:11px 18px;
}
.strip:hover .strip-go{background:#fff;color:var(--c);border-color:#fff}
@media(max-width:860px){
  .strip{grid-template-columns:1fr;gap:14px}
  .strip-go{justify-self:start}
}

/* ---------- HOTEL ENTRY: poster band, alternating, no card ---------- */
.entries{counter-reset:ent}
.entry{
  position:relative;padding:clamp(40px,5vw,80px) var(--pad);
  border-top:10px solid var(--c);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(26px,4vw,70px);align-items:start;
}
.entry:nth-of-type(even){background:var(--paper-2)}
.entry:nth-of-type(even) .entry-main{order:2}
.entry:nth-of-type(even) .entry-side{order:1}
.entry-mark{
  grid-column:1/-1;display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  margin-bottom:clamp(14px,2vw,26px);
}
.entry-no{
  font-family:var(--f-disp);font-weight:800;letter-spacing:-0.04em;
  font-size:clamp(3.4rem,8vw,7rem);line-height:.8;color:transparent;
  -webkit-text-stroke:2px var(--c);
}
.entry-place{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);margin:0;
}
.entry h3{font-size:clamp(1.8rem,3.5vw,3rem);max-width:18ch}
.entry-lead{
  font-family:var(--f-disp);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.28;margin:18px 0 0;
  max-width:34ch;
}
.entry-main{border-top:2px solid var(--ink);padding-top:20px}
.entry-side{padding-top:20px;border-top:2px solid var(--line)}
.entry-side p{margin-bottom:1.15em}
.entry-side p:last-child{margin-bottom:0}
.entry-side p:first-child::first-letter{
  font-family:var(--f-disp);font-weight:800;font-size:3.1em;line-height:.78;
  float:left;padding:4px 10px 0 0;color:var(--c);
}
@media(max-width:900px){
  .entry{grid-template-columns:1fr;row-gap:22px}
  .entry:nth-of-type(even) .entry-main{order:1}
  .entry:nth-of-type(even) .entry-side{order:2}
}

/* ---------- category page: index list at top ---------- */
.contents{padding:clamp(30px,4vw,52px) var(--pad);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.contents h2{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--f-text);font-weight:600;margin:0 0 18px;color:var(--ink-soft)}
.contents ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.contents li{display:flex;align-items:baseline;gap:16px}
.contents li a{
  text-decoration:none;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.1rem,2vw,1.7rem);letter-spacing:-0.02em;
  border-bottom:3px solid transparent;
}
.contents li a:hover{border-bottom-color:var(--c)}
.contents li span{font-family:var(--f-disp);font-weight:800;color:var(--c);font-size:.9rem}
.contents li i{font-style:normal;color:var(--ink-soft);font-size:.84rem;letter-spacing:.06em;text-transform:uppercase}
.contents li i::before{content:"— "}

/* ---------- offset note (asymmetric two-part) ---------- */
.offset{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:860px){.offset{grid-template-columns:1fr}}
.sidenote{border-top:6px solid var(--c,var(--zest));padding-top:18px;font-size:.94rem;color:var(--ink-soft)}
.sidenote h4{font-family:var(--f-disp);font-weight:800;font-size:1.05rem;margin:0 0 10px;color:var(--ink)}
.band-ink .sidenote{color:rgba(255,252,242,.75)}
.band-ink .sidenote h4{color:var(--paper)}

/* ---------- legal / simple pages ---------- */
.doc{padding:clamp(40px,5vw,76px) var(--pad)}
.doc .prose h2{font-size:clamp(1.3rem,2.1vw,1.8rem);margin:2.1em 0 .6em;padding-top:.55em;border-top:3px solid var(--c,var(--ink))}
.doc .prose h2:first-child{margin-top:0}
.doc .prose ul{padding-left:1.1em;margin:0 0 1.05em}
.doc .prose li{margin-bottom:.4em}
.doc .prose a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.mailto{
  display:inline-block;font-family:var(--f-disp);font-weight:800;letter-spacing:-0.01em;
  font-size:clamp(1.2rem,2.6vw,2rem);text-decoration:none;
  border-bottom:5px solid var(--c,var(--zest));
}
.mailto:hover{background:var(--c,var(--zest));color:#fff;border-bottom-color:var(--ink)}

/* ---------- FOOTER: one wide band, statement-led, links inline ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(46px,6vw,92px) var(--pad) clamp(26px,3vw,42px)}
.foot-say{
  font-family:var(--f-disp);font-weight:800;letter-spacing:-0.03em;
  font-size:clamp(1.9rem,5vw,4rem);line-height:1;max-width:19ch;margin:0;
}
.foot-say span{color:var(--zest)}
.foot-colophon{
  margin-top:clamp(28px,4vw,52px);max-width:50ch;color:rgba(255,252,242,.66);font-size:.94rem;
}
.foot-colophon p:last-child{margin-bottom:0}
.foot-rule{height:4px;background:linear-gradient(90deg,var(--art) 0 25%,var(--capsule) 25% 50%,var(--casino) 50% 75%,var(--ice) 75% 100%);margin:clamp(26px,3vw,42px) 0 18px}
.foot-line{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.foot-line a{color:rgba(255,252,242,.72);text-decoration:none}
.foot-line a:hover{color:var(--zest)}
.foot-line .who{color:rgba(255,252,242,.4);margin-left:auto;letter-spacing:.06em;text-transform:none}
@media(max-width:700px){.foot-line .who{margin-left:0;flex-basis:100%}}

/* ---------- rail → top bar + burger on small screens ---------- */
@media(max-width:1023px){
  body{padding:56px 0 0}
  body.nav-open{overflow:hidden}
  .skip:focus{left:0;top:56px}

  .rail{
    inset:0 0 auto 0;width:auto;height:auto;
    flex-direction:column;border-bottom:3px solid var(--zest);
  }
  .rail-bar{
    display:flex;align-items:center;justify-content:space-between;
    height:56px;padding:0 14px 0 18px;flex:0 0 auto;
  }
  .rail-mark{
    height:auto;width:auto;border-bottom:0;justify-content:flex-start;
  }
  .rail-mark b{font-size:13px;letter-spacing:.22em}

  .rail-burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:0;padding:0;
    border:0;background:transparent;color:var(--paper);cursor:pointer;
  }
  .rail-burger-lines,
  .rail-burger-lines::before,
  .rail-burger-lines::after{
    display:block;width:22px;height:2px;background:currentColor;
    transition:transform .22s ease,opacity .18s ease;
  }
  .rail-burger-lines{position:relative}
  .rail-burger-lines::before,
  .rail-burger-lines::after{
    content:"";position:absolute;left:0;
  }
  .rail-burger-lines::before{top:-7px}
  .rail-burger-lines::after{top:7px}
  body.nav-open .rail-burger-lines{background:transparent}
  body.nav-open .rail-burger-lines::before{top:0;transform:rotate(45deg)}
  body.nav-open .rail-burger-lines::after{top:0;transform:rotate(-45deg)}

  .rail-panel{
    display:none;flex:0 0 auto;
    max-height:calc(100dvh - 56px);overflow:auto;
    border-top:1px solid rgba(255,252,242,.18);
    background:var(--ink);
  }
  body.nav-open .rail-panel{display:flex;flex-direction:column}

  .rail-nav{flex-direction:column;flex:0 0 auto}
  .rail-nav a{
    writing-mode:horizontal-tb;transform:none;
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;
    gap:14px;padding:18px 22px;
    border-bottom:1px solid rgba(255,252,242,.14);border-right:0;
  }
  .rail-nav a .rt{font-size:1.15rem;letter-spacing:.04em;text-align:left;line-height:1.1}
  .rail-nav a .rn{font-size:12px}
  .rail-nav a::before{
    left:0;right:auto;top:0;bottom:0;width:5px;height:auto;
    transform:scaleX(0);transform-origin:left;
  }
  .rail-nav a:hover::before,.rail-nav a[aria-current]::before{transform:scaleX(1)}
  .rail-foot{
    display:flex;gap:8px 22px;justify-content:flex-start;flex-wrap:wrap;
    padding:18px 22px 24px;text-align:left;border-top:1px solid rgba(255,252,242,.18);
  }
  .rail-foot a{display:inline;padding:0;font-size:12px}
}