/* Eva Garage — design system */
:root{
  --ink:#171326;
  --ink-soft:#4a4360;
  --paper:#fdfaf3;
  --paper-2:#f3ecdd;
  --art:#6a2ce0;
  --capsule:#ff6a00;
  --casino:#00996b;
  --ice:#e5197f;
  --edge:1px solid rgba(23,19,38,.16);
  --pad:clamp(1.1rem,4vw,3.5rem);
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%;max-width:100%}
body{margin:0;width:100%;max-width:100%;overflow-x:hidden;position:relative;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.65;font-synthesis-weight:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus,.skip:focus-visible{width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal;top:1rem;left:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50}
:focus-visible{outline:3px solid var(--art);outline-offset:3px}

/* ---------- masthead: identity strip + oversized switcher band ---------- */
.masthead{border-bottom:4px solid var(--ink);max-width:100%}
.masthead__id{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;padding:clamp(1rem,2.4vw,1.9rem) var(--pad)}
.wordmark{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.035em;text-decoration:none;line-height:1;min-width:0}
.wordmark__a{color:var(--ink)}
.wordmark__b{color:var(--ice)}
.masthead__line{margin:0;flex:1 1 18rem;min-width:0;font-size:.9rem;color:var(--ink-soft);max-width:46ch}
.nav-toggle{display:none;align-items:center;gap:.55rem;margin-left:auto;padding:.45rem .7rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.nav-toggle__box{display:flex;flex-direction:column;justify-content:center;gap:4px;width:1.15rem}
.nav-toggle__box span{display:block;height:2px;width:100%;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.switcher{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--edge);max-width:100%}
.switcher__block{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.15rem;min-height:clamp(6.5rem,11vw,9.5rem);min-width:0;padding:clamp(.7rem,1.5vw,1.25rem);text-decoration:none;color:#fff;background:var(--ink);transition:filter .18s ease,transform .18s ease}
.switcher__block--art{background:var(--art)}
.switcher__block--capsule{background:var(--capsule)}
.switcher__block--casino{background:var(--casino)}
.switcher__block--ice{background:var(--ice)}
.switcher__block + .switcher__block{border-left:2px solid var(--paper)}
.switcher__num{font-family:var(--display);font-size:clamp(.75rem,1vw,.85rem);font-weight:600;opacity:.75;letter-spacing:.14em}
.switcher__name{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.5vw,2rem);line-height:.98;letter-spacing:-.03em;overflow-wrap:anywhere}
.switcher__hint{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.switcher__block:hover{filter:brightness(1.12)}
.switcher__block[aria-current="page"]{background:var(--ink)}
.switcher__block[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px}
.switcher__block--art[aria-current="page"]::after{background:var(--art)}
.switcher__block--capsule[aria-current="page"]::after{background:var(--capsule)}
.switcher__block--casino[aria-current="page"]::after{background:var(--casino)}
.switcher__block--ice[aria-current="page"]::after{background:var(--ice)}

/* ---------- hero (side) ---------- */
.hero{margin:0;padding:0;background:transparent;overflow:hidden;max-width:100%;min-width:0}
.hero--side{width:min(100%,22rem);justify-self:end;align-self:center}
.hero img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block}

/* ---------- home statement ---------- */
.page,.closing,.masthead,.statement,.toc,.opener,.note,.spreads,.doc,.intro{min-width:0;max-width:100%}
.statement{padding:clamp(2.2rem,6vw,5rem) var(--pad) clamp(1.6rem,4vw,3rem);display:grid;gap:clamp(1.2rem,3vw,2.4rem);grid-template-columns:minmax(0,1.4fr) minmax(0,.75fr);align-items:center}
.statement__copy{display:grid;gap:clamp(1rem,2.5vw,2rem);min-width:0}
.statement__text{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2rem,6.4vw,5rem);line-height:.95;letter-spacing:-.045em;max-width:16ch;overflow-wrap:anywhere}
.statement__text em{font-style:normal;color:var(--art)}
.statement__sub{margin:0;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft);border-top:4px solid var(--ink);padding-top:1rem}

/* ---------- category intro split ---------- */
.intro--split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding:clamp(1.4rem,3vw,2.6rem) var(--pad);border-bottom:4px solid var(--ink)}
.note--inline{padding:0;border:0}
.note--inline p{margin:0;max-width:62ch;font-size:clamp(1.02rem,1.5vw,1.2rem);font-style:italic;color:var(--ink-soft)}

/* ---------- home index ---------- */
.toc{border-top:4px solid var(--ink)}
.toc__group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(1rem,3vw,3rem);padding:clamp(1.6rem,4vw,3.2rem) var(--pad);border-bottom:var(--edge)}
.toc__label{position:relative;padding-left:1.4rem}
.toc__label::before{content:"";position:absolute;left:0;top:.35rem;bottom:.2rem;width:8px;border-radius:4px}
.toc__group--art .toc__label::before{background:var(--art)}
.toc__group--capsule .toc__label::before{background:var(--capsule)}
.toc__group--casino .toc__label::before{background:var(--casino)}
.toc__group--ice .toc__label::before{background:var(--ice)}
.toc__num{font-family:var(--display);font-weight:600;letter-spacing:.16em;font-size:.8rem;color:var(--ink-soft)}
.toc__title{margin:.1rem 0 .5rem;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.035em}
.toc__title a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%}
.toc__title a:hover{background-size:100% 100%;color:var(--paper)}
.toc__group--art .toc__title a:hover{background-image:linear-gradient(var(--art),var(--art))}
.toc__group--capsule .toc__title a:hover{background-image:linear-gradient(var(--capsule),var(--capsule))}
.toc__group--casino .toc__title a:hover{background-image:linear-gradient(var(--casino),var(--casino))}
.toc__group--ice .toc__title a:hover{background-image:linear-gradient(var(--ice),var(--ice))}
.toc__blurb{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:38ch}
.toc__list{list-style:none;counter-reset:t;margin:0;padding:0}
.toc__list li{counter-increment:t;border-top:var(--edge)}
.toc__list li:last-child{border-bottom:var(--edge)}
.toc__list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;padding:.7rem .2rem;text-decoration:none}
.toc__list a::before{content:counter(t,decimal-leading-zero);font-family:var(--display);font-size:.78rem;color:var(--ink-soft);min-width:2ch}
.toc__hotel{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:-.02em;flex:1 1 auto}
.toc__where{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.toc__list a:hover .toc__hotel{text-decoration:underline;text-underline-offset:3px}

/* ---------- category opener ---------- */
.opener{padding:clamp(2rem,5vw,4.2rem) var(--pad) clamp(1.4rem,3vw,2.4rem);color:#fff}
.opener--art{background:var(--art)}
.opener--capsule{background:var(--capsule)}
.opener--casino{background:var(--casino)}
.opener--ice{background:var(--ice)}
.opener--doc{background:var(--ink)}
.opener__eyebrow{margin:0 0 .5rem;font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;opacity:.85}
.opener__title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,9vw,6.5rem);line-height:.9;letter-spacing:-.05em}
.opener__lede{margin:.8rem 0 0;font-size:clamp(1.05rem,1.8vw,1.4rem);max-width:34ch}

/* ---------- editorial note ---------- */
.note{padding:clamp(1.4rem,3vw,2.6rem) var(--pad);border-bottom:4px solid var(--ink)}
.note p{margin:0 auto 0 0;max-width:62ch;font-size:clamp(1.02rem,1.5vw,1.2rem);font-style:italic;color:var(--ink-soft)}
.note--wide{border-top:4px solid var(--ink);border-bottom:none}
.note--wide p{font-style:normal}

/* ---------- hotel spreads ---------- */
.spread{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:0 clamp(1rem,3vw,2.6rem);padding:clamp(1.8rem,4.5vw,3.6rem) var(--pad);border-bottom:var(--edge)}
.spread:nth-child(even){background:var(--paper-2)}
.spread__mark{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.spread__num{font-family:var(--display);font-weight:800;font-size:clamp(3rem,8vw,5.5rem);line-height:.8;letter-spacing:-.06em;-webkit-text-stroke:2px currentColor;color:transparent}
.spread--art .spread__mark{color:var(--art)}
.spread--capsule .spread__mark{color:var(--capsule)}
.spread--casino .spread__mark{color:var(--casino)}
.spread--ice .spread__mark{color:var(--ice)}
.spread__of{margin-top:.5rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.spread__head{padding-bottom:.9rem;margin-bottom:1.2rem;border-bottom:4px solid currentColor}
.spread--art .spread__head{border-color:var(--art)}
.spread--capsule .spread__head{border-color:var(--capsule)}
.spread--casino .spread__head{border-color:var(--casino)}
.spread--ice .spread__head{border-color:var(--ice)}
.spread__name{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4.6vw,3.2rem);line-height:.98;letter-spacing:-.04em;color:var(--ink)}
.spread__place{margin:.35rem 0 0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.spread__prose{columns:2;column-gap:clamp(1.4rem,3vw,3rem)}
.spread__prose p{margin:0 0 1.05rem;break-inside:avoid-column}
.spread__prose p:first-child::first-letter{font-family:var(--display);font-weight:800;font-size:2.9em;line-height:.78;float:left;margin:.06em .09em 0 0}
.spread--art .spread__prose p:first-child::first-letter{color:var(--art)}
.spread--capsule .spread__prose p:first-child::first-letter{color:var(--capsule)}
.spread--casino .spread__prose p:first-child::first-letter{color:var(--casino)}
.spread--ice .spread__prose p:first-child::first-letter{color:var(--ice)}

/* ---------- documents ---------- */
.doc{padding:clamp(1.8rem,4vw,3.2rem) var(--pad) clamp(2rem,5vw,4rem);max-width:74ch}
.doc h2{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.8rem);letter-spacing:-.03em;margin:2.2rem 0 .6rem;padding-left:.7rem;border-left:8px solid var(--ice)}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 1rem}
.doc a{text-underline-offset:3px}

/* ---------- footer: single band, statement-led ---------- */
.closing{background:var(--ink);color:var(--paper);padding:clamp(2.2rem,5vw,4rem) var(--pad) clamp(1.4rem,3vw,2.2rem);border-top:10px solid var(--ice)}
.closing__statement{margin:0 0 clamp(1.4rem,3vw,2.4rem);font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.04em;max-width:22ch}
.closing__links{margin:0 0 .6rem;font-size:.95rem;color:rgba(253,250,243,.65);display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:baseline}
.closing__links a{color:var(--paper);text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:-.01em;border-bottom:2px solid rgba(229,25,127,.9);padding-bottom:1px}
.closing__links a:hover{background:var(--ice)}
.closing__links--minor a{font-family:var(--text);font-weight:400;border-bottom-color:rgba(253,250,243,.3)}
.closing__colophon{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;margin:clamp(1.4rem,3vw,2.4rem) 0 0;padding-top:1rem;border-top:1px solid rgba(253,250,243,.2);font-size:.78rem;letter-spacing:.06em;color:rgba(253,250,243,.55)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .statement,.intro--split{grid-template-columns:1fr}
  .hero--side{width:min(100%,18rem);justify-self:start}
  .toc__group{grid-template-columns:1fr}
  .spread__prose{columns:1}
  .opener__title{font-size:clamp(2.2rem,14vw,4.5rem);overflow-wrap:anywhere}
  .statement__text{font-size:clamp(1.85rem,9vw,3.4rem);max-width:none}
}
@media (max-width:768px){
  :root{--pad:1rem}
  .masthead,.page,.closing,.statement,.toc,.opener,.note,.spreads,.doc,.hero,.spread,.toc__group,.toc__list,.toc__list a,.closing__links,.closing__colophon{max-width:100%;min-width:0}
  .masthead__id{flex-wrap:nowrap;gap:.75rem;width:100%}
  .masthead__line{display:none}
  .nav-toggle{display:inline-flex;flex-shrink:0;max-width:100%}
  .wordmark{flex:1 1 auto;min-width:0}
  .switcher{
    display:none;
    grid-template-columns:minmax(0,1fr);
    border-top:none;
    width:100%;
  }
  .switcher.is-open{display:grid}
  .switcher__block{
    min-height:0;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem .75rem;
    padding:1rem var(--pad);
    width:100%;
  }
  .switcher__block + .switcher__block{border-left:none;border-top:2px solid var(--paper)}
  .switcher__name{font-size:1.25rem}
  .switcher__hint{margin-left:auto;letter-spacing:.06em}
  .switcher__block[aria-current="page"]::after{height:4px}
  body.nav-open{overflow:hidden}
  .hero--side{width:min(100%,14rem)}
  .opener__eyebrow,.spread__place,.spread__of,.toc__where,.toc__num{letter-spacing:.06em}
  .opener__title{font-size:clamp(2rem,11vw,3.6rem);max-width:100%}
  .toc__list a{flex-direction:column;align-items:flex-start;gap:.15rem;max-width:100%}
  .toc__hotel,.toc__where,.toc__title,.spread__name,.spread__place,.closing__statement,.statement__text,.statement__sub{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
  .spread{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);width:100%}
  .spread__mark{flex-direction:row;align-items:baseline;gap:.7rem;grid-row:auto;margin-bottom:.4rem}
  .spread__num{font-size:2.4rem;-webkit-text-stroke:0;color:currentColor}
  .spread__of{margin-top:0}
  .spread__prose{width:100%;max-width:100%}
  .spread__prose p:first-child::first-letter{font-size:2.2em}
  .closing__statement{max-width:none}
  .closing__links{gap:.35rem .75rem}
  .closing__colophon{flex-direction:column;gap:.45rem;letter-spacing:.03em}
}
@media (max-width:380px){
  .nav-toggle__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .switcher__hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
