:root{--paper:#eee7db;--ink:#28231e;--muted:#665b50;--accent:#964b35;--line:rgba(50,39,28,.24);--sans:'DM Sans',Arial,sans-serif;--serif:'Newsreader',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}body.panel-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:#a8573c;color:#fff}img{display:block;width:100%;height:auto}p,h1,h2,h3,figure{margin:0}button{background:none;border:0}.eyebrow{font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.15em;text-transform:uppercase}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:10px;left:12px;padding:12px;background:var(--paper);z-index:100;transform:translateY(-160%)}.skip:focus{transform:none}.index{position:relative;isolation:isolate;min-height:100svh}.index-ui{position:relative;z-index:2;padding:26px 4vw 20px;min-height:100svh;display:flex;flex-direction:column;pointer-events:none}.index-ui a{pointer-events:auto}.masthead{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;font-size:11px;line-height:1.45}.masthead p{justify-self:center}.wordmark{font-size:24px;letter-spacing:-.08em;font-weight:600;line-height:1}.wordmark span{font-size:9px;vertical-align:top;margin-left:4px;letter-spacing:0}.about-link{justify-self:end;border-bottom:1px solid var(--ink);padding-bottom:3px}.about-link span{margin-left:24px}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:30px 0 30px;gap:20px}.intro h1{font-family:var(--serif);font-size:clamp(90px,12vw,194px);line-height:.9;letter-spacing:-.065em;font-weight:400;margin:16px 0 0}.name-dot{color:var(--accent)}.intro-line{font-size:14px;line-height:1.5;margin-bottom:6px;max-width:240px}.intro-line em{font-family:var(--serif);font-size:20px;font-weight:400}.work{margin-top:auto}.work-heading{display:flex;justify-content:space-between;align-items:center;padding:0 0 15px}.work-heading sup{font-size:9px;margin-left:9px}.hover-hint{color:var(--muted);font-size:9px;letter-spacing:.09em}.project{display:grid;grid-template-columns:45px minmax(0,1fr) 200px 24px;gap:12px;align-items:center;position:relative;min-height:clamp(54px,8vh,82px);border-top:1px solid var(--line);transition:opacity .25s var(--ease)}.project:last-child{border-bottom:1px solid var(--line)}.project-number{align-self:center;font-size:9px;letter-spacing:.08em}.project-name{font-family:var(--serif);font-size:clamp(29px,3.2vw,48px);line-height:1.1;letter-spacing:-.025em;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.project-type{font-size:10px;letter-spacing:.03em;justify-self:start}.project-arrow{font-size:22px;justify-self:end;transition:transform .25s var(--ease)}.project.is-active .project-name{transform:translateX(10px)}.project.is-active .project-arrow{transform:translate(3px,-3px)}.projects.has-active .project:not(.is-active){opacity:.6}.index-footer{display:flex;justify-content:space-between;gap:20px;padding-top:22px;font-size:10px}.index-footer a{border-bottom:1px solid var(--line);padding-bottom:4px}.index-footer span{color:var(--muted)}.index-footer a span{margin-left:18px;color:var(--ink)}.preview-stage{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);transition:opacity .32s ease,transform .65s cubic-bezier(.2,.7,.2,1),visibility .32s}.preview.is-active{opacity:1;visibility:visible;transform:none}.preview>img,.preview>.art{position:absolute;width:clamp(420px,48vw,760px);max-height:69vh;object-fit:contain;box-shadow:0 18px 65px #30211116;left:42%;top:16%;}.preview-2lady>img{width:61vw;left:31%;top:23%}.preview-mey-edlich>img{width:61vw;left:31%;top:24%}.preview-quickfix>img{width:35vw;left:48%;top:9%;max-height:82vh}.preview-wollenhaupt>img{width:60vw;left:30%;top:24%}.preview-poetschke>.art{width:53vw;left:38%;top:19%}.mobile-art{display:none}.art{position:relative;width:100%;overflow:hidden;background:var(--paper-hi)}.art iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;overflow-y:auto;background:var(--paper);color:var(--ink);overscroll-behavior:contain}dialog[open]{animation:enter .3s ease}dialog::backdrop{background:var(--paper)}.case-top{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4vw;background:rgba(238,231,219,.97);border-bottom:1px solid var(--line);font-size:10px}.case-top>span{color:var(--muted)}.close{padding:6px 0 6px 12px}.close span{font-size:17px;margin-left:18px}.idea{padding:90px 0 80px;border-bottom:1px solid var(--line)}.idea>.eyebrow{color:var(--accent)}.idea h2{font-family:var(--serif);font-size:clamp(38px,5.5vw,76px);line-height:1.08;font-weight:400;letter-spacing:-.035em;max-width:950px;margin:24px 0 42px}.application{padding:60px 0;border-bottom:1px solid var(--line)}.project-note{display:grid;grid-template-columns:1fr 2fr;gap:35px;padding:36px 0;font-size:11px;line-height:1.8;color:var(--muted)}.project-note p{max-width:690px}.next-project{display:block;border-top:1px solid var(--line);padding:45px 0 60px}.next-project>.eyebrow{display:block;margin-bottom:20px;color:var(--accent)}.next-project>span:last-child{font-family:var(--serif);font-size:clamp(34px,6vw,80px);letter-spacing:-.04em;display:flex;justify-content:space-between}.next-project i{font-style:normal;transition:transform .2s var(--ease)}.next-project:hover i{transform:translate(6px,-6px)}.about-panel{background:var(--ink);color:var(--paper);min-height:100svh}.about-panel .case-top{background:var(--ink);border-color:#ffffff30}.about-panel .case-top>span{color:var(--stone-2)}.about-wrap{max-width:1320px;margin:auto;padding:70px 5vw}.about-wrap h1{font-family:var(--serif);font-size:clamp(55px,8vw,110px);font-weight:400;line-height:1.02;letter-spacing:-.04em;margin:25px 0 55px}.about-copy{max-width:640px;margin-left:auto}.about-copy p{font-size:17px;line-height:1.8;margin-bottom:20px}.contact{display:inline-block;margin:20px 0 30px;border-bottom:1px solid #ffffff80;padding-bottom:6px}.about-disciplines{display:flex;gap:25px;flex-wrap:wrap;border-top:1px solid #ffffff30;margin-top:45px;padding-top:26px;font-size:11px}.about-note{font-size:11px;color:var(--stone-2);margin-top:35px;line-height:1.7}.no-js{padding:20px}.panel-open .preview-stage{visibility:hidden}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.index-ui{padding-left:5vw;padding-right:5vw}.intro{padding-top:4vh;padding-bottom:5vh}}
@media(max-width:800px),(hover:none){.preview-stage{display:none}.index-ui{padding:24px 5vw}.masthead{grid-template-columns:1fr auto}.masthead p{display:none}.intro{padding:48px 0 42px;display:block}.intro h1{font-size:clamp(68px,15vw,120px);margin-top:18px}.intro-line{margin-top:26px}.intro-line br{display:none}.intro-line em{margin-left:4px}.hover-hint{display:none}.project{grid-template-columns:25px 1fr 22px;gap:12px;padding:20px 0}.project-name{font-size:clamp(26px,5vw,40px)}.project-type{grid-column:2;grid-row:2;font-size:10px;color:var(--muted)}.project-arrow{grid-column:3;grid-row:1}.mobile-art{display:block;grid-column:1/-1;pointer-events:none;margin-top:6px;background:var(--paper-2)}.mobile-art>img{max-height:440px;object-fit:contain}.projects.has-active .project:not(.is-active){opacity:1}.index-footer{flex-direction:column;align-items:flex-start;padding:28px 0 4px;gap:16px}.case-top{padding:14px 5vw}.case-top>span{display:none}.project-note{grid-template-columns:1fr;gap:14px}.idea{padding:55px 0}.idea h2{font-size:40px}.application{padding:38px 0}.about-wrap{padding:50px 6vw}.about-copy p{font-size:16px}.about-disciplines{gap:16px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.preview{transform:none}.project.is-active .project-name,.project.is-active .project-arrow{transform:none}}

/* Welcome: a quiet typographic introduction before the project index. */
.welcome-active{background:var(--ink);color:var(--paper)}
.welcome-active #index{display:none}
.welcome[hidden]{display:none}
.welcome{min-height:100svh;padding:30px 5vw 24px;display:flex;flex-direction:column;background:var(--ink);color:var(--paper)}
.welcome-header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:20px}
.welcome-monogram{font-size:29px;font-weight:600;letter-spacing:-.08em;line-height:1}
.welcome-monogram span{font-size:15px;color:#c88c71;margin-left:5px}
.welcome-header p{font-size:13px;line-height:1.6;justify-self:center}
.welcome-location{font-size:12px;justify-self:end;color:var(--stone-2)}
.welcome-content{width:100%;max-width:1400px;margin:auto;padding:65px 0 58px}
.welcome-kicker{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone-2);margin-bottom:26px}
.welcome h1{font-family:var(--serif);font-size:clamp(84px,12.2vw,190px);font-weight:400;line-height:.91;letter-spacing:-.055em}
.welcome h1 em{font-weight:400;color:#d5ac94;display:inline-block;margin-left:10vw}
.welcome-invitation{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:40px 0 0 10vw}
.welcome-invitation>p{font-size:15px;line-height:1.6;color:var(--stone)}
.enter-portfolio{display:flex;align-items:center;gap:44px;font-size:14px;border-bottom:1px solid #c7b9a766;padding:10px 0 14px;min-height:60px}
.enter-arrow{font-size:34px;line-height:1;transition:transform .25s var(--ease),color .25s var(--ease)}
.enter-portfolio:hover .enter-arrow{transform:translate(5px,-5px);color:#d5ac94}
.enter-portfolio:focus-visible{outline-color:#d5ac94}
.welcome-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #c7b9a733;padding-top:20px;color:var(--stone-2);font-size:12px;line-height:1.5}
.welcome-footer sup{font-size:10px;margin-left:12px}
.welcome-active .skip{background:var(--paper);color:var(--ink)}
@media(max-width:800px){.welcome{padding:24px 6vw;min-height:100svh}.welcome-header{grid-template-columns:1fr auto}.welcome-header p{justify-self:end;font-size:12px}.welcome-location{display:none}.welcome-content{padding:65px 0}.welcome h1{font-size:clamp(64px,13.6vw,110px);line-height:1}.welcome h1 em{margin-left:0}.welcome-kicker{font-size:11px;letter-spacing:.09em}.welcome-invitation{margin:30px 0 0;align-items:start;flex-direction:column;gap:30px}.enter-portfolio{width:100%;justify-content:space-between}.welcome-footer{font-size:11px;flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){.enter-portfolio:hover .enter-arrow{transform:none}}

/* Eight-second welcome sequence; routing remains independent of motion settings. */
.welcome{position:relative;isolation:isolate;overflow:hidden}
.welcome::before{content:'';position:absolute;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 24% 44%,#c88c7120,transparent 49%);opacity:.8}
.welcome-title-line{display:block}
.welcome h1 em.welcome-title-line{display:block}
.welcome-kicker{display:flex;align-items:center;justify-content:space-between;gap:20px}
.welcome-discipline{position:relative;width:110px;height:18px;text-align:right;color:#d5ac94}
.welcome-discipline>span{position:absolute;inset:0;opacity:0}
.welcome-timing{display:flex;align-items:center;gap:22px;margin-top:18px;font-size:11px;color:var(--stone-2);font-variant-numeric:tabular-nums}
.welcome-timing>span{min-width:155px}
.welcome-progress{height:1px;flex:1;background:#c7b9a733;overflow:hidden}
.welcome-progress>span{display:block;height:100%;background:#d5ac94;transform:scaleX(0);transform-origin:left}
.welcome.is-running::before{animation:welcome-light 8s ease-in-out both}
.welcome.is-running .welcome-title-line{animation:none}
.welcome.is-running em.welcome-title-line{animation:none}
.welcome.is-running .welcome-invitation{animation:welcome-type-in 1.3s .8s both}
.welcome.is-running .welcome-discipline>span{animation:welcome-word 2.5s both}
.welcome.is-running .welcome-discipline>span:nth-child(2){animation-delay:2.5s}
.welcome.is-running .welcome-discipline>span:nth-child(3){animation-delay:5s}
.welcome.is-running .welcome-discipline>span:nth-child(4){animation-delay:7.5s}
.welcome.is-running .welcome-progress>span{animation:welcome-progress 8s linear forwards}
#index{color:var(--ink);background:var(--paper)}
.welcome-active.welcome-opening #index{display:block}
.welcome-opening .welcome{position:fixed;inset:0;z-index:80;animation:welcome-curtain .8s cubic-bezier(.76,0,.24,1) both;pointer-events:none}
@keyframes welcome-type-in{from{opacity:0;transform:translateY(45px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes welcome-float{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes welcome-light{0%{transform:translate(-6%,-3%)}50%{transform:translate(18%,8%);opacity:1}100%{transform:translate(-6%,-3%)}}
@keyframes welcome-word{0%{opacity:0;transform:translateY(8px)}12%,85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes welcome-progress{to{transform:scaleX(1)}}
@keyframes welcome-curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media(max-width:800px){.welcome-discipline{width:80px;font-size:10px}.welcome-timing{gap:12px}.welcome-content{padding-top:50px;padding-bottom:45px}}
@media(prefers-reduced-motion:reduce){.welcome-title-line,.welcome-invitation{opacity:1;transform:none;filter:none}.welcome-discipline>span{display:none}.welcome-discipline>span:first-child{display:block;opacity:1}.welcome-progress>span{transform:scaleX(1)}.welcome-opening .welcome{clip-path:none}}

/* Masked, staggered letter reveal inspired by the reference introduction. */
.welcome-title-line{overflow:hidden;padding:.12em .03em .2em;margin-block:-.12em -.2em;perspective:900px}
.welcome-character{display:inline-block;white-space:pre}
.welcome.is-running .welcome-character{animation:welcome-letter-in 1.15s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--character-delay)}
.welcome.is-running .welcome-invitation{animation-delay:1.5s}
@keyframes welcome-letter-in{from{opacity:0;transform:translateY(115%) rotateX(-45deg) rotateZ(5deg)}to{opacity:1;transform:translateY(0) rotateX(0) rotateZ(0)}}
@media(prefers-reduced-motion:reduce){.welcome-character{opacity:1;transform:none}}

/* Hover artwork sits above the right-hand labels; pointer input still reaches the index. */
@media(min-width:801px) and (hover:hover){
  .preview>img,.preview>.art{left:auto;right:4vw}
  .preview>img{object-position:right center;background:var(--paper)}
}

/* Pötschke: a product-led brand modernisation case study. */
.poetschke-case{--p-green:#34513b;--p-rule:#34513b40;--p-surface:var(--paper-2)}
.poetschke-case .eyebrow{font-size:12px;letter-spacing:.1em}
.p-opening{padding:45px 0 0}.p-category{color:var(--p-green);border-bottom:1px solid var(--p-rule);padding-bottom:18px}
.p-lead{display:grid;grid-template-columns:1fr 1.12fr;gap:5vw;align-items:center;padding:45px 0}
.p-lead-copy>.eyebrow{color:var(--muted)}
.p-lead h1{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.02;font-size:clamp(48px,6.5vw,94px);margin:22px 0}
.p-lead h1 em{color:var(--p-green);font-weight:400}.p-deck{font-size:17px;line-height:1.7;max-width:440px}
.p-cover{padding:18px;background:var(--paper-2);transform:rotate(1deg)}
.poetschke-case figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:13px}
.p-brief{display:grid;grid-template-columns:1fr 2fr;gap:35px;padding:25px 0 42px;border-top:1px solid var(--p-rule)}
.p-brief>p:last-child{max-width:730px;font-size:16px;line-height:1.75}
.p-insight{display:grid;grid-template-columns:1.2fr 1fr;gap:5vw;background:var(--p-green);color:var(--paper-hi);padding:clamp(28px,4vw,60px);margin:8px 0 70px}
.p-insight h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,58px);letter-spacing:-.025em;line-height:1.12;margin-top:25px}
.p-insight h2 em{font-weight:400;color:#d6d0a9}.p-insight-copy p{font-size:16px;line-height:1.75;margin-bottom:20px}
.p-insight-copy p:last-child{margin-bottom:0}.p-insight-takeaway{padding-top:20px;border-top:1px solid #f4eee144}
.p-section-heading{display:grid;grid-template-columns:.8fr 1.3fr 1.2fr;gap:35px;align-items:start;margin-bottom:34px}
.p-section-heading .eyebrow{color:var(--p-green)}
.p-section-heading h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,47px);line-height:1.08;font-weight:400;letter-spacing:-.025em}
.p-section-heading>p:last-child:not(.eyebrow){font-size:16px;line-height:1.75}
.p-object-pair{display:grid;grid-template-columns:1.35fr 1fr;gap:28px}
.p-object-pair .application{padding:24px 0 0;border-top:1px solid var(--p-rule);border-bottom:0}
.p-object-label{display:flex;align-items:center;gap:18px;margin-bottom:25px}
.p-letter{font-family:var(--serif);font-size:50px;line-height:1;color:var(--p-green)}
.p-object-label h3{font-family:var(--serif);font-size:30px;font-weight:400;margin-top:6px;letter-spacing:-.02em}
.p-object-label .eyebrow{font-size:11px}
.p-object-stage{--object-height:clamp(240px,29vw,370px);height:var(--object-height);padding:16px;display:flex;align-items:center;justify-content:center;background:var(--p-surface)}
.p-calendar .art{width:calc((var(--object-height) - 32px)*2160/1540);max-width:100%}
.p-seed .art{width:calc((var(--object-height) - 32px)*1110/1540);max-width:100%}
.p-object-facts{margin:20px 0 0;font-size:14px;line-height:1.65}
.p-object-facts>div{display:grid;grid-template-columns:90px 1fr;gap:12px;border-bottom:1px solid var(--p-rule);padding:11px 0}
.p-object-facts dt{color:var(--muted)}.p-object-facts dd{margin:0}
.p-journey,.p-language{margin-top:70px;padding-top:45px;border-top:1px solid var(--p-rule)}
.p-steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;background:var(--p-surface)}
.p-steps li{padding:28px;border-right:1px solid var(--p-rule)}.p-steps li:last-child{border:0}
.p-steps li>span{font-size:12px;color:var(--p-green)}.p-steps h3{font-family:var(--serif);font-size:29px;font-weight:400;margin:20px 0 12px}
.p-steps p{font-size:15px;line-height:1.65}
.p-decisions{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.p-decisions>div{border-top:1px solid var(--p-rule);padding-top:24px}
.p-decisions h3{font-family:var(--serif);font-weight:400;font-size:29px;letter-spacing:-.02em;margin:14px 0}
.p-decisions p{font-size:16px;line-height:1.7}
.p-range{margin-top:65px}.p-range figure{padding:22px;background:var(--p-surface)}
.p-closing{padding:45px 0;border-bottom:1px solid var(--p-rule);display:grid;grid-template-columns:1fr 2fr;gap:35px}
.p-closing>p:last-child{font-family:var(--serif);font-size:clamp(29px,3.5vw,46px);line-height:1.15;letter-spacing:-.025em;color:var(--p-green)}
.poetschke-case .project-note{font-size:13px}
@media(max-width:800px){
 .p-opening{padding-top:30px}.p-lead{grid-template-columns:1fr;gap:30px;padding:30px 0}
 .p-lead h1{font-size:clamp(46px,10vw,75px)}.p-cover{transform:none;padding:12px}.p-deck{max-width:none}
 .p-brief,.p-insight,.p-section-heading,.p-closing{grid-template-columns:1fr;gap:20px}
 .p-insight{margin-bottom:45px}.p-insight h2{margin-top:15px}.p-insight-copy p{font-size:16px}
 .p-object-pair{grid-template-columns:1fr;gap:35px}.p-object-stage{--object-height:320px}
 .p-journey,.p-language{margin-top:45px;padding-top:30px}.p-steps{grid-template-columns:1fr 1fr}
 .p-steps li{border-bottom:1px solid var(--p-rule);padding:20px}.p-steps li:nth-child(even){border-right:0}
 .p-steps h3{font-size:26px}.p-decisions{grid-template-columns:1fr;gap:24px}
 .p-range{margin-top:25px}.p-range figure{padding:10px}.p-closing{padding:30px 0}
}

/* A full-height image panel beside the front-page index. */


/* Full-width ruled index inspired by the reference's two-column project grid. */
@media(min-width:801px){
 #index{--rail-width:35vw;--index-rule:rgba(50,39,28,.28)}
 :is(#index,.about-front) .index-ui{margin:0 0 0 var(--rail-width);padding:0;min-height:100svh;background:var(--paper);border-left:1px solid var(--index-rule)}
 :is(#index,.about-front) .index-ui::before{content:"";position:absolute;top:76px;bottom:0;right:100%;width:clamp(64px,5vw,88px);background:var(--ink);pointer-events:none}
 :is(#index,.about-front) .masthead{grid-template-columns:1fr auto;align-items:center;gap:22px;min-height:76px;padding:20px 2.8vw;border-bottom:1px solid var(--index-rule)}
 :is(#index,.about-front) .masthead p{justify-self:start;font-size:10px;line-height:1.3}
 :is(#index,.about-front) .logo-tab{position:absolute;top:76px;right:100%;display:flex;align-items:center;justify-content:center;width:clamp(64px,5vw,88px);height:clamp(88px,7vw,116px);background:var(--ink);color:var(--paper);font-size:clamp(24px,2.1vw,34px);border:1px solid var(--ink);border-right:0;z-index:1;transition:background .25s var(--ease),color .25s var(--ease)}
 :is(#index,.about-front) .logo-tab>span{align-self:center;margin-top:-20px}
 :is(#index,.about-front) .logo-tab:hover{background:var(--accent);border-color:var(--accent)}
 :is(#index,.about-front) .logo-tab:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}
 :is(#index,.about-front) .about-link{display:flex;align-items:center;justify-content:center;min-width:90px;padding:9px 20px;border:1px solid var(--line);border-radius:50%;font-size:10px;text-transform:uppercase;transition:background .2s var(--ease),color .2s var(--ease)}
 :is(#index,.about-front) .about-link:hover{background:var(--ink);color:var(--paper)}
 :is(#index,.about-front) .about-link span{display:none}
 :is(#index,.about-front) .intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;flex:1;min-height:clamp(300px,43svh,580px);padding:40px 3vw;text-align:center}
 :is(#index,.about-front) .intro .eyebrow{font-size:9px;letter-spacing:.12em;color:var(--muted);margin-bottom:18px}
 :is(#index,.about-front) .intro h1{font-family:var(--sans);font-size:clamp(68px,7.1vw,136px);font-weight:400;line-height:.86;letter-spacing:-.075em;text-transform:uppercase;margin:0}
 :is(#index,.about-front) .name-line{display:block}
 :is(#index,.about-front) .name-dot{color:var(--ink)}
 :is(#index,.about-front) .intro-line{max-width:none;margin:0;font-size:12px;line-height:1.5}
 :is(#index,.about-front) .intro-line br{display:none}
 :is(#index,.about-front) .intro-line em{margin-left:.3em;font-family:var(--sans);font-style:normal;font-size:12px}
 :is(#index,.about-front) .work{margin-top:0;padding:0;background:transparent;border:0;box-shadow:none}
 :is(#index,.about-front) .work-heading{min-height:44px;padding:12px 2.8vw;border-top:1px solid var(--index-rule);border-bottom:1px solid var(--index-rule);gap:20px}
 :is(#index,.about-front) .work-heading .eyebrow{font-size:9px;letter-spacing:.05em;font-weight:400}
 :is(#index,.about-front) .projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(#index,.about-front) .project{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-width:0;min-height:clamp(96px,11.2svh,140px);padding:23px 2.8vw;border:0;border-bottom:1px solid var(--index-rule)}
 :is(#index,.about-front) .project:nth-child(odd){border-right:1px solid var(--index-rule)}
 :is(#index,.about-front) .project-number{display:none}
 :is(#index,.about-front) .project-name{font-family:var(--sans);font-weight:400;font-size:clamp(21px,2.1vw,38px);line-height:1.12;letter-spacing:-.055em;padding-right:12px}
 :is(#index,.about-front) .project-type{font-size:9px;letter-spacing:.025em;color:var(--muted)}
 :is(#index,.about-front) .project-arrow{position:absolute;top:12px;right:14px;font-size:14px;line-height:1;color:var(--muted)}
 :is(#index,.about-front) .project.is-active .project-name{transform:translateX(5px)}
 :is(#index,.about-front) .index-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:20px 2.8vw;min-height:65px;font-size:9px;line-height:1.5}
 :is(#index,.about-front) .index-footer a{border:0;padding:0}
 :is(#index,.about-front) .index-footer a span{margin-left:8px}
 :is(#index,.about-front) .preview>img,:is(#index,.about-front) .preview>.art{right:3vw;left:auto;top:50%;width:56vw;max-height:80svh;transform:translateY(-50%)}
 :is(#index,.about-front) .preview-poetschke>.art{width:min(56vw,105svh);max-height:none}
}
@media(min-width:801px) and (max-width:1100px){
 :is(#index,.about-front) .masthead{gap:14px}
 :is(#index,.about-front) .intro{min-height:320px}
 :is(#index,.about-front) .project{padding:24px 2.3vw;min-height:104px}
 :is(#index,.about-front) .project-name{font-size:clamp(20px,2.3vw,25px)}
 :is(#index,.about-front) .work-heading{gap:12px}
 :is(#index,.about-front) .hover-hint{max-width:130px;text-align:right;font-size:8px}
 :is(#index,.about-front) .index-footer{gap:10px 18px}
}
/* Supplied personal identity; preserve the original SVG letterforms. */
.home-wordmark svg{display:block;width:min(300px,65vw);height:auto;overflow:visible}
:is(#index,.about-front) .intro .home-wordmark{line-height:1;margin:0;text-transform:none}
.welcome-wordmark{display:block;width:clamp(130px,18vw,230px);color:var(--paper)}
.welcome-wordmark svg,.about-wordmark svg{display:block;width:100%;height:auto;overflow:visible}
.about-wordmark{width:min(660px,100%);color:var(--paper)}
.logo-tab svg,.about-spine svg{display:block;width:32px;height:auto;flex:none}
:is(#index,.about-front) .logo-tab{color:var(--paper)}
:is(#index,.about-front) .logo-tab svg{margin:20px auto 0;align-self:flex-start}
@media(min-width:801px){
 :is(#index,.about-front) .logo-tab{height:auto;bottom:0;align-items:flex-start}
 :is(#index,.about-front) .intro .home-wordmark svg{width:clamp(235px,23vw,360px)}
}
/* The name tab pulls left, exposing the About sheet behind it. */
#project-panel.about-mode{--tab-width:clamp(64px,5vw,88px);top:76px;height:calc(100svh - 76px);background:var(--ink);color:var(--paper);overflow:hidden;animation:none}
#project-panel.about-mode::backdrop{background:transparent}
.about-mode .about-panel{height:100%;min-height:0;overflow-y:auto;padding-left:var(--tab-width);overscroll-behavior:contain}
.about-spine{position:absolute;inset:0 auto 0 0;width:var(--tab-width);display:flex;align-items:flex-start;justify-content:center;padding:20px 0;background:var(--ink);color:var(--paper);border-right:1px solid #ffffff30;z-index:5}
.about-spine:hover{background:var(--accent)}
.about-spine:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}
.about-mode .about-wrap{padding:45px 6vw 70px}
.about-mode .about-wrap h1{margin:24px 0 48px}
.about-mode .about-copy{max-width:720px}
.about-mode .case-top{font-size:12px;min-height:65px}
@media(max-width:800px){
 :is(#index,.about-front) .logo-tab{display:flex;align-items:center;justify-content:center;background:var(--ink);width:52px;min-height:86px}
 :is(#index,.about-front) .logo-tab svg{width:25px;margin:12px auto}
 .home-wordmark svg{width:min(280px,65vw)}
 #project-panel.about-mode{--tab-width:52px;top:0;height:100svh}
 .about-mode .case-top{padding:16px 5vw}
 .about-mode .about-wrap{padding:32px 6vw 50px}
 .about-mode .about-copy p{font-size:16px}
 .about-spine svg{width:25px}
}

/* Two coordinated sheets: the index exits right as the About tab pulls left. */
#project-panel.about-mode{top:0;height:100svh;background:transparent}
.about-mode .about-panel{position:absolute;inset:76px 0 0;height:auto;background:var(--ink)}
.about-front{--rail-width:35vw;--index-rule:rgba(50,39,28,.28);position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:6}
.about-front .index-ui{pointer-events:none}
.about-front .index-ui::before{display:none!important}
body.about-active #index .index-ui{visibility:hidden}
@media(max-width:800px){.about-mode .about-panel{inset:0}.about-front .index-ui{background:var(--paper)}}

/* Welcome: the auto-advance can be paused and resumed (WCAG 2.2.1). */
.welcome-pause{flex:none;min-height:32px;padding:6px 14px;border:1px solid #c7b9a766;border-radius:999px;color:var(--paper-2);font-size:12px;letter-spacing:.02em;transition:background .2s var(--ease),color .2s var(--ease)}
.welcome-pause:hover{background:#eee7db;color:var(--ink)}
.welcome-pause:focus-visible{outline:2px solid #eee7db;outline-offset:3px}
.welcome.is-paused,.welcome.is-paused *,.welcome.is-paused *::before{animation-play-state:paused!important}

/* Hover previews live in the left column: one image, in one place, never over the list it explains. */
@media(min-width:801px) and (hover:hover){
 #index .preview-stage{position:fixed;inset:0 auto 0 0;width:calc(var(--rail-width) - clamp(64px,5vw,88px));z-index:1;background:transparent}
 #index .preview{display:block;transform:none;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility .45s;background:var(--paper)}
 #index .preview>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;transform:none;object-fit:cover;object-position:50% 30%;box-shadow:none}
 #index .preview>.art{position:absolute;top:0;left:50%;right:auto;width:calc(100svh * 2160 / 1540);height:100%;max-height:none;max-width:none;transform:translateX(-50%);box-shadow:none}
 #index .preview-label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:10px;padding:18px 20px;background:linear-gradient(transparent,rgba(40,35,30,.72));color:#fbf8f3;font-size:12px;letter-spacing:.02em}
 #index .preview-label b{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.02em}
}
.preview-label{display:none}
@media(min-width:801px) and (hover:hover){#index .preview-label{display:flex}}

/* ---- Critique round 2: frame, legibility, access ---- */
:root{--muted:#665b50}
.eyebrow{font-size:12px}
.case-top{font-size:12px;padding-top:6px;padding-bottom:6px}
.case-top a,.case-top .close{display:inline-flex;align-items:center;min-height:44px}
.welcome-header{order:0}.welcome-content{order:1}.welcome-footer{order:2}.welcome-timing{order:3}
.welcome-timing,.welcome-footer{font-size:12px}
@media(min-width:801px){
 /* The name steps back so all nine projects fit above the fold at 1280×720. */
 :is(#index,.about-front) .intro{min-height:clamp(200px,27svh,370px);padding:26px 3vw;gap:14px}
 :is(#index,.about-front) .intro .home-wordmark svg{width:clamp(190px,16vw,270px)}
 :is(#index,.about-front) .intro .eyebrow,:is(#index,.about-front) .work-heading .eyebrow{font-size:12px;margin-bottom:0}
 :is(#index,.about-front) .masthead p,:is(#index,.about-front) .about-link,:is(#index,.about-front) .index-footer{font-size:12px}
 :is(#index,.about-front) .project{min-height:clamp(72px,8.6svh,110px);padding:14px 2.8vw}
 :is(#index,.about-front) .project-type{font-size:12px}
 :is(#index,.about-front) .projects>[role=listitem]:last-child:nth-child(odd)>.project{grid-column:1/-1;border-right:0}
 /* Rail slides are links to their case, labelled like the hover preview. */

 /* About opens as a full sheet; no strip of the index shows through. */
 .about-mode .about-panel{inset:0}
}
.about-panel a:focus-visible,.about-panel button:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.about-disciplines{font-size:13px}
.about-note{font-size:16px;line-height:1.6;color:var(--paper);max-width:60ch}
@media(min-width:801px) and (max-height:780px){
 :is(#index,.about-front) .intro{min-height:150px;padding:18px 3vw;gap:10px}
 :is(#index,.about-front) .intro .home-wordmark svg{width:clamp(170px,13vw,220px)}
 :is(#index,.about-front) .project{min-height:62px;padding:11px 2.8vw}
}

/* ---- Critique round 3: one line, persistent contact, About facts, no rail ---- */
.masthead-links{display:flex;align-items:center;gap:10px;justify-self:end}
.contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:12px}
.contact-link span{margin-left:8px}
.contact-link:hover{background:var(--ink);color:var(--paper)}
.about-link,.index-footer a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:801px){.welcome h1{font-size:clamp(60px,8.6vw,146px)}}
.about-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4vw;align-items:start}
.about-side{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.about-tgp{font-size:16px;line-height:1.6;color:var(--stone);max-width:36ch}
.about-tgp b{font-weight:500;color:var(--paper);letter-spacing:.06em}
.about-body .about-note{margin:0}
.about-body .contact{align-self:flex-start;margin:0}
.about-body .about-copy{max-width:640px;margin:0}
@media(max-width:800px){.about-body{grid-template-columns:1fr;gap:28px}.masthead-links{gap:6px}.contact-link{padding:0 14px}}
/* The left column is the hover-preview frame; at rest it shows the monogram and what it stands for. */
@media(min-width:801px) and (hover:hover){
 #index .preview-idle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:0 32px 34px;background:var(--paper);color:var(--ink)}
 #index .preview-idle-mark svg{display:block;width:clamp(72px,7vw,120px);height:auto}
 #index .preview-idle p{font-size:14px;line-height:1.5;color:var(--muted)}
 #index .preview-idle b{color:var(--ink);font-weight:500;letter-spacing:.06em;margin-right:6px}
 #index .preview{z-index:1}
}
.preview-idle{display:none}
@media(min-width:801px) and (hover:hover){#index .preview-idle{display:flex}}

/* ---- Critique round 4 ---- */
.welcome-word{display:inline-block;white-space:nowrap}
@media(max-width:800px){.welcome h1{font-size:clamp(46px,12.4vw,96px)}}
/* Hover previews: the whole image on the project's own ground; the ground shows while the image loads. */
@media(min-width:801px) and (hover:hover){
 #index .preview{background:var(--preview-bg,var(--paper))}
 #index .preview>img{object-fit:contain;object-position:50% 45%;padding:clamp(20px,2.4vw,40px) clamp(16px,2vw,32px) 84px}
 #index .preview>.art{top:45%;left:0;width:100%;height:auto;transform:translateY(-50%)}
 #index .preview-global-kuechen .preview-label{background:linear-gradient(transparent,rgba(12,40,70,.72))}
 /* The black tab strip runs to the top edge: no notch above the logo tab. */
 :is(#index,.about-front) .index-ui::before{top:0}
 /* About and Email share one pill shape. */
 :is(#index,.about-front) .about-link{border-radius:999px;min-height:44px}
}
@media(max-width:800px){
 :is(#index,.about-front) .masthead p{display:block;grid-column:1/-1;margin-top:12px;font-size:12px}
}
@media(max-width:800px){
 :is(#index,.about-front) .masthead p{justify-self:start;text-align:left}
 :is(#index,.about-front) .about-link{border:1px solid var(--line);border-radius:999px;padding:0 16px;min-height:44px}
}

/* ---- Critique round 5 ---- */
/* Project rows are list items; the wrappers step out of the grid so rows keep their layout. */
.projects>[role=listitem]{display:contents}
@media(min-width:801px){
 :is(#index,.about-front) .projects>[role=listitem]:nth-child(even)>.project{border-right:0}
 :is(#index,.about-front) .about-link{text-transform:none}
}
@media(max-width:800px){
 .projects>[role=listitem]:not(:last-child)>.project{border-bottom:0}
 /* One-line masthead on phones: tab, role, links. */
 :is(#index,.about-front) .masthead{grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
 :is(#index,.about-front) .masthead p{grid-column:auto;margin:0;font-size:12px;line-height:1.3}
 :is(#index,.about-front) .logo-tab{min-height:64px}
}
.welcome-count{margin-left:10px;font-size:12px}
.about-side .copy-email{align-self:flex-start;border-color:#ffffff40;color:var(--paper)}
.about-side .copy-email:hover{background:var(--paper);color:var(--ink)}


/* ---- Redesign pass: work at rest, one voice across breakpoints, calmer greys, one curve ---- */
:root{--paper-hi:#f4ede0;--paper-2:#e5dccf;--stone:#d7ccbc;--stone-2:#c3b6a5;--ease:cubic-bezier(.2,.7,.2,1)}
/* Headlines break in balanced lines; paragraphs avoid one-word last lines. */
h1,h2,h3,.case-one-line,.project-name,.next-project>span:last-child{text-wrap:balance}
p,figcaption,li{text-wrap:pretty}
/* The preview column is never empty: an idle crossfade through the project heroes. */
@media(min-width:801px) and (hover:hover){
 #index .preview.is-idle{opacity:1;visibility:visible}
 #index .preview.is-active{z-index:2}
 #index .preview-idle{justify-content:flex-end}
}
/* One typographic voice on every screen: project names and the second line of the tagline in the serif. */
@media(min-width:801px){
 :is(#index,.about-front) .project-name{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,40px);letter-spacing:-.03em;line-height:1.08}
 :is(#index,.about-front) .intro-line{font-size:13px}
 :is(#index,.about-front) .intro-line em{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:-.01em}
}
/* Pressed states: rows, pills and buttons give way a little under the pointer. */
.project:active .project-name{transform:translateX(5px) scale(.985)}
.contact-link,.about-link,.copy-email,.welcome-pause,.enter-portfolio{transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.contact-link:active,.about-link:active,.copy-email:active,.welcome-pause:active,.enter-portfolio:active{transform:scale(.97)}
/* Status line for links that don't match a project. */
.route-notice{margin-left:auto;font-size:12px;color:var(--accent)}
.route-notice[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.project:active .project-name,.contact-link:active,.about-link:active,.copy-email:active,.welcome-pause:active,.enter-portfolio:active{transform:none}}

.showcase-case{--show-bg:#f5f2ec;--show-ink:#28231e;--show-accent:#735e4a;background:var(--show-bg);color:var(--show-ink)}
.showcase-case.case-galeria{--show-bg:#faf1ed;--show-accent:#99523e}
.showcase-case.case-2lady{--show-bg:#f5f3ed;--show-accent:#555747}
.showcase-case.case-mey-edlich{--show-bg:#f6f5f5;--show-accent:#7b4038}
.showcase-case.case-poetschke{--show-bg:#f5f0e6;--show-accent:#34513b}
.showcase-case.case-quickfix{--show-bg:#e7eff2;--show-ink:#0a2b4c;--show-accent:#255975}
.showcase-case.case-wollenhaupt{--show-bg:#faf6ed;--show-accent:#745729}
.showcase-case.case-global-kuechen{--show-bg:#1c70b2;--show-ink:#fbf8f3;--show-accent:#f5d06f;--line:rgba(251,248,243,.32)}
.showcase-case.case-hagen-grote{--show-bg:#efe8dc;--show-ink:#1f2430;--show-accent:#00305f;--line:rgba(0,48,95,.22)}
.showcase-case.case-baby-walz{--show-bg:#0b1429;--show-ink:#f4efe6;--show-accent:#f5b558;--line:rgba(255,255,255,.08)}
.showcase-case .case-top{background:var(--show-bg)}
.showcase-wrap{max-width:1560px;margin:auto;padding:0 4vw}
.showcase-opening{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center;padding:48px 0 60px}
.showcase-opening h1{font-family:var(--serif);font-size:clamp(50px,6.2vw,96px);font-weight:400;line-height:1.02;letter-spacing:-.045em;margin:26px 0 38px}
.showcase-opening h1 em{font-weight:400;color:var(--show-accent)}
.showcase-opening>.showcase-image img{max-height:78svh;object-fit:contain}
.showcase-image{min-width:0;width:100%;margin:0}
.showcase-image img,.showcase-image svg{display:block;width:100%;height:auto}
.showcase-image svg{overflow:hidden}
.showcase-image figcaption{font-size:11px;line-height:1.6;padding-top:12px;color:var(--show-accent)}
.showcase-image figcaption:empty{display:none}
.showcase-stage{padding:0 0 62px}
.showcase-stage>header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:22px 0 28px}
.showcase-stage>header h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.showcase-stage>header span{font-size:11px;color:var(--show-accent)}
.showcase-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.showcase-gallery>.showcase-image:only-child{grid-column:1/-1}
.showcase-gallery.four-up{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.showcase-gallery.direction-gallery>.showcase-image:first-child:nth-last-child(3){grid-column:1/-1}
.showcase-application{border:0;padding:0 0 48px}
.showcase-application:last-child{padding-bottom:0}
.showcase-application h3{font-family:var(--serif);font-size:30px;font-weight:400;margin:0 0 22px}
.showcase-case .next-project{padding-top:32px}
.showcase-case .next-project>.eyebrow{color:var(--show-accent)}
.case-mey-edlich.showcase-case .mood-gallery img{height:58vw;max-height:760px;object-fit:contain;background:#eeeae3}
.case-mey-edlich.showcase-case .showcase-application:first-of-type .showcase-gallery{grid-template-columns:1fr .32fr}
.case-mey-edlich.showcase-case .showcase-application:last-child .showcase-image{max-width:650px;margin:auto}
.case-poetschke.showcase-case .showcase-application:nth-of-type(2) .showcase-image{max-width:430px;margin:auto}
.case-poetschke.showcase-case .showcase-opening .art{background:#e6dfcf}
.case-wollenhaupt.showcase-case .mood-gallery img{aspect-ratio:1;object-fit:cover}
@media(max-width:800px){
 .showcase-wrap{padding:0 5vw}.showcase-opening{grid-template-columns:1fr;gap:28px;padding:32px 0 40px}
 .showcase-opening h1{font-size:clamp(46px,10vw,76px);margin:22px 0 28px}
 .showcase-opening>.showcase-image img{max-height:none}
 .showcase-stage{padding-bottom:40px}.showcase-stage>header{align-items:flex-start;padding:20px 0;gap:16px}
 .showcase-stage>header span{max-width:120px;text-align:right;font-size:10px}
 .showcase-gallery{grid-template-columns:1fr;gap:24px}.showcase-gallery.four-up{grid-template-columns:1fr 1fr;gap:22px 14px}
 .showcase-application{padding-bottom:34px}.showcase-application h3{font-size:27px}
 .case-mey-edlich.showcase-case .showcase-application:first-of-type .showcase-gallery{grid-template-columns:1fr}
 .case-mey-edlich.showcase-case .showcase-application:first-of-type .showcase-image:last-child{max-width:340px;margin:auto}
 .case-mey-edlich.showcase-case .mood-gallery{grid-template-columns:1fr 1fr;gap:16px}
 .case-mey-edlich.showcase-case .mood-gallery img{height:65vw}
}

@media(min-width:801px){
 #index::before{content:"";position:absolute;inset:0 0 0 var(--rail-width);background:var(--ink);z-index:0;pointer-events:none}
 #index .index-ui{border-top-left-radius:0}
 #index .index-ui::before,#index .logo-tab{border-top-left-radius:0}
}
/* Brand context stays concise; the work carries the story. */
.case-context{display:grid;grid-template-columns:1.5fr 1fr;gap:8vw;padding:36px 0 58px;border-top:1px solid var(--line);margin-bottom:18px}
.case-story>p:not(.eyebrow){max-width:670px;font-size:17px;line-height:1.65;margin:15px 0 0}
.case-role>p:not(.eyebrow){font-size:14px;line-height:1.9;max-width:390px;margin:15px 0 24px}
.case-status{display:inline-block;border-top:1px solid var(--line);padding-top:12px;font-size:11px;letter-spacing:.04em;color:var(--show-accent)}
.showcase-opening{grid-template-columns:1fr;gap:32px;padding:40px 0 38px}
.showcase-opening>div{display:grid;grid-template-columns:1.5fr 1fr;gap:0 8vw;align-items:end}
.showcase-opening>div>.eyebrow{grid-column:1/-1}
.showcase-opening h1{font-size:clamp(54px,7vw,112px);margin:24px 0 0}
.case-one-line{font-size:19px;line-height:1.6;max-width:350px;margin:0 0 6px}
.showcase-opening>.showcase-image img{width:100%;max-height:85svh;object-fit:contain}
.showcase-stage{padding:30px 0 50px}
.showcase-stage>header{display:block;padding:24px 0 32px}
.showcase-stage>header>.eyebrow{color:var(--show-accent);margin:0 0 20px}
.showcase-stage>header h2{font:400 clamp(32px,4.6vw,65px)/1.08 var(--serif);letter-spacing:-.035em;text-transform:none;max-width:920px;margin:0}
.case-2lady .identity-direction .showcase-gallery{grid-template-columns:1.35fr 1fr;align-items:center}
.case-poetschke .showcase-application:nth-of-type(2) .showcase-image{max-width:none}
.case-poetschke .showcase-application:nth-of-type(2) .showcase-gallery{grid-template-columns:1.5fr .75fr;align-items:center}
.case-poetschke .showcase-application:nth-of-type(2) .showcase-image:last-child{width:90%;margin:auto}
.mey-catalogues{display:grid;grid-template-columns:1fr 1fr;gap:38px 28px;align-items:start}
.mey-catalogues .mey-figure img{background:#efede8;object-fit:contain}
.mey-more-catalogues{margin-top:35px;border-top:1px solid var(--line)}
.mey-more-catalogues summary{cursor:pointer;font-size:14px;padding:20px 0;width:fit-content}
.mey-more-catalogues summary span{margin-left:20px}
.mey-more-catalogues[open] summary{margin-bottom:20px}
@media(max-width:800px){
 .case-context{grid-template-columns:1fr;gap:28px;padding:28px 0 35px}
 .case-story>p:not(.eyebrow){font-size:16px}.case-role>p:not(.eyebrow){max-width:none;margin-bottom:16px}
 .showcase-opening>div{display:block}.showcase-opening h1{font-size:clamp(48px,10vw,78px);margin:22px 0}
 .case-one-line{font-size:17px;max-width:440px}.showcase-stage{padding:16px 0 28px}
 .showcase-stage>header h2{font-size:clamp(31px,7vw,48px)}
 .showcase-opening>.showcase-image img{max-height:none}
 .case-2lady .identity-direction .showcase-gallery{grid-template-columns:1fr}
 .case-poetschke .showcase-application:nth-of-type(2) .showcase-gallery{grid-template-columns:1fr}
 .case-poetschke .showcase-application:nth-of-type(2) .showcase-image:last-child{max-width:400px}
 .mey-catalogues{grid-template-columns:1fr;gap:26px}
}

/* Global Küchen — loud and tight, like posters on a wall: blue page, Poppins, images butted together. */
.case-global-kuechen .case-top{border-color:var(--line)}
.case-global-kuechen .case-top>span,.case-global-kuechen .project-note{color:rgba(251,248,243,.72)}
.case-global-kuechen .showcase-opening h1{font-family:'Poppins',var(--sans);font-weight:800;letter-spacing:-.045em;line-height:.98}
.case-global-kuechen .showcase-opening h1 em{font-style:normal;font-weight:800}
.case-global-kuechen .showcase-stage>header h2{font-family:'Poppins',var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em}
.case-global-kuechen .showcase-application h3{font-family:'Poppins',var(--sans);font-weight:800;font-size:28px;letter-spacing:-.03em}
.case-global-kuechen .showcase-gallery{gap:6px}
.case-global-kuechen .showcase-gallery.four-up{gap:6px}
.case-global-kuechen .showcase-image figcaption{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:10px;padding-bottom:14px}
.case-global-kuechen .next-project>span:last-child{font-family:'Poppins',var(--sans);font-weight:800;letter-spacing:-.045em}
.case-global-kuechen a:focus-visible,.case-global-kuechen button:focus-visible{outline-color:#f5d06f}

/* Hagen Grote — quiet and one column, like an annotated catalogue: every caption is a note in the margin. */
.case-hagen-grote .showcase-opening h1{color:#00305f}
.case-hagen-grote .showcase-gallery{grid-template-columns:1fr;gap:56px}
.case-hagen-grote .showcase-stage .showcase-image,.case-hagen-grote .showcase-application .showcase-image{display:flex;align-items:flex-end;gap:28px}
.case-hagen-grote .showcase-stage .showcase-image img{flex:0 0 auto;width:min(calc(100% - 248px),calc(84vh * var(--ar,1.5)));height:auto}
.case-hagen-grote .showcase-stage .showcase-image figcaption{flex:0 0 220px;font-family:'Nothing You Could Do',cursive;font-size:19px;line-height:1.35;letter-spacing:0;color:#00305f;padding:0 0 18px;transform:rotate(-2deg);transform-origin:left bottom}
.case-hagen-grote .showcase-stage .showcase-image figcaption::before{content:"\2190\00a0";font-family:var(--sans);font-size:17px}
.case-hagen-grote .showcase-application h3{color:#00305f}
@media(max-width:800px){
 .case-hagen-grote .showcase-stage .showcase-image,.case-hagen-grote .showcase-application .showcase-image{display:block}
 .case-hagen-grote .showcase-stage .showcase-image img{max-width:100%;width:100%;max-height:none}
 .case-hagen-grote .showcase-stage .showcase-image figcaption{padding:12px 0 0;font-size:17px}
 .case-hagen-grote .showcase-stage .showcase-image figcaption::before{content:"\2191\00a0"}
}

/* Case openers: the brand leads the h1, and each case enters through its own idea.
   Mobile keeps one calm column; the variants below are layout, not decoration. */
.opening-brand{display:block;font-size:.4em;line-height:1.1;letter-spacing:-.02em;margin-bottom:.3em}
.opening-line{display:block}
.showcase-opening h1{text-wrap:balance}
.showcase-opening>.opening-copy>.case-one-line{align-self:end}
.opening-weeks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.opening-weeks li{padding:14px 12px 16px;border-left:1px solid var(--line)}
.opening-weeks li:nth-child(3n+1){border-left:0}
.opening-weeks li:nth-child(n+4){border-top:1px solid var(--line)}
.opening-weeks span,.opening-weeks small{display:block;font-size:12px;letter-spacing:.04em;color:rgba(251,248,243,.86)}
.opening-weeks b{display:block;font-family:'Poppins',var(--sans);font-weight:800;font-size:22px;letter-spacing:-.03em;margin:4px 0 2px}
.opening-weeks .is-deadline{background:#f5d06f;color:#15253a}
.opening-weeks .is-deadline span,.opening-weeks .is-deadline small{color:#15253a}
.opening-hagen-grote>.showcase-image{order:-1}
.opening-hagen-grote .case-one-line{font-family:'Nothing You Could Do',cursive;font-size:22px;line-height:1.35;color:#00305f}
.opening-quickfix>.showcase-image,.opening-poetschke>.showcase-image{order:-1}
@media(min-width:801px){
 /* 2lady: one name beside its world. */
 .opening-2lady{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:5vw}
 .opening-2lady>.opening-copy{grid-template-columns:1fr;gap:30px}
 .opening-2lady>.showcase-image img{max-height:80svh}
 /* Pötschke and QuickFix: the object first, the words after. */
 .opening-quickfix>.showcase-image{margin:0 -4vw;width:calc(100% + 8vw);max-width:none}
 .opening-quickfix>.showcase-image img{max-height:none;aspect-ratio:2/1;object-fit:cover;object-position:50% 55%}
 .opening-quickfix>.opening-copy,.opening-poetschke>.opening-copy{padding-top:12px}
 .opening-poetschke>.showcase-image{max-width:calc(74svh * 2160 / 1540);justify-self:center}
 /* Hagen Grote: the letter first, the line beside it, the note pointing back at the letter. */
 .opening-hagen-grote{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:4vw}
 .opening-hagen-grote>.opening-copy{grid-template-columns:1fr;gap:40px}
 .opening-hagen-grote>.showcase-image img{max-height:88svh;object-fit:contain}
 .opening-hagen-grote .case-one-line{font-size:26px;max-width:360px;transform:rotate(-2deg);transform-origin:left center}
 .opening-hagen-grote .case-one-line::before{content:"\2190\00a0";font-family:var(--sans);font-size:22px}
}
@media(max-width:800px){
 .opening-quickfix>.showcase-image{margin:0 -5vw;width:calc(100% + 10vw)}
 .opening-weeks b{font-size:19px}
}
/* The h1 takes focus on open so screen readers start at the title; it is not a control, so it draws no ring. */
#project-panel h1[tabindex="-1"]:focus{outline:none}

/* ---- Critique round 2: stage headlines, rhythm, legibility, zoom ---- */
.stage-head{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:0 3vw;align-items:baseline}
.stage-label{margin:0;font-size:12px;line-height:1.5;letter-spacing:.02em;font-weight:500;color:var(--show-accent)}
.showcase-stage>.stage-head h2{font-size:clamp(30px,3.8vw,56px)}
.showcase-application{padding-top:40px}
.showcase-application:first-child{padding-top:4px}
.showcase-application h3{margin:0 0 18px}
.showcase-image figcaption{font-size:12px}
.case-status{font-size:12px}
.project-note{font-size:13px}
.project-note p{max-width:68ch}
/* Global Küchen: small text in white (4.9:1 on blue); butter stays for large type and the deadline cell. */
.showcase-case.case-global-kuechen{--show-accent:#fbf8f3}
.case-global-kuechen .showcase-opening h1 em{color:#f5d06f}
.case-global-kuechen .showcase-image figcaption{font-size:12px;letter-spacing:.01em;text-transform:none}
.case-global-kuechen .showcase-stage>header h2{font-family:'Poppins',var(--sans);font-weight:800;font-size:clamp(28px,3.4vw,50px);letter-spacing:-.03em;text-transform:none}
/* Hagen Grote: a calmer title; margin notes stay readable on phones. */
.showcase-opening.opening-hagen-grote h1{font-size:clamp(46px,5vw,80px)}
@media(max-width:800px){
 .stage-head{grid-template-columns:1fr}
 .stage-label{margin-bottom:10px}
 .case-hagen-grote .showcase-stage .showcase-image figcaption{font-size:20px;line-height:1.3}
}
/* Every board can be opened full size; on phones it pans at 1500px. */
.showcase-stage .showcase-image img[role=button]{cursor:zoom-in}
.showcase-stage .showcase-image img[role=button]:focus-visible{outline:2px solid var(--show-accent);outline-offset:4px}
.zoom{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(24,20,17,.96);color:#fbf8f3;overflow:hidden}
.zoom::backdrop{background:rgba(24,20,17,.7)}
.zoom-close{position:absolute;top:6px;right:3vw;min-height:44px;padding:0 14px;color:#fbf8f3;font-size:14px}
.zoom-close:focus-visible{outline:2px solid #fbf8f3;outline-offset:2px}
.film-toggle{margin-top:12px;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--show-ink)}
.film-toggle:hover{background:var(--show-ink);color:var(--show-bg)}

/* ---- Critique round 3 ---- */
/* Mey uses the same label + headline as the other cases. */
.mey-section>.stage-head{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:0 3vw;align-items:baseline}
.mey-section>.stage-head .stage-label{color:#7b4038}
@media(max-width:800px){.mey-section>.stage-head{grid-template-columns:1fr}}
.showcase-stage>header h2,.mey-section>header h2{text-wrap:balance}
/* Touch screens have no zoom cursor, so boards say they can be enlarged. */
@media(hover:none){
 [data-zoom]{position:relative}
 [data-zoom]::after{content:"Tap to enlarge";position:absolute;top:10px;right:10px;padding:5px 10px;border-radius:999px;background:rgba(24,20,17,.74);color:#fbf8f3;font-size:12px;line-height:1.2;pointer-events:none}
}
.showcase-stage>header.stage-head{display:grid}
@media(max-width:800px){.showcase-stage>header.stage-head{display:block}}

/* ---- Critique round 4 ---- */
/* Zoom: fitted first; a tap or Enter switches to full size at the tapped point. */
.zoom-stage{position:absolute;inset:56px 0 0;overflow:auto;overscroll-behavior:contain;display:grid;place-items:center;padding:0 3vw 3vw}
.zoom-stage:focus-visible{outline:2px solid #fbf8f3;outline-offset:-4px}
.zoom-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 80px);margin:auto;cursor:zoom-in}
.zoom.is-actual .zoom-stage{place-items:start}
.zoom.is-actual .zoom-stage img{max-width:none;max-height:none;cursor:zoom-out}
.zoom.is-loading .zoom-stage img{filter:saturate(.9) brightness(.96)}
.zoom-stage img{transition:filter .3s}
/* edding: the vertical film sits on the headline column, not alone in a wide row. */
@media(min-width:801px){.film-stage>.showcase-gallery{margin-left:calc(220px + 3vw)}}
/* Measures: notes and captions stay readable. */
.project-note p{max-width:62ch}
.showcase-image figcaption{max-width:72ch}

/* ---- Critique round 5: work-first openings ----
   The first screen shows the work; the brand and line sit beside or under it.
   Heights are set from the viewport so a 1280×720 laptop sees the whole key visual. */
@media(min-width:801px){
 .showcase-opening.opening-galeria,.showcase-opening.opening-global-kuechen{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 6vw;padding:20px 0 40px}
 .opening-galeria>.showcase-image,.opening-global-kuechen>.showcase-image{order:-1;grid-row:1 / span 2;width:auto;justify-self:start}
 .opening-galeria>.showcase-image img,.opening-global-kuechen>.showcase-image img{width:auto;max-width:48vw;max-height:calc(100svh - 110px)}
 .opening-galeria>.opening-copy,.opening-global-kuechen>.opening-copy{grid-template-columns:1fr;gap:22px;align-self:end}
 .opening-galeria .case-one-line,.opening-global-kuechen .case-one-line{max-width:380px;margin:0}
 /* GALERIA: the Glow Ring sits behind the key visual only. */
 .opening-galeria>.showcase-image{position:relative;isolation:isolate}
 .opening-galeria>.showcase-image::before{content:"";position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(153,82,62,.3);background:radial-gradient(circle,rgba(240,205,188,.85) 0 36%,rgba(250,241,237,0) 70%);z-index:-1;pointer-events:none}
 .opening-galeria>.opening-copy{align-self:center}
 .showcase-opening.opening-galeria h1{font-size:clamp(48px,min(6.4vw,11svh),104px)}
 /* Global Küchen: the billboard first; the line and the week strip beside it. */
 .opening-global-kuechen>.opening-weeks{align-self:start}
 .showcase-opening.opening-global-kuechen h1{font-size:clamp(56px,min(8vw,14svh),150px);letter-spacing:-.04em}
 /* Wollenhaupt: a ruled specimen card; the range fills the top field. */
 .showcase-opening.opening-wollenhaupt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);margin:20px 0 38px;padding:0}
 .opening-wollenhaupt>.showcase-image{order:-1;grid-column:1 / -1;border-bottom:1px solid var(--line);padding:2vw 3vw;display:grid;place-items:center}
 .opening-wollenhaupt>.showcase-image img{width:auto;max-width:100%;max-height:calc(100svh - 290px)}
 .opening-wollenhaupt>.opening-copy{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;padding:22px 3vw 26px;gap:0 3vw}
 .opening-wollenhaupt h1{margin:0;font-size:clamp(44px,min(5.4vw,10svh),96px)}
 /* edding: the specimen trays first, the challenge line under them. */
 .opening-edding>.showcase-image{order:-1}
 .opening-edding>.showcase-image img{width:auto;max-width:100%;max-height:calc(100svh - 230px);margin:0 auto}
 .showcase-opening.opening-edding{padding-top:20px;gap:20px}
 .showcase-opening.opening-edding h1{font-size:clamp(44px,min(5.6vw,10svh),104px);letter-spacing:-.035em}
}
@media(max-width:800px){
 .opening-galeria>.showcase-image,.opening-global-kuechen>.showcase-image,.opening-wollenhaupt>.showcase-image,.opening-edding>.showcase-image{order:-1}
}
/* Case navigation and ending */
.case-step{display:flex;align-items:center;gap:6px}
.case-step a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;font-size:16px}
.case-step a:hover{color:var(--show-accent)}
.case-hire{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:0 0 64px;font-size:15px;line-height:1.6}
.case-hire a{border-bottom:1px solid currentColor}
.copy-email{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.copy-email:hover{background:var(--show-ink,var(--ink));color:var(--show-bg,var(--paper))}
/* Zoom bar: previous / count / next */
.zoom-bar{position:absolute;top:6px;left:3vw;display:flex;align-items:center;gap:6px;color:#fbf8f3}
.zoom-bar button{min-width:44px;min-height:44px;font-size:18px;color:#fbf8f3}
.zoom-count{font-size:13px;min-width:56px;text-align:center}
.zoom.is-single .zoom-bar{display:none}
.zoom.is-loading::after{content:"Loading full size…";position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#fbf8f3;color:#181411;font-size:12px}
/* Touch hint: small, in the corner */
@media(hover:none){[data-zoom]::after{content:"Enlarge";top:auto;bottom:8px;right:8px;padding:3px 8px;font-size:11px}}

/* baby-walz — night ground, one lamp glow, one advice glow. Every image sits in a double bezel; stages are named by the minute. */
.case-baby-walz{--bw-ease:cubic-bezier(.32,.72,0,1);--bw-lamp:#f5b558;--bw-lamp-soft:#fce6bf;--bw-advice:#8fc6ec;--bw-shell:rgba(255,255,255,.035);--bw-hair:rgba(255,255,255,.08);
  position:relative;isolation:isolate;display:flow-root;min-height:100svh;font-family:'Geist',var(--sans)}
.case-baby-walz::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46vw 46vw at 8% 6%,rgba(245,181,88,.13),transparent 62%),radial-gradient(52vw 52vw at 96% 94%,rgba(143,198,236,.10),transparent 62%)}
.case-baby-walz::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.case-baby-walz>.showcase-wrap{position:relative;z-index:2;max-width:1440px;padding:0 5vw}

/* Top bar: the site-wide bar, tinted for the night ground. */
.case-baby-walz .case-top{border-color:var(--bw-hair)}
.case-baby-walz .case-top>span,.case-baby-walz .case-step>span{color:rgba(252,230,191,.7)}

/* Opening: editorial split, type left, the 20:00 key visual right. */
.case-baby-walz .showcase-opening{padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,96px)}
.case-baby-walz .showcase-opening h1{font-family:'Geist',var(--sans);font-weight:600;letter-spacing:-.055em;line-height:.92;margin:0 0 28px}
.case-baby-walz .showcase-opening h1 em{font-style:normal;font-weight:200;color:var(--bw-lamp)}
.case-baby-walz .opening-brand{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:26px;padding:6px 12px;border-radius:999px;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--bw-lamp-soft);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--bw-hair)}
.case-baby-walz .opening-brand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bw-lamp);box-shadow:0 0 12px var(--bw-lamp)}
.case-baby-walz .opening-line{display:block}
.case-baby-walz .case-one-line{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:30ch;color:rgba(252,230,191,.82)}
.case-baby-walz .opening-clock{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;border:0}
.case-baby-walz .opening-clock li{display:flex;align-items:baseline;gap:10px;padding:9px 16px 9px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--bw-hair)}
.case-baby-walz .opening-clock b{font-family:'Geist',var(--sans);font-weight:300;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--bw-lamp)}
.case-baby-walz .opening-clock span{font-size:11px;letter-spacing:.02em;color:rgba(252,230,191,.66);margin:0}
.case-baby-walz .opening-clock .is-close b{color:var(--bw-lamp-soft)}
.case-baby-walz .opening-clock .is-night b{color:var(--bw-advice)}

/* The double bezel: a glass tray (outer shell) holding the image plate (inner core). */
.case-baby-walz .showcase-image{padding:6px;border-radius:28px;background:var(--bw-shell);
  box-shadow:inset 0 0 0 1px var(--bw-hair),inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -48px rgba(0,0,0,.75);
  transition:transform .9s var(--bw-ease)}
.case-baby-walz .showcase-image img{border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.case-baby-walz .showcase-image figcaption{padding:12px 14px 8px;font-size:12px;line-height:1.5;letter-spacing:.01em;color:rgba(252,230,191,.74)}
.case-baby-walz .bw-cell:hover .showcase-image,.case-baby-walz .bw-phone:hover .showcase-image{transform:translateY(-6px)}
.case-baby-walz .opening-baby-walz>.showcase-image img{max-height:calc(100svh - 190px);width:auto;margin:auto}

/* Stages */
.case-baby-walz .bw-stage{padding:clamp(96px,11vw,168px) 0 0;border:0}
.case-baby-walz .bw-head{display:grid;gap:22px;max-width:980px;margin-bottom:clamp(40px,5vw,72px);padding-top:0;border:0}
.case-baby-walz .bw-stage>header{border:0}
.case-baby-walz .bw-row .bw-cell{grid-column:auto}
.case-baby-walz .bw-pill{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:6px 14px 6px 12px;border-radius:999px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--bw-lamp);
  background:rgba(245,181,88,.08);box-shadow:inset 0 0 0 1px rgba(245,181,88,.24)}
.case-baby-walz .bw-pill i{width:7px;height:7px;border-radius:50%;background:var(--bw-lamp);box-shadow:0 0 14px var(--bw-lamp)}
.case-baby-walz .bw-pill.is-night{color:var(--bw-advice);background:rgba(143,198,236,.08);box-shadow:inset 0 0 0 1px rgba(143,198,236,.26)}
.case-baby-walz .bw-pill.is-night i{background:var(--bw-advice);box-shadow:0 0 14px var(--bw-advice)}
.case-baby-walz .bw-head h2{font-family:'Geist',var(--sans);font-weight:600;font-size:clamp(38px,5.2vw,80px);line-height:.98;letter-spacing:-.05em;text-transform:none;max-width:15ch;color:#f6f1e8}
.case-baby-walz .bw-lede{max-width:54ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(252,230,191,.72)}

/* Asymmetric bento */
.case-baby-walz .bw-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:start}
.case-baby-walz .bw-bento+.bw-bento{margin-top:clamp(12px,1.4vw,20px)}
.case-baby-walz .span-12{grid-column:span 12}.case-baby-walz .span-8{grid-column:span 8}.case-baby-walz .span-6{grid-column:span 6}.case-baby-walz .span-4{grid-column:span 4}
.case-baby-walz .bw-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-baby-walz .bw-kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
/* On the key visuals the caption floats on the image as a small pill, so large and small cells keep one height. */
.case-baby-walz .bw-kv .showcase-image{position:relative}
.case-baby-walz .bw-kv .showcase-image figcaption{position:absolute;left:18px;bottom:18px;max-width:calc(100% - 36px);padding:7px 12px;border-radius:999px;
  background:rgba(8,13,30,.78);box-shadow:inset 0 0 0 1px var(--bw-hair);font-size:11px;line-height:1.3;color:var(--bw-lamp-soft)}

/* Z-axis cascade: three phones laid on top of each other like cards on a bed. */
.case-baby-walz .bw-cascade{display:flex;justify-content:center;align-items:flex-start;margin-top:clamp(56px,7vw,110px);padding-bottom:60px}
.case-baby-walz .bw-phone{width:min(320px,27vw);position:relative}
.case-baby-walz .bw-phone+.bw-phone{margin-left:-3.2vw}
.case-baby-walz .bw-phone .showcase-image{border-radius:46px;padding:7px}
.case-baby-walz .bw-phone .showcase-image img{border-radius:39px}
.case-baby-walz .bw-phone-0 .showcase-image{transform:rotate(-4deg) translateY(36px)}
.case-baby-walz .bw-phone-1{z-index:2}
.case-baby-walz .bw-phone-1 .showcase-image{transform:rotate(1.5deg)}
.case-baby-walz .bw-phone-2 .showcase-image{transform:rotate(4.5deg) translateY(52px)}
.case-baby-walz .bw-phone-0:hover .showcase-image{transform:rotate(-4deg) translateY(28px)}
.case-baby-walz .bw-phone-1:hover .showcase-image{transform:rotate(1.5deg) translateY(-8px)}
.case-baby-walz .bw-phone-2:hover .showcase-image{transform:rotate(4.5deg) translateY(44px)}

/* 03:12: editorial split, image left, one sentence right. */
.case-baby-walz .bw-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
.case-baby-walz .bw-quote{margin:0}
.case-baby-walz .bw-quote p{font-family:'Geist',var(--sans);font-weight:300;font-size:clamp(26px,2.9vw,46px);line-height:1.2;letter-spacing:-.03em;color:var(--bw-lamp-soft)}
.case-baby-walz .bw-quote em{font-style:normal;color:var(--bw-advice)}

/* Context and notes as quiet glass cards. */
.case-baby-walz .case-context{margin-top:clamp(24px,3vw,48px);padding:clamp(28px,3.4vw,52px);gap:6vw;border:0;border-radius:32px;background:var(--bw-shell);box-shadow:inset 0 0 0 1px var(--bw-hair)}
.case-baby-walz .case-context .eyebrow,.case-baby-walz .case-status{color:var(--bw-lamp)}
.case-baby-walz .case-status{border-color:var(--bw-hair)}
.case-baby-walz .project-note{margin-top:clamp(96px,10vw,150px);padding:28px 32px;border-radius:24px;background:var(--bw-shell);box-shadow:inset 0 0 0 1px var(--bw-hair);color:rgba(252,230,191,.7)}

/* Next project: pill with the arrow in its own circle. */
.case-baby-walz .next-project{margin-top:clamp(72px,8vw,120px);padding:40px 0 48px;border-color:var(--bw-hair)}
.case-baby-walz .next-project>.eyebrow{color:var(--bw-lamp)}
.case-baby-walz .next-project>span:last-child{display:inline-flex;align-items:center;gap:22px;padding:10px 10px 10px 34px;border-radius:999px;
  font-family:'Geist',var(--sans);font-weight:600;font-size:clamp(30px,4.4vw,64px);letter-spacing:-.05em;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--bw-hair);
  transition:transform .6s var(--bw-ease),background-color .6s var(--bw-ease)}
.case-baby-walz .next-project i{display:grid;place-items:center;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border-radius:50%;font-size:.5em;letter-spacing:0;
  background:var(--bw-lamp);color:#0b1429;transition:transform .6s var(--bw-ease)}
.case-baby-walz .next-project:hover>span:last-child{background:rgba(255,255,255,.08)}
.case-baby-walz .next-project:hover i{transform:translate(4px,-2px) scale(1.05)}
.case-baby-walz .next-project:active>span:last-child{transform:scale(.98)}
.case-baby-walz .copy-email{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--bw-hair);transition:transform .5s var(--bw-ease)}
.case-baby-walz .copy-email:active{transform:scale(.97)}
.case-baby-walz a:focus-visible,.case-baby-walz button:focus-visible{outline-color:var(--bw-lamp)}

/* Scroll entry: armed by app.js only when motion is allowed; transform and opacity only. */
.reveal-armed [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--bw-ease,cubic-bezier(.32,.72,0,1)),transform 1.1s var(--bw-ease,cubic-bezier(.32,.72,0,1));transition-delay:var(--d,0s)}
.reveal-armed [data-reveal].is-in{opacity:1;transform:none}

@media(min-width:801px){
 .case-baby-walz .showcase-opening.opening-baby-walz{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center}
 .case-baby-walz .opening-baby-walz>.opening-copy{grid-column:1;grid-row:1;align-self:end;grid-template-columns:1fr;gap:0}
 .case-baby-walz .opening-baby-walz>.opening-clock{grid-column:1;grid-row:2;align-self:start}
 .case-baby-walz .opening-baby-walz>.showcase-image{grid-column:2;grid-row:1 / span 2;order:0;width:max-content;max-width:100%;justify-self:end}
 .case-baby-walz .showcase-opening.opening-baby-walz h1{font-size:clamp(72px,9vw,168px)}
}
@media(max-width:800px){
 .case-baby-walz>.showcase-wrap{padding:0 16px}
 .case-baby-walz .showcase-opening{padding:40px 0 32px;gap:32px;grid-template-columns:minmax(0,1fr)}
 .case-baby-walz .showcase-opening h1{font-size:clamp(64px,19vw,96px)}
 .case-baby-walz .bw-stage{padding-top:88px}
 .case-baby-walz .span-12,.case-baby-walz .span-8,.case-baby-walz .span-6,.case-baby-walz .span-4{grid-column:1 / -1}
 .case-baby-walz .bw-row{grid-template-columns:1fr !important}
 .case-baby-walz .bw-kv{grid-template-columns:1fr}
 .case-baby-walz .bw-cascade{flex-direction:column;align-items:center;gap:28px;margin-top:48px;padding-bottom:0}
 .case-baby-walz .bw-phone{width:min(300px,78vw)}
 .case-baby-walz .bw-phone+.bw-phone{margin-left:0}
 .case-baby-walz .bw-phone .showcase-image,.case-baby-walz .bw-phone:hover .showcase-image{transform:none}
 .case-baby-walz .bw-split{grid-template-columns:1fr}
 .case-baby-walz .showcase-image{border-radius:22px;padding:5px}
 .case-baby-walz .showcase-image img{border-radius:17px}
 .case-baby-walz .next-project>span:last-child{padding:8px 8px 8px 24px;gap:14px}
}
@media(prefers-reduced-motion:reduce){
 .case-baby-walz .showcase-image,.case-baby-walz .next-project i,.case-baby-walz .next-project>span:last-child{transition:none}
}

/* Copy pass: brief / insight / idea row and the German gloss under a case line. */
.case-thinking{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4vw;padding:0 0 40px}
.case-thinking p:not(.eyebrow){margin:12px 0 0;font-size:16px;line-height:1.6;max-width:42ch}
.case-thinking .eyebrow{color:var(--show-accent)}
.case-gloss{margin-top:12px;font-size:14px;line-height:1.5;opacity:.72;max-width:42ch}
.case-baby-walz .case-thinking{border-color:var(--bw-hair);margin-top:28px}
.case-baby-walz .case-thinking .eyebrow{color:var(--bw-lamp)}
@media(max-width:800px){.case-thinking{grid-template-columns:1fr;gap:22px;padding-bottom:36px}}


/* ---- Pass 1/3/4 (2026-09-26) ---- */
/* 1 · The preview column is filled edge to edge around each project's focus point. */
@media(min-width:801px) and (hover:hover){
 #index .preview>img{object-fit:cover;object-position:var(--focus,50% 30%);padding:0}
}
/* 4 · Boards sit in a quiet tray: a slightly deeper tint of the case ground plus one hairline, so
   light boards on light grounds keep their edge. Sharp corners, like the rest of the site. */
.showcase-case:not(.case-baby-walz) .showcase-image img,
.showcase-case:not(.case-baby-walz) .showcase-image .art,
.mey-redesign .mey-figure img,.mey-redesign .mey-figure svg{
  padding:clamp(6px,.8vw,12px);
  background:color-mix(in srgb,var(--show-ink,#28231e) 5%,var(--show-bg,#eee7db));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--show-ink,#28231e) 12%,transparent),
             0 28px 60px -40px color-mix(in srgb,var(--show-ink,#28231e) 55%,transparent)}
.showcase-case:not(.case-baby-walz) .showcase-image video{box-shadow:0 0 0 1px color-mix(in srgb,var(--show-ink,#28231e) 12%,transparent)}
@media(max-width:800px){
 .showcase-case:not(.case-baby-walz) .showcase-image img,.mey-redesign .mey-figure img{padding:5px}
}


/* ---- Pass 5/6/7 (2026-09-26) ---- */
/* 5 · The thinking leads; the brand facts follow as one quiet strip. */
.case-thinking{border-top:1px solid var(--line);padding:30px 0 38px;margin:0}
.case-thinking p:not(.eyebrow){font-size:18px;line-height:1.55}
.case-context.case-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:3.5vw;padding:26px 0 44px;margin-bottom:18px}
.case-strip p:not(.eyebrow){margin:10px 0 0;font-size:14.5px;line-height:1.65;max-width:52ch;opacity:.86}
.case-strip .case-status{margin-top:14px}
.case-baby-walz .case-thinking{border:0;padding-top:clamp(28px,3vw,44px)}
.case-baby-walz .case-context.case-strip{padding:clamp(22px,2.4vw,34px)}
@media(max-width:800px){.case-context.case-strip{grid-template-columns:1fr;gap:18px;padding:22px 0 32px}}

/* 7 · Stage variants. Split: heading holds its column while the board scrolls past.
   Lead: an asymmetric pair, the first image leads, the second answers. */
@media(min-width:801px){
 .showcase-stage.stage-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:0 4vw;align-items:start;border-top:1px solid var(--line)}
 .showcase-stage.stage-split>header,.showcase-stage.stage-split>header.stage-head{display:block;position:sticky;top:84px;border-top:0;padding-top:22px}
 .showcase-stage.stage-split>header h2{font-size:clamp(32px,3vw,48px);margin-top:14px}
 .showcase-stage.stage-split>.showcase-gallery{padding-top:22px}
 .showcase-stage.stage-lead .showcase-gallery{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:end;gap:3vw}
 .case-hagen-grote .showcase-stage.stage-split .showcase-image img{width:min(calc(100% - 200px),calc(84vh * var(--ar,1.5)))}
}

/* 6 · One button language: arrows live in their own circle and nudge on hover; everything gives a little on press. */
.enter-arrow,.next-project i,.contact-link span,.index-footer a span,:is(#index,.about-front) .project-arrow{
  display:inline-grid;place-items:center;border-radius:50%;line-height:1;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent);
  transition:transform .45s var(--ease,cubic-bezier(.2,.7,.2,1)),background-color .45s var(--ease,cubic-bezier(.2,.7,.2,1)),color .45s var(--ease,cubic-bezier(.2,.7,.2,1))}
.enter-arrow{width:52px;height:52px;font-size:22px}
.next-project i{width:1.15em;height:1.15em;font-size:.5em;margin-left:.3em}
.contact-link span,.index-footer a span{width:22px;height:22px;font-size:11px;margin-left:10px}
:is(#index,.about-front) .project-arrow{width:26px;height:26px;font-size:12px;top:10px;right:12px}
.enter-portfolio:hover .enter-arrow{transform:translate(4px,-4px);background:#eee7db;color:#28231e}
.next-project:hover i{transform:translate(5px,-5px)}
.contact-link:hover span,.index-footer a:hover span{transform:translate(2px,-2px)}
:is(#index,.about-front) .project.is-active .project-arrow{transform:translate(2px,-2px);background:var(--ink);color:var(--paper)}
.case-step>a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);transition:transform .45s var(--ease,cubic-bezier(.2,.7,.2,1)),background-color .45s var(--ease,cubic-bezier(.2,.7,.2,1))}
.case-step{display:flex;align-items:center;gap:10px}
.case-step>a:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.case-step>a:active,.next-project:active>span:last-child,.project:active{transform:scale(.97)}
.next-project>span:last-child{transition:transform .45s var(--ease,cubic-bezier(.2,.7,.2,1))}
@media(prefers-reduced-motion:reduce){.enter-arrow,.next-project i,.contact-link span,.index-footer a span,.project-arrow,.case-step>a{transition:none;transform:none!important}}


/* ---- Brand pass (2026-09-26) ----
   Every case (baby-walz aside) now carries its brand's colour grade and display face, its own stage divider
   and caption voice, and one signature moment. The shared grid, reveal and tray system stay underneath. */

/* Shared: a sticky meter that follows the stage in view (GALERIA ring, Global Küchen week, Hagen Grote pass). */
.case-stages{position:relative}
.case-meter{position:sticky;bottom:22px;height:0;z-index:6;display:flex;justify-content:flex-end;pointer-events:none}
.case-meter .meter-body{opacity:0;transition:opacity .5s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .6s var(--ease,cubic-bezier(.2,.7,.2,1)),background-color .6s,border-color .6s}
.case-meter.is-live .meter-body{opacity:1}
@media(max-width:800px){.case-meter{bottom:14px;transform:scale(.78);transform-origin:100% 0}}

/* ============ GALERIA — peach glow, navy ink, Outfit; the ring changes job as you scroll ============ */
.showcase-case.case-galeria{--show-bg:#fbeee9;--show-ink:#26395a;--show-accent:#b4654a;--line:rgba(38,57,90,.16);
  background:radial-gradient(900px 620px at 92% 0,rgba(254,181,210,.5),transparent 70%),radial-gradient(800px 600px at 0 520px,rgba(248,217,207,.9),transparent 70%),var(--show-bg)}
.case-galeria :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Outfit',var(--sans);font-weight:600;letter-spacing:-.045em}
.case-galeria :is(.showcase-opening h1,.showcase-stage>header h2) em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.case-galeria .stage-label{font-family:'Outfit',var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
/* Divider: half a glowing ring hangs from every stage rule. */
.case-galeria .showcase-stage>header{position:relative}
.case-galeria .showcase-stage>header::after{content:"";position:absolute;right:0;top:-1px;width:112px;height:56px;border:1.5px solid #e01e6c;border-top:0;border-radius:0 0 112px 112px;
  box-shadow:0 16px 34px -10px rgba(224,30,108,.4),inset 0 -10px 22px -12px rgba(254,181,210,.9);opacity:.75;pointer-events:none}
.case-galeria .showcase-image figcaption{font-family:'Outfit',var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#26395a}
.case-galeria .showcase-image figcaption::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#e01e6c;margin-right:10px;vertical-align:1px;box-shadow:0 0 0 3px rgba(224,30,108,.16),0 0 12px 2px rgba(254,181,210,.9)}
.meter-ring .meter-body{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;text-align:center;transform:translateY(-100%);
  border:6px solid #feb5d2;background:rgba(251,238,233,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 36px 6px rgba(224,30,108,.26)}
.meter-ring .meter-body>span{grid-area:1/1;opacity:0;transition:opacity .45s;font:600 10px/1.15 'Outfit',var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.meter-ring .meter-body b{display:block;font-size:32px;letter-spacing:-.04em;line-height:1;margin:2px 0}
.meter-ring .m-halo{font:italic 400 26px/1 var(--serif);letter-spacing:-.02em;text-transform:none;color:#b4654a}
.meter-ring[data-state=halo] .m-halo,.meter-ring[data-state=badge] .m-badge,.meter-ring[data-state=count] .m-count{opacity:1}
.meter-ring[data-state=badge] .meter-body{background:#e01e6c;border-color:#feb5d2}
.meter-ring[data-state=count] .meter-body{background:#26395a;border-color:#e01e6c}
@media(max-width:800px){.case-galeria .showcase-stage>header::after{width:64px;height:32px}}

/* ============ 2Lady — warm paper, Georgia for the voice, Arial for the facts, a woven label on every stage ============ */
.showcase-case.case-2lady{--show-bg:#f2efe7;--show-ink:#242520;--show-accent:#626754;--line:rgba(36,37,32,.15)}
.case-2lady :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.025em}
.case-2lady .stage-label,.case-2lady .showcase-image figcaption{font-family:Arial,Helvetica,sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.case-2lady .case-stages{counter-reset:lbl}
.case-2lady .showcase-stage{counter-increment:lbl;position:relative}
.case-2lady .showcase-stage>header{position:relative}
.case-2lady .showcase-stage>header::after{content:"2lady \00a0·\00a0 " counter(lbl,decimal-leading-zero);position:absolute;right:0;top:-1px;
  background:#242520;color:#f2efe7;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:9px 14px 10px;
  outline:1px dashed rgba(242,239,231,.45);outline-offset:-4px}
/* Faint stage numerals in Georgia sit behind the boards, like a lookbook folio. */
.case-2lady .showcase-stage::before{content:counter(lbl,decimal-leading-zero);position:absolute;right:0;top:78px;font:400 clamp(110px,14vw,230px)/1 Georgia,serif;letter-spacing:-.06em;color:rgba(98,103,84,.08);pointer-events:none}
.case-2lady .showcase-stage>.showcase-gallery{position:relative}
/* Photography runs edge to edge. */
.case-2lady .stage-bleed>.showcase-gallery{margin-inline:-4vw}
.case-2lady .stage-bleed .showcase-image img{padding:0;box-shadow:none;background:none}
.case-2lady .stage-bleed .showcase-image figcaption{padding-inline:4vw}
@media(max-width:800px){.case-2lady .showcase-stage>header::after{position:static;display:inline-block;margin-top:14px}}

/* ============ Wollenhaupt — pack cream, charcoal, Wollenhaupt green; Spectral + IBM Plex Mono ============ */
.showcase-case.case-wollenhaupt{--show-bg:#fff4e3;--show-ink:#2a2c29;--show-accent:#0c832b;--line:rgba(42,44,41,.15)}
.case-wollenhaupt :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Spectral',Georgia,serif;font-weight:400;letter-spacing:-.03em}
.case-wollenhaupt .showcase-opening h1 em{font-style:italic}
.case-wollenhaupt .stage-label,.case-wollenhaupt .showcase-image figcaption{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.case-wollenhaupt .showcase-image figcaption{color:#2a2c29}
/* Divider: a green label rail with three rivets. */
.case-wollenhaupt .showcase-stage>header{border-top:0;position:relative;background:linear-gradient(#0c832b,#0c832b) 0 0/100% 2px no-repeat}
.case-wollenhaupt .showcase-stage>header::before{content:"";position:absolute;left:0;top:-4px;width:40px;height:10px;background:radial-gradient(circle,#0c832b 4px,transparent 4.5px) 0 0/13.3px 10px repeat-x}
/* Specimens sit in the hexagon window from the pack. */
.case-wollenhaupt .hex .showcase-image,.blend-panel .showcase-image:first-child{filter:drop-shadow(0 18px 22px rgba(42,44,41,.2))}
.case-wollenhaupt .hex .showcase-image img,.blend-panel .showcase-image:first-child img{aspect-ratio:1.1547;object-fit:cover;padding:0;background:none;box-shadow:none;
  object-view-box:inset(10%);clip-path:polygon(27% 3.5%,73% 3.5%,96% 50%,73% 96.5%,27% 96.5%,4% 50%)}
.case-wollenhaupt .hex .showcase-image figcaption{text-align:center}
/* Signature: choose a blend; its colour runs through the chip, the rule and the label. */
.blend-switch>h3{margin-bottom:18px}
.blend-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.blend-tabs [role=tab]{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.03em;padding:11px 16px 11px 12px;
  border:1px solid color-mix(in srgb,var(--blend) 50%,transparent);border-radius:999px;background:transparent;color:#2a2c29;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .2s var(--ease)}
.blend-tabs [role=tab] i{width:12px;height:12px;border-radius:50%;background:var(--blend);transition:background-color .35s var(--ease)}
.blend-tabs [role=tab]:hover{background:color-mix(in srgb,var(--blend) 10%,transparent)}
.blend-tabs [role=tab][aria-selected=true]{background:var(--blend);border-color:var(--blend);color:#fff4e3}
.blend-tabs [role=tab][aria-selected=true] i{background:#fff4e3}
.blend-tabs [role=tab]:active{transform:scale(.97)}
.blend-tabs [role=tab]:focus-visible{outline:2px solid var(--blend);outline-offset:3px}
.blend-panel{border-top:3px solid var(--blend);padding-top:30px}
.blend-panel[hidden]{display:none}
.blend-panel:not([hidden]){animation:blend-in .5s var(--ease,cubic-bezier(.2,.7,.2,1))}
@keyframes blend-in{from{opacity:0;transform:translateY(10px)}}
.blend-panel .showcase-gallery{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:5vw}
.blend-panel [data-reveal]{opacity:1!important;transform:none!important}
.blend-meta{font:500 12px/1.5 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blend);margin:24px 0 0}
@media(max-width:800px){.blend-panel .showcase-gallery{grid-template-columns:1fr 1fr;gap:14px}.blend-tabs [role=tab]{font-size:11px;padding:10px 13px 10px 10px}}

/* ============ Pötschke — seed paper, heritage green, Archivo; the months of the calendar name the stages ============ */
.showcase-case.case-poetschke{--show-bg:#f4efe3;--show-ink:#1d2a22;--show-accent:#155a37;--line:rgba(21,90,55,.2);
  background-color:var(--show-bg);background-image:radial-gradient(rgba(21,90,55,.13) 1px,transparent 1.4px),radial-gradient(rgba(115,173,68,.16) 1.2px,transparent 1.6px);
  background-size:23px 29px,37px 31px;background-position:0 0,11px 17px}
.case-poetschke :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Archivo',var(--sans);font-weight:700;letter-spacing:-.04em}
.case-poetschke :is(.showcase-opening h1,.showcase-stage>header h2) em{font-style:normal;color:#155a37}
.case-poetschke .stage-label{font:700 12px/1.4 'Archivo',var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#155a37}
.case-poetschke .stage-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:0 70% 0 70%;background:#73ad44;margin-right:10px;vertical-align:-1px}
.case-poetschke .showcase-image figcaption{font:500 12px/1.5 'Archivo',var(--sans);color:#155a37}
/* Divider: a perforated tear line, like the plantable card. */
.case-poetschke .showcase-stage>header{border-top:0;background:radial-gradient(circle,rgba(21,90,55,.5) 1.7px,transparent 2.1px) 0 0/10px 5px repeat-x}
/* Signature: the seedling stage turns into a full green band. */
.case-poetschke .stage-grown{--show-bg:#155a37;--show-ink:#f4efe3;--show-accent:#b5dc8c;background:#155a37;color:#f4efe3;margin-inline:-4vw;padding:6px 4vw 70px}
.case-poetschke .stage-grown>header{background:none;border-top:0}
.case-poetschke .stage-grown :is(h2,.stage-label,figcaption),.case-poetschke .stage-grown .stage-label{color:#f4efe3}
.case-poetschke .stage-grown .stage-label::before{background:#b5dc8c}
.case-poetschke .stage-grown figcaption{color:#b5dc8c}

/* ============ edding — lab paper, black ink, signal red; Oswald, Permanent Marker labels, every poster stamped ============ */
.showcase-case.case-edding{--show-bg:#ecebe7;--show-ink:#16161a;--show-accent:#d0141b;--line:rgba(22,22,26,.18);
  background-color:var(--show-bg);background-image:linear-gradient(rgba(22,22,26,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,22,26,.05) 1px,transparent 1px);background-size:32px 32px}
.case-edding :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Oswald',var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.case-edding :is(.showcase-opening h1,.showcase-stage>header h2) em{font-style:normal;color:#d0141b}
.case-edding .opening-brand{text-transform:none}
.case-edding .stage-label{font:500 11px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#d0141b}
.case-edding .showcase-image figcaption{font:400 16px/1.25 'Permanent Marker',cursive;letter-spacing:.01em;color:#16161a;transform:rotate(-1.2deg);transform-origin:left top}
/* Divider: the edge of a test tray, with a ruler. */
.case-edding .showcase-stage>header{border-top:3px solid #16161a;background:repeating-linear-gradient(90deg,rgba(22,22,26,.55) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat}
/* Signature: each surface gets its TESTED stamp as it arrives. */
.case-edding .stage-ooh .showcase-image{position:relative}
.case-edding .stage-ooh .showcase-image::after{content:"Tested";position:absolute;top:7%;right:8%;font:600 clamp(11px,.95vw,15px)/1 'Oswald',var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#d0141b;border:2px solid #d0141b;border-radius:3px;padding:7px 10px 6px 12px;background:rgba(236,235,231,.82);
  opacity:0;transform:rotate(-9deg) scale(1.7);transition:opacity .2s var(--ease) calc(var(--d,0s) + .75s),transform .4s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .75s)}
.case-edding .stage-ooh .showcase-image.is-in::after,.case-edding:not(.reveal-armed) .stage-ooh .showcase-image::after{opacity:1;transform:rotate(-9deg) scale(1)}
/* The format grid keeps one slot open for the next surface. */
.surface-slot{display:grid;place-content:center;justify-items:center;gap:12px;aspect-ratio:4/5;border:2px dashed rgba(22,22,26,.35);color:#16161a;text-align:center;padding:20px}
.surface-slot b{font:600 clamp(56px,6vw,96px)/1 'Oswald',var(--sans);color:#d0141b}
.surface-slot span{font:400 20px/1.2 'Permanent Marker',cursive;transform:rotate(-2deg)}
@media(max-width:800px){.surface-slot{aspect-ratio:2/1}}

/* ============ Mey & Edlich — running heads, the red price tab, catalogues as a strip you turn ============ */
.mey-redesign .mey-wrap{counter-reset:folio}
.mey-redesign .mey-section{counter-increment:folio;position:relative}
.mey-redesign .mey-section>header{position:relative}
.mey-redesign .mey-section>header::before{content:"Mey & Edlich\00a0\00a0\00a0S. " counter(folio,decimal-leading-zero);position:absolute;right:0;top:-44px;
  font:400 10.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#71695f}
.mey-redesign .mey-section .stage-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mey-redesign .mey-section .stage-label::before{content:"";display:inline-block;width:20px;height:9px;background:#ec1c24;margin-right:10px;vertical-align:0}
.mey-redesign .mey-figure figcaption{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.04em}
@media(min-width:801px){
 .mey-catalogues{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(74%,880px);gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
   padding:4px 0 22px;scrollbar-width:thin;scrollbar-color:#ec1c24 rgba(35,31,32,.08)}
 .mey-catalogues>.mey-figure{scroll-snap-align:start}
}
@media(max-width:800px){.mey-redesign .mey-section>header::before{top:-26px}}

/* ============ GROHE QuickFix — sky and navy, Archivo; the install steps name the stages on taped notes ============ */
.showcase-case.case-quickfix{--show-bg:#d9e8f1;--show-ink:#0a2b4c;--show-accent:#255975;--line:rgba(10,43,76,.16)}
.case-quickfix .showcase-wrap{overflow-x:clip}
.case-quickfix :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Archivo',var(--sans);font-weight:800;letter-spacing:-.045em}
.case-quickfix :is(.showcase-opening h1,.showcase-stage>header h2) em{font-style:normal;color:#255975}
.case-quickfix .stage-label{position:relative;justify-self:start;align-self:start;width:max-content;max-width:min(230px,100%);background:#fffdf6;color:#0a2b4c;
  font:700 22px/1.08 'Caveat',cursive;letter-spacing:0;padding:14px 16px 12px;transform:rotate(-2deg);box-shadow:0 12px 20px -14px rgba(10,43,76,.55)}
.case-quickfix .stage-label::before{content:"";position:absolute;left:50%;top:-9px;width:60px;height:18px;margin-left:-30px;background:rgba(246,210,74,.82);transform:rotate(3deg)}
.case-quickfix .showcase-image figcaption{font-weight:600;color:#0a2b4c}
/* Divider: a torn paper edge. */
.case-quickfix .showcase-stage>header{border-top:0;position:relative;padding-top:40px}
.case-quickfix .showcase-stage>header::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:#fffdf6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6L7 3L13 7L22 2L30 7L36 5L46 8L53 2L62 6L67 5L75 9L85 4L92 7L101 5L107 9L115 6L120 8V12Z'/%3E%3C/svg%3E") 0 0/120px 14px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6L7 3L13 7L22 2L30 7L36 5L46 8L53 2L62 6L67 5L75 9L85 4L92 7L101 5L107 9L115 6L120 8V12Z'/%3E%3C/svg%3E") 0 0/120px 14px repeat-x}
/* Signature: boards are pinned up with tape, on paper, not in a tray. */
.case-quickfix .showcase-image{position:relative}
.showcase-case.case-quickfix .showcase-image img{background:#fffdf6;padding:clamp(8px,1vw,14px);box-shadow:0 22px 44px -28px rgba(10,43,76,.55)}
.case-quickfix .showcase-image::before,.case-quickfix .showcase-image::after{content:"";position:absolute;top:2px;width:62px;height:19px;background:rgba(246,210,74,.8);z-index:2;pointer-events:none}
.case-quickfix .showcase-image::before{left:-8px;transform:rotate(-36deg)}
.case-quickfix .showcase-image::after{right:-8px;transform:rotate(36deg)}
@media(max-width:800px){.case-quickfix .showcase-image::before{left:0}.case-quickfix .showcase-image::after{right:0}.case-quickfix .stage-label{font-size:21px}}

/* ============ Global Küchen — blue asks, butter answers; DM Mono imprints, the week meter, idiom cards ============ */
.case-global-kuechen .stage-label{justify-self:start;align-self:start;width:max-content;max-width:100%;border:1.5px dashed rgba(251,248,243,.55);padding:9px 12px;
  font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:#f5d06f}
.case-global-kuechen .showcase-image figcaption{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px}
.case-global-kuechen .showcase-stage>header{border-top:4px solid #f5d06f}
.idiom-cards{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.idiom-cards li{perspective:1000px}
.idiom-card{display:grid;min-height:clamp(210px,17vw,290px);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.65,0,.25,1) calc(var(--d,0s) + .6s)}
.idiom-cards li.is-in .idiom-card{transform:rotateY(180deg)}
.idiom-cards li.is-in:hover .idiom-card{transform:rotateY(0);transition-delay:0s}
.idiom-card p{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px 18px 20px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;font:800 clamp(17px,1.45vw,24px)/1.08 'Poppins',var(--sans);letter-spacing:-.03em}
.idiom-card small{font:500 10.5px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.78}
.idiom-card .q{background:#0f4f86;color:#fbf8f3;box-shadow:inset 0 0 0 1px rgba(251,248,243,.2)}
.idiom-card .a{background:#f5d06f;color:#0f3c66;transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){
 .idiom-card{transform:none!important;gap:6px;transition:none}
 .idiom-card p{grid-area:auto;-webkit-backface-visibility:visible;backface-visibility:visible}
 .idiom-card .a{transform:none}
}
@media(max-width:800px){
 .idiom-cards{grid-template-columns:1fr 1fr}
 .idiom-cards li:last-child{grid-column:1/-1}
 .idiom-card{min-height:170px}
}
.meter-week .meter-body{display:grid;grid-template-columns:auto auto;align-items:stretch;transform:translateY(-100%);border-radius:999px;overflow:hidden;
  background:#f5d06f;color:#0f3c66;font:500 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.02em;box-shadow:0 16px 32px -14px rgba(5,25,50,.55)}
.meter-week em{grid-area:1/1;display:flex;align-items:center;font-style:normal;background:#0f3c66;color:#f5d06f;padding:12px 14px}
.meter-week .meter-body>span{grid-area:1/2;display:flex;align-items:center;padding:12px 18px;opacity:0;transition:opacity .4s}
.meter-week[data-state=w1] .w1,.meter-week[data-state=w2] .w2,.meter-week[data-state=w3] .w3,.meter-week[data-state=w4] .w4{opacity:1}

/* ============ Hagen Grote — Crimson Pro, kraft tags, and a Genuss-Pass that fills one stamp per stage ============ */
.case-hagen-grote :is(.showcase-opening h1,.showcase-stage>header h2,.showcase-application h3,.next-project>span:last-child){font-family:'Crimson Pro',Georgia,serif;font-weight:500;letter-spacing:-.025em}
.case-hagen-grote .showcase-opening h1 em{font-style:italic;font-weight:500}
.case-hagen-grote .stage-label{position:relative;justify-self:start;align-self:start;width:max-content;max-width:min(230px,100%);background:#c9a574;color:#1f2430;
  font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px 9px 26px;
  clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%);transform:rotate(-1.5deg)}
.case-hagen-grote .stage-label::before{content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--show-bg)}
.meter-pass .meter-body{display:grid;gap:9px;transform:translateY(-100%) rotate(-1.2deg);background:#fbf7ef;border:1px solid rgba(0,48,95,.22);padding:12px 14px 14px;
  box-shadow:0 18px 34px -20px rgba(31,36,48,.55)}
.pass-title{font:italic 500 18px/1 'Crimson Pro',Georgia,serif;color:#00305f}
.pass-stamps{display:flex;gap:6px}
.pass-stamps i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed rgba(0,48,95,.32);
  font:500 9px/1 'DM Mono',ui-monospace,monospace;font-style:normal;letter-spacing:.04em;color:rgba(0,48,95,.42);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),background-color .3s,color .3s,border-color .3s}
.pass-stamps i.on{border:2px solid #00305f;color:#00305f;background:rgba(224,165,38,.28);transform:rotate(-10deg)}
@media(prefers-reduced-motion:reduce){.case-meter .meter-body,.pass-stamps i,.meter-ring .meter-body>span,.meter-week .meter-body>span{transition:none}.blend-panel:not([hidden]){animation:none}}


/* ---- Review fixes (2026-09-26) ---- */
/* Case step: number and brand sit apart without a dash. */
.case-step .step-brand{font-weight:inherit;margin-left:.9em}
/* Index: each row previews its case's brand world on hover and keyboard focus. */
:is(#index,.about-front) .project{isolation:isolate}
:is(#index,.about-front) .project::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--brand-ground,#eee7db) 70%,var(--paper));
  box-shadow:inset 3px 0 0 var(--brand,#964b35);opacity:0;transition:opacity .45s var(--ease,cubic-bezier(.2,.7,.2,1))}
:is(#index,.about-front) .project:is(.is-active,:hover,:focus-visible)::before{opacity:1}
:is(#index,.about-front) .project:is(.is-active,:hover,:focus-visible) .project-name{color:var(--brand)}
:is(#index,.about-front) .project .project-name{transition:color .45s var(--ease,cubic-bezier(.2,.7,.2,1))}
@media(prefers-reduced-motion:reduce){:is(#index,.about-front) .project::before,:is(#index,.about-front) .project .project-name{transition:none}}

.mey-redesign{--show-bg:#f6f5f5;--show-ink:#231f20;--show-accent:#706252}.mey-wrap{width:min(1480px,100%);padding:0 5vw;margin:auto}.mey-opening{padding:62px 0 0}.mey-opening h1{font-family:var(--serif);font-size:clamp(62px,8.9vw,140px);font-weight:400;line-height:.95;letter-spacing:-.055em;margin:28px 0 28px}.mey-opening h1 em,.mey-section h2 em{font-weight:400;color:#776956}.mey-lead{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:36px}.mey-lead p{font-size:20px}.mey-lead>span{font-size:13px;color:#6e6761}.mey-cover{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}.mey-cover>.mey-figure img{aspect-ratio:4/5;object-fit:cover}.mey-cover-side{display:flex;flex-direction:column;justify-content:space-between}.mey-cover-side>.mey-figure img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center top}.mey-cover-note{padding:30px 0 12px}.mey-cover-note>span{font-size:12px;letter-spacing:.16em}.mey-cover-note p{font-family:var(--serif);font-size:clamp(30px,4vw,60px);line-height:1.05;letter-spacing:-.025em;margin:22px 0}.mey-figure{margin:0;min-width:0}.mey-figure img,.mey-figure svg{display:block;width:100%;height:auto}.mey-figure figcaption{font-size:12px;color:#71695f;margin-top:13px}.mey-figure figcaption:empty{display:none}.mey-context{display:grid;grid-template-columns:1fr 1.4fr 1.1fr;gap:40px;border-bottom:1px solid var(--line);padding:35px 0 48px}.mey-context p{font-size:16px;line-height:1.65;margin-top:12px;max-width:360px}.mey-section{padding:70px 0;border-bottom:1px solid var(--line)}.mey-section>header{margin-bottom:36px}.mey-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.6vw,82px);line-height:1.04;letter-spacing:-.04em;margin:25px 0}.mey-caption{max-width:650px;font-size:15px;line-height:1.7;color:#70685f}.mey-principles{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding:20px 0 32px;font-size:14px}.mey-principles p{margin:0}.mey-details{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:#eeece7;padding:25px}.mey-scenes{display:grid;grid-template-columns:1fr 1fr;gap:50px 30px;align-items:start}.mey-scenes>.mey-figure:nth-child(2){margin-top:130px}.mey-scenes>.mey-figure:nth-child(3){grid-column:1/-1;width:70%;margin:0 auto}.mey-scenes>.mey-figure img{aspect-ratio:4/5;object-fit:cover}.mey-scenes>.mey-figure:nth-child(3) img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center top}.mey-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 22px}.mey-piece{margin:0}.mey-piece>img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#e8e5de}.mey-piece figcaption{padding-top:14px;display:grid;gap:5px}.mey-piece strong{font-weight:500;font-size:14px}.mey-piece span{font-size:12px;color:#71695f}.mey-web-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;background:#231f20;color:#fff;font-size:14px}.mey-web-toolbar button{font:inherit;cursor:pointer;background:transparent;color:#fff;border:1px solid #888;padding:9px 15px;margin-left:6px}.mey-web-toolbar button[aria-pressed=true]{background:#e8decd;color:#231f20;border-color:#e8decd}.mey-web-stage{background:#dedbd5;padding:24px;overflow:hidden}.mey-web-device{width:100%;margin:auto;box-shadow:0 12px 45px #231f2015}.mey-web-device.is-mobile{width:min(390px,100%)}.mey-web-device iframe{display:block;width:100%;height:800px;max-height:85svh;border:0;background:#f6f5f5}.mey-redesign .application{padding:20px 0 45px;border:0}.mey-redesign .application h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:0 0 25px}.mey-social>div{display:grid;grid-template-columns:1fr 1fr .65fr;gap:24px;align-items:center}.mey-print>div{display:grid;grid-template-columns:1fr .66fr;gap:7vw;align-items:start}.mey-system{max-width:1100px;margin:auto}.mey-credits{max-width:790px;padding:30px 0;color:#70685f;font-size:13px;line-height:1.75}.mey-redesign .next-project{padding:25px 0 60px}.mey-redesign button:focus-visible{outline:3px solid #ac191e;outline-offset:4px}
@media(max-width:800px){.mey-wrap{padding:0 6vw}.mey-opening{padding-top:35px}.mey-opening h1{font-size:clamp(55px,12vw,86px)}.mey-lead{display:block;padding-bottom:25px}.mey-lead p{font-size:17px}.mey-lead>span{display:block;margin-top:14px;font-size:12px}.mey-cover{gap:14px;grid-template-columns:1.2fr 1fr}.mey-cover-note{padding:15px 0 0}.mey-cover-note p{font-size:clamp(22px,4.8vw,38px);margin:13px 0}.mey-cover-note>span{font-size:11px}.mey-context{grid-template-columns:1fr;gap:20px;padding:30px 0}.mey-context p{max-width:none;margin-top:6px;font-size:15px}.mey-section{padding:42px 0}.mey-section h2{font-size:clamp(35px,8vw,57px)}.mey-details{grid-template-columns:1fr;padding:15px;gap:30px}.mey-principles{gap:12px;display:grid}.mey-scenes{gap:28px 14px}.mey-scenes>.mey-figure:nth-child(2){margin-top:55px}.mey-scenes>.mey-figure:nth-child(3){width:100%}.mey-products{grid-template-columns:1fr 1fr;gap:27px 15px}.mey-piece strong{font-size:14px}.mey-web-toolbar{padding:12px;font-size:12px}.mey-web-toolbar button{padding:8px 10px}.mey-web-stage{padding:10px}.mey-web-device iframe{height:700px;max-height:80svh}.mey-social>div{grid-template-columns:1fr 1fr;gap:20px}.mey-social>div>.mey-figure:last-child{grid-column:1/-1;max-width:300px;margin:auto}.mey-print>div{grid-template-columns:1fr;gap:40px}.mey-print>div>.mey-figure:last-child{width:min(420px,100%);margin:auto}.mey-credits{font-size:12px}}
@media(prefers-reduced-motion:reduce){.mey-web-device{transition:none}}

/* Match the concise numbered section titles used across the portfolio. */
.mey-section>header h2{font:400 clamp(32px,4.6vw,65px)/1.08 var(--serif);letter-spacing:-.035em;margin:0}
@media(max-width:800px){.mey-section>header h2{font-size:clamp(31px,7vw,48px)}}

/* Work first: the two-image cover leads; the line sits under it at a viewport-capped size. */
@media(min-width:801px){
 .mey-opening{display:flex;flex-direction:column;padding-top:20px}
 .mey-opening>.mey-cover{order:-1;height:calc(100svh - 200px);grid-template-columns:auto auto;justify-content:start;gap:20px}
 .mey-cover>.mey-figure img{height:calc(100svh - 240px);width:auto;max-width:none}
 .mey-cover-side>.mey-figure img{height:calc(62svh - 150px);width:auto}
 .mey-opening h1{font-size:clamp(48px,min(6.4vw,11svh),104px);margin:22px 0 14px}
}