/* MC HYBRID v0.1 - background lock. Only editable test copy. */
/* The entire site keeps one fixed warm-paper color, even inside modal overlays. */
:root, body, body[data-tone="paper"], body[data-tone="ink"] {
  --bg:#f5f4ef;
  --fg:#131312;
  --mute:#77756d;
  --line:rgba(19,19,18,.14);
  color-scheme:light;
}
html{background:#f5f4ef}
body{background:#f5f4ef;color:var(--fg);transition:none!important}
.site-head{background:#f5f4ef;background:color-mix(in srgb,#f5f4ef 96%,transparent)}
.menu,.vw{background:#f5f4ef;color:#131312}
.menu-list a{border-bottom-color:var(--line)}
.menu-list .n,.menu-list .d,.menu-foot,.menu-top .mark-sub,.vw .code,.vw .eyebrow,.vw-hint{color:var(--mute)}
.vw-nav{color:var(--fg)}
/* On every page, prevent the original paper/ink tone logic from ever repainting the room. */
body[data-tone="ink"] .ph-btn{box-shadow:none}

/* HOME: large photographs, constant space, quiet controls. */
body[data-page="home"]{overflow:hidden}
.hy-home{height:100vh;height:100dvh;min-height:360px;display:grid;grid-template-rows:var(--head-h) minmax(0,1fr) 78px 2px;overflow:hidden;background:#f5f4ef}
.hy-headroom{height:var(--head-h)}
.hy-stage{position:relative;min-height:0;isolation:isolate;overflow:hidden;padding:0 clamp(12px,1.7vw,30px)}
.hy-scene{position:absolute;inset:0 clamp(12px,1.7vw,30px);display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.5vw,38px);opacity:0;transform:translateY(8px);transition:opacity .82s ease,transform .88s var(--ease);pointer-events:none}
.hy-scene.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.hy-scene.is-leaving{opacity:0;transform:translateY(-6px)}
.hy-photo{display:flex;align-items:center;justify-content:center;position:relative;margin:0;min-height:0;min-width:0;overflow:hidden}
.hy-photo img{width:100%;height:100%;display:block;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.hy-scene.hero .hy-photo{height:96%;width:min(97%,1570px)}
.hy-scene.hero .hy-photo img{object-fit:cover;object-position:50% 29%}
.hy-scene.hero-wide .hy-photo{height:94%;width:min(99%,1650px)}
.hy-scene.hero-wide .hy-photo img{object-fit:cover;object-position:50% 28%}
.hy-scene.hero-focus .hy-photo{height:93%;width:min(96%,1550px)}
.hy-scene.hero-focus .hy-photo img{object-fit:cover;object-position:50% 39%}
.hy-scene.pair .hy-photo{width:min(46%,760px);height:87%}
.hy-scene.pair .hy-photo img{object-fit:cover;object-position:center 40%}
.hy-scene.pair .hy-photo:first-child{transform:translateY(-3%)}
.hy-scene.pair .hy-photo:last-child{transform:translateY(3%)}
.hy-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:4px var(--gut) 9px}
.hy-footer-left{display:flex;flex-direction:column;gap:5px;min-width:0}
.hy-footer-left em{font:italic 16px/1.1 var(--text)}
.hy-footer-left span{font:500 9px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hy-transport{display:flex;gap:clamp(10px,1.7vw,26px);align-items:center;justify-content:center}
.hy-transport button{white-space:nowrap;padding:9px 2px;font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.hy-transport button:hover,.hy-discover:hover{opacity:.55}
.hy-transport button:focus-visible{outline:2px solid #131312;outline-offset:3px}
.hy-transport .hy-arrow{font:400 28px/1 var(--text);padding:0 3px}
.hy-counter{font:400 11px/1 var(--mono);min-width:57px;text-align:center;white-space:nowrap}
.hy-counter i{font-style:normal;color:var(--mute);margin:0 4px}
.hy-separator{height:20px;width:1px;background:var(--line)}
.hy-transport button[aria-pressed="true"]#speed{text-decoration:underline;text-underline-offset:4px}
.hy-discover{font:500 10px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;justify-self:end;white-space:nowrap}
.hy-discover span{margin-left:8px}
.hy-progress{height:2px;background:#f5f4ef}
.hy-progress span{height:100%;display:block;width:0;background:#4b4a46}
@media(max-width:850px){.hy-footer-left span{display:none}.hy-discover{font-size:9px}}
@media(max-width:700px){
  .hy-home{grid-template-rows:var(--head-h) minmax(0,1fr) 69px 2px}
  .hy-footer{grid-template-columns:1fr;gap:0;padding:0 var(--gut) 8px}
  .hy-footer-left,.hy-discover{display:none}
  .hy-transport{gap:clamp(10px,3vw,22px)}
  .hy-scene.hero .hy-photo,.hy-scene.hero-wide .hy-photo,.hy-scene.hero-focus .hy-photo{width:100%;height:97%}
  /* Keep frames intact on narrow screens rather than cutting off faces. */
  .hy-scene.hero .hy-photo img,.hy-scene.hero-wide .hy-photo img,.hy-scene.hero-focus .hy-photo img{object-fit:contain}
  .hy-scene.pair{flex-direction:column;gap:6px}
  .hy-scene.pair .hy-photo{width:100%;height:46%;transform:none!important}
  .hy-scene.pair .hy-photo img{object-fit:contain}
}
@media(max-height:490px){.hy-home{grid-template-rows:var(--head-h) minmax(0,1fr) 50px 2px}.hy-footer{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.hy-scene{transition:none!important;transform:none!important}}


/* MC HYBRID v0.2 - quieter typography, image-first */
.pagehead{
  padding:calc(var(--head-h) + clamp(26px,5svh,54px)) var(--gut) clamp(22px,4svh,42px);
  align-items:start;
}
.pagehead h1{
  grid-column:1/8;
  font:400 clamp(34px,6vw,72px)/.95 var(--display);
  letter-spacing:-.02em;
  margin-left:0;
}
.pagehead .lede{
  grid-column:8/-1;
  font:italic 400 clamp(14px,1.3vw,18px)/1.45 var(--text);
  max-width:20em;
}
.pagehead .lede small{
  margin-top:9px;
  font-size:9.5px;
}
.wall{
  row-gap:clamp(34px,6vw,72px);
  padding:clamp(22px,4svh,40px) var(--gut) clamp(56px,10svh,110px);
}
.card .lab,.shelf .lab{
  gap:10px;
  margin-top:14px;
}
.card .lab .t,.shelf .lab .t{
  font:400 clamp(18px,2.1vw,30px)/1.04 var(--display);
  letter-spacing:-.01em;
}
.card .sub,.shelf .sub{
  margin-top:4px;
}
.card .sub,.shelf .sub,.card .code,.shelf .code{
  font-size:10px;
}
.ledger{
  padding:clamp(20px,4svh,38px) var(--gut) clamp(56px,10svh,110px);
}
.ledger-list{
  grid-column:1/6;
}
.row{
  padding:clamp(12px,1.7svh,18px) 0;
  gap:14px;
}
.row .t{
  font:400 clamp(20px,2.8vw,40px)/1.02 var(--display);
  letter-spacing:-.012em;
}
.row .k{
  font:500 9.5px/1.2 var(--sans);
  letter-spacing:.13em;
}
.row .k em,.row .code,.pv-cap .code{
  font-size:9.5px;
}
.preview{
  grid-column:7/-1;
  height:calc(100svh - var(--head-h) - 70px);
}
.pv-cap{
  padding-top:10px;
}
.series-head h1{
  font:400 clamp(34px,6.2vw,84px)/.94 var(--display);
  letter-spacing:-.02em;
  margin-left:0;
}
.series-head .meta .eyebrow,
.series-head .meta .code,
.link,
.eyebrow,
.code{
  letter-spacing:.12em;
}
.nav a{font-size:10.5px}
.mark-name{font-size:22px}
@media (max-width:1100px){
  .pagehead{display:block}
  .pagehead h1{margin-bottom:12px}
  .pagehead .lede{text-align:left;max-width:38em}
  .ledger{display:block}
  .preview{position:relative;top:auto;height:auto;margin-top:26px}
}
@media (max-width:760px){
  .card .lab .t,.shelf .lab .t{font-size:24px}
  .row .t{font-size:28px}
  .pagehead h1,.series-head h1{font-size:42px}
}


/* MC HYBRID v0.4 — image first; calm, fixed near-white gallery wall.
   Test-only revision. All photographs, curation, links, and scripts unchanged. */
:root, body, body[data-tone="paper"], body[data-tone="ink"] {
  --bg:#ffffff;
  --fg:#181818;
  --mute:#666660;
  --line:rgba(20,20,20,.12);
  color-scheme:light;
}
html, body, .menu, .vw, .hy-home, .hy-progress {background:#ffffff!important}
.site-head {background:#ffffff!important;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu, .vw {color:#181818}
.menu-list .t, .menu-x, .vw-title, .vw-x {color:#181818}
.menu-list .n,.menu-list .d,.menu-foot,.menu-top .mark-sub,.vw .code,.vw .eyebrow,.vw-hint {color:#666660}
.vw-nav {color:#181818}

/* Brand is a signature, not small gray dust. */
.mark {gap:3px}
.mark-name {
  font:500 clamp(23px,1.8vw,29px)/1.05 var(--sans)!important;
  letter-spacing:-.035em!important;
  color:#141414!important;
}
.mark-sub {
  font:500 clamp(12px,.87vw,13px)/1.2 var(--sans)!important;
  letter-spacing:.095em!important;
  color:#292929!important;
  opacity:1!important;
}
.site-head {--head-h:70px}

/* Section headings are simple navigation labels, not oversized artwork. */
.pagehead {
  display:block;
  padding:calc(var(--head-h) + 18px) var(--gut) 16px;
}
.pagehead .eyebrow,
.pagehead .lede {display:none}
.pagehead h1 {
  margin:0;
  font:500 clamp(23px,2.2vw,31px)/1.17 var(--sans)!important;
  letter-spacing:-.025em!important;
}

/* Advertising: take space away from the directory and give it to the images. */
body[data-page="advertising"] .ledger {
  display:grid;
  grid-template-columns:minmax(300px, 35%) minmax(0,1fr);
  gap:clamp(22px,2.7vw,48px);
  align-items:start;
  padding:15px var(--gut) 65px;
}
body[data-page="advertising"] .ledger-list {
  grid-column:1;
  border-top:1px solid var(--line);
}
body[data-page="advertising"] .row {
  grid-template-columns:24px minmax(0,1fr);
  gap:12px;
  padding:clamp(12px,1.15svh,15px) 0;
  align-items:center;
}
body[data-page="advertising"] .row .t {
  font:400 clamp(18px,1.42vw,23px)/1.16 var(--sans)!important;
  letter-spacing:-.02em!important;
}
body[data-page="advertising"] .row .code {font-size:9px;color:#777}
body[data-page="advertising"] .row .k {display:none}
body[data-page="advertising"] .ledger-list:hover .row:not(:hover):not(:focus-visible){opacity:.82}
body[data-page="advertising"] .preview {
  grid-column:2;
  display:flex;
  position:sticky;
  top:calc(var(--head-h) + 9px);
  height:calc(100svh - var(--head-h) - 20px);
  min-width:0;
  justify-content:stretch;
  align-items:stretch;
}
body[data-page="advertising"] .pv-stage {width:100%;flex:1;min-height:0}
body[data-page="advertising"] .pv-stage img {
  inset:0;
  right:auto;
  width:100%;
  height:100%;
  max-height:none;
  max-width:none;
  object-fit:contain;
  object-position:center top;
}
body[data-page="advertising"] .pv-cap {padding-top:8px}
body[data-page="advertising"] .pv-cap .code {font-size:9px}

/* Other galleries: captions should be noticed only after the photographs. */
.card .lab .t,.shelf .lab .t {font:400 clamp(18px,1.8vw,27px)/1.1 var(--sans);letter-spacing:-.015em}
.series-head h1 {font:500 clamp(28px,4.4vw,62px)/1.05 var(--sans)!important;letter-spacing:-.02em!important}
.nextseries .big {font-family:var(--sans)}

/* On narrower screens the list becomes an illustrated list, no empty sticky panel. */
@media(max-width:980px){
  body[data-page="advertising"] .ledger {display:block;padding-top:18px}
  body[data-page="advertising"] .ledger-list {grid-column:auto}
  body[data-page="advertising"] .preview {display:none}
  /* v0.13z30: Titel und Vorschau lagen beide in der 62-px-Spalte, die dritte Spalte blieb leer. Jetzt: Nummer | Vorschau | Titel. */
  body[data-page="advertising"] .row {grid-template-columns:26px clamp(96px,28vw,110px) minmax(0,1fr);gap:12px 14px}
  body[data-page="advertising"] .row .thumb {display:block;grid-column:2;grid-row:1;width:100%;aspect-ratio:var(--r);overflow:hidden}
  body[data-page="advertising"] .row .t {font-size:20px;grid-column:3;grid-row:1}
}
@media(max-width:760px){
  .mark-name{font-size:23px!important}
  .mark-sub{font-size:12px!important}
  .pagehead{padding-top:calc(var(--head-h) + 16px)}
}


/* v0.5 — Legibility on a large desktop display without oversized titles. */
/* Labels/counters are information, not 9px decorative noise. */
:root, body, body[data-tone="paper"], body[data-tone="ink"] {
  --mute:#555550;
}
.nav a {font:500 clamp(12px,.85vw,14px)/1.25 var(--sans)!important;letter-spacing:.105em}
.nav a i {font:400 12px/1.25 var(--mono)!important;letter-spacing:0;margin-right:.5em}
.eyebrow {font:500 13px/1.4 var(--sans);letter-spacing:.095em;color:var(--mute)}
.code {font:400 12.5px/1.4 var(--mono);letter-spacing:.015em;color:var(--mute)}
/* Music series: right aligned metadata needs to be readable. */
.series-head .meta {gap:9px}
.series-head .meta .eyebrow {font:500 14px/1.35 var(--sans)!important;letter-spacing:.07em;color:#454541}
.series-head .meta .code {font:400 13px/1.4 var(--mono)!important;letter-spacing:.015em;color:#555550}
.series-head .back {font-size:13px}
.shelf .sub,.card .sub {font-size:13px!important;line-height:1.35;color:#555550;letter-spacing:.06em}
.shelf .lab .code,.card .lab .code{font-size:12px!important;color:#555550}
.strip-head .n,.strip-head .k,.strip-head .tools {font-size:13px}
.ph figcaption {font-size:12px;letter-spacing:.025em}
.vw-hint,.vw .code,.vw .eyebrow,.pv-cap .code {font-size:12.5px!important;letter-spacing:.025em;color:#555550}
.vw-series {font-size:13px}
.menu-list .n,.menu-foot {font-size:12px;color:#555550}
/* Page index and list metadata, readable without stealing from the photos. */
body[data-page="advertising"] .row .code {font-size:12px;color:#555550}
body[data-page="advertising"] .pv-cap .code {font-size:12px}
.hy-footer-left span,.hy-counter,.hy-discover {font-size:12px;letter-spacing:.05em}
/* Keep compact mobile layouts intact. */
@media(max-width:760px){
  .series-head .meta .eyebrow{font-size:12.5px!important}
  .series-head .meta .code{font-size:12px!important}
  .nav a{font-size:12px!important}
}

/* v0.8a — optional, user-started slideshow on all story viewers. */
.story-start{
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;max-width:100%;padding:10px 14px;
  border:1px solid #777; background:#fff;color:#202020;
  font:600 12px/1.2 var(--sans);letter-spacing:.08em;cursor:pointer;
}
.story-start:hover,.story-start:focus-visible{background:#ececea}
body[data-page="music"] .music-project-head .story-start{margin-top:17px}
.series-head .story-start-general{grid-column:1/-1;margin-top:16px}
.story-start-travel{padding:7px 10px;font-size:11px;letter-spacing:.04em}
.vw-show-controls{display:flex;align-items:center;gap:16px;justify-content:center}
.vw-show-controls button{font:600 12px/1.2 var(--sans);letter-spacing:.06em;padding:9px 4px;white-space:nowrap}
.vw-show-controls button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px}
.vw-show-controls button:hover{opacity:.55}
.vw-show-controls button:disabled{opacity:.32}
@media(max-width:760px){
  .vw-foot{flex-wrap:wrap;gap:7px 14px;justify-content:space-between}
  .vw-hint{display:none}
  .vw-show-controls{gap:12px}
}