:root{--bg:#f1efea;--ink:#111;--mute:#7a766e;--line:#d8d4cb;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Cormorant Garamond',Georgia,serif;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:1.1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:600}

/* intro */
.intro{position:fixed;inset:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;z-index:100;font-family:var(--serif);font-size:clamp(2rem,6vw,5rem);transition:transform 1.1s cubic-bezier(.76,0,.24,1);cursor:pointer;grid-template-rows:1fr;position:fixed}
.intro span{opacity:0;animation:fade 1s .1s forwards}
.intro.done{transform:translateY(-100%)}
@keyframes fade{to{opacity:1}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);z-index:50;mix-blend-mode:difference;color:#fff}
.nav a,.nav button{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:400}
.nav nav{display:flex;gap:2.2rem;align-items:center}
.logo{font-family:var(--serif)!important;font-size:1.5rem!important;letter-spacing:0!important;text-transform:none!important}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.hero-text{padding:140px var(--pad) 60px;display:flex;flex-direction:column;justify-content:center;gap:2rem;position:relative}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,8vw,8.5rem);line-height:.95;letter-spacing:-.02em}
h1 em{color:var(--mute)}
.lede{max-width:30rem;font-size:1.35rem;color:#333}
.scroll{position:absolute;left:var(--pad);bottom:40px;display:flex;align-items:center;gap:14px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.scroll i{width:60px;height:1px;background:var(--ink);transform-origin:left;animation:line 2.4s infinite}
@keyframes line{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.hero-img{overflow:hidden;clip-path:inset(0 0 100% 0)}
body.entered .hero-img{animation:reveal 1.6s .5s cubic-bezier(.76,0,.24,1) forwards}
.hero-img img{transform:scale(1.15);object-position:60% 50%}
body.entered .hero-img img{animation:zoom 14s .5s ease-out forwards}
@keyframes reveal{to{clip-path:inset(0)}}
@keyframes zoom{to{transform:scale(1)}}

/* works */
.works{height:500vh;position:relative}
.works-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink);color:var(--bg)}
.works-head{position:absolute;top:88px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#aaa;z-index:5}
.track{display:flex;align-items:center;height:100%;gap:6vw;padding:0 var(--pad);will-change:transform;width:max-content}
.panel{flex:none;height:68vh;display:flex;flex-direction:column;gap:18px}
.panel figure{height:calc(100% - 60px);overflow:hidden}
.panel figure img{width:auto;height:100%;max-width:none;transition:transform 1.2s}
.panel:hover figure img{transform:scale(1.04)}
.panel figure{display:block}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.6rem)}
.cap p{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#aaa}
.title-panel{justify-content:center;width:min(40vw,520px)}
.title-panel h2{font-family:var(--serif);font-weight:400;font-size:clamp(3.5rem,8vw,8rem);line-height:.95}
.title-panel p{color:#aaa}
.progress{position:absolute;left:var(--pad);right:var(--pad);bottom:40px;height:1px;background:#333}
.progress b{display:block;height:100%;width:0;background:var(--bg)}

/* manifesto */
.manifesto{padding:22vh var(--pad);max-width:1400px;margin:auto}
.big{font-family:var(--serif);font-size:clamp(2rem,5vw,4.6rem);line-height:1.12;margin-top:2rem;letter-spacing:-.01em}
.big span{opacity:.15;transition:opacity .5s}
.big span.on{opacity:1}


/* contact */
.contact{background:var(--ink);color:var(--bg);padding:20vh var(--pad) 40px;min-height:90vh;display:flex;flex-direction:column;justify-content:space-between;gap:4rem}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9vw,9rem);line-height:.95}
.contact h2 em{color:#8d897f}
.mail{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,3.4rem);border-bottom:1px solid #555;align-self:flex-start;padding-bottom:6px;transition:border-color .3s}
.mail:hover{border-color:var(--bg)}
.contact .eyebrow{color:#8d897f}
footer{display:flex;justify-content:space-between;font-size:.75rem;color:#8d897f;letter-spacing:.08em;border-top:1px solid #333;padding-top:20px}

/* reveal helper */
.rv{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

@media(max-width:800px){
  .hero{grid-template-columns:1fr}
  .hero-img{height:70vh;order:-1}
  .hero-text{padding-top:40px;padding-bottom:100px}
  .works{height:auto}
  .works-sticky{position:static;height:auto;padding:100px 0 60px}
  .works-head,.progress{display:none}
  .works-head{position:static}
  .track{flex-direction:column;align-items:stretch;width:auto;gap:48px;transform:none!important}
  .panel{height:auto}
  .panel figure{height:auto}
  .panel figure img{width:100%;height:auto}
  .title-panel{width:auto}
  .nav nav{gap:1rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.intro{display:none}.hero-img{clip-path:none}}

/* wordmark */
.wm{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.wm b{font-family:var(--serif);font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.wm small{font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.2em;margin-top:.55em;white-space:nowrap}
.logo.wm b{font-size:1.5rem}
.logo.wm small{font-size:.58rem}
.intro .wm{align-items:center;opacity:0}
.intro .wm b{font-size:clamp(2.4rem,7vw,6rem);padding-left:.32em}
.intro .wm small{font-size:clamp(.6rem,1.4vw,1rem);margin-top:1.2em}
@media(max-width:800px){.logo.wm small{font-size:.5rem;letter-spacing:.14em}}

/* click-to-enter intro */
html.locked,html.locked body{overflow:hidden}
.intro .wm{grid-area:1/1}
.intro .hint{grid-area:1/1;align-self:end;margin-bottom:9vh;font-family:var(--serif);font-size:.95rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#c9c4b8;animation:fade 1s 1s forwards,pulse 2.4s 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- projects, detail, studio, previous ---- */
.panel[data-slug]{cursor:pointer}
.panel[data-slug]:focus-visible,.index li:focus-visible{outline:1px solid currentColor;outline-offset:6px}
.panel figure{position:relative;background:#1c1c1c}

.detail{position:fixed;inset:0;background:var(--bg);z-index:90;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.detail.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.close{position:fixed;top:14px;right:var(--pad);z-index:95;width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:2rem;line-height:1;cursor:pointer;display:none}
.detail.on ~ .close,.detail.on .close{display:block}
.detail .close{position:fixed}
.detail-inner{max-width:1500px;margin:auto;padding:120px var(--pad) 12vh}
.d-head{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:end;margin-bottom:8vh}
.d-head .eyebrow{grid-column:1/-1}
.d-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,8vw,8rem);line-height:.95;letter-spacing:-.02em}
.d-text{font-size:1.35rem;max-width:34rem;color:#333}
.d-imgs{display:flex;flex-direction:column;gap:3vh}
.d-imgs figure{position:relative;width:100%;background:#ddd9d0;overflow:hidden}
.d-imgs img{width:100%;height:auto}
.viz{position:absolute;left:16px;bottom:16px;background:rgba(17,17,17,.7);color:#f1efea;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;font-weight:600}

.studio{padding:14vh var(--pad) 12vh;max-width:1500px;margin:auto}
.studio-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:6vw;align-items:center}
.portrait{aspect-ratio:1;overflow:hidden;background:#ddd9d0}
.portrait img{filter:grayscale(.15)}
.studio-text{display:flex;flex-direction:column;gap:1.2rem;max-width:40rem}
.studio-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,5.5rem);line-height:1}
.role{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600}
.studio-text p:last-child{font-size:1.3rem;color:#333}
.studio-strip{display:grid;grid-template-columns:1.6fr .7fr 1.6fr;gap:clamp(10px,2vw,28px);margin-top:12vh;align-items:stretch}
.studio-strip figure{aspect-ratio:4/5;overflow:hidden;background:#ddd9d0}
.studio-strip figure:nth-child(2){margin-top:8vh}

.prev{padding:6vh var(--pad) 16vh;max-width:1500px;margin:auto}
.prev-lede{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);margin:1rem 0 3rem;max-width:40rem;line-height:1.15}
.prev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,2vw,28px)}
.prev-grid figure{display:flex;flex-direction:column;gap:12px}
.prev-grid img{height:auto;aspect-ratio:4/5;background:#ddd9d0;filter:grayscale(.35);transition:filter .5s}
.prev-grid figure:hover img{filter:none}
.prev-grid figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prev-grid figcaption b{font-family:var(--serif);font-weight:500;font-size:1.3rem}
.prev-grid figcaption em{font-style:normal;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}

@media(max-width:800px){
  .d-head{grid-template-columns:1fr}
  .detail-inner{padding-top:90px}
  .studio-grid{grid-template-columns:1fr}
  .studio-strip{grid-template-columns:1fr 1fr}
  .studio-strip figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .studio-strip figure:nth-child(2){margin-top:0}
}

/* panel width follows the image, caption never widens it */
.panel .cap{width:0;min-width:100%}
.panel figure{background:none}
.cap h3{white-space:nowrap}
.cap p{text-align:right}

@media(max-width:800px){
  .nav{padding:16px var(--pad)}
  .logo.wm b{font-size:1.15rem;letter-spacing:.24em}
  .logo.wm small{display:none}
  .nav a,.nav button{font-size:.62rem;letter-spacing:.1em}
  .nav nav{gap:.9rem}
  .cap{flex-direction:column;gap:6px}
  .cap p{text-align:left}
  .panel .cap{width:auto}
  .cap h3{white-space:normal}
}

/* intro: full-bleed façade image behind the wordmark */
.intro{background:linear-gradient(rgba(10,10,10,.4),rgba(10,10,10,.4)),url(assets/p/rathaus-2.jpg) center/cover no-repeat,var(--ink)}
.intro .wm b,.intro .wm small{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.intro .hint{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.8)}

/* larger wordmark on the intro */
.intro .wm b{font-size:clamp(3rem,12.5vw,12rem);padding-left:.32em}
.intro .wm small{font-size:clamp(.62rem,1.7vw,1.5rem);margin-top:1.4em}
.intro .wm small{color:#fff;text-shadow:0 0 6px rgba(0,0,0,.9),0 2px 22px rgba(0,0,0,.7)}

/* intro wordmark spans the full width (font sizes are fitted in script.js) */
.intro .wm{width:calc(100vw - 2 * var(--pad));align-items:center}
.intro .wm b{padding-left:0;margin-right:-.32em;white-space:nowrap;line-height:.85}
.intro .wm small{margin-right:-.2em;margin-top:1.1em}

/* wordmark inside the project view links home */
.detail-logo{position:fixed;top:22px;left:var(--pad);z-index:95;color:var(--ink)}
@media(max-width:800px){.detail-logo{top:16px}}
.intro .wm b .bl{display:inline-block;width:0;height:0;letter-spacing:0}

/* intro: new background, wordmark at the very top */
.intro{background:linear-gradient(rgba(10,10,10,.38),rgba(10,10,10,.38)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,var(--ink);place-items:start center;padding-top:clamp(18px,3.5vh,48px)}
.intro .wm{align-self:start;transform:none!important}

/* hero: wider image column so both houses fit and sit in the middle */
.hero{grid-template-columns:1fr 1.45fr}
h1{font-size:clamp(2.8rem,5.8vw,7rem)}
.hero-img img{transform-origin:50% 50%}
@media(max-width:800px){.hero{grid-template-columns:1fr}h1{font-size:clamp(3rem,13vw,5rem)}}

/* intro: white veil instead of dark, dark wordmark */
.intro{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,#fff;color:var(--ink)}
.intro .wm b{color:var(--ink);text-shadow:0 0 28px rgba(255,255,255,.6)}

/* brand colour taken from the logo (rgb 0,0,102) */
:root{--brand:#000066}
.intro .wm b{color:var(--brand)}

/* header: navy logo on light sections, white on dark ones (toggled in script.js) */
.nav{mix-blend-mode:normal;--navc:#111;--logoc:var(--brand)}
.nav.on-dark{--navc:#fff;--logoc:#fff}
.nav a,.nav button{color:var(--navc);transition:color .3s}
.nav .logo b,.nav .logo small{color:var(--logoc);transition:color .3s}
.detail-logo b,.detail-logo small{color:var(--brand)}

/* all sections on white */
:root{--bg:#fff;--line:#e3e3e3}
.works-sticky{background:#fff;color:var(--ink)}
.works-head{color:var(--mute)}
.cap p,.title-panel p{color:var(--mute)}
.progress{background:#e3e3e3}
.progress b{background:var(--ink)}
.panel figure{background:#f2f2f2}
.contact{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.contact .eyebrow{color:var(--mute)}
.contact h2 em{color:var(--mute)}
.mail{border-bottom-color:#bbb}
.mail:hover{border-color:var(--ink)}
footer{color:var(--mute);border-top-color:var(--line)}
.portrait,.studio-strip figure,.prev-grid img,.d-imgs figure,.d-imgs img{background:#f2f2f2}

/* start page: smaller wordmark, centred */
.intro{place-items:center;padding-top:0}
.intro .wm{align-self:center;width:min(42vw,620px)}
@media(max-width:800px){.intro .wm{width:min(72vw,420px)}}

/* start page wordmark: 50% larger (42vw/620px -> 63vw/930px) */
.intro .wm{width:min(63vw,930px)}
@media(max-width:800px){.intro .wm{width:min(86vw,630px)}}

/* start page wordmark: another 50% larger (capped at 94vw so it never overflows) */
.intro .wm{width:min(94vw,1400px)}
@media(max-width:800px){.intro .wm{width:94vw}}

/* start page: white veil 50% stronger (.55 -> .825) */
.intro{background:linear-gradient(rgba(255,255,255,.825),rgba(255,255,255,.825)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,#fff}

/* start page: white veil 20% weaker (.825 -> .66) */
.intro{background:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,#fff}

/* header / project-view logo: 50% larger */
.logo.wm b{font-size:2.25rem}
.logo.wm small{font-size:.87rem}
@media(max-width:800px){
  .logo.wm b{font-size:1.7rem;letter-spacing:.16em}
  .detail-logo{top:14px}
}

/* project panels: width follows the image aspect ratio exactly (no grey strip) */
.panel figure{aspect-ratio:var(--ar,1.5);align-self:flex-start;height:calc(100% - 60px);width:auto;background:none}
.panel figure img{width:100%;height:100%;max-width:none;object-fit:cover}
@media(max-width:800px){
  .panel figure{aspect-ratio:auto;height:auto;width:100%;align-self:stretch}
  .panel figure img{width:100%;height:auto}
}

/* About us: full-width start image, then the text block */
.studio{max-width:none;padding:0}
.studio-hero{height:min(88vh,900px);overflow:hidden;background:#f2f2f2}
.studio-hero img{object-position:30% 50%}
.studio-body{max-width:1500px;margin:auto;padding:14vh var(--pad) 12vh}
.studio-strip{grid-template-columns:.7fr 1.6fr}
@media(max-width:800px){
  .studio-hero{height:62vh}
  .studio-strip{grid-template-columns:.8fr 1.4fr}
  .studio-strip figure:first-child{grid-column:auto;aspect-ratio:4/5}
}
.studio-hero{position:relative}
.studio-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}

/* About us: only one picture remains in the strip -> full width */
.studio-strip{grid-template-columns:1fr}
.studio-strip figure,.studio-strip figure:first-child,.studio-strip figure:nth-child(2){grid-column:auto;aspect-ratio:16/8;margin-top:0}
@media(max-width:800px){.studio-strip{grid-template-columns:1fr}.studio-strip figure,.studio-strip figure:first-child{aspect-ratio:4/3}}

/* contact: office photo as full background under a white veil */
.contact{background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),url(assets/studio/office.jpg) center/cover no-repeat,#fff;border-top:0}
.contact .eyebrow,.contact h2 em,footer{color:#4a4a4a}
.mail{border-bottom-color:#555}
footer{border-top-color:rgba(0,0,0,.2)}

/* manifesto: entrance photo as full-width background under a white veil */
.manifesto{max-width:none;margin:0;padding:22vh max(var(--pad),calc((100vw - 1400px)/2 + var(--pad)));background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url(assets/studio/entrance.jpg) center/cover no-repeat,#fff}
.big span{opacity:.22}
.big span.on{opacity:1}

/* About us starts directly with the portrait block (start image removed) */
.studio-body{padding-top:18vh}

/* manifesto: entrance photo as full-width background under a white veil */
.manifesto{max-width:none;margin:0;padding:22vh max(var(--pad),calc((100vw - 1400px) / 2));background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url(assets/studio/entrance.jpg) center/cover no-repeat,#fff}
.studio-body{padding-top:16vh}

/* contact: details + form */
.contact{justify-content:space-between}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:start}
.contact-main{display:flex;flex-direction:column;gap:2rem}
.contact-info{display:flex;flex-direction:column;gap:1.2rem;font-size:1.3rem}
.contact-info p{display:flex;flex-direction:column;gap:.2rem}
.contact-info span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;font-weight:600}
.contact-info a{border-bottom:1px solid #555;align-self:flex-start}
.contact-form{display:flex;flex-direction:column;gap:1.1rem;max-width:34rem}
.contact-form label{display:flex;flex-direction:column;gap:.4rem}
.contact-form label span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;font-weight:600}
.contact-form input,.contact-form textarea{font:inherit;font-size:1.2rem;color:var(--ink);background:rgba(255,255,255,.75);border:1px solid #9a9a9a;border-radius:0;padding:.7rem .9rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.contact-form textarea{resize:vertical;min-height:8rem}
.contact-form button{align-self:flex-start;font:inherit;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;background:var(--brand);color:#fff;border:0;padding:1rem 2rem;cursor:pointer;transition:opacity .3s}
.contact-form button:hover{opacity:.85}
.form-note{font-size:.95rem;color:#4a4a4a}
.form-note.err{color:#a40000}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:3rem}}
.contact h2{font-size:clamp(2.6rem,5.4vw,5.6rem)}
.contact{padding-top:18vh}

/* start page: white veil a little stronger (.66 -> .76) */
.intro{background:linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,#fff}

/* start page: white veil at 85% */
.intro{background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)),url(assets/p/rathaus-front.jpg) center/cover no-repeat,#fff}
.d-meta{grid-column:2;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:-.5rem}
@media(max-width:800px){.d-meta{grid-column:auto}}

/* project view: two pictures side by side in one row */
.d-row{display:grid;grid-template-columns:1fr 1fr;gap:3vh}
.d-row figure{min-width:0}
@media(max-width:800px){.d-row{grid-template-columns:1fr}}

/* manifesto is now a longer quotation */
.manifesto .big{font-size:clamp(1.7rem,3.5vw,3.3rem);line-height:1.2}
.quote-by{margin-top:2.2rem;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;font-weight:600}
.quote-by em{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.05rem}

/* header keeps a soft white band while scrolling */
.nav{transition:background .35s,box-shadow .35s,padding .35s}
.nav.scrolled{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 18px rgba(255,255,255,.9),0 1px 0 rgba(0,0,0,.05)}

/* legal pages */
.legal-links{display:flex;gap:1.6rem}
.legal-links a{border-bottom:1px solid transparent;transition:border-color .3s}
.legal-links a:hover{border-color:currentColor}
.legal{max-width:760px;margin:0 auto;padding-top:2vh}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;margin-bottom:3rem}
.legal h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:2.4rem 0 .7rem}
.legal p{font-size:1.2rem;line-height:1.55;color:#222}
.legal a{border-bottom:1px solid #999}
.legal .legal-date{margin-top:3rem;font-size:.95rem;color:var(--mute)}
mark.todo{background:#fff1a8;color:#111;padding:0 .25em;font-weight:600}
@media(max-width:800px){.contact footer{flex-direction:column;gap:.8rem}}