/* TYSHA — shared stylesheet
   1. base: hand-written rules (layered, so the component classes below win over them,
      the way the old inline styles did; !important rules here still win)
   2. components: classes extracted from the former inline styles (_tools/extract_styles.py)
*/
/* ---- fonts: self-hosted subsets (Latin + the Latin Extended-A glyphs used in addresses) ---- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-tight-latin-ext.woff2) format('woff2');unicode-range:U+0100-017F}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-017F}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-017F}

@layer base {
img{height:auto}
body{margin:0;background:#111110}
a{color:inherit;text-decoration:none}a:hover{color:#C2AE8E}
input{color:#EAE6DE}
input::placeholder{color:rgba(234,230,222,0.88)}
@media (max-width: 1100px) and (min-width: 761px){
:is(.h-xl){font-size:56px!important}
:is(.h-2,.h-3,.lh-09,.marquee,.num-xl,.span-2){font-size:120px!important}
:is(.grid-4-mt-120,.grid-4-mt-80){grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:64px!important}
:is(.grid-4-mt-120,.grid-4-mt-80)>article{margin-top:0!important}
}
@media (max-width: 760px){
[data-axis]{left:10px!important}
:is(.display,.p-3,.p-4,.p-5){font-size:44px!important;line-height:1.06!important}
:is(.h-xl){font-size:40px!important;line-height:1!important}
:is(.h-l,.num-m){font-size:40px!important;line-height:1!important}
:is(.col-2-6,.fs-40,.h-m,.quote,.span){font-size:28px!important;line-height:1.12!important}
:is(.col-3-6,.h,.h-s,.time){font-size:22px!important}
:is(.body-l,.field,.fs-20,.p,.p-2,.p-6,.p-7){font-size:18px!important}
:is(.body){font-size:15px!important}
:is(.h-2,.h-3,.lh-09,.marquee,.num-xl,.span-2){font-size:96px!important}
:is(.lh-1,.num-l){font-size:64px!important}
:is(.grid-4-mt-120,.mt-120,.mt-120-2,.mt-120-3,.mt-120-4,.mt-120-5){margin-top:64px!important}
:is(.p-3,.p-4){margin-top:64px!important}
:is(.grid-3-mt-80,.grid-4-mt-80,.mt-80,.stack-mt-80){margin-top:40px!important}
:is(.ol,.ol-2){margin-top:40px!important}
:is(.sec-ink,.sec-paper,.sec-paper-rule,.sec-sand,.stack-5){padding-bottom:64px!important}
:is(.div-3){padding-top:40px!important}
:is(.mt-120-4){row-gap:64px!important}
:is(.p){max-width:none!important}
:is(.div,.div-2,.div-3,.div-5,.div-7,.grid-12,.li,.li-2,.li-3,.mt-120-2,.mt-120-3,.mt-120-4,.mt-120-5,.mt-40,.mt-40-2,.mt-80,.site-head){display:flex!important;flex-direction:column!important;gap:24px!important}
:is(.div,.div-2,.div-3,.div-5,.div-7,.grid-12,.li,.li-2,.li-3,.mt-120-2,.mt-120-3,.mt-120-4,.mt-120-5,.mt-40,.mt-40-2,.mt-80)>*,.site-head>:not(.t-pill){grid-column:auto!important;padding-left:0!important;justify-self:auto!important}
[data-hero]{min-height:640px!important}
.site-head{flex-direction:row!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:flex-start!important;gap:8px!important}
.site-head>nav{order:3;width:100%;justify-content:space-between}
.site-head>span:nth-of-type(1){display:none!important}
.site-head>span:last-child{text-align:right}
[data-hero-fade]:is(.div-5,.mt-120-3,.row-4){display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important}
[data-hero-fade]:is(.div-5,.mt-120-3,.row-4)>span:nth-child(2),[data-hero-fade]:is(.div-5,.mt-120-3,.row-4)>span:nth-child(3){display:none!important}
[data-hero-fade]:is(.div-5,.mt-120-3,.row-4)>span:last-child{text-align:right}
[data-st-over] p{max-width:none!important}
[data-st-over]>div{flex-wrap:wrap;gap:8px 16px}
:is(.h-560,.img-h-560){height:440px!important}
:is(.grid-4-mt-120,.grid-4-mt-80){display:flex!important;flex-direction:column!important;gap:64px!important}
:is(.grid-4-mt-120,.grid-4-mt-80)>article{margin-top:0!important;width:80%}
:is(.grid-4-mt-120,.grid-4-mt-80)>article:nth-child(even){align-self:flex-end}
#studio :is(.grid-4-mt-120,.grid-4-mt-80){display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:20px!important;row-gap:40px!important}
[data-pano]{height:440px!important;margin:64px -20px 0!important}
[data-pano] figcaption{flex-direction:column;gap:8px}
section[aria-label="Selected projects"] [data-float]{margin-top:0!important}
section[aria-label="Selected projects"] [data-float]:nth-child(n+2){width:82%}
section[aria-label="Selected projects"] [data-float]:nth-child(2),section[aria-label="Selected projects"] [data-float]:nth-child(4){align-self:flex-end}
section[aria-label="Selected projects"] [data-float]>.split-base{flex-direction:column;align-items:flex-start!important;gap:8px}
:is(.img-h-780){height:auto!important;aspect-ratio:4/5}
[data-marquee]{gap:40px!important}
[data-pin-inner]>div:is(.div-3,.div-4,.div-5,.div-7,.stack-14,.stack-15) :is(.day-grid){column-gap:8px!important}
.day-btn>span:last-child{display:none}
.day-btn>span:first-child{font-size:18px!important}
li[data-rise]{display:grid!important;grid-template-columns:1fr 96px!important;column-gap:16px!important;row-gap:8px!important;align-items:start!important}
li[data-rise]>*{grid-column:1/2!important;padding-left:0!important}
li[data-rise]>span:nth-child(1){grid-row:1}
li[data-rise]>span:nth-child(2){grid-row:2}
li[data-rise]>span:nth-child(3){grid-row:3}
li[data-rise]>span:nth-child(4){grid-row:4;color:#6B665F}
li[data-rise]>picture>img{grid-column:2/3!important;grid-row:1/5;aspect-ratio:4/5!important}
[aria-labelledby="h-voices"] figure:nth-of-type(2){margin-left:15%!important}
section[aria-label="Start a project"]{height:auto!important;min-height:100svh;padding-bottom:calc(96vw + 24px)!important}  /* room for the house below the form (section 16) */
footer>div:first-child{display:grid!important;grid-template-columns:1fr 1fr!important;row-gap:24px!important}
footer>div:first-child>div{grid-column:auto!important;padding-left:0!important;text-align:left!important}
footer svg{margin-top:64px!important}
[data-pre-cap]{grid-template-columns:1fr 1fr!important}
[data-pre-cap]>span:nth-child(2),[data-pre-cap]>span:nth-child(3){display:none}
}
h1,h2,h3,blockquote{text-wrap:balance}p{text-wrap:pretty}
html,body{margin:0;background:#111110;-webkit-text-size-adjust:100%}
html{scrollbar-gutter:stable}   /* the preloader and the menu hide the scrollbar: the page must not change width (the hero photo would re-crop) */
[data-form] input[type=text]:focus{border-bottom-color:#C2AE8E!important}
[data-form] input[type=text][aria-invalid=true]{border-bottom-color:#E8A68C!important}
[data-send]:hover,[data-form][aria-busy=true] [data-send]{background:#EAE6DE;color:#111110}
[data-form][aria-busy=true] [data-field],[data-form][aria-busy=true] fieldset{opacity:.45;transition:opacity .3s}
.t-pill{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid currentColor;border-radius:999px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.t-pill:hover{background:#EAE6DE;color:#111110}
.t-menu-btn{display:none!important;margin-left:auto;padding:0 18px!important}
.t-menu{position:fixed;inset:0;z-index:3000;background:#0B0B0A;color:#EAE6DE;display:flex;flex-direction:column;padding:20px;box-sizing:border-box;font-family:'Inter Tight',sans-serif;opacity:0;transition:opacity .4s cubic-bezier(.2,.7,.2,1)}
.t-menu[hidden]{display:none}
.t-menu.on{opacity:1}
.t-menu-axis{position:absolute;top:0;bottom:0;left:10px;width:1px;background:rgba(234,230,222,.2)}
.t-menu-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.45}
.t-mute{color:#7F7A73}
.t-menu-list{position:relative;margin-top:auto;display:flex;flex-direction:column;border-top:1px solid rgba(234,230,222,.28)}
.t-menu-list a{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(234,230,222,.28);opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.t-menu.on .t-menu-list a{opacity:1;transform:none}
.t-menu-list a:nth-child(2){transition-delay:.05s}.t-menu-list a:nth-child(3){transition-delay:.1s}.t-menu-list a:nth-child(4){transition-delay:.15s}
.t-menu-list .n,.t-menu-list .d{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.t-menu-list .d{color:#C9C3B8}
.t-menu-list .t{font-size:44px;font-weight:400;letter-spacing:-.04em;line-height:1}
.t-menu-foot{position:relative;margin-top:40px;display:flex;flex-direction:column;gap:4px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.6}
.t-note{position:fixed;right:20px;bottom:20px;z-index:2500;max-width:calc(100vw - 40px);box-sizing:border-box;padding:6px 6px 6px 16px;background:#1C1B19;color:#EAE6DE;border:1px solid rgba(234,230,222,.2);border-radius:999px;display:flex;align-items:center;gap:14px;font-family:'Inter Tight',sans-serif;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.t-note.on{opacity:1;transform:none}
.t-note p{margin:0;font-size:13px;line-height:1.35}
.t-note .k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#C9C3B8}
.t-note a{text-decoration:underline}
.t-note .t-pill{min-height:34px;padding:0 14px;font-size:11px}
@media (max-width:1024px){
.site-head>nav[aria-label="Main"]{display:none!important}
.site-head>span:last-of-type{display:none!important}
.t-menu-btn{display:inline-flex!important;grid-column:10/13;justify-self:end}
}
@media (max-width:760px){
:is(.big){font-size:56px!important;line-height:0.95!important}
footer :is(.col-10-13.body-l.ta-r){text-align:left!important}
footer :is(.ta-r){text-align:left!important}
:is(.div-7,.mt-120-2){align-items:flex-start!important}
[data-sent] p:is(.big){font-size:64px!important}
[data-pre-cap]{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:16px!important;font-size:11px!important}
[data-pre-cap]>span:nth-child(2),[data-pre-cap]>span:nth-child(3){display:none!important}
}
}

/* ---- 2. components ---- */
/* tokens: type, grid, axis, tones */
.label{font-family:'Geist Mono', monospace;font-size:12px;letter-spacing:0.04em;text-transform:uppercase}
.mono{font-family:'Geist Mono', monospace}
.grid-12{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:20px}
.axis{position:absolute;top:0;bottom:0;left:calc(20px + (100% - 40px) * 5 / 12);width:1px}
.fill{position:absolute;inset:0}
.cover{width:100%;object-fit:cover;display:block}
.display{font-size:clamp(48px, 6.6vw, 104px);font-weight:500;line-height:1.02;letter-spacing:-0.045em}
.h-xl{font-size:72px;font-weight:500;line-height:0.96;letter-spacing:-0.04em}
.h-l{font-size:56px;font-weight:500;line-height:0.98;letter-spacing:-0.035em}
.quote{font-size:40px;font-weight:400;line-height:1.12;letter-spacing:-0.03em}
.h-m{font-size:40px;font-weight:500;letter-spacing:-0.03em}
.h-s{font-size:32px;font-weight:500;letter-spacing:-0.03em}
.time{font-size:32px;font-weight:400;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.num-xl{font-size:160px;font-weight:300;letter-spacing:-0.05em}
.num-l{font-size:88px;font-weight:300;letter-spacing:-0.05em}
.num-m{font-size:56px;font-weight:300;letter-spacing:-0.04em;line-height:1}
.big{font-size:104px;font-weight:300;line-height:0.9;letter-spacing:-0.05em}
.body-l{font-size:20px;line-height:1.45}
.body{font-size:16px;line-height:1.45}
.tone-2{color:#C9C3B8}
.tone-3{color:#8C8781}
.tone-4{color:#6B665F}
.tone-5{color:#7F7A73}
.tone-6{color:#5A554E}
.u{text-decoration:underline}
.col-1-2{grid-column:1 / 2}
.col-1-3{grid-column:1 / 3}
.col-1-4{grid-column:1 / 4}
.col-1-5{grid-column:1 / 5}
.col-1-6{grid-column:1 / 6}
.col-1-7{grid-column:1 / 7}
.col-1-9{grid-column:1 / 9}
.col-1-13{grid-column:1 / 13}
.col-2-6{grid-column:2 / 6}
.col-3-6{grid-column:3 / 6}
.col-3-7{grid-column:3 / 7}
.col-4-6{grid-column:4 / 6}
.col-6-10{grid-column:6 / 10}
.col-6-11{grid-column:6 / 11}
.col-6-12{grid-column:6 / 12}
.col-6-13{grid-column:6 / 13}
.col-7-12{grid-column:7 / 12}
.col-8-12{grid-column:8 / 12}
.col-9-13{grid-column:9 / 13}
.col-10-12{grid-column:10 / 12}
.col-10-13{grid-column:10 / 13}
.col-11-13{grid-column:11 / 13}
.col-12-13{grid-column:12 / 13}
/* components */
.abs{position:absolute}
.ar-34{aspect-ratio:3 / 4}
.ar-43{aspect-ratio:4 / 3}
.ar-45{aspect-ratio:4 / 5}
.axis-dim{background:rgba(234, 230, 222, 0.22)}
.axis-faint{background:rgba(234,230,222,0.18)}
.axis-light{background:rgba(234, 230, 222, 0.4)}
.axis-light-2{background:rgba(234, 230, 222, 0.35)}
.axis-tan{background:#C2AE8E}
.axis-tan-2{background:#B8A78A}
.bg{background:linear-gradient(180deg, rgba(17,17,16,0.45) 0%, rgba(17,17,16,0.1) 40%, rgba(17,17,16,0.6) 100%)}
.bg-4{background:linear-gradient(180deg, rgba(17,17,16,0.55) 0%, rgba(17,17,16,0.05) 35%, rgba(17,17,16,0.15) 60%, rgba(17,17,16,0.8) 100%)}
.bg-5{background:rgba(11,11,10,0.4)}
.bg-6{background:linear-gradient(90deg, #111110 0%, #111110 calc(20px + (100% - 40px) * 5 / 12), rgba(17,17,16,0.15) calc(20px + (100% - 40px) * 5 / 12 + 1px), rgba(17,17,16,0.35) 100%)}
.bg-7{background:rgba(11,11,10,0.45)}
.bg-8{background:linear-gradient(180deg, rgba(11,11,10,0.7) 0%, rgba(11,11,10,0.35) 50%, rgba(11,11,10,0.85) 100%)}
.bg-c{position:relative;background:#EAE6DE;color:#2E2D2B}
.bg-c-2{position:relative;color:#EAE6DE;background:#111110}
.brand{display:flex;align-items:center;gap:16px}
.btn-again{all:unset;cursor:pointer;color:#C9C3B8;border-bottom:1px solid rgba(234,230,222,0.4);padding-bottom:4px}
.case-none{text-transform:none}
.day-bar{background:#C2AE8E;transform-origin:left;transform:scaleX(0)}
.day-btn{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid rgba(234,230,222,0.3);color:rgba(234,230,222,0.6);min-height:44px;transition:color 0.4s ease, border-color 0.4s ease}
.day-grid{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:20px}
.day-track{position:relative;height:1px;background:rgba(234,230,222,0.2);margin-bottom:-1px}
.div{border-top:1px solid #2E2D2B;padding:24px 0 40px}
.div-2{position:relative;line-height:1.6}
.div-3{position:relative;margin-top:auto;padding-top:120px}
.div-4{position:relative;margin-top:auto}
.div-5{position:relative;margin-top:auto;align-items:end;padding-bottom:20px;line-height:1.45}
.div-6{border-top:1px solid #2E2D2B;margin-bottom:24px}
.div-7{position:relative;margin-top:auto;align-items:last baseline}
.end-r{justify-self:end;text-align:right}
.field{all:unset;border-bottom:1px solid #EAE6DE;padding:10px 0;font-family:'Inter Tight', sans-serif;font-size:20px;text-transform:none;letter-spacing:0;min-height:28px;transition:border-color 0.3s}
.field-err{display:none;color:#E8A68C;text-transform:none;letter-spacing:0;font-family:'Inter Tight', sans-serif;font-size:15px}
.fieldset{border:0;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.foot-wm{position:relative;margin-top:40px;display:block;width:100%;height:auto}
.form-fail{display:none;margin:0;padding:16px 0 0;border-top:1px solid #E8A68C;font-size:17px;line-height:1.45;color:#EAE6DE}
.fs-12{font-size:12px;text-transform:uppercase}
.fs-12-2{font-size:12px;text-transform:uppercase;text-align:right}
.fs-12-3{font-size:12px}
.fs-12-4{font-size:12px;letter-spacing:0.04em;margin-left:8px}
.fs-12-5{justify-self:end;font-size:12px}
.fs-12-6{font-size:12px;letter-spacing:0.04em;vertical-align:top;margin-left:8px}
.fs-12-7{all:unset;cursor:pointer;padding:16px 36px;border:1px solid #EAE6DE;border-radius:999px;font-family:'Geist Mono', monospace;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;transition:background 0.3s, color 0.3s}
.fs-12-row{display:flex;justify-content:space-between;font-size:12px}
.fs-12-row-2{display:flex;justify-content:space-between;padding-top:16px;font-size:12px;text-transform:uppercase}
.fs-20{margin:0;padding-left:20px;font-size:20px;line-height:1.5;max-width:640px}
.fs-40{font-size:40px;font-weight:400;letter-spacing:-0.04em;line-height:1}
.fs-fluid{font-size:clamp(30px, 6.2vw, 88px);font-weight:300;letter-spacing:-0.05em;line-height:0.95}
.fs-fluid-abs{position:absolute;left:10px;bottom:-0.12em;font-size:clamp(200px, 38vw, 600px);font-weight:200;letter-spacing:-0.07em;line-height:0.8;color:rgba(234,230,222,0.1)}
.grid-3-mt-80{position:relative;margin-top:80px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:20px}
.grid-4-mt-120{position:relative;margin-top:120px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:20px}
.grid-4-mt-80{position:relative;margin-top:80px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:20px;align-items:start}
.h{margin:0;line-height:1.1}
.h-2{margin:0;line-height:0.85}
.h-3{margin:auto 0 0;line-height:0.85}
.h-560{position:relative;margin:80px -20px 0;height:560px}
.h-680{position:relative;margin:120px -20px 0;height:680px}
.h-fs-21vw{position:relative;margin:auto 0 0;font-size:21vw;font-weight:300;line-height:0.78;letter-spacing:-0.06em}
.hero-img{will-change:transform;height:100%;object-position:center 30%}
.hero-img-2{will-change:transform;height:100%;object-position:center 55%}
.hero-wm{position:relative;width:100%;height:auto;display:block;color:#EAE6DE}
.hidden{display:none;padding-left:20px;flex-direction:column;gap:24px}
.img{height:100%}
.img-2{height:100%;will-change:transform}
.img-3{height:100%;opacity:0.45}
.img-abs{will-change:transform;position:absolute;left:calc(20px + (100% - 40px) * 5 / 12);right:0;top:0;bottom:0;width:auto;height:100%;object-fit:cover;display:block}
.img-h-560{height:560px}
.img-h-620{height:620px}
.img-h-780{height:780px}
.img-mt-56-ar-45{margin-top:56px;width:70%;aspect-ratio:4 / 5;object-fit:cover;display:block;align-self:flex-end}
.legend{padding:0;margin-bottom:12px}
.lh-085{line-height:0.85}
.lh-09{line-height:0.9}
.lh-1{line-height:1}
.lh-145{line-height:1.45}
.lh-16{line-height:1.6}
.li{align-items:center;border-top:1px solid #2E2D2B;padding:24px 0}
.li-2{align-items:start;border-top:1px solid #2E2D2B;padding:32px 0}
.li-3{align-items:center;border-top:1px solid #2E2D2B;border-bottom:1px solid #2E2D2B;padding:24px 0}
.link-line{border-bottom:1px solid #EAE6DE;padding-bottom:4px}
.link-line-dark-end{justify-self:end;border-bottom:1px solid #2E2D2B;padding-bottom:4px}
.link-line-end{justify-self:end;border-bottom:1px solid #EAE6DE;padding-bottom:4px}
.link-row{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(234,230,222,0.4)}
.m-0{margin:0}
.marquee{display:flex;gap:80px;white-space:nowrap;line-height:1;will-change:transform}
.marquee-band{position:relative;overflow:hidden;background:#111110;color:#EAE6DE;padding:40px 0;border-bottom:1px solid rgba(234,230,222,0.15)}
.ml-8{margin-left:8px}
.mt-120{position:relative;margin-top:120px}
.mt-120-2{position:relative;margin-top:120px;align-items:last baseline}
.mt-120-3{position:relative;margin-top:120px;align-items:end}
.mt-120-4{position:relative;margin-top:120px;row-gap:120px}
.mt-120-5{position:relative;margin-top:120px;align-items:start}
.mt-40{position:relative;margin-top:40px;border-top:1px solid rgba(234,230,222,0.4);padding-top:16px}
.mt-40-2{position:relative;margin-top:40px;border-top:1px solid rgba(234,230,222,0.4);padding-top:14px}
.mt-80{position:relative;margin-top:80px;row-gap:80px;align-items:start}
.nav-main{display:flex;gap:24px;flex-wrap:wrap;padding-left:20px}
.ol{position:relative;margin:80px 0 0;padding:0;list-style:none}
.ol-2{position:relative;margin:80px 0 0;padding:0;list-style:none;border-bottom:1px solid #2E2D2B}
.p{margin:0;max-width:460px}
.p-2{margin:0;padding-left:20px}
.p-3{position:relative;margin:120px 0 0;max-width:1240px}
.p-4{position:relative;margin:120px 0 0}
.p-5{margin:0;max-width:1100px}
.p-6{margin:0;max-width:520px}
.p-7{padding-left:20px;margin:auto 0 12px}
.pill-img{display:inline-block;vertical-align:middle;width:2.1em;height:0.82em;border-radius:999px;object-fit:cover}
.pill-img-m{display:inline-block;vertical-align:middle;width:1.9em;height:0.82em;border-radius:999px;object-fit:cover}
.pill-img-s{display:inline-block;vertical-align:middle;width:1.6em;height:0.82em;border-radius:999px;object-fit:cover}
.pl-20{padding-left:20px}
.radio{accent-color:#C2AE8E;width:16px;height:16px;margin:0}
.radio-label{display:flex;align-items:center;gap:8px;min-height:44px}
.row{padding-left:20px;display:flex;gap:20px;flex-wrap:wrap}
.row-10{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2E2D2B;border-bottom:1px solid #2E2D2B;padding:16px 0}
.row-11{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.row-12{display:flex;gap:32px;flex-wrap:wrap}
.row-13{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2E2D2B;border-bottom:1px solid #2E2D2B;padding:24px 0}
.row-2{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #2E2D2B;padding:16px 0}
.row-3{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2E2D2B;padding:16px 0}
.row-4{position:relative;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.row-5{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2E2D2B;padding:24px 0}
.row-6{display:flex;gap:24px;flex-wrap:wrap}
.row-7{padding-left:20px;display:flex;gap:16px;flex-wrap:wrap;text-transform:none}
.row-8{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.row-9{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #2E2D2B;border-bottom:1px solid #2E2D2B;padding:16px 0}
.row-abs{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;color:#EAE6DE}
.row-mt-20{position:relative;margin-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.row-mt-40{position:relative;margin-top:40px;display:flex;justify-content:space-between}
.sec-head{position:relative;display:flex;justify-content:space-between}
.sec-ink{position:relative;box-sizing:border-box;padding:20px 20px 120px;background:#111110;color:#EAE6DE}
.sec-paper{position:relative;box-sizing:border-box;padding:20px 20px 120px;background:#EAE6DE;color:#2E2D2B}
.sec-paper-open{position:relative;box-sizing:border-box;padding:20px 20px 0;background:#EAE6DE;color:#2E2D2B}
.sec-paper-rule{position:relative;box-sizing:border-box;padding:20px 20px 120px;background:#EAE6DE;color:#2E2D2B;border-top:1px solid #D8CFC1}
.sec-sand{position:relative;box-sizing:border-box;padding:20px 20px 120px;background:#DCD5C9;color:#2E2D2B}
.shade-hero{background:linear-gradient(180deg, rgba(17,17,16,0.55) 0%, rgba(17,17,16,0.05) 35%, rgba(17,17,16,0.1) 60%, rgba(17,17,16,0.75) 100%)}
.site{width:100%;background:#111110;color:#EAE6DE;font-family:'Inter Tight', sans-serif;overflow:visible;overflow-x:clip}
.site-foot{position:relative;overflow:hidden;box-sizing:border-box;padding:20px;background:#0B0B0A;color:#EAE6DE}
.site-head{position:absolute;z-index:3;top:20px;left:20px;right:20px;line-height:1.45}
.span{padding-left:24px;line-height:1.05}
.span-2{display:block;line-height:0.85;font-variant-numeric:tabular-nums}
.span-3{padding-left:0.7em}
.split{display:flex;justify-content:space-between}
.split-base{display:flex;justify-content:space-between;align-items:baseline}
.st-layer{z-index:2;visibility:hidden;overflow:hidden;background:#111110}
.st-over{position:absolute;inset:20px;display:flex;flex-direction:column;justify-content:space-between;color:#EAE6DE;opacity:0}
.stack{display:flex;flex-direction:column}
.stack-10{display:flex;flex-direction:column;gap:16px;padding-bottom:12px}
.stack-11{margin:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.stack-12{padding-left:20px;display:flex;flex-direction:column;gap:16px}
.stack-13{position:relative;min-height:100vh;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;overflow:hidden}
.stack-14{margin-top:auto;display:flex;flex-direction:column;gap:24px}
.stack-15{margin-top:auto;padding-left:20px;display:flex;flex-direction:column;border-top:1px solid rgba(234,230,222,0.4)}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-2{border-top:1px solid rgba(234,230,222,0.4);padding-top:16px;display:flex;flex-direction:column;gap:16px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.stack-3{padding-left:20px;display:flex;flex-direction:column;gap:24px}
.stack-4{margin:0;display:flex;flex-direction:column;gap:24px}
.stack-5{position:relative;box-sizing:border-box;padding:20px 20px 120px;display:flex;flex-direction:column}
.stack-6{padding-left:20px;display:flex;flex-direction:column}
.stack-7{margin:0;display:flex;flex-direction:column;gap:8px}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-9{display:flex;flex-direction:column;border-top:1px solid rgba(234,230,222,0.4);max-width:640px}
.stack-h-640{position:relative;height:640px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#EAE6DE;overflow:hidden}
.stack-h-640-2{position:relative;height:640px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column}
.stack-h-900{position:relative;height:900px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column}
.stack-h-900-2{position:relative;height:900px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;background:#111110}
.stack-h-920{position:relative;height:920px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;overflow:hidden}
.stack-h-940{position:relative;overflow:hidden;height:940px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;color:#EAE6DE}
.stack-mt-160{margin-top:160px;display:flex;flex-direction:column;gap:16px}
.stack-mt-240{margin-top:240px;display:flex;flex-direction:column;gap:16px}
.stack-mt-80{margin-top:80px;display:flex;flex-direction:column;gap:16px}
.step-row{display:grid;grid-template-columns:48px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid rgba(234,230,222,0.4)}
.ta-r{text-align:right}
.tone-dim{color:rgba(234,230,222,0.78)}

/* ---- 3. display face: Instrument Serif for headings and display text >= 40px ---- */
.serif,.t-menu-list .t{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.02em}

/* ---- 4. layout that used to be patched in from JS ---- */
picture{display:contents}
picture>source{display:none}
[data-hero]{height:100vh;height:100svh;padding-top:calc(20px + 2 * 12px * 1.45)}
@media (min-width:761px){[data-hero]{min-height:720px}}
@media (max-width:1024px){[data-hero]{padding-top:60px}}
[data-pin="320"]{height:320vh}
[data-pin="400"]{height:400vh}
[data-pin-inner]{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ---- 5. scroll reveals (classes set by site.js; removed once the animation is over) ---- */
.rv{opacity:0;transform:translateY(56px)}
.rv-blur{filter:blur(12px)}
.rv.in{opacity:1;transform:none;filter:none;transition:opacity 1.1s var(--ez) var(--d,0s),transform 1.3s var(--ez) var(--d,0s),filter 1.1s var(--ez) var(--d,0s)}
.rv-img{clip-path:inset(100% 0 0 0);transform:scale(1.25)}
.rv-img.in{clip-path:inset(0% 0 0 0);transform:scale(1);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1),transform 1.9s var(--ez)}
.rv-scr{opacity:0}
.rv-img.rv-wait{clip-path:none;transform:none;transition:none}
.rv-now{transition:none!important}
:root{--ez:cubic-bezier(.16,.84,.24,1)}
.day-btn[aria-pressed="true"]{border-top-color:#EAE6DE;color:#EAE6DE}

@media (max-width:760px){.br-wide{display:none}}

/* ---- 6. accessibility ---- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:4000;left:20px;top:20px;padding:12px 18px;border-radius:999px;background:#EAE6DE;color:#111110;font:500 12px/1.2 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;transform:translateY(-200%)}
.skip-link:focus{transform:none;color:#111110}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
main:focus{outline:none}
.field:focus-visible,.day-btn:focus-visible,.btn-send:focus-visible,.btn-again:focus-visible,.t-pill:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.radio:focus-visible{outline:2px solid #EAE6DE;outline-offset:3px}
@media (max-width:1024px){
  /* 44px tap targets without moving anything */
  .site-foot a{display:inline-block;padding-block:13px;margin-block:-13px}
  .form-fail a,[data-form] a,.t-note a,.u[href]{padding-block:13px}
}

/* ---- 7. dB badge: small, solid, in the right gutter (never over text) ---- */
.db-badge{position:fixed;z-index:60;right:2px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:10px 2px;border:1px solid rgba(234,230,222,.3);border-radius:999px;background:#111110;color:#EAE6DE;font:500 11px/1 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s}
.db-badge.on{opacity:1}

/* ---- 8. project cards and process rows ---- */
.card-media{position:relative;overflow:hidden}
.card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover,.card:focus-visible{color:inherit}
.card:hover .card-media img,.card:focus-visible .card-media img{transform:scale(1.04)}
.card-cta{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:999px;background:#EAE6DE;color:#2E2D2B;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-cta,.card:focus-visible .card-cta{opacity:1;transform:none}
.card-soon-tag{position:absolute;left:16px;top:16px;padding:6px 10px;border-radius:999px;background:rgba(17,17,16,.72);color:#EAE6DE}
.ol>li{transition:background-color .4s}
.ol>li:hover{background-color:rgba(46,45,43,.045)}
.ol>li>.h-m{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ol>li:hover>.h-m{transform:translateX(8px)}

/* ---- 9. preloader (home) ---- */
.pre{position:fixed;inset:0;z-index:1000;background:#0B0B0A;color:#EAE6DE;overflow:hidden}
.pre-photo{position:absolute;inset:0;background:#1C1B19}
.pre-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pre-photo i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,.55) 0%,rgba(17,17,16,.05) 35%,rgba(17,17,16,.1) 60%,rgba(17,17,16,.75) 100%)}
.pre-shut{position:absolute;top:0;bottom:0;width:50.5%;background:#0B0B0A;will-change:transform}
.pre-shut-l{left:0}.pre-shut-r{right:0}
.pre-wm{position:absolute;transform-origin:0 0;fill:#EAE6DE;color:#EAE6DE;will-change:transform}
.pre-cuts{fill:#0B0B0A}
.pre-cap{position:absolute;left:20px;right:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;line-height:1.45;font-variant-numeric:tabular-nums}
.pre-cap-t{top:20px}.pre-cap-b{bottom:20px;align-items:end}
.pre-cap .f{margin-right:12px}
@media (max-width:760px){.pre-cap{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;font-size:11px}.pre-cap>span:nth-child(2),.pre-cap>span:nth-child(3){display:none}}

/* ---- 10. reduced motion: no movement, plain fades only ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transform:none}.rv-blur{filter:none}
  .rv.in{transition:opacity .8s ease var(--d,0s)}
  .rv-img{clip-path:none;transform:none;opacity:0}
  .rv-img.in{opacity:1;transition:opacity .8s ease}
  .t-menu-list a,.t-note{transform:none}
  .card img,.card:hover .card-media img,.card-cta,.card:hover .card-cta,.ol>li>.h-m,.ol>li:hover>.h-m{transform:none}
}

/* ---- 11. photo art direction (stage 2 photo set) ---- */
/* the Method hero panel runs from the axis to the right edge; a portrait photo must not size it by its own ratio */
/* statement pill and its full-screen expansion share one crop: the house, not the treetops */
[data-st-pill],[data-st-layer-img]{object-position:50% 60%}
.img-abs{width:calc(100% - 20px - (100% - 40px) * 5 / 12);object-position:60% 70%}
@media (max-width:760px){.img-abs{width:calc(100% - 10px);left:10px;object-position:78% 70%}}
/* phones: keep each photo's subject in frame. g16 (door and house), h01 (corridor centre) and the
   hero (its own portrait crop, h08m) are already centred by default. */
/* phones: keep each photo's subject in frame (checked at 375x812 and 390x844) */
@media (max-width:760px){
  [data-img="g06"]>img{object-position:45% 55%}                   /* panorama: the woman on the path */
  [data-img="h04"]>img{object-position:50% 42%}                   /* aerial: the house */
}

/* ---- 12. living photos (assets/live.js): a WebGL layer right above the photo ---- */
.live-c{pointer-events:none;opacity:0;transition:opacity .6s ease;will-change:transform}
.live-c.on{opacity:1}

/* ---- 13. sound toggle (header) ---- */
.t-sound{grid-column:10/13;grid-row:2;justify-self:end;margin-top:10px;white-space:nowrap;min-height:32px;padding:0 14px;font-size:11px;font-variant-numeric:tabular-nums;color:inherit}
.t-sound[aria-pressed="true"]{background:#EAE6DE;color:#111110}
.t-sound:hover{background:#EAE6DE;color:#111110}
@media (max-width:1024px){.t-sound{grid-column:10/13;grid-row:1;margin:0 82px 0 0;min-height:40px;align-self:start}.t-sound+.t-menu-btn{grid-row:1}}
@media (max-width:760px){.t-sound{margin:0 0 0 auto}.t-sound+.t-menu-btn{margin-left:8px!important}}

/* ---- 14. cursor (mouse only; site.js never adds it under reduced motion or touch) ---- */
.t-cursor{position:fixed;left:0;top:0;z-index:5000;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference}
.t-cursor.on{opacity:1}
.t-cursor span{position:absolute;left:-4px;top:-4px;display:block;width:8px;height:8px;box-sizing:border-box;border-radius:999px;background:#fff;color:transparent;overflow:hidden;white-space:nowrap;font:500 11px/28px 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),left .35s cubic-bezier(.2,.7,.2,1),top .35s cubic-bezier(.2,.7,.2,1),padding .35s,background-color .3s}
.t-cursor.pill{mix-blend-mode:normal}
.t-cursor.pill span{left:14px;top:14px;width:auto;height:28px;padding:0 12px;background:#EAE6DE;color:#111110}
.t-cursor.pill.flip span{left:auto;right:14px}
@media (pointer:coarse){.t-cursor,.t-ripples{display:none!important}}
@media (prefers-reduced-motion:reduce){.t-cursor.tc-dot{display:none}}

/* ---- 15. page transitions (cross-document View Transitions; unsupported browsers navigate normally) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:t-vt-out .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:t-vt-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes t-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes t-vt-in{from{opacity:0;transform:translateY(12px)}}
/* the Lull House card on the home page becomes the project's hero */
.vt-lull{view-transition-name:lull-house}
::view-transition-group(lull-house){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(lull-house),::view-transition-new(lull-house){height:100%;width:100%;object-fit:cover;overflow:clip}
::view-transition-old(lull-house){animation:none;opacity:0}
::view-transition-new(lull-house){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- 16. phones: text never sits on the bright sky or over the building ---- */
@media (max-width:760px){
  /* home hero (h08m): a soft scrim behind the headline and intro; the house below stays clear */
  .shade-hero{background:linear-gradient(180deg,rgba(11,11,10,.7) 0%,rgba(11,11,10,.66) 34%,rgba(11,11,10,.5) 41%,rgba(11,11,10,0) 47%,rgba(17,17,16,0) 64%,rgba(17,17,16,.75) 100%)}
  [data-hero] .body-l,[data-hero] .row-6{text-shadow:0 0 16px rgba(11,11,10,.55)}
  /* project hero: title and intro at the top over the trunks, facts at the bottom; the house between */
  section[aria-label="Lull House"] .div-7{margin-top:0}
  section[aria-label="Lull House"] .mt-40{margin-top:auto}
  .bg-4{background:linear-gradient(180deg,rgba(11,11,10,.68) 0%,rgba(11,11,10,.62) 34%,rgba(11,11,10,.45) 40%,rgba(11,11,10,0) 46%,rgba(11,11,10,0) 70%,rgba(17,17,16,.8) 100%)}
  section[aria-label="Lull House"] .div-7 :is(p,.label){text-shadow:0 0 16px rgba(11,11,10,.55)}
  /* Method hero: the intro sits on a top scrim instead of half on the dark panel, half on the mist */
  .bg-6{background:linear-gradient(180deg,rgba(17,17,16,.85) 0%,rgba(17,17,16,.7) 24%,rgba(17,17,16,0) 42%,rgba(17,17,16,0) 70%,rgba(17,17,16,.55) 100%)}
  /* statement expansion: the sentence moves up to the treetops */
  .st-over{justify-content:flex-start;gap:24px}
  .st-over>:last-child{margin-top:auto}
  .st-layer .bg{background:linear-gradient(180deg,rgba(17,17,16,.6) 0%,rgba(17,17,16,.35) 36%,rgba(17,17,16,0) 50%,rgba(17,17,16,.6) 100%)}
}

/* ---- 17. final QA pass ---- */

/* dB badge: phones have no free gutter for it */
@media (max-width:760px){.db-badge{display:none!important}}

/* header buttons: real padding, one row, a sound toggle that keeps its width */
.site-head>.t-sound{padding:0 14px}
@media (max-width:760px){.site-head>.t-sound{flex:none}.site-head>.t-menu-btn{flex:none}.site-head>.brand{flex:none;min-width:0}}
@media (max-width:360px){.site-head .brand br,.site-head .brand .tone-2{display:none}.site-head .brand{align-self:center}}

/* (inside the base layer: these override its own !important phone rules) */
@layer base {
/* short phones: the home hero text stays above the house */
@media (max-width:760px) and (max-height:720px){
  section[aria-label="Hero"] .mt-120{margin-top:20px!important;gap:14px!important}
  section[aria-label="Hero"] .h-l{font-size:34px!important}
  section[aria-label="Hero"] .body-l{font-size:16px!important}
}
/* Method hero on phones: the title first, inside the first screen, the photo below it */
@media (max-width:760px){
  section[aria-label="Method"] .mt-120{margin-top:20px!important}
}
/* the header pills sit in a .grid-12, whose phone rule zeroes the children's left padding */
.site-head>.t-sound{padding:0 calc(14px - .04em) 0 14px!important}   /* the caps' trailing letter-spacing is not ink */
@media (min-width:1025px){.site-head>.t-sound{padding-top:.5px!important}}   /* 32px tall: the caps sat 0.6px high */
.site-head>.t-menu-btn{padding:0 calc(18px - .04em) 0 18px!important}
}
@media (max-width:760px) and (max-height:720px){section[aria-label="Hero"] .stack-3{gap:14px}}
@media (max-width:760px){
  section[aria-label="Method"] .h-fs-21vw{order:-1;z-index:1;margin:12px 0 0;font-size:27vw}  /* order also moves it back in painting order */
  .mt-120-3{align-items:flex-start!important}
}
/* tablet and small laptop: a wider intro so it ends above the house */
/* the intro ends above the roof: on wide, short windows the photo (fitted to the width) puts the house higher */
@media (min-width:761px){section[aria-label="Hero"] .mt-120{margin-top:clamp(16px,calc(100svh - 40vw - 210px),120px)}}
@media (min-width:761px) and (max-width:1439px){
  section[aria-label="Hero"] .mt-120{margin-top:clamp(16px,calc(100svh - 40vw - 210px),88px)}
  section[aria-label="Hero"] .mt-120>.stack-3{grid-column:6/13}
  section[aria-label="Hero"] .mt-120>.stack-3>.p{max-width:540px}
}

/* home hero: the file names only where they fit; the photo sits so the captions fall on the water */
@media (max-width:1279px){[data-hero] .row-7{display:none!important}}
@media (min-width:761px){.hero-img{object-position:50% 100%}}


/* reveals: shorter clip; the "coming" tag waits for its photo */
.rv-img.in{transition:clip-path 1.1s cubic-bezier(.65,0,.25,1),transform 1.4s var(--ez)}
.card-soon-tag{transition:opacity .5s ease .55s}
.card-media:has(img.rv-img:not(.in)) .card-soon-tag{opacity:0;transition:none}

/* tablet: projects in two columns split at the axis (5 : 7), so the line runs in the gutter */
@media (min-width:761px) and (max-width:1024px){
  #projects .mt-80{grid-template-columns:minmax(0,5fr) minmax(0,7fr);row-gap:80px;align-items:start}
  #projects .mt-80>*{grid-column:auto!important;margin-top:0!important}
  #projects .mt-80>:nth-child(even){margin-top:120px!important}
  #projects .img-h-780{height:auto;aspect-ratio:4/5}
  #projects .split-base{flex-direction:column;align-items:flex-start;gap:6px}
  /* process / plan thumbnails would be ~20px tall here */
  :is(.ol,.ol-2)>li>picture>img{display:none}
  /* footer: two columns on the same 5 : 7 split */
  footer .div-2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);row-gap:28px}
  footer .div-2>div{grid-column:auto!important;padding-left:0!important;text-align:left!important}
  footer .mt-120-2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);row-gap:24px;align-items:end}
  footer .mt-120-2>a{grid-column:1/-1!important}
  footer .mt-120-2>span{grid-column:2/3!important;text-align:left!important}
}
.foot-tel .label{margin-left:6px}

/* keep the second sentence of a two-part line together */
@media (min-width:761px){.nw{white-space:nowrap}}

/* large screens: type grows with the window, gaps tighten */
@media (min-width:1101px){
  .h-xl{font-size:clamp(72px,calc(26px + 3.2vw),104px)}
  .h-l{font-size:clamp(56px,calc(20px + 2.5vw),80px)}
  .num-xl{font-size:clamp(160px,calc(64px + 6.67vw),208px)}
  .quote{font-size:clamp(40px,calc(16px + 1.67vw),52px)}
  .h-m{font-size:clamp(40px,calc(16px + 1.67vw),50px)}
  .body-l{font-size:clamp(20px,calc(14px + .42vw),23px)}
  .display{font-size:clamp(48px,6.6vw,132px)}
}
@media (min-width:1600px){
  :is(.mt-120,.mt-120-2,.mt-120-3,.mt-120-5,.p-3,.p-4){margin-top:96px}
  :is(.sec-ink,.sec-paper,.sec-paper-rule,.sec-sand){padding-bottom:104px}
}

/* project page: the case ends with a way on */
.case-cta{display:inline-block;align-self:end}
.case-cta:hover{color:#C2AE8E}

/* cards: on a mouse with motion, the cursor says "View"; the in-card label stays for touch and keyboard */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){.card:not(:focus-visible) .card-cta{display:none}}

/* page transitions: the old page leaves before the new one arrives, so two titles never overlap */
::view-transition-old(root){animation:t-vt-out .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:t-vt-in .45s cubic-bezier(.2,.7,.2,1) .26s both}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:t-vt-fade .2s linear both!important}
  ::view-transition-new(root){animation:t-vt-fade .2s linear .2s reverse both!important}
}
@keyframes t-vt-fade{to{opacity:0}}

/* text over photos: every line at least 4.5:1 (3:1 for large type) against the brightest part behind it */
@media (min-width:761px){
  .shade-hero{background:linear-gradient(180deg,rgba(11,11,10,.66) 0%,rgba(11,11,10,.5) 24%,rgba(11,11,10,.12) 40%,rgba(11,11,10,.08) 50%,rgba(11,11,10,.55) 58%,rgba(11,11,10,.82) 100%)}
  [data-hero] :is(h1,.body-l,.label){text-shadow:0 0 16px rgba(11,11,10,.6)}
  .bg-4{background:linear-gradient(180deg,rgba(11,11,10,.6) 0%,rgba(11,11,10,.1) 30%,rgba(11,11,10,.22) 50%,rgba(11,11,10,.72) 70%,rgba(11,11,10,.86) 100%)}
}
@media (max-width:760px){
  .shade-hero{background:linear-gradient(180deg,rgba(11,11,10,.78) 0%,rgba(11,11,10,.72) 38%,rgba(11,11,10,0) 46%,rgba(11,11,10,0) 56%,rgba(11,11,10,.78) 70%,rgba(11,11,10,.86) 100%)}
  .bg-6{background:linear-gradient(180deg,rgba(17,17,16,.88) 0%,rgba(17,17,16,.8) 32%,rgba(17,17,16,0) 50%,rgba(17,17,16,0) 72%,rgba(17,17,16,.55) 100%)}
  .bg-4{background:linear-gradient(180deg,rgba(11,11,10,.74) 0%,rgba(11,11,10,.68) 36%,rgba(11,11,10,.45) 42%,rgba(11,11,10,0) 48%,rgba(11,11,10,0) 66%,rgba(17,17,16,.85) 82%,rgba(17,17,16,.9) 100%)}
}
.link-line-end,.link-line-dark-end{white-space:nowrap}

/* ---- 18. stage 3 ---- */
/* day section (as on main): the photo full-bleed behind the heading and the live number, stopping above the hour
   buttons, bottom-aligned so the rug and the slippers stay in every frame; no scrim. The frames cross-fade in place:
   opacity only, nothing moves or scales. */
[data-pin="400"] .day-frame{z-index:0}
[data-pin="400"] .day-frame>.live-c{z-index:2}
[data-pin="400"] [data-pin-inner]>:is(.sec-head,.grid-12,.div-4){position:relative;z-index:2}
[data-pin="400"] [data-pin-inner]>[data-axis]{z-index:1}
.day-img{height:100%;object-position:50% 72%;opacity:0;transition:opacity 0s linear .7s}
.day-img.on{opacity:1;z-index:1;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.day-img,.day-img.on{transition:none}}
@media (min-width:761px){[data-pin="400"] .day-frame{bottom:132px;top:calc(20px + 12px * 1.45 + 14px)}}   /* the section label row stays on the dark ground */
/* portrait tablets: the whole 3:2 frame, uncropped, above the hours; heading and number on the dark ground */
@media (min-width:761px) and (max-aspect-ratio:1/1){[data-pin="400"] .day-frame{top:auto;height:calc((100vw - 40px) * 2 / 3);left:20px;right:20px}}
/* readability without a band: a soft dark halo hugging the letters only */
[data-pin="400"] :is(h2,.span-2){text-shadow:0 0 2px rgba(11,11,10,.35),0 0 14px rgba(11,11,10,.5),0 0 40px rgba(11,11,10,.4)}
[data-pin="400"] .fs-12{text-shadow:0 0 2px rgba(11,11,10,.85),0 0 7px rgba(11,11,10,.75),0 0 18px rgba(11,11,10,.55)}
@media (min-width:761px) and (min-aspect-ratio:2/1){   /* wide, short: the floor, not the bright glass, behind the text */
  .day-img{object-position:50% 88%}
  [data-pin="400"] :is(h2,.span-2){text-shadow:0 0 2px rgba(11,11,10,.45),0 0 14px rgba(11,11,10,.6),0 0 44px rgba(11,11,10,.45)}
  [data-pin="400"] .fs-12{text-shadow:0 0 2px rgba(11,11,10,.95),0 0 6px rgba(11,11,10,.9),0 0 16px rgba(11,11,10,.7)}
}
@media (max-width:760px){
  /* phones (as on main): the 3:2 frames in a square box above the hour buttons, the whole room in view */
  [data-pin="400"] .day-frame{top:auto;bottom:max(92px,11svh);aspect-ratio:1/1}
}
@media (max-width:760px){[data-pin="400"] .day-img{object-position:40% 50%}}

/* contact: no scrim. The house is on the left of the photo, the heading and the form on its dark sky and water
   right of the axis (text checked at >= 4.5:1 against the pixels under it, 1280-2560 wide) */
#contact{height:auto;min-height:max(940px,100svh);padding-bottom:96px}   /* room below the form (its rows rise 56px into place) */
.contact-grid{row-gap:48px;align-content:start}
@media (min-width:1025px){#contact [data-zoom]{left:-16%;right:auto;width:116%;max-width:none}}   /* the house ends left of the form */
@media (min-width:761px) and (max-width:1024px){#contact [data-zoom]{object-position:45% 50%}}
@media (max-width:760px){
  /* phones: heading and form on the dark ground, the house in its own band below, its sky fading out of the dark */
  #contact [data-zoom]{top:auto;height:calc(96vw + 80px);object-position:24% 60%;transform-origin:50% 80%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px);mask-image:linear-gradient(180deg,transparent 0,#000 72px)}
}

/* sound toggle: one width for "on" and "off", the label optically centred (the mono caps sit on the centre line
   once the trailing letter-spacing is taken off the right padding) */
.site-head>.t-sound{justify-content:center;min-width:calc(9ch + 9 * .04em + 32px);line-height:1}
.t-toast{position:fixed;left:20px;bottom:20px;z-index:2600;max-width:calc(100vw - 40px);box-sizing:border-box;padding:10px 16px;border:1px solid rgba(234,230,222,.2);border-radius:999px;background:#1C1B19;color:#EAE6DE;font:500 11px/1.3 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.t-toast.on{opacity:1;transform:none}
.t-toast:empty{display:none}
@media (prefers-reduced-motion:reduce){.t-toast{transform:none;transition:opacity .2s linear}}

/* cursor variants (14 holds the default dot; see site.js 3f) */
.t-cursor>:not(.tc-lab){position:absolute;display:none}
.t-cursor .tc-eq{left:12px;top:0;height:20px;gap:3px;align-items:flex-end}
.t-cursor .tc-eq b{display:block;width:2px;height:20px;border-radius:1px;background:#fff;transform-origin:50% 100%;transform:scaleY(.2);will-change:transform}
.t-cursor.tc-a:not(.pill) .tc-eq,.t-cursor.tc-e:not(.pill) .tc-eq{display:flex}
.t-cursor:is(.tc-a,.tc-e,.tc-b,.tc-d):not(.pill) .tc-lab{opacity:0}
.t-cursor .tc-ring{left:10px;top:10px;overflow:visible;transform:rotate(-90deg)}
.t-cursor .tc-ring circle{fill:none;stroke:#fff;stroke-width:1}
.t-cursor .tc-track{opacity:.35}
.t-cursor .tc-arc{stroke-width:1.5;stroke-dasharray:0 100;transition:stroke-dasharray .4s ease}
.t-cursor .tc-num{left:10px;top:10px;width:36px;line-height:36px;text-align:center;color:#fff;font:500 10px/36px 'Geist Mono',monospace;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:0}
.t-cursor.tc-b:not(.pill) :is(.tc-ring,.tc-num){display:block}
.t-cursor .tc-cross{left:-14px;top:-14px;width:28px;height:28px;background:linear-gradient(#fff,#fff) 50% 0/1px 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 1px no-repeat}
.t-cursor .tc-xy{left:12px;top:10px;color:#fff;white-space:nowrap;font:500 9px/1 'Geist Mono',monospace;font-style:normal;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.t-cursor.flip .tc-xy{left:auto;right:12px}
.t-cursor .tc-vf{left:-34px;top:-24px;width:68px;height:48px}
.t-cursor .tc-vf b{position:absolute;width:10px;height:10px;border:0 solid #fff}
.t-cursor .tc-vf b:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.t-cursor .tc-vf b:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.t-cursor .tc-vf b:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.t-cursor .tc-vf b:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.t-cursor.tc-d:not(.pill):not(.photo) :is(.tc-cross,.tc-xy){display:block}
.t-cursor.tc-d.photo:not(.pill) .tc-vf{display:block}
.t-cursor.tc-d.photo:not(.pill) .tc-xy{display:block;left:-34px;right:auto;top:30px}
.t-cursor.tc-d.photo:not(.pill) .tc-cross{display:block;transform:scale(.4)}
.t-ripples{position:fixed;left:0;top:0;width:0;height:0;z-index:4999;pointer-events:none;mix-blend-mode:difference}
.t-ripples i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;box-sizing:border-box;border:1px solid #fff;border-radius:50%;opacity:0}

/* home hero (stage 3 frontal photo): the photo stays bottom-aligned; where the window is too short for the intro,
   the house and the captions, the photo box grows below the fold by --hx (the house moves down, the water under the
   wordmark is what is lost), the intro rises, and the caption row steps aside */
@media (min-width:761px){
  [data-hero]{--H:max(720px,100svh);--hx:clamp(0px,calc(207px + 42.87vw - var(--H)),min(calc(66.67vw - var(--H)),calc(4.94vw - 17px)))}
  [data-hero] .hero-img{bottom:auto;height:calc(100% + var(--hx))}
  section[aria-label="Hero"] .mt-120{margin-top:clamp(16px,calc(var(--H) - 42.87vw - 240px),96px)}
  section[aria-label="Hero"] .mt-120>.stack-3{grid-column:6/13}
  section[aria-label="Hero"] .mt-120>.stack-3>.p{max-width:min(640px,calc(100% - 150px))}  /* clear of the sound toggle */
}
@media (min-width:761px) and (max-width:1100px){section[aria-label="Hero"] .mt-120{margin-top:clamp(16px,calc(var(--H) - 42.87vw - 270px),96px)}}
@media (min-width:761px) and (max-width:1599px) and (min-aspect-ratio:17/10){[data-hero] .div-5{visibility:hidden}}
@media (min-width:761px) and (min-aspect-ratio:2/1){
  [data-hero]{--hx:clamp(0px,calc(207px + 42.87vw - var(--H)),min(calc(66.67vw - var(--H)),calc(8.6vw - 17px)))}
  [data-hero] .div-5{visibility:hidden}
  /* wide, short windows: the two links repeat the menu (Projects, Contact); the intro alone stays above the roof */
  [data-hero] .row-6{display:none}
  [data-hero] h1{font-size:clamp(44px,7.4svh,60px)!important}
}
@layer base{@media (max-width:760px){section[aria-label="Start a project"]{padding-bottom:calc(96vw + 104px)!important}}}
/* over photos a difference blend turns grey; there the cursor is plain light with a soft dark halo */
.t-cursor.photo:not(.pill){mix-blend-mode:normal;filter:drop-shadow(0 0 1px rgba(11,11,10,.75)) drop-shadow(0 0 5px rgba(11,11,10,.35))}