/* ============================================================
   SCHÖNHAAR — DIE AUSGABE Nº1
   Editorial magazine: spine nav + page-turn between spreads
   ============================================================ */

:root{
  --ink:#0A0A0B;
  --paper:#F4F1EA;
  --white:#FFFFFF;
  --red:#E8472B;        /* vivid vermillion — only on dark ink backgrounds (large display + spine) */
  --red-ink:#C8341C;    /* AA-safe red on light paper (small labels) + all CTA button fills (white text 5.3:1) */
  --red-ink-hover:#B82A15; /* darker hover for buttons (white text 6.2:1) */
  --sage:#ADBAB7;       /* fine on dark ink (9.9:1); never use for text on paper */
  --closed-ink:#68736F; /* closed-day text on paper (4.4:1) — replaces sage on light bg */
  --lead:#8A8A86;       /* fine on dark ink (5.7:1) */
  --lead-ink:#666662;   /* AA-safe muted grey on light paper (5.1:1) */

  --display:"Bodoni Moda", Georgia, "Times New Roman", serif;
  --grotesk:"Anton", "Arial Narrow", system-ui, sans-serif;
  --body:"Newsreader", Georgia, serif;

  --turn:680ms;
  --ease:cubic-bezier(.66,.02,.24,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  line-height:1.6;
  overflow-x:clip;
  /* ambient daylight tint set by JS via --warm (0..1) */
}

img{display:block;max-width:100%;height:auto}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  background:var(--red-ink);color:var(--white);
  padding:.6rem 1rem;border-radius:2px;
  font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}

a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ===================== DER BUND (spine) ===================== */
.spine{
  position:fixed;top:0;left:0;z-index:120;
  width:64px;height:100vh;
  background:var(--ink);
  border-right:1px solid rgba(244,241,234,.14);
  display:flex;flex-direction:column;align-items:center;
  padding:18px 0 16px;
}
.spine__title{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--grotesk);font-size:11px;letter-spacing:.22em;
  color:var(--sage);text-transform:uppercase;white-space:nowrap;
  margin-bottom:auto;opacity:.85;
}
.spine__list{list-style:none;display:flex;flex-direction:column;gap:14px;align-items:center;margin:14px 0}
.spine__list a{
  text-decoration:none;display:block;
  font-family:var(--grotesk);font-size:12px;letter-spacing:.04em;
  color:var(--lead);transition:color .25s var(--ease), transform .25s var(--ease);
  writing-mode:vertical-rl;
}
.spine__list a:hover{color:var(--paper)}
.spine__list a.is-active{color:var(--red);transform:scale(1.32);font-weight:700}
.spine__gap{height:18px;width:1px;background:repeating-linear-gradient(var(--sage) 0 2px,transparent 2px 6px);opacity:.45}

.spine__status{
  margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--grotesk);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);text-align:center;writing-mode:vertical-rl;height:120px;justify-content:flex-end;
}
.spine__status .dot{width:7px;height:7px;border-radius:50%;background:var(--lead);writing-mode:horizontal-tb}
.spine__status.is-open .dot{background:var(--red);box-shadow:0 0 0 3px rgba(232,71,43,.22)}
.spine__status.is-open .txt{color:var(--paper)}

.spine__progress{position:absolute;right:-1px;top:0;width:2px;height:100%;background:rgba(244,241,234,.08)}
.spine__progress i{display:block;width:100%;height:0;background:var(--red);transition:height .15s linear}

/* ===================== SPREADS / PAGES ===================== */
main{padding-left:64px}

.spread{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.spread--paper{background:var(--paper);color:var(--ink)}
.spread--cover{background:var(--ink);color:var(--paper)}

/* soft section seam */
.spread--paper + .spread--paper{border-top:1px solid rgba(10,10,11,.08)}

.page{position:relative;flex:1;min-width:0;padding:clamp(2rem,5vw,5rem)}
.page--left{flex:1.05;display:flex;flex-direction:column;justify-content:center}
.page--right{flex:.95;padding:0;display:flex;align-items:stretch}
.page--full{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}

/* folios / titles */
.folio-tag{
  font-family:var(--grotesk);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-ink);display:block;margin-bottom:1rem;
}
.spread-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.8rem,8vw,7rem);line-height:.92;letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.spread-title--center{text-align:center}
.kicker{
  font-family:var(--grotesk);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);
}

/* reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* ===================== BELICHTUNG (develop) ===================== */
.develop{filter:grayscale(1) contrast(1.25) brightness(.92);transition:filter 900ms var(--ease)}
.develop.bloom{filter:none}

/* ===================== PLATES (mounted prints) ===================== */
.plate{position:relative;overflow:hidden;width:100%;height:100%}
.plate img{width:100%;height:100%;object-fit:cover}
.plate figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:1.4rem;
  font-family:var(--grotesk);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);
  background:linear-gradient(transparent,rgba(10,10,11,.72));
}
.plate figcaption .cred{color:var(--red);margin-right:.5rem}
.plate--framed{padding:14px;background:var(--white);box-shadow:0 24px 60px rgba(10,10,11,.18)}
.plate--framed img{height:auto;aspect-ratio:752/858}
.plate--framed figcaption{left:14px;right:14px;bottom:14px}
.plate--bleed{min-height:60vh}

/* ===================== S.00 COVER ===================== */
.page--cover{padding:0;width:100%;display:block;overflow:hidden}
.cover__bg{position:absolute;inset:0}
.cover__bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cover__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.18) 38%,rgba(10,10,11,.78) 100%)}
.cover__grid{position:relative;height:100%;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;padding:clamp(1.4rem,4vw,3rem)}
.cover__top{display:flex;justify-content:space-between;gap:1rem}
.kicker--right{text-align:right}
.masthead{
  margin-top:auto;font-family:var(--display);font-weight:900;
  font-size:clamp(3.4rem,19vw,16rem);line-height:.82;letter-spacing:-.03em;
  color:var(--paper);text-shadow:0 4px 40px rgba(10,10,11,.5);
}
.cover__lines{margin-top:1rem;font-family:var(--grotesk);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,2.4vw,15px);color:var(--paper)}
.cover__sub{color:var(--sage);margin-top:.4rem;letter-spacing:.1em}
.termin{
  align-self:flex-start;margin-top:1.6rem;
  font-family:var(--grotesk);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--red-ink);color:var(--white);text-decoration:none;
  padding:.85rem 1.4rem;border-radius:2px;
  transition:transform .25s var(--ease),background .25s var(--ease)}
.termin:hover{transform:translateY(-2px);background:var(--red-ink-hover)}
.termin--cover{margin-top:1.6rem}
.cover__cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--grotesk);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.cover__cue i{width:1px;height:26px;background:var(--sage);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1}}

/* ===================== S.01 CONTENTS ===================== */
.contents{justify-content:center}
.toc{list-style:none;margin-top:1rem;width:100%}
.toc li{border-top:1px solid rgba(10,10,11,.14)}
.toc li:last-child{border-bottom:1px solid rgba(10,10,11,.14)}
.toc a{display:flex;align-items:baseline;gap:1rem;padding:1rem .2rem;text-decoration:none;
  transition:background .2s,padding .25s var(--ease)}
.toc a:hover{background:rgba(232,71,43,.06);padding-left:.9rem}
.toc__no{font-family:var(--grotesk);font-size:13px;letter-spacing:.08em;color:var(--red-ink);min-width:3.4rem}
.toc__name{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);flex:1}
.toc__desc{font-family:var(--grotesk);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lead-ink);text-align:right}
.contents__hero{background:var(--ink)}

/* ===================== S.02 LETTER ===================== */
.letter{justify-content:center;max-width:none}
.letter p{font-size:clamp(1rem,1.4vw,1.18rem);margin-bottom:1rem;max-width:42ch;color:#23231f}
.letter__lead{font-size:clamp(1.1rem,1.7vw,1.4rem)!important}
.dropcap{float:left;font-family:var(--display);font-weight:900;font-size:4.4em;line-height:.72;
  color:var(--red-ink);margin:.06em .12em -.05em 0}
.letter__sign{font-family:var(--display);font-style:italic;font-size:1.4rem;margin-top:1.4rem;color:var(--ink)}
.letter__sign span{display:block;font-family:var(--grotesk);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lead-ink);margin-top:.3rem}
.letter__plate{background:var(--paper);align-items:center;padding:clamp(2rem,4vw,4rem)}
.letter__plate .plate{height:auto}

/* ===================== S.03 WORK ===================== */
.spread--work .page--full{padding:clamp(2rem,5vw,4rem) clamp(1.4rem,4vw,4rem)}
.work__deck{text-align:center;font-family:var(--grotesk);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lead-ink);margin-bottom:2rem}
.work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.4rem);width:100%;max-width:1200px}
.work__grid .plate{aspect-ratio:660/834}
.work__a{margin-top:0}
.work__b{margin-top:2.4rem}
.work__c{margin-top:-1.2rem}
.work__d{margin-top:1.6rem}
.folio-big{font-family:var(--display);font-weight:900;font-size:1.8rem;color:var(--red);margin-right:.6rem}
.plate .cap{font-family:var(--grotesk)}

/* ===================== S.04 CREDITS ===================== */
.credits{max-width:980px;margin:0 auto}
.credits__list{list-style:none;width:100%}
.credits__list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.6rem;
  border-bottom:1px solid rgba(10,10,11,.14);padding:1.1rem 0}
.credits__list h3{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4vw,2.8rem);letter-spacing:-.01em}
.credits__list p{font-family:var(--grotesk);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lead-ink);margin-left:auto;text-align:right;max-width:34ch}
.credits__note{margin-top:1.6rem;text-align:center;font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--red-ink)}

/* ===================== S.05 HOURS ===================== */
.hours{max-width:760px;margin:0 auto;width:100%}
.hours__stamp{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:0 auto 1.8rem;
  border:2px solid var(--red-ink);padding:.8rem 1.6rem;border-radius:2px;width:max-content;max-width:100%;
  transform:rotate(-1.5deg)}
.hours__stamp .hours__state{font-family:var(--grotesk);font-size:clamp(1.1rem,3vw,1.6rem);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.hours__stamp.is-open{border-color:var(--red-ink)}
.hours__stamp.is-closed{border-color:var(--closed-ink)}
.hours__stamp.is-closed .hours__state{color:var(--closed-ink)}
.hours__line{font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lead-ink)}
.timetable{width:100%;border-collapse:collapse}
.timetable tr{border-bottom:1px solid rgba(10,10,11,.14)}
.timetable th,.timetable td{padding:.85rem .4rem;text-align:left;vertical-align:baseline}
.timetable th{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);width:40%}
.timetable td{font-family:var(--grotesk);font-size:clamp(12px,2vw,15px);letter-spacing:.04em;color:#33332e;text-align:right}
.timetable .pause{margin:0 .55rem;color:var(--closed-ink)}
.timetable tr.closed th{color:var(--lead-ink)}
.timetable tr.closed td{color:var(--closed-ink);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.timetable tr.is-today{background:rgba(200,52,28,.08)}
.timetable tr.is-today th{color:var(--red-ink)}
.hours__note{margin-top:1.2rem;text-align:center;font-family:var(--grotesk);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lead-ink)}

/* ===================== S.06 WANTED ===================== */
.wanted{justify-content:center}
.wanted__stamp{display:inline-block;font-family:var(--grotesk);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);background:var(--red-ink);padding:.4rem .8rem;width:max-content;margin-bottom:1rem;transform:rotate(-2deg)}
.wanted__role{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--ink);margin-bottom:1rem}
.wanted p{max-width:40ch;color:#23231f;margin-bottom:1.4rem}
.wanted__plate{background:var(--paper);padding:clamp(1.4rem,3vw,3rem);align-items:center}
.wanted__plate .plate{height:auto;aspect-ratio:752/858;box-shadow:0 20px 50px rgba(10,10,11,.16)}

/* ===================== S.07 BACK COVER ===================== */
.page--back{width:100%;padding:clamp(1.6rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center;gap:clamp(1.4rem,3vh,2.4rem);min-height:100vh;min-height:100svh}
.back__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.back__brand{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}
.back__seal{width:148px;height:auto;background:var(--paper);border-radius:50%;padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.4)}
.back__claim{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--paper)}
.back__title{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,6vw,5rem);line-height:.9;margin-bottom:1.6rem;letter-spacing:-.02em}
.back__lines{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:1.8rem}
.back__lines li{display:flex;flex-direction:column;gap:.2rem;border-top:1px solid rgba(244,241,234,.16);padding-top:.8rem}
.back__lines span{font-family:var(--grotesk);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.back__lines a{font-family:var(--body);font-size:clamp(1rem,2vw,1.25rem);text-decoration:none;color:var(--paper);transition:color .2s;word-break:break-word}
.back__lines a:hover{color:var(--red)}
.termin--big{font-size:16px;padding:1rem 1.8rem}
.back__map{grid-column:1/-1;position:relative;height:220px;border:1px solid rgba(244,241,234,.16);overflow:hidden;border-radius:2px;background:#101012}
.map__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(173,186,183,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(173,186,183,.16) 1px,transparent 1px);background-size:34px 34px}
.map__pin{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(232,71,43,.25)}
.map__label{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);font-family:var(--grotesk);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);white-space:nowrap}
.back__partner{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding:1.6rem 0;border-top:1px solid rgba(244,241,234,.14);margin-top:1.4rem}
.back__partner-tag{font-family:var(--grotesk);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.back__partner img{height:38px;width:auto;opacity:.55;filter:grayscale(1) brightness(1.6);transition:opacity .2s}
.back__partner img:hover{opacity:.9}
.back__foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;padding-top:1.4rem;border-top:1px solid rgba(244,241,234,.14)}
.barcode{display:inline-block;width:120px;height:30px;background:repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 4px,var(--paper) 4px 5px,transparent 5px 9px);opacity:.7}
.back__meta{font-family:var(--grotesk);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.back__legal{display:flex;gap:.4rem;flex-wrap:wrap}
.back__legal a{font-family:var(--grotesk);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lead);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem}
.back__legal a:hover{color:var(--red)}

/* ===================== MOBILE PAGE STRIP ===================== */
.strip{display:none}

/* ===================== PAGE-TURN (3D) ===================== */
/* applied by JS: a turning spread rotates on its left edge */
.turn-on .spread{transform-origin:left center;backface-visibility:hidden}
.is-turning{
  transform:perspective(1800px) rotateY(-14deg);
  box-shadow:40px 0 80px rgba(10,10,11,.35);
  transition:transform var(--turn) var(--ease),box-shadow var(--turn) var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  main{padding-left:0;padding-bottom:62px}
  .spine{display:none}

  .spread{flex-direction:column;min-height:auto}
  .spread--cover{min-height:100svh}
  .page{flex:none!important;width:100%}
  .page--right{padding:0}
  .plate--bleed{min-height:62vh}
  .plate--framed img,.wanted__plate .plate,.letter__plate .plate{aspect-ratio:3/3.3}

  .letter__plate{order:-1;padding:0}
  .letter__plate .plate--framed{padding:0;box-shadow:none}
  .letter__plate .plate--framed img{aspect-ratio:3/3.2}
  .contents__hero{min-height:50vh}

  .work__grid{grid-template-columns:repeat(2,1fr)}
  .work__a,.work__b,.work__c,.work__d{margin-top:0}

  .credits__list li{flex-direction:column;gap:.3rem}
  .credits__list p{margin-left:0;text-align:left}

  .back__grid{grid-template-columns:1fr;gap:1.6rem}

  /* MOBILE STRIP — primary page nav on phones */
  .strip{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:130;
    background:var(--ink);border-top:1px solid rgba(244,241,234,.16);
    align-items:stretch;height:64px;padding:0 6px;gap:6px;
  }
  /* fade affordance on the right edge hints the page list scrolls horizontally on the narrowest phones */
  .strip__pages{position:relative;flex:1;display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%)}
  .strip__pages::-webkit-scrollbar{display:none}
  /* each link is a >=44px tall x >=40px wide tap target */
  .strip__pages a{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    min-width:40px;min-height:44px;font-family:var(--grotesk);font-size:13px;letter-spacing:.02em;
    color:var(--lead);text-decoration:none;padding:0 .35rem;scroll-snap-align:center;transition:color .2s}
  .strip__pages a.is-active{color:var(--paper);transform:none}
  /* active page shows its name (revealed via the data-name label) instead of a bare number */
  .strip__pages a.is-active::after{content:attr(data-name);font-size:11px;letter-spacing:.04em;
    color:var(--red);margin-left:.4rem;text-transform:uppercase;white-space:nowrap}
  .strip__termin{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    background:var(--red-ink);color:var(--white);text-decoration:none;
    font-family:var(--grotesk);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    min-height:44px;padding:0 1rem;border-radius:2px;align-self:center}

  /* the 3D page-turn skew reads as a glitch on small screens — keep spreads flat on mobile */
  .is-turning{transform:none!important;box-shadow:none!important}
}

@media (max-width:430px){
  .page{padding:1.6rem 1.3rem}
  /* tighter clamp + slightly negative tracking gives the brand name horizontal safety
     so it fits even in the wider Georgia fallback during the webfont swap window */
  .masthead{font-size:clamp(2.4rem,15vw,4.4rem);letter-spacing:-.03em}
  .toc a{gap:.6rem}
  .toc__desc{display:none}
  .hours__stamp{transform:none}
}

/* ============================================================
   REDUCED MOTION / ?noanim
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .develop{filter:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .is-turning{transform:none!important;box-shadow:none!important;transition:opacity .3s ease!important}
  .cover__cue i{animation:none}
}
.noanim *{animation:none!important;transition:none!important}
.noanim .develop{filter:none!important}
.noanim .reveal{opacity:1!important;transform:none!important}
.noanim .is-turning{transform:none!important;box-shadow:none!important}