/* Our story (18 oktober 2026): the portrait, chosen by Daan from two studies (the other, the journey, is kept in
   ../design/site-reviews/2026-10-18-our-story-studies/). Real photographs only (Maarten, the workshop, the products);
   the rest is type and line. */

/* The product photographs are 1:2 with the loudspeaker at full height and wide transparent sides: heights follow the
   real model heights (--h, 35+ and 15+ = 1), and the transparent sides overlap. */
[data-page=our-story] .st-models{display:flex;align-items:flex-end;justify-content:center;gap:2cqw;container-type:size}
[data-page=our-story] .st-models img{--u:min(1cqh,.62cqw);height:calc(var(--h) * 88 * var(--u));width:auto;flex:none;margin-inline:calc(var(--h) * -9 * var(--u));object-fit:contain;object-position:center bottom}

/* Cover: Maarten beside his question. */
.st-cover{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:max(calc(var(--viewport-height,100svh) * 1),720px);background:var(--fnl-delft)}
.st-cover-portrait{position:relative;margin:0;min-height:100%}
.st-cover-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.st-cover-portrait figcaption{position:absolute;left:var(--page-gutter);bottom:24px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgb(0 0 0/.35)}
.st-cover-copy{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-height) + 60px) clamp(32px,7vw,140px) 80px}
.st-cover-copy .eyebrow{color:var(--ink-muted);margin-bottom:32px}
.st-cover h1{font-size:clamp(44px,5.2vw,92px);line-height:1.05;letter-spacing:-.035em;font-weight:300;text-transform:none;margin:0;max-width:11em}
.st-cover-copy>p:not(.eyebrow){margin:30px 0 0;font-size:clamp(17px,1.35vw,21px);font-weight:300;color:rgb(255 255 255/.78);max-width:24em}
.st-cover-copy .subtle-link{margin-top:36px;align-self:flex-start;border-bottom:1px solid var(--fnl-white-72)}

/* Lead: one large sentence, the two paragraphs directly under it on the same left edge. */
.st-lead{padding:clamp(96px,14vh,170px) var(--page-gutter);background:var(--fnl-white);color:var(--fnl-delft);--line:var(--fnl-delft-16);--line-strong:var(--fnl-delft-72);--ink-muted:var(--fnl-delft-72)}
.st-lead>*{max-width:1080px}
.st-lead .eyebrow{margin-bottom:36px;color:var(--ink-muted)}
.st-lead-text{font-size:clamp(28px,3.1vw,50px);line-height:1.28;letter-spacing:-.02em;font-weight:300;margin:0}
.st-lead-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin:clamp(48px,7vh,80px) 0 0;padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line);font-size:clamp(16px,1.2vw,19px);line-height:1.7;font-weight:300}
.st-lead-cols p{margin:0}

/* Workshop: the archive photograph in its own column, in black and white and cropped to the two panels. */
.st-workshop{position:relative;margin:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:5vw;align-items:center;padding:clamp(80px,12vh,140px) var(--page-gutter);background:var(--fnl-delft)}
.st-workshop img{grid-column:2;grid-row:1;width:100%;height:min(calc(var(--viewport-height,100svh) * .82),860px);object-fit:cover;object-position:center 64%;filter:grayscale(1) contrast(1.08) brightness(.86)}
.st-workshop figcaption{grid-column:1;grid-row:1;max-width:520px}
.st-workshop h2{font-size:clamp(40px,4.4vw,72px);line-height:1.06;letter-spacing:-.03em;font-weight:300;text-transform:none;margin:14px 0 20px}
.st-workshop figcaption>p:not(.eyebrow){font-size:17px;line-height:1.65;font-weight:300;color:rgb(255 255 255/.82)}
.st-workshop .eyebrow{color:var(--ink-muted)}

/* Timeline: the line fills and each year lights up as you read. */
.st-timeline{padding:clamp(96px,14vh,170px) var(--page-gutter);background:var(--fnl-delft)}
.st-timeline-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;align-items:end;margin-bottom:clamp(64px,10vh,120px)}
.st-timeline-head .eyebrow{grid-column:1/-1;color:var(--ink-muted);margin:0}
.st-timeline-head h2{font-size:clamp(40px,4.4vw,72px);line-height:1.06;letter-spacing:-.03em;font-weight:300;text-transform:none;margin:0}
.st-timeline-head p:not(.eyebrow){margin:0;font-size:18px;font-weight:300;color:rgb(255 255 255/.78)}
.st-years-wrap{position:relative}
.st-years{list-style:none;margin:0;padding:0}
.st-years-line{position:absolute;top:10px;bottom:0;left:calc(100% * 5 / 12 - 2.5vw);width:1px;background:var(--line)}
.st-years-line i{position:absolute;left:0;top:0;width:1px;height:calc(var(--st-fill,0) * 100%);background:var(--fnl-white)}
.st-years li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;padding:0 0 clamp(64px,11vh,128px);position:relative}
.st-years li::before{content:'';position:absolute;left:calc(100% * 5 / 12 - 2.5vw - 4px);top:clamp(22px,2.6vw,44px);width:9px;height:9px;border-radius:50%;background:var(--fnl-delft);border:1px solid var(--line-strong);transition:background .6s ease}
.st-years li.is-seen::before{background:var(--fnl-white)}
.st-y{font-size:clamp(64px,7.5vw,132px);line-height:1;letter-spacing:-.045em;font-weight:300;color:rgb(255 255 255/.28);transition:color .9s ease}
.st-years li.is-seen .st-y{color:var(--fnl-white)}
.st-years h3{font-size:clamp(26px,2.4vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:300;margin:clamp(10px,1.4vw,26px) 0 16px}
.st-years p{margin:0;max-width:30em;font-size:clamp(16px,1.2vw,19px);line-height:1.65;font-weight:300;color:rgb(255 255 255/.78)}
.st-today .st-models{height:clamp(240px,34vh,360px);margin:36px 0 26px;background:var(--fnl-white);padding:28px 4% 18px;box-sizing:border-box}

/* Maarten and Ask Maarten. */
.st-maarten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:start;padding:clamp(96px,14vh,170px) var(--page-gutter);background:var(--fnl-white);color:var(--fnl-delft);--line:var(--fnl-delft-16);--line-strong:var(--fnl-delft-72);--ink-muted:var(--fnl-delft-72)}
.st-maarten .eyebrow{color:var(--ink-muted)}
.st-maarten h2{font-size:clamp(40px,4.4vw,72px);line-height:1.06;letter-spacing:-.03em;font-weight:300;text-transform:none;margin:18px 0 24px}
.st-maarten-copy>p:not(.eyebrow){max-width:30em;font-size:clamp(16px,1.25vw,20px);line-height:1.65;font-weight:300}
.st-note{margin-top:22px!important;font-size:14px!important;color:var(--ink-muted)}
.st-ask{border-top:1px solid var(--line-strong);padding-top:26px}
.st-ask-lead{font-size:clamp(22px,1.9vw,30px);line-height:1.3;font-weight:300;margin:16px 0 14px}
.st-ask p:not(.eyebrow):not(.st-ask-lead){font-size:15px;line-height:1.65;font-weight:300;color:var(--ink-muted);margin:0 0 22px}

@media(max-width:1100px){.st-timeline-head,.st-years li,.st-maarten{gap:3vw}}
@media(max-width:760px){
 .st-cover{grid-template-columns:1fr;grid-template-rows:auto auto}
 .st-cover-portrait{height:62vh}
 .st-cover-copy{padding:40px 24px 64px}
 .st-cover h1{font-size:clamp(36px,10vw,56px)}
 .st-lead-cols{grid-template-columns:1fr;gap:20px}
 .st-workshop{grid-template-columns:1fr}
 .st-workshop img,.st-workshop figcaption{grid-column:1;grid-row:auto}
 .st-workshop img{height:70vh}
 .st-timeline-head,.st-years li,.st-maarten{grid-template-columns:1fr}
 .st-years-line,.st-years li::before{display:none}
 .st-y{font-size:clamp(56px,16vw,88px)}
 .st-today .st-models{height:200px}
}