/* DIO Interior Laboratory — stylesheet. Colours and fonts are defined at the top in :root. */
:root{
--cream:#EAE8E3;
--cream-2:#E1DFD9;
--ink:#1A1917;
--ink-2:#5B574F;
--line:rgba(26,25,23,.18);
--terracotta:#9E4F3D;
--terracotta-2:#B5624F;
--sand:#D9C7B0;
--plaster:#E6DCCB;
--oak:#B8865A;
--oak-2:#9A6E45;
--bone:#F5F4F1;
--sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
--serif:'Instrument Serif','Times New Roman',Times,serif;
--gutter:clamp(16px,2.6vw,40px);
--ease:cubic-bezier(.22,.61,.2,1);
/* --- gradients -------------------------------------------------------
Built from the palette above, and checked, not eyeballed:
- --grad-mesh is the page's warm light, held on screen by the sticky
.page::before so it never stretches with the document. Every stop in it
is LIGHTER than --cream (#EAE8E3, luminance .8075) — that is the whole
rule, and it is not a stylistic preference. The mesh sits under every
word on the page, so a stop even slightly darker than cream lowers the
ground under all of them: an earlier version used --sand and --plaster
and quietly took --terracotta from 4.71:1 to 4.02:1, breaking .more:hover
and .arrow-link:hover along with the italic accents. Lifting can only
ever improve contrast, so with lift-only stops the ground ranges from
plain cream (the worst case, and the case every other number here is
computed against) to rgb(248,242,232), and nothing can regress.
- --grad-terra carries TEXT (the italic accents). Both ends clear 4.5:1 on
cream with margin — #6E3226 is 8.0:1, #94472F is 5.36:1. Do not lighten
the light end; #9E4F3D, the flat --terracotta, is already only 4.71:1.
- --grad-dusk carries cream text in the .approach band; its lightest stop
(#6B402F) holds 7.15:1. Where the fog (js/fog.js) paints over it, the floor is
held by the scrim in css/motion.css, not by these stops. */
--grad-terra:linear-gradient(96deg,#6E3226 0%,#7E3A2B 46%,#94472F 100%);
/* the same accent for the dark band. Its darkest stop, #D9C7B0, holds 6:1 on the
scrimmed fog at its very lightest — do not darken either end past it. */
--grad-terra-light:linear-gradient(96deg,#F2E7D6 0%,#E3D2B8 52%,#D9C7B0 100%);
--grad-rule:linear-gradient(90deg,var(--terracotta),rgba(var(--ink-rgb),.2));
--grad-rule-light:linear-gradient(90deg,var(--sand),rgba(245,244,241,.25));
--grad-mesh:
radial-gradient(52% 38% at 8% 2%,rgba(251,246,236,.85),transparent 64%),
radial-gradient(44% 34% at 96% 22%,rgba(246,237,224,.7),transparent 68%),
radial-gradient(60% 42% at 62% 86%,rgba(244,237,230,.75),transparent 70%);
--grad-warm:linear-gradient(152deg,#F3F1EC 0%,#EAE8E3 44%,#E3DBCC 100%);
--grad-dusk:linear-gradient(152deg,#241C18 0%,#3A2A22 40%,#6B402F 100%);
--grad-veil:linear-gradient(200deg,rgba(158,79,61,.3),rgba(26,25,23,.05) 52%,rgba(184,134,90,.26));
/* --- liquid glass on the light ground ---------------------------------
The hero's .glass-pill is white-on-dark. On cream the same values vanish, so the
controls below use the inverse build: a low-alpha WHITE fill (which lifts the ground,
so dark labels gain contrast rather than lose it) and an INK rim instead of a white one.
Channel copies of --ink / --cream so they can carry an alpha. */
--ink-rgb:26,25,23;
--cream-rgb:234,232,227;
--glass-blur:blur(18px) saturate(1.3);
--glass-fill:rgba(255,255,255,.46); /* over --cream -> ~#F4F3F0 */
--glass-fill-hi:rgba(255,255,255,.64);
--glass-line:rgba(var(--ink-rgb),.27);
--glass-line-2:rgba(var(--ink-rgb),.37);
--glass-line-3:rgba(var(--ink-rgb),.56);
--glass-ink:rgba(var(--ink-rgb),.90); /* over --cream -> cream label 11.1:1 */
--glass-ink-hi:rgba(var(--ink-rgb),.95);
--glass-lift:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(var(--ink-rgb),.08),0 1px 2px rgba(var(--ink-rgb),.06),0 8px 18px rgba(var(--ink-rgb),.08);
--glass-lift-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(var(--ink-rgb),.1),0 2px 4px rgba(var(--ink-rgb),.07),0 14px 28px rgba(var(--ink-rgb),.13);
--glass-lift-dark:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(var(--ink-rgb),.13),0 10px 22px rgba(var(--ink-rgb),.2);
--glass-lift-dark-hi:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.3),0 2px 5px rgba(var(--ink-rgb),.15),0 16px 32px rgba(var(--ink-rgb),.24);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;color-scheme:light;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--terracotta);color:var(--bone)}
a{color:inherit}
a,button,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
/* Over the hero the ground is the oxblood ceiling and the dark floor, where a terracotta
ring is ~1.5:1 — the glass cream the hero already uses for its own rings instead. */
.nav:not(.is-page) :focus-visible,.hero :focus-visible{outline-color:#F1E9DF}
::placeholder{color:var(--ink-2);opacity:1} /* the UA grey is ~3.7:1 on cream */
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
/* Instrument Serif ships ONE weight. An h3 is bold by default, so every serif h3 that did not
say 400 was drawn in a synthesized bold — smeared, heavier strokes on the project titles. */
p{text-wrap:pretty}
[id]{scroll-margin-top:72px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:8px;left:8px;z-index:60;background:var(--ink);color:var(--bone);padding:10px 14px;font-weight:600;font-size:13px;text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.skip:focus-visible{transform:none}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.label{font-weight:600;font-size:13px;letter-spacing:.01em}
.serif{font-family:var(--serif);font-weight:400}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400}
.h-xl{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.8rem);line-height:1;letter-spacing:-.01em}
.h-l{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05}
.h-m{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15}
.more{display:inline-block;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;padding:6px 0;transition:color .2s}
.more:hover{color:var(--terracotta)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;text-decoration:none;min-height:44px}
.arrow-link .a{transition:transform .3s var(--ease)}
.arrow-link:hover .a{transform:translateX(4px)}
.arrow-link:hover{color:var(--terracotta)}
/* ---------- fixed nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;color:#fff;pointer-events:none;transition:color .35s var(--ease),background-color .35s var(--ease)}
.nav.is-page{color:var(--ink);background:var(--cream)}
.nav__in{display:flex;justify-content:space-between;align-items:flex-start;padding-top:12px;padding-bottom:12px}
.nav ul{display:flex;gap:16px;flex-wrap:wrap;pointer-events:auto}
.nav a,.nav button{font-weight:600;font-size:13px;text-decoration:none;padding:8px 0;display:inline-block;min-height:36px;position:relative;letter-spacing:.005em}
.nav a::after,.nav button::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav button:hover::after{transform:scaleX(1)}
.nav .lang{display:inline-flex;gap:8px}
.nav .lang[hidden]{display:none} /* the display above outranks the UA sheet's [hidden] */
/* `.nav a{display:inline-block}` above outranks .glass-pill's inline-flex, which left the label
at the TOP of the pill wherever the padding is not symmetric — every pill on a phone. */
.nav .glass-pill{display:inline-flex;align-items:center}
.nav .lang [aria-current]{opacity:.55}
/* ---------- hero (pinned; page scrolls over it) ---------- */
/* The room itself is painted by js/hero-glass.css. This is the ground the static
.hero--static fallback in index.html sits on if that stylesheet never arrives. */
.hero{position:sticky;top:0;height:100svh;min-height:520px;z-index:0;overflow:hidden;background:#2A211C;background-image:var(--grad-dusk);color:#fff}
.hero__mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:0 var(--gutter)}
.hero__mark .name{font-weight:600;font-size:15px;letter-spacing:.01em}
.hero__mark .sub{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.1}
/* .page must stay opaque — it is what scrolls over the pinned hero. So the warm
light goes on a pseudo-element above that opaque ground instead of into it, one
viewport tall and STICKY, so it stays put on screen and a 6000px document does not
stretch three radial stops into flat bands. z-index:-1 keeps it under the content and
over the fill; the negative margin keeps it from taking any room.
Sticky, not fixed: a fixed pseudo-element escapes its parent's box, and .page's stacking
context sits above the hero — so the three cream blobs were painted across the hero as
well, a pale cloud over the ceiling band that took the first two nav pills to ~1.3:1.
A sticky box cannot leave .page, so the light starts exactly at the page's top edge. */
.page{position:relative;z-index:1;background:var(--cream);box-shadow:0 -30px 60px -30px rgba(0,0,0,.35)}
.page::before{content:"";display:block;position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:-1;pointer-events:none;background:var(--grad-mesh)}
/* ---------- sections ---------- */
.sec{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.sec+.sec{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(22px,3vw,36px)}
.sec-head h2.label{display:flex;align-items:center;gap:12px}
.sec-head h2.label::before{content:"";width:34px;height:1px;flex:none;background:var(--grad-rule)}
.intro{max-width:920px;margin:0 auto;text-align:center;display:grid;gap:22px;padding-top:clamp(64px,9vw,128px)}
.intro p{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.45;font-family:var(--serif)}
.intro p em{font-style:italic;color:var(--terracotta)}
/* The italic accents, in gradient ink. background-clip:text needs a painted
background, so the flat --terracotta above stays as the fallback and this only
replaces it where the clip is supported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.intro p em,.studio__text .h-l em,.approach__headline em{
background:var(--grad-terra);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* background-image, NOT the background shorthand: the shorthand resets
background-clip to border-box, and the accent then paints as a solid
light rectangle with its own text knocked out of it. */
.approach__headline em{background-image:var(--grad-terra-light)}
}
.intro .label{margin-top:8px}
/* ---------- image / render slots ---------- */
.ph{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.ph--wide{aspect-ratio:16/10}
.ph--sq{aspect-ratio:1/1}
.ph .scene{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.2s var(--ease)}
.scene-svg{width:100%;height:100%;display:block}
a:hover .ph .scene,button:hover .ph .scene{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.ph .scene{transition:none}a:hover .ph .scene,button:hover .ph .scene{transform:none}}
/* a warm veil on hover — the cue that the whole card is a target */
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:var(--grad-veil);transition:opacity .45s var(--ease)}
a:hover .ph::after,button:hover .ph::after,a:focus-visible .ph::after,button:focus-visible .ph::after{opacity:1}
@media (prefers-reduced-motion:reduce){.ph::after{transition:none}}
/* ---------- stories carousel ---------- */
.rail{scroll-padding-left:var(--gutter);display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.story{flex:0 0 min(78vw,520px);scroll-snap-align:start;text-decoration:none;display:grid;gap:12px}
.story .ph{aspect-ratio:5/4}
.story h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.15}
.story p{color:var(--ink-2);max-width:32em}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.rail-nav button:hover{background:var(--ink);color:var(--cream)}
.rail-nav svg{width:16px;height:16px}
/* ---------- projects ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px)}
.filters button{font-weight:600;font-size:13px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;min-height:40px;transition:background .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* Three to a row at every width, every card the same size. Was 5 / 4 / 3 columns. */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px) clamp(14px,2vw,28px)}
/* No content-visibility here. Its 520px stand-in height is not what a card measures (about
450px on a desktop, 250px on a phone), so the page got 115-790px SHORTER as the visitor
scrolled past the grid. Every ScrollTrigger below it had been measured against the taller
page, and the footer columns — and on a phone the newsletter form — waited for a scroll
position that no longer existed: invisible for the whole visit. Ten cards do not need it. */
.pcard{display:grid;gap:12px;text-align:left;align-content:start;text-decoration:none;color:inherit} /* a link: the project's own page */
.pcard[hidden]{display:none}
.pcard .cat{font-size:12px;font-weight:600;color:var(--ink-2)}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.1}
.pcard .meta{font-size:13px;color:var(--ink-2)}
/* One shape for every card. Every third card used to be taller (3/4), which put the titles of
one row at three different heights — it read as an accident, not a rhythm. 4/3, not the
slot's default 4/5: the covers are landscape photographs (4:3 to 16:9), and at three columns
a portrait crop threw away most of each room and made every row ~550px tall. */
.pcard .ph{aspect-ratio:4/3}
.pgrid-foot{display:flex;justify-content:flex-end;margin-top:clamp(20px,3vw,36px)}
/* ---------- before / after ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,36px)}
.ba{display:grid;gap:12px}
.ba__frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);user-select:none}
.ba__frame .scene{position:absolute;inset:0;width:100%;height:100%}
/* "after" is the RIGHT of the divider, under the After label; the before scene shows to
its left. It used to be clipped to the left side, so the finished room sat under
"Before". --pos is where the divider is: drag right and more of the old room shows. */
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}
.ba__range:focus-visible + .ba__handle::after{outline:2px solid var(--terracotta);outline-offset:2px}
/* .72, not .55: over the light "before" ceilings .55 left the white label at ~4:1 */
.ba__lab{position:absolute;top:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(26,25,23,.72);padding:4px 7px;pointer-events:none}
.ba__lab--b{left:10px}.ba__lab--a{right:10px}
.ba h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.15}
.ba p{color:var(--ink-2);max-width:36em}
/* ---------- guests (Airbnb) ---------- */
.guests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.guest{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:14px;align-content:start}
.guest .rating{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.guest .rating svg{width:12px;height:12px}
.guest .rating span{color:var(--ink-2);font-weight:400}
.guest h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.15}
.guest blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.3}
.guest blockquote::before{content:"“"}.guest blockquote::after{content:"”"}
.guest cite{font-style:normal;font-size:13px;color:var(--ink-2)}
.guests-note{margin-top:28px;font-size:13px;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.guests-note b{font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
/* ---------- partners ---------- */
.partners{border-top:1px solid var(--ink)}
.partners li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.partners .n{font-family:var(--serif);font-size:1.35rem;line-height:1.1}
.partners .n small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-2);margin-top:3px}
.partners .t,.partners .w{font-size:14px;color:var(--ink-2)}
.partners .s{font-size:12px;font-weight:600}
/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.studio .ph{aspect-ratio:3/4;position:sticky;top:72px}
.studio__text{display:grid;gap:22px;max-width:36em}
.studio__text .h-l em{font-style:italic;color:var(--terracotta)}
.studio__text p:not(.h-l){color:var(--ink-2);font-size:15px}
.services{border-top:1px solid var(--ink)}
.services li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.services b{font-weight:600;font-size:14px}
.services span{font-size:14px;color:var(--ink-2)}
/* ---------- newsletter ---------- */
.news{background:var(--cream-2);background-image:var(--grad-warm);padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.news__in{max-width:720px;margin:0 auto;text-align:center;display:grid;gap:22px}
.news form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;text-align:left}
.field{display:grid;gap:6px}
.field label{font-size:12px;font-weight:600}
/* required, said visibly; the alt text after the slash keeps screen readers from reading
"star" — `required` on the input already announces it */
.form .field:has(:required) > label::after{content:" *";content:" *" / "";color:var(--terracotta)}
.field input{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;min-height:44px}
.field input:focus-visible{outline:none;border-bottom:2px solid var(--terracotta);padding-bottom:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;font-weight:600;font-size:13px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn--solid{background:var(--ink);color:var(--cream)}
.btn--solid:hover{background:var(--terracotta);border-color:var(--terracotta)}
.news .status{font-size:13px;color:var(--ink-2);min-height:1.3em}
/* ---------- footer ---------- */
.foot{padding-top:clamp(40px,6vw,72px);padding-bottom:28px}
.foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-bottom:36px;border-bottom:0;position:relative}
.foot__grid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-rule)}
.foot h4{font-size:12px;font-weight:600;margin-bottom:10px}
.foot p,.foot li{font-size:14px;color:var(--ink-2);line-height:1.6}
.foot a{text-decoration:none}
.foot li a{display:inline-block;min-height:24px} /* stacked links: a 24px target each */
.foot a:hover{text-decoration:underline;color:var(--ink)}
.foot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:12px;color:var(--ink-2)}
.foot__mark{font-weight:600;font-size:13px;color:var(--ink)}
.foot__mark em{font-family:var(--serif);font-weight:400;font-style:italic;font-size:15px;margin-left:6px}
/* ---------- project dialog ---------- */
.detail{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;background:var(--cream);color:var(--ink)}
.detail::backdrop{background:rgba(26,25,23,.5)}
.detail[open]{animation:rise .5s var(--ease)}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.detail[open]{animation:none}}
.detail__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain}
.detail__bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;min-height:56px;background:var(--cream);border-bottom:1px solid var(--line)}
.detail__bar .label{color:var(--ink-2)}
.detail__close{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 4px 0 12px;font-weight:600;font-size:13px;border:1px solid var(--ink);border-radius:999px;transition:background .2s,color .2s}
.detail__close:hover{background:var(--ink);color:var(--cream)}
.detail__close svg{width:18px;height:18px}
.detail__hero{margin-top:clamp(16px,2vw,28px)}
.detail__hero .ph{aspect-ratio:16/9}
.detail__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(24px,3.5vw,48px) 0;align-items:start}
.detail__head .cat{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.detail__facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;border-top:1px solid var(--ink);padding-top:16px}
.detail__facts[hidden]{display:none} /* the display above outranks the UA sheet's [hidden] */
.detail__facts dt{font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.detail__facts dd{font-size:14px}
.detail__story{max-width:40em;display:grid;gap:14px;color:var(--ink-2)}
.detail__story .lead{color:var(--ink);font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.3}
.detail__gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);padding-bottom:clamp(24px,3.5vw,48px)}
.detail__gallery figure{display:grid;gap:8px}
/* block size only. `contain-intrinsic-size:auto 420px` sets the WIDTH too, so every figure
not yet rendered claimed 420px of min-content and the one-column phone gallery came out
420px wide on a 390px screen — a sideways scroll in the dialog and on the project pages. */
.detail__gallery figure:not(:first-child){content-visibility:auto;contain-intrinsic-block-size:auto 420px}
.detail__gallery figcaption{font-size:12px;color:var(--ink-2)}
.detail__gallery figure:first-child{grid-column:1 / span 2}
.detail__gallery figure:first-child .ph{aspect-ratio:16/10}
.detail__nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--ink);padding:20px 0 clamp(32px,5vw,64px)}
.detail__nav button,.detail__nav a{display:grid;gap:4px;text-align:left;min-height:48px;padding:6px 0;text-decoration:none}
.detail__nav button:last-child,.detail__nav a:last-child{text-align:right;justify-items:end}
.detail__nav .label{color:var(--ink-2)}
.detail__nav .h-m{transition:color .2s}
.detail__nav button:hover .h-m,.detail__nav a:hover .h-m{color:var(--terracotta)}
/* ---------- a project's own page ----------
Generated by tools/pages.py on the published copy only: what a search result or a shared
link lands on. It is the dialog's layout (.detail__*) laid on the page, under the cream
nav bar, with a way back into the home page and on to the next project. No script. */
.pp{padding-top:64px}
.pp__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:clamp(16px,2vw,28px);font-size:13px;font-weight:600;color:var(--ink-2)}
.pp__crumb a{text-decoration:none;color:var(--ink-2)}
.pp__crumb a:hover{color:var(--ink);text-decoration:underline}
.pp__crumb [aria-current]{color:var(--ink)}
.pp .detail__hero .ph img{transition:none}
.pp__cta{display:grid;justify-items:start;gap:22px;padding:clamp(40px,6vw,96px) 0 clamp(24px,4vw,56px)}
.pp__cta .h-l{max-width:18em}
/* the language switch is two links there, not two buttons: each is the same project's
page in the other language. Same look as the buttons on the home page's cream bar. */
.nav .glass-pill-group a{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;min-width:30px;min-height:0;border-radius:999px}
.nav .glass-pill-group a::after{display:none}
.nav.is-page .glass-pill-group a{color:var(--ink-2)}
.nav.is-page .glass-pill-group a[aria-current]{color:var(--ink);opacity:1} /* .nav .lang [aria-current] dims it to .55 */
/* ---------- image slots: real photo when the file exists, drawn scene otherwise ---------- */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
a:hover .ph img,button:hover .ph img{transform:scale(1.035)}
.ph.has-photo .scene{display:none}
.ba__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__frame .has-photo .scene{display:none}
.sec-head .aside{color:var(--ink-2)}
/* ---------- the client's own sections (main.js customSection, added in DIO Studio) ----------
Built from the same parts as the fixed ones — the ruled label, the serif .h-l, the ink-2
copy at ~38em — so an added section reads as part of the site, not as a block dropped
into it. Breakpoints match SIZES.studio (960) and SIZES.gallery (960 / 640) in main.js. */
.page > [data-section][hidden]{display:none} /* .marquee/.approach set a display that would outrank [hidden] */
.cs__title em{font-style:italic;color:var(--terracotta)}
.cs__copy{display:grid;gap:16px;max-width:38em}
.cs__copy p:not(.cs__title){color:var(--ink-2);font-size:15px;line-height:1.6}
.cs__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.cs__body--solo{grid-template-columns:minmax(0,1fr)}
.cs__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.cs__split .ph{aspect-ratio:4/5}
.cs__split--left .ph{order:-1}
.cs--gallery .cs__title{max-width:24em;margin-bottom:clamp(20px,2.6vw,32px)}
.cs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.cs__fig{margin:0}
.cs__fig .ph{aspect-ratio:4/3}
.cs__fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-2)}
.cs--banner{background:var(--cream-2);background-image:var(--grad-warm);padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.cs__band{max-width:760px;margin:0 auto;text-align:center;display:grid;gap:24px;justify-items:center}
.cs__band .sec-head{justify-content:center;margin-bottom:0}
@media (max-width:960px){
.cs__body,.cs__split{grid-template-columns:minmax(0,1fr)}
.cs__split .ph{order:-1} /* one column: the picture leads */
.cs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.cs__grid{grid-template-columns:minmax(0,1fr)}}
.nav .lang button{min-width:28px}
.nav .lang button[aria-current]{opacity:.55}
/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.contact__text{display:grid;gap:18px;max-width:34em}
.contact__text p:not(.h-l){color:var(--ink-2)}
.contact__details{display:grid;gap:12px;margin-top:10px}
.contact__details dt{font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.contact__details dd a{text-decoration:none}
.contact__details dd a:hover{text-decoration:underline}
.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;min-height:44px}
.field select{appearance:none;-webkit-appearance:none;background-color:var(--cream);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 2px center;padding-right:24px}
.field textarea{resize:vertical;min-height:120px}
.field select:focus-visible,.field textarea:focus-visible{outline:none;border-bottom:2px solid var(--terracotta);padding-bottom:9px}
.field__error{font-size:13px;color:#7A3A2E;display:none}
.field.is-invalid .field__error{display:block}
.field.is-invalid input{border-bottom-color:#7A3A2E}
.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form .status{font-size:13px;color:var(--ink-2);min-height:1.3em}
@media (max-width:960px){.contact{grid-template-columns:1fr}}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
/* ---------- liquid glass controls ----------------------------------------------
Every control on the cream page ground, given the same material as the hero's
.glass-pill but rebuilt for a light backdrop. Nothing here changes a size, a padding
or a tap target — only fill, rim, specular and shadow.
Gated on @supports: without backdrop-filter the flat design above is what ships.
Notes:
- A white fill over cream RAISES luminance, so ink / ink-2 labels only gain contrast.
The dark (selected / primary) states are the ones that need care, so their specular
is deliberately weak — worst-case corner is ~6.4:1 for the cream label, not 4.9:1.
- backdrop-filter samples what is painted BEHIND the element, and an ancestor that has
one becomes a backdrop root. The .nav.is-page bar takes the blur, so its links use a
plain translucent pill (a nested backdrop-filter there would sample the bar and be a
no-op). Same reasoning inside the