/* Brandon Grotesque by HVD Fonts. MyFonts Webfont Build ID 3867246.
 * Licensed to The Wildfang Collection; all other parties are explicitly restricted from using these webfonts. */
@font-face{font-family:'Brandon Grotesque';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/brandon-grotesque-300.woff2) format('woff2')}
@font-face{font-family:'Brandon Grotesque';font-weight:300;font-style:italic;font-display:swap;src:url(/assets/fonts/brandon-grotesque-300-italic.woff2) format('woff2')}
@font-face{font-family:'Brandon Grotesque';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/brandon-grotesque-400.woff2) format('woff2')}
@font-face{font-family:'Brandon Grotesque';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/brandon-grotesque-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--paper:#f5f2ec;--panel:#ece7de;--ink:#1c1a17;--muted:#716b61;--line:#d8d1c4;--serif:'EB Garamond',Georgia,serif;--display:'Cormorant Garamond','EB Garamond',Georgia,serif;--measure:34rem;--sans:'Brandon Grotesque','Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.68;font-feature-settings:"kern","liga","onum";-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line);transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
strong{font-weight:500}
p{margin:0 0 1.1em}
.label{font-family:var(--serif);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* header */
.masthead{display:flex;align-items:center;justify-content:space-between;padding:1.6rem clamp(1.25rem,4vw,3.5rem);}
.masthead .mark img{height:46px;width:auto}
.index-toggle{background:none;border:0;padding:.5rem 0;cursor:pointer;color:var(--ink);font:inherit;display:flex;align-items:center;gap:.8rem}
.index-toggle .bars{display:inline-block;width:22px;height:7px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.index{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;overflow:auto;padding:1.6rem clamp(1.25rem,4vw,3.5rem) 4rem}
.index.open{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.index-top{display:flex;justify-content:space-between;align-items:center}
.index-top img{height:46px;width:auto}
.index ol{list-style:none;margin:8vh auto 0;padding:0;max-width:44rem}
.index li{border-top:1px solid var(--line)}
.index li:last-child{border-bottom:1px solid var(--line)}
.index li a{display:flex;align-items:baseline;gap:2rem;padding:.7rem 0;text-decoration:none;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2}
.index li a .label{width:2.5rem;flex:none}
.index li a:hover,.index li a[aria-current]{font-style:italic}

/* chapter opening */
.chapter{max-width:72rem;margin:0 auto;padding:clamp(3rem,9vh,7rem) clamp(1.25rem,4vw,3.5rem) 0;text-align:center}
.chapter .label{display:block;margin-bottom:1.6rem}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;max-width:16ch;margin:0 auto}
h2{font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.1;margin-bottom:1.4rem}
h3{font-size:1.65rem;line-height:1.2;margin-bottom:.6rem}
.chapter .rule{width:3rem;height:1px;background:var(--ink);margin:2.4rem auto 0;border:0}
.lede{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink)}

/* layout */
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.text{max-width:var(--measure);margin-left:auto;margin-right:auto}
.section{padding-top:clamp(3.5rem,9vh,7rem);padding-bottom:clamp(3.5rem,9vh,7rem)}
.section + .section{padding-top:0}
.center{text-align:center}
.divider{border:0;height:1px;background:var(--line);max-width:72rem;margin:0 auto}

/* plates */
.plate{margin:clamp(3rem,8vh,6rem) auto}
.plate img{margin:0 auto}
.plate figcaption{margin-top:1.1rem;text-align:center;font-style:italic;color:var(--muted);font-size:1rem}
.plate.banner{max-width:60rem}
.plate.banner img{width:100%}
.plate.narrow{max-width:38rem}
.plate.mid{max-width:50rem}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.square{aspect-ratio:1/1;overflow:hidden;background:#111}
.square img{width:100%;height:100%;object-fit:cover}
.zoom{cursor:zoom-in}

/* home */
.signoff{margin-top:2.6rem}
.signoff img{width:220px;mix-blend-mode:multiply;margin-top:.6rem}

/* principles */
.entries{max-width:58rem;margin:0 auto}
.entry{display:grid;grid-template-columns:14rem 1fr;gap:2.5rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry h3{margin:0;font-size:1.75rem}
.entry .n{display:block;margin-bottom:.5rem}
.entry p:last-child{margin-bottom:0}

/* side by side */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center;max-width:64rem;margin:0 auto}
.pair + .pair{margin-top:clamp(4rem,10vh,7rem)}
.pair.flip > figure{order:2}
.pair figure{margin:0}
.numeral{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--muted);display:block;margin-bottom:.8rem}
blockquote{margin:0;font-family:var(--display);font-size:1.4rem;line-height:1.55;font-style:italic}
blockquote footer{margin-top:1.2rem;font-family:var(--serif);font-style:normal}

/* testimonials */
.voice{display:grid;grid-template-columns:11rem 1fr;gap:4.5rem;max-width:58rem;margin:0 auto;padding:3.4rem 0;border-top:1px solid var(--line)}
.voice:last-child{border-bottom:1px solid var(--line)}
.voice figure{margin:0}
.voice img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15)}
.voice h3{margin-bottom:.2rem}
.voice .role{font-style:italic;color:var(--muted);margin-bottom:1.4rem}
.voice .quote{position:relative}.voice .quote p{text-indent:0}
.voice .quote p:first-child::before{content:"“";position:absolute;right:100%;top:-.14em;margin-right:.45rem;font-family:var(--display);font-size:4.2rem;line-height:1;color:var(--muted)}
body.night .voice .quote p:first-child::before{font-family:'Brandon Grotesque',sans-serif;font-weight:300;color:rgba(217,209,194,.5)}

/* publications */
.pubs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem);max-width:64rem;margin:0 auto}
.pub a.cover{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--panel);padding:8%;text-decoration:none}
.pub a.cover img{max-height:100%;width:auto;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pub h3{margin:1.4rem 0 .5rem}
.pub p{color:#3c3832}

/* aesthetics dimensions */
.dims{max-width:64rem;margin:0 auto}

/* columns of info */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);max-width:64rem;margin:0 auto}
.cols.two{grid-template-columns:repeat(2,1fr);max-width:52rem}
.col{border-top:1px solid var(--ink);padding-top:1.6rem}
.col h3{font-size:1.6rem}
.more{display:inline-block;margin-top:.4rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.15rem}
.more:hover{color:var(--muted);border-color:var(--muted)}
ul.plain{list-style:none;padding:0;margin:0 0 1.2em}
ul.plain li{padding:.35rem 0;border-bottom:1px solid var(--line)}
ul.plain li:first-child{border-top:1px solid var(--line)}
.button{display:inline-block;padding:1rem 2.2rem;border:1px solid var(--ink);text-decoration:none;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;transition:background .2s,color .2s}
.button:hover{background:var(--ink);color:var(--paper)}
.small{font-size:1rem;color:var(--muted)}
.legal{font-size:1rem;line-height:1.6}
.legal h3{font-family:var(--serif);font-size:1rem;font-weight:500;margin:1.8rem 0 .4rem}
.legal h2{font-size:1.9rem;margin-top:3.5rem}

/* gallery */
.gallery{columns:4 14rem;column-gap:clamp(.8rem,1.8vw,1.4rem);max-width:80rem;margin:0 auto}
.gallery a{display:block;margin-bottom:clamp(.8rem,1.8vw,1.4rem);break-inside:avoid}

/* chapter nav + footer */
.turn{display:flex;justify-content:space-between;gap:2rem;max-width:72rem;margin:0 auto;padding:3rem clamp(1.25rem,4vw,3.5rem);border-top:1px solid var(--line)}
.turn a{text-decoration:none;display:block}
.turn a .t{display:block;font-family:var(--display);font-size:1.6rem;line-height:1.2;margin-top:.3rem}
.turn a:hover .t{font-style:italic}
.turn .next{text-align:right;margin-left:auto}
.colophon{background:var(--ink);color:#cfc8bb;padding:4.5rem clamp(1.25rem,4vw,3.5rem) 3rem;font-size:.95rem}
.colophon .inner{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem}
.colophon .name{font-family:var(--display);font-size:1.7rem;color:#f5f2ec;line-height:1.2}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{padding:.15rem 0}
.colophon a{text-decoration:none}
.colophon a:hover{color:#fff}
.colophon .label{color:#8f887c;display:block;margin-bottom:1rem}
.colophon .fine{max-width:72rem;margin:3.5rem auto 0;padding-top:1.6rem;border-top:1px solid #3a3631;color:#8f887c;font-size:.85rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(14,13,12,.97);display:none;align-items:center;justify-content:center}
.lb.open{display:flex;animation:fade .2s ease}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto}
.lb button{position:absolute;background:none;border:0;color:#cfc8bb;font-family:var(--display);font-size:2.4rem;cursor:pointer;padding:1rem 1.4rem;line-height:1}
.lb button:hover{color:#fff}
.lb .close{top:.6rem;right:.8rem;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;font-family:var(--serif)}
.lb .prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lb .next{right:.5rem;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#8f887c;font-size:.72rem;letter-spacing:.24em}

@media (max-width:820px){
  body{font-size:1.09rem}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .entry,.voice{grid-template-columns:1fr;gap:1.2rem}
  .voice figure{max-width:9rem}
  .voice .quote{padding-left:2.2rem}.voice .quote p:first-child::before{right:auto;left:0;margin-right:0;font-size:3.4rem}
  .pair{grid-template-columns:1fr;gap:2rem}
  .pair.flip > figure{order:0}
  .pubs,.cols,.cols.two{grid-template-columns:1fr}
  .colophon .inner{grid-template-columns:1fr;gap:2.2rem}
  .masthead .mark img,.index-top img{height:38px}
  .index-toggle .word{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mast-right{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.2rem)}
.lang{display:flex;align-items:center;gap:.55em;font-size:.72rem;letter-spacing:.24em;color:var(--muted)}
.lang a{text-decoration:none;color:var(--muted);transition:color .2s}
.lang a:hover{color:var(--ink)}
.lang [aria-current]{color:var(--ink)}
html[lang=de] .voice .quote p:first-child::before{content:"„";top:-.55em}

.logo-night{display:none}

/* Brandon Grotesque, as in the printed matter: navigation, headings, numbers, captions and small labels.
   Garamond stays for reading text. Brandon has no italic here, so hover states change colour instead. */
h1,h2,h3{font-family:var(--sans);font-weight:300;letter-spacing:.005em}
h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.08}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15}
h3,.entry h3,.col h3{font-size:1.3rem;font-weight:400;line-height:1.3}
.label,.more,.button,.lang,.index-toggle,.lb .close,.lb .count{font-family:var(--sans);font-weight:400;letter-spacing:.2em}
.label{font-size:.7rem}
.index-toggle{font-size:.72rem;text-transform:uppercase}
.index li a,.turn a .t,.colophon .name{font-family:var(--sans);font-weight:300}
.index li a{font-size:clamp(1.4rem,3vw,2rem)}
.index li a:hover,.index li a[aria-current],.turn a:hover .t{font-style:normal;color:var(--muted)}
.turn a .t{font-size:1.35rem}
.colophon .name{font-size:1.4rem}
.numeral{font-family:var(--sans);font-weight:300;font-size:2.8rem}
.plate figcaption{font-family:var(--sans);font-style:normal;font-size:.8rem;letter-spacing:.06em}
.lb button.prev,.lb button.next{font-family:var(--sans);font-weight:300}
h1 em,h2 em,h3 em,h1 i,h2 i,h3 i,.colophon .name em,.turn a .t em,.index li a em{font-style:normal;color:var(--muted)}
.colophon .name em{color:#cfc8bb}
/* Brandon for all text on every page (decided 2026-10-19). Light Italic exists (bought 2026-10-21): quotes are italic, other emphasis upright. */
body.night{--serif:var(--sans);--display:var(--sans)}
body.night main{font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.75;letter-spacing:.01em;font-feature-settings:"kern","liga"}
body.night main .lede{font-weight:300;letter-spacing:0}
body.night strong,body.night b{font-weight:500}
body.night main em,body.night main i,body.night .colophon em{font-style:normal}
body.night blockquote{font-weight:300;font-style:italic;font-size:1em;line-height:1.75;font-synthesis:none}
body.night blockquote footer{font-style:normal}
body.night .lede,body.night .colophon,body.night .colophon p,body.night .colophon li,body.night .colophon a,body.night .colophon .fine{font-family:var(--sans);font-weight:300;font-feature-settings:"kern","liga"}
body.night .colophon li a,body.night .colophon p{font-size:.9375rem;letter-spacing:.01em}
body.night .legal h3{font-weight:500}
.video{max-width:56rem;margin:clamp(2.5rem,6vh,4.5rem) auto 0}
.video-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.video-play img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s}
.video-play:hover img{opacity:1}
.video-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1rem 2.2rem;border:1px solid #e9e2d4;color:#e9e2d4;background:rgba(11,10,9,.35);font-family:var(--sans);font-size:.75rem;letter-spacing:.24em;text-transform:uppercase}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.video figcaption{margin-top:1rem;text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.06em}

/* Museum Soundscape switch, beside EN · DE */
.sound-toggle{display:flex;align-items:center;gap:.6em;background:none;border:0;padding:.3rem 0;cursor:pointer;font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.sound-toggle:hover,.sound-toggle.on{color:var(--ink)}
.sound-toggle .wave{display:flex;align-items:center;gap:2px;height:12px}
.sound-toggle .wave i{display:block;width:1px;height:3px;background:currentColor;transition:height .6s ease}
.sound-toggle.on .wave i{animation:twc-wave 2.4s ease-in-out infinite}
.sound-toggle.on .wave i:nth-child(2){animation-delay:-.6s}
.sound-toggle.on .wave i:nth-child(3){animation-delay:-1.5s}
.sound-toggle.on .wave i:nth-child(4){animation-delay:-.9s}
@keyframes twc-wave{0%,100%{height:3px}50%{height:11px}}
@media (max-width:40rem){.sound-toggle .word{display:none}.sound-toggle .wave{height:14px}}
html.turning main{opacity:.6;transition:opacity .4s}
/* Quotes rule (2026-10-21): every quote in Brandon Light Italic, names and roles upright and muted. */
body.night .voice .quote{font-style:italic;font-weight:300;font-synthesis:none}
body.night .voice .role{font-style:normal;color:var(--muted)}
/* 2026-10-21: opening paragraphs inside page text read as body text (no enlarged lede); the homepage hero intro keeps its size. */
main .text .lede{font-size:inherit;line-height:inherit;color:inherit}
/* 2026-10-21: a standalone centered statement works as an interim headline and keeps the larger size. */
main .text.center .lede{font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.6}
/* Inline soundscape switch inside running text: looks like a text link, toggles the same music as the header button. */
.text-sound{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--muted)}
.text-sound:hover,.text-sound.on{text-decoration-color:currentColor}