:root { --ink:#172018; --paper:#f4f1e9; --lime:#d7e53c; --muted:#667166; --body-copy-size:clamp(15px,1.25vw,16px); --body-copy-leading:1.62; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:112px; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Montserrat,Arial,sans-serif; }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
.nav { position:fixed; z-index:50; top:0; left:0; right:0; height:100px; padding:18px 4.5vw; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; font-size:11px; font-weight:700; letter-spacing:.01em; }
.logo,.nav nav,.nav-actions { pointer-events:auto; }
.logo { position:absolute; z-index:7; top:2px; left:3.4vw; width:340px; height:150px; padding:0; display:flex; align-items:center; isolation:isolate; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transform:rotate(-2deg); transition:transform .35s ease; }
.logo:hover { transform:rotate(0deg) translateY(3px); }
.logo { color:var(--ink); }
.logo[data-ink="light"] { color:var(--paper); }
.logo[data-ink="light"] img { filter:url("#logo-light-ink"); }
.logo-ink-filter { position:absolute; pointer-events:none; }
.logo img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:left center; }
.nav nav { position:absolute; top:18px; left:54%; display:flex; align-items:center; gap:2px; padding:5px; white-space:nowrap; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--paper); background:rgba(23,32,24,.78); box-shadow:0 8px 25px rgba(23,32,24,.12); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); transform:translateX(-50%); }
.nav nav a { padding:11px clamp(10px,1vw,15px); border-radius:999px; transition:color .2s ease,background .2s ease,transform .2s ease; }
.nav nav a:hover { color:#fff; background:rgba(255,255,255,.14); }
.nav nav a:focus-visible { outline:2px solid var(--paper); outline-offset:2px; }
.nav-actions { position:absolute; top:18px; right:4.5vw; }
.nav-toggle { display:none; width:52px; height:52px; padding:0; place-items:center; align-content:center; gap:6px; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:var(--paper); background:rgba(23,32,24,.8); box-shadow:0 8px 25px rgba(23,32,24,.14); cursor:pointer; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav-toggle span { display:block; width:17px; height:1.5px; background:currentColor; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.nav.is-open .nav-toggle span:first-child { transform:translateY(3.75px) rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
.nav-toggle:focus-visible,.logo:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.logo:focus-visible { outline-color:currentColor; }
.hero,.manifesto,.work,.about,.contact { position:relative; isolation:isolate; overflow:hidden; }
.hero::after,.manifesto::after,.work::after,.about::after,.contact::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); background-size:170px 170px; }
.work::after { opacity:.17; mix-blend-mode:screen; }
.hero>*,.manifesto>*,.work>*,.about>*,.contact>* { position:relative; z-index:1; }
.hero { min-height:100svh; padding:clamp(160px,19vh,210px) 10vw 6vh; display:flex; flex-direction:column; justify-content:flex-start; background:radial-gradient(circle at 75% 30%,#dce64f 0 9%,transparent 30%),var(--lime); }
.hero #hero-toucans { position:absolute; z-index:2; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:0; transition:opacity .7s ease; }
.hero #hero-toucans.is-ready { opacity:1; }
.hero>#hero-exploration,.hero>#hero-night-scene { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.hero[data-hero-study="ratio"] { background:#dce1ef; }
.hero[data-hero-study="orbit"] { background:#f0e6d8; }
.hero[data-hero-study="folded"] { background:radial-gradient(circle at 75% 30%,#dce64f 0 9%,transparent 30%),var(--lime); }
.hero[data-hero-study="alley"],.hero[data-hero-study="corner"] { color:#f7f1e5; background:#050a12; }
.hero[data-hero-study="alley"]::before,.hero[data-hero-study="corner"]::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(2,7,13,.82) 0,rgba(2,7,13,.48) 42%,rgba(2,7,13,.07) 72%),linear-gradient(0deg,rgba(2,7,13,.5),transparent 42%); }
.hero[data-hero-study="alley"]::before { background:linear-gradient(90deg,rgba(2,7,13,.66) 0,rgba(2,7,13,.28) 42%,rgba(2,7,13,0) 72%),linear-gradient(0deg,rgba(2,7,13,.28),transparent 42%); }
.hero[data-hero-study="alley"]::after,.hero[data-hero-study="corner"]::after { z-index:2; opacity:.15; mix-blend-mode:screen; }
.hero[data-hero-study="alley"] h1,.hero[data-hero-study="corner"] h1 { text-shadow:0 3px 32px rgba(0,0,0,.48); }
.hero[data-hero-study="alley"] .hero-intro,.hero[data-hero-study="corner"] .hero-intro { padding:18px 20px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(3,10,18,.45); box-shadow:0 18px 50px rgba(0,0,0,.18); backdrop-filter:blur(10px); }
.hero[data-hero-study="alley"] .hero-intro { background:rgba(3,10,18,.34); }
.hero[data-hero-study="lightways"] { color:#fff8eb; background:#030c22 url('assets/experimentation/tokyo-lightways-extended-clean.jpg') center/cover; padding-bottom:150px; }
.hero[data-hero-study="lightways"]::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(1,7,20,.72),rgba(1,7,20,.45) 30%,rgba(1,7,20,.02) 68%),linear-gradient(180deg,rgba(1,6,20,.1),transparent 40%,rgba(1,7,20,.16)); transition:opacity .6s ease; }
.hero[data-hero-study="lightways"]::after { display:none; }
.hero[data-hero-study="lightways"] #hero-night-scene { opacity:0; transition:opacity 1s ease; }
.hero[data-hero-study="lightways"] #hero-night-scene.is-ready { opacity:1; }
.hero[data-hero-study="lightways"] h1 { max-width:790px; font-size:clamp(46px,5.6vw,84px); line-height:1.04; letter-spacing:-.035em; text-shadow:0 3px 26px rgba(0,0,0,.45); }
.hero[data-hero-study="lightways"] .hero-bottom { display:block; max-width:475px; }
.hero[data-hero-study="lightways"] .hero-intro { text-shadow:0 2px 12px #020714; }
@media(max-width:760px) { .hero[data-hero-study="lightways"] h1 { font-size:clamp(30px,10.4vw,62px); } .hero[data-hero-study="lightways"] .hero-bottom { max-width:100%; } }
@media(prefers-reduced-motion:reduce) { .hero[data-hero-study="lightways"] *,.hero[data-hero-study="lightways"]::before { transition:none; } }
.hero-study-picker { position:fixed; z-index:60; left:50%; bottom:16px; display:flex; align-items:center; gap:5px; padding:6px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:var(--paper); background:rgba(23,32,24,.86); box-shadow:0 10px 28px rgba(23,32,24,.2); backdrop-filter:blur(16px); transform:translate(-50%,12px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease,transform .25s ease,visibility .25s; }
.hero-study-picker.is-visible { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }
.hero-study-picker-label { padding:0 9px 0 7px; font:600 9px/1 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.hero-study-picker a { min-height:30px; padding:0 10px; display:grid; place-items:center; border-radius:999px; font:500 9px/1 'DM Mono',monospace; white-space:nowrap; }
.hero-study-picker a:hover { background:rgba(255,255,255,.14); }
.hero-study-picker a[aria-current="true"] { color:var(--ink); background:var(--lime); }
.hero-study-picker a:focus-visible { outline:2px solid var(--paper); outline-offset:2px; }
.hero.has-origami-target { cursor:pointer; }
.hero .origami-keyboard-control { position:absolute; z-index:4; width:48px; height:48px; padding:0; border:2px dashed var(--ink); border-radius:50%; background:transparent; transform:translate(-50%,-50%); pointer-events:none; opacity:0; }
.hero .origami-keyboard-control:focus-visible { opacity:1; outline:2px solid var(--paper); outline-offset:3px; }
.hero h1,.hero-bottom { z-index:3; }
.hero h1 { max-width:1180px; font-size:clamp(48px,7.6vw,112px); letter-spacing:-.04em; line-height:1; margin:0 0 clamp(32px,4vh,56px); font-weight:700; text-wrap:balance; }
.hero h1 em,h2 em { font-family:'Playfair Display',Georgia,serif; font-weight:500; }
.hero h1 em { display:inline-block; white-space:nowrap; letter-spacing:-.015em; }
.hero-bottom { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,520px); align-items:end; }
.hero-intro { grid-column:2; width:100%; }
.hero-bottom p { max-width:none; }
.hero-intro p { margin:0; }
.hero-intro p + p { margin-top:16px; }
.hero-bottom p,.large-copy,.section-head>p,.community-story p,.bread-copy>p:not(.bread-place):not(.bread-note),.about-copy>p,.contact-note { font-size:var(--body-copy-size); line-height:var(--body-copy-leading); }
@media (min-width:1200px) {
  .hero[data-hero-study="lightways"] { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(40px,4.5vw,88px); align-items:start; align-content:start; padding:clamp(150px,20svh,210px) 7vw 140px; }
  .hero[data-hero-study="lightways"] h1 { grid-column:1; grid-row:1; min-width:0; max-width:none; margin:0; font-size:clamp(44px,4.4vw,76px); line-height:1.06; }
  .hero[data-hero-study="lightways"] .hero-bottom { grid-column:2; grid-row:1; min-width:0; width:100%; max-width:560px; padding-top:6px; }
  .hero[data-hero-study="lightways"]::before { background:linear-gradient(90deg,rgba(1,7,20,.62),rgba(1,7,20,.22) 48%,rgba(1,7,20,.58)),linear-gradient(180deg,rgba(1,7,20,.3),transparent 75%); }
}
.manifesto { padding:135px 10vw; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,330px); gap:clamp(64px,8vw,130px); align-items:center; justify-content:center; }
.manifesto-copy { grid-column:1; grid-row:1; max-width:620px; }
.manifesto>#ai-particles { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.manifesto>.ai-particle-toggle { position:absolute; z-index:2; left:24px; bottom:24px; width:32px; height:32px; padding:0; display:grid; place-items:center; border:1px solid rgba(23,32,24,.28); border-radius:50%; color:var(--ink); background:rgba(244,241,233,.72); font:500 13px/1 'DM Mono',monospace; cursor:pointer; }
.ai-particle-toggle[hidden] { display:none; }
.ai-particle-toggle:hover { background:var(--paper); border-color:var(--ink); }
.ai-particle-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.manifesto h2,.about h2,.contact h2 { font-size:clamp(42px,6vw,87px); line-height:.96; letter-spacing:-.075em; margin:0; }
.large-copy { max-width:500px; margin:38px 0 0; }
.ai-phone { position:relative; grid-column:2; grid-row:1; justify-self:end; width:100%; max-width:330px; margin:0; isolation:isolate; }
.ai-phone-shell { position:relative; z-index:2; padding:25px 13px 24px; border:4px solid transparent; border-radius:47px 42px 51px 40px; background:#f1e7cd; box-shadow:10px 14px 12px rgba(48,49,46,.12); transform:rotate(-2.5deg); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease; }
.ai-phone:hover .ai-phone-shell { box-shadow:12px 17px 15px rgba(48,49,46,.14); transform:rotate(-1deg) translateY(-5px); }
.ai-phone-charcoal { position:absolute; z-index:3; top:-4px; left:-4px; width:calc(100% + 8px); height:calc(100% + 8px); overflow:visible; pointer-events:none; }
.ai-phone-shell::after { content:""; position:absolute; z-index:3; inset:25px 13px 24px; border:3px solid #30312e; border-radius:27px 23px 30px 24px; filter:url("#phone-charcoal"); pointer-events:none; }
.ai-phone-screen { position:relative; overflow:hidden; aspect-ratio:9 / 18.5; border:3px solid transparent; border-radius:27px 23px 30px 24px; background:#071424; }
.ai-phone-screen img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
.ai-phone figcaption { position:absolute; z-index:4; right:-26px; bottom:52px; padding:8px 12px; border:2px solid transparent; background:var(--lime); box-shadow:3px 4px 3px rgba(48,49,46,.13); font:500 9px/1.2 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; transform:rotate(4deg); }
.ai-phone figcaption::before { content:""; position:absolute; inset:-2px; border:2px solid #30312e; filter:url("#phone-charcoal"); pointer-events:none; }
.ai-phone-spark { position:absolute; z-index:4; top:42px; right:-58px; color:#ef7f69; font-family:'Playfair Display',Georgia,serif; font-size:64px; line-height:1; filter:url("#phone-charcoal"); transform:rotate(13deg); }
.ai-phone-loop { position:absolute; z-index:1; left:-42px; bottom:90px; width:92px; height:62px; border:3px solid #454641; border-color:#454641 transparent #454641 #454641; border-radius:50%; opacity:.62; filter:url("#phone-charcoal"); transform:rotate(22deg); }
.ai-phone-loop::after { content:""; position:absolute; right:-9px; bottom:-4px; width:20px; height:3px; background:#454641; transform:rotate(28deg); }
.work { background:#172018; color:#f6f4eb; padding:110px 10vw 132px; }
.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,270px); gap:5vw; align-items:start; margin-bottom:70px; }
.section-head h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(48px,6.4vw,92px); font-weight:500; letter-spacing:-.07em; line-height:.9; }
.section-head>p { max-width:270px; margin:0; }
.feature-card { margin:0; }
.feature-card img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.85); transition:filter .65s ease; }
.photo-atmosphere { position:relative; overflow:hidden; isolation:isolate; }
.photo-atmosphere.is-active>img { filter:saturate(1.04); }
.photo-atmosphere:focus-visible { outline:2px solid #f6f4eb; outline-offset:6px; }
.photo-atmosphere>canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; }
@media(prefers-reduced-motion:reduce) { .photo-atmosphere.is-active>img { filter:saturate(.85); } }
.large img { height:min(53vw,680px); }
.photo-caption { display:grid; grid-template-columns:clamp(42px,5vw,76px) minmax(0,520px); gap:clamp(12px,2vw,28px); align-items:start; padding:21px 0 54px; border-top:1px solid rgba(246,244,235,.38); }
.photo-caption::before { content:""; width:100%; height:1px; margin-top:.78em; background:currentColor; opacity:.72; }
.photo-caption p { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(17px,1.55vw,23px); font-weight:500; line-height:1.34; letter-spacing:-.025em; text-wrap:pretty; }
.large .photo-caption { grid-template-columns:minmax(70px,1fr) minmax(300px,520px); }
.large .photo-caption::before { width:min(100%,190px); justify-self:end; }
.work-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:5.5vw; align-items:start; }
.work-grid .photo-atmosphere>img { height:36vw; max-height:500px; }
.work-grid .shift { margin-top:15vw; }
.text-link { display:inline-block; border-bottom:1px solid currentColor; padding-bottom:6px; font-size:13px; font-weight:700; }
.text-link span,.linkedin-link span { margin-left:12px; }
.community { min-height:0; display:grid; align-content:center; padding:170px 10vw 80px; background:#29433b; color:#f5f2e9; position:relative; isolation:isolate; overflow:hidden; transition:background 1s cubic-bezier(.2,.8,.2,1); }
.community[data-theme="night"] { background:radial-gradient(circle at 34% 58%,rgba(49,79,112,.46),transparent 38%),radial-gradient(circle at 5% 5%,rgba(82,48,106,.32),transparent 34%),#0a1822; }
.community>* { position:relative; z-index:1; }
.community-copy { min-width:0; display:grid; align-content:center; gap:clamp(26px,3vw,40px); }
.community h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(40px,4.2vw,76px); font-weight:500; letter-spacing:-.075em; line-height:.96; }
.community-title-tail { display:block; white-space:nowrap; }
.community>.community-light-switch { position:absolute; z-index:3; top:174px; left:10vw; margin:0; }
.community-light-switch { flex:0 0 auto; width:58px; margin:5px 0 0; padding:0; display:grid; justify-items:center; gap:5px; border:0; color:inherit; background:transparent; font:500 8px/1 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.switch-label { position:relative; z-index:2; opacity:.45; transition:opacity .35s ease,color .35s ease; }
.switch-label-night { margin-top:7px; }
.switch-label-day,.community-light-switch[aria-pressed="true"] .switch-label-night { opacity:1; }
.community-light-switch[aria-pressed="true"] .switch-label-day { opacity:.45; }
.switch-plate { position:relative; width:50px; height:66px; display:grid; place-items:center; border:1px solid rgba(29,42,39,.38); border-radius:7px; background:linear-gradient(145deg,#fffceb 0%,#dfd8c7 72%,#bab09d 100%); box-shadow:0 9px 0 #172c2b,0 12px 18px rgba(5,16,20,.28),inset 2px 2px 1px rgba(255,255,255,.85); transform:perspective(140px) rotateY(-7deg) rotateX(3deg); transition:transform .28s ease,box-shadow .28s ease,background .6s ease; }
.community-light-switch:hover .switch-plate { transform:perspective(140px) rotateY(-3deg) rotateX(1deg) translateY(-2px); box-shadow:0 11px 0 #172c2b,0 15px 22px rgba(5,16,20,.34),inset 2px 2px 1px rgba(255,255,255,.85); }
.community-light-switch:focus-visible { outline:2px solid #f3d65c; outline-offset:7px; border-radius:6px; }
.switch-rocker { width:22px; height:38px; border:1px solid rgba(33,42,37,.42); border-radius:3px; background:linear-gradient(to bottom,#fffdf1 0 46%,#beb7a7 54% 100%); box-shadow:0 4px 4px rgba(25,31,27,.36),inset 0 1px rgba(255,255,255,.9); transform:perspective(40px) rotateX(-13deg) translateY(-1px); transition:transform .34s cubic-bezier(.2,.8,.2,1),background .34s ease,box-shadow .34s ease; }
.community-light-switch[aria-pressed="true"] .switch-plate { background:linear-gradient(145deg,#d8d5ca,#9c9e9b); box-shadow:0 6px 0 #172c2b,0 10px 16px rgba(5,16,20,.3),inset 2px 2px 1px rgba(255,255,255,.72); }
.community-light-switch[aria-pressed="true"] .switch-rocker { background:linear-gradient(to bottom,#a7a8a4 0 46%,#eeebdc 54% 100%); box-shadow:0 -3px 4px rgba(25,31,27,.3),inset 0 -1px rgba(255,255,255,.75); transform:perspective(40px) rotateX(14deg) translateY(1px); }
.switch-screw { position:absolute; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#8f8b80; box-shadow:inset 1px 1px rgba(255,255,255,.7); }
.switch-screw::after { content:""; position:absolute; top:2px; left:1px; width:3px; height:1px; background:rgba(44,45,42,.48); transform:rotate(-25deg); }
.switch-screw-top { top:5px; }
.switch-screw-bottom { bottom:5px; }
.community-layout { display:grid; grid-template-columns:minmax(0,1.48fr) minmax(280px,.52fr); gap:clamp(28px,3.5vw,52px); align-items:center; }
.community-workshop-stage { position:relative; width:100%; aspect-ratio:1.48; min-height:340px; max-height:430px; overflow:hidden; cursor:grab; touch-action:none; user-select:none; background:transparent; }
.community-workshop-stage:active { cursor:grabbing; }
#community-workshop-canvas { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; opacity:0; transition:opacity .55s ease; }
.community-workshop-stage.is-ready #community-workshop-canvas { opacity:1; }
.community-stories { display:grid; gap:clamp(24px,3vw,38px); align-content:center; }
.community-story { padding-top:16px; border-top:1px solid rgba(245,242,233,.42); }
.community-story p { max-width:460px; margin:0; text-wrap:pretty; }
.bread { min-height:0; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:3vw; padding:58px 7vw 56px 10vw; color:#352119; background:#ddc7a4; position:relative; overflow:hidden; isolation:isolate; }
.bread::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.17; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); background-size:180px 180px; }
.bread>* { position:relative; z-index:1; }
.bread-copy { max-width:470px; }
.bread-place,.bread-note { font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.bread-place { margin:0 0 27px; }
.bread h2 { margin:0; font-size:clamp(58px,7vw,104px); line-height:.86; letter-spacing:-.075em; }
.bread h2 em { font-family:'Playfair Display',Georgia,serif; font-weight:500; }
.bread-copy>p:not(.bread-place):not(.bread-note) { max-width:410px; margin:30px 0 22px; }
.bread-note { padding-top:20px; border-top:1px solid rgba(53,33,25,.35); width:max-content; }
.bread-stage { position:relative; width:100%; aspect-ratio:1.55; min-height:350px; max-height:440px; cursor:grab; touch-action:none; user-select:none; overflow:visible; background:transparent; }
.bread-stage:active { cursor:grabbing; }
#bread-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; opacity:0; transition:opacity .55s ease; }
.bread-stage.is-ready #bread-canvas { opacity:1; }
.bread-shuffle { position:absolute; z-index:3; top:50%; width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid rgba(53,33,25,.42); border-radius:50%; color:#352119; background:rgba(245,234,212,.54); box-shadow:0 8px 24px rgba(53,33,25,.1); font:400 22px/1 Montserrat,Arial,sans-serif; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(-50%); transition:opacity .3s ease,background-color .25s ease,transform .25s ease; backdrop-filter:blur(7px); }
.bread-stage.is-ready .bread-shuffle { opacity:1; pointer-events:auto; }
.bread-shuffle--previous { left:clamp(4px,3vw,46px); }
.bread-shuffle--next { right:clamp(4px,3vw,46px); }
.bread-shuffle:hover { background:rgba(250,242,225,.88); transform:translateY(-50%) scale(1.06); }
.bread-shuffle:focus-visible { outline:2px solid #352119; outline-offset:4px; }
.bread-stage.is-ready .bread-shuffle:disabled { cursor:default; opacity:.35; }
.bread-selection { position:absolute; z-index:2; left:50%; bottom:5px; margin:0; color:rgba(53,33,25,.72); font:500 9px/1.4 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; opacity:0; transform:translateX(-50%); transition:opacity .3s ease; }
.bread-stage.is-ready .bread-selection { opacity:1; }
.bread-shuffle[hidden],.bread-selection[hidden] { display:none; }
@media (min-width:651px) { .bread { overflow:visible; } .bread-stage { width:calc(100% + 10vw); margin-inline:-5vw; } }
.about { min-height:900px; padding:115px 8vw; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr); gap:8vw; align-items:center; }
.espresso-postcards { position:relative; min-height:680px; width:100%; }
.espresso-postcard { --tilt:0deg; --drag-x:0px; --drag-y:0px; --spin:0deg; position:absolute; margin:0; padding:10px 10px 28px; background:#faf3e4; border:1px solid rgba(50,38,25,.16); box-shadow:0 18px 38px rgba(36,25,17,.2),0 3px 8px rgba(36,25,17,.12); transform:translate3d(var(--drag-x),var(--drag-y),0) rotate(calc(var(--tilt) + var(--spin))); transform-origin:center; cursor:grab; touch-action:none; user-select:none; transition:box-shadow .18s ease; }
.espresso-postcard.is-dragging { cursor:grabbing; box-shadow:0 30px 55px rgba(36,25,17,.27),0 6px 12px rgba(36,25,17,.14); }
.espresso-postcard.is-moving { will-change:transform; }
.espresso-postcard img { width:100%; height:auto; display:block; pointer-events:none; user-select:none; }
.postcard-croissant { --tilt:-5.5deg; z-index:1; width:116%; top:-5%; left:-20%; }
.postcard-latte { --tilt:-1.5deg; z-index:4; width:92%; top:22%; left:-4%; }
.postcard-machine { --tilt:5deg; z-index:2; width:104%; right:-32%; bottom:-20%; }
.about-copy { position:relative; z-index:10; }
.about-copy>p { max-width:480px; margin:30px 0; }
.contact { min-height:620px; padding:126px 10vw 112px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:clamp(54px,8vw,130px); align-items:end; background:#d9b4a2; }
.contact-heading { position:relative; max-width:920px; }
.contact h2 { margin:0; }
.contact-action { position:relative; z-index:2; max-width:430px; padding-bottom:5px; }
.contact-note { max-width:350px; margin:0 0 30px; }
.linkedin-link { display:inline-flex; align-items:center; padding-bottom:7px; border-bottom:2px solid; font-size:clamp(21px,2.3vw,34px); font-weight:600; letter-spacing:-.055em; line-height:1.15; }
.linkedin-link span { display:inline-block; transition:transform .25s ease; }
.linkedin-link:hover span { transform:translate(3px,-3px); }
.linkedin-link:focus-visible { outline:2px solid currentColor; outline-offset:7px; }
.contact-crane-perch { --crane-extra-room:80px; position:absolute; right:calc(100% + clamp(18px,3vw,42px)); bottom:7px; width:clamp(220px,24vw,340px); height:calc(clamp(170px,18vw,235px) + var(--crane-extra-room)); pointer-events:none; }
.contact-crane { position:absolute; z-index:4; margin:0; padding:0; border:0; border-radius:8px; color:inherit; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.contact-crane[aria-disabled="true"] { pointer-events:none; }
.contact-crane-shadow { position:absolute; z-index:2; height:5px; border-radius:50%; background:rgba(56,30,23,.2); filter:blur(5px); pointer-events:none; }
.contact-crane:focus-visible { outline:1px solid rgba(23,32,24,.75); outline-offset:8px; }
.contact-crane[data-state="loading"] { visibility:hidden; }
#contact-crane-canvas { position:absolute; z-index:3; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.site-footer { padding:23px 4.5vw; background:#172018; color:#f4f1e9; font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.footer-meta { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer-meta a { border-bottom:1px solid transparent; transition:border-color .2s ease; }
.footer-meta a:hover { border-color:currentColor; }
.manifesto { content-visibility:auto; contain-intrinsic-size:auto 620px; }
.work { content-visibility:auto; contain-intrinsic-size:auto 1800px; }
.community { content-visibility:auto; contain-intrinsic-size:auto 720px; }
.bread { content-visibility:auto; contain-intrinsic-size:auto 630px; }
.about { content-visibility:auto; contain-intrinsic-size:auto 920px; }
.contact { content-visibility:auto; contain-intrinsic-size:auto 540px; }
.js .reveal { opacity:0; transform:translateY(34px); transition:opacity .72s ease, transform .8s cubic-bezier(.2,.8,.2,1); will-change:opacity,transform; }
.js .reveal.from-top { transform:translateY(-34px); }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
@media (max-width:1100px) {
  html { scroll-padding-top:104px; }
  .nav { height:92px; padding:14px 5vw; align-items:flex-start; }
  .logo { top:-2px; left:4vw; width:270px; height:108px; }
  .nav nav { top:82px; left:auto; right:5vw; width:min(360px,90vw); padding:9px; display:flex; flex-direction:column; align-items:stretch; gap:2px; border-radius:24px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top right; transition:opacity .24s ease,visibility .24s ease,transform .28s cubic-bezier(.2,.8,.2,1); }
  .nav nav a { display:flex; justify-content:space-between; align-items:center; width:100%; padding:13px 15px; font-size:13px; }
  .nav nav a:not(:last-child)::after { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.32; }
  .nav.is-open nav { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
  .nav-actions { top:14px; right:5vw; }
  .nav-toggle { display:grid; }
  .hero { min-height:100svh; padding:clamp(150px,19vh,185px) 8vw 6vh; }
  .hero h1 { font-size:clamp(52px,8.4vw,88px); }
  .hero-bottom { grid-template-columns:minmax(0,1fr) minmax(300px,460px); }
  .manifesto { padding:110px 8vw; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:clamp(52px,7vw,84px); }
  .work { padding:100px 8vw 115px; }
  .community { padding:148px 8vw 64px; }
  .community>.community-light-switch { top:142px; left:8vw; }
  .bread { padding:54px 6vw 50px 8vw; gap:2vw; }
  .about { padding:100px 7vw; gap:5vw; }
  .espresso-postcards { min-height:620px; }
  .postcard-croissant { width:110%; top:0; left:-12%; z-index:1; }
  .postcard-latte { width:90%; top:30%; left:2%; right:auto; bottom:auto; z-index:5; }
  .postcard-machine { width:102%; top:16%; right:-24%; left:auto; bottom:auto; z-index:2; }
}
@media (max-width:850px) {
  .manifesto { display:flex; flex-direction:column; align-items:flex-start; gap:68px; }
  .manifesto-copy { order:1; }
  .ai-phone { order:2; align-self:center; width:min(52vw,300px); }
  .community { min-height:0; }
  .community-copy { grid-row:1; max-width:650px; gap:28px; }
  .community h2 { padding-left:84px; font-size:clamp(52px,8vw,68px); }
  .community-layout { grid-template-columns:1fr; gap:28px; }
  .community-workshop-stage { min-height:0; max-height:390px; aspect-ratio:1.5; }
  .community-stories { grid-template-columns:1fr; gap:24px; }
  .community-story p { max-width:620px; }
  .bread { min-height:auto; grid-template-columns:1fr; gap:14px; padding:52px 7vw 40px; overflow:hidden; }
  .bread-copy { max-width:600px; }
  .bread-copy>p:not(.bread-place):not(.bread-note) { max-width:560px; }
  .bread-stage { width:100%; min-height:0; max-height:none; margin-inline:0; aspect-ratio:1.9; }
  .about { min-height:auto; display:flex; flex-direction:column; align-items:stretch; gap:48px; }
  .espresso-postcards { order:1; min-height:620px; }
  .about-copy { order:2; max-width:620px; }
  .postcard-croissant { width:78%; top:0; left:-4%; }
  .postcard-latte { width:68%; top:29%; left:24%; right:auto; z-index:5; }
  .postcard-machine { width:74%; top:14%; right:-4%; left:auto; z-index:2; }
}
@media (max-width:650px) {
  html { scroll-padding-top:96px; }
  .nav { height:86px; padding:12px 4vw; }
  .logo { top:0; left:4vw; width:215px; height:78px; }
  .nav nav { top:76px; right:4vw; width:92vw; max-height:calc(100svh - 92px); overflow-y:auto; }
  .nav-actions { top:12px; right:4vw; }
  .nav-toggle { width:52px; height:52px; }
  .hero { min-height:100svh; padding:clamp(132px,18vh,160px) 7vw 5vh; }
  .hero-study-picker { bottom:10px; max-width:94vw; overflow-x:auto; }
  .hero-study-picker-label { display:none; }
  .hero h1 { font-size:clamp(34px,10.8vw,62px); margin-bottom:32px; }
  .hero-bottom { display:block; }
  .hero-intro { width:100%; }
  .manifesto,.about { padding:82px 7vw; }
  .manifesto { gap:58px; }
  .ai-phone { width:min(66vw,260px); }
  .ai-phone figcaption { right:-18px; }
  .ai-phone-spark { right:-43px; }
  .manifesto h2,.about h2,.contact h2 { font-size:clamp(46px,14vw,68px); }
  .large-copy { margin-top:30px; }
  .work { padding:80px 7vw 92px; }
  .section-head { display:block; margin-bottom:45px; }
  .section-head h2 { margin-bottom:28px; font-size:clamp(48px,15vw,68px); }
  .section-head>p { max-width:440px; }
  .large img { height:62vw; min-height:230px; }
  .photo-caption,.large .photo-caption { grid-template-columns:34px minmax(0,1fr); gap:14px; padding:16px 0 42px; }
  .large .photo-caption::before { width:100%; justify-self:auto; }
  .photo-caption p { font-size:16px; line-height:1.38; }
  .work-grid { display:block; }
  .work-grid .photo-atmosphere>img { height:67vw; min-height:240px; }
  .work-grid .shift { margin-top:30px; }
  .community { padding:128px 7vw 50px; }
  .community-copy { gap:26px; }
  .community h2 { padding-left:72px; font-size:clamp(36px,10.5vw,54px); }
  .community>.community-light-switch { top:132px; left:7vw; width:48px; }
  .switch-plate { width:42px; height:56px; box-shadow:0 7px 0 #172c2b,0 10px 15px rgba(5,16,20,.28),inset 2px 2px 1px rgba(255,255,255,.85); }
  .switch-rocker { width:19px; height:32px; }
  .community-layout { gap:24px; }
  .community-workshop-stage { max-height:none; aspect-ratio:1.16; }
  .community-stories { grid-template-columns:1fr; gap:18px; }
  .community-story { padding-top:12px; }
  .community-story p { margin:0; }
  .bread { padding:46px 7vw 10px; gap:0; }
  .bread h2 { font-size:clamp(54px,16vw,76px); }
  .bread-copy>p:not(.bread-place):not(.bread-note) { margin-top:30px; }
  .bread-stage { min-height:0; aspect-ratio:1.4; }
  .bread-shuffle { width:42px; height:42px; }
  .bread-shuffle--previous { left:0; }
  .bread-shuffle--next { right:0; }
  .bread-selection { bottom:0; max-width:68%; overflow:hidden; text-overflow:ellipsis; }
  .espresso-postcards { min-height:470px; margin-bottom:12px; }
  .espresso-postcard { padding:7px 7px 20px; }
  .postcard-croissant { width:108%; top:0; left:-24%; }
  .postcard-latte { width:94%; top:27%; left:14%; right:auto; z-index:5; }
  .postcard-machine { width:102%; top:13%; right:-28%; left:auto; z-index:2; }
  .about-copy { margin-top:0; }
  .contact { min-height:0; padding:150px 7vw 32px; grid-template-columns:1fr; gap:54px; }
  .contact-action { width:calc(100% - 118px); max-width:520px; margin-left:118px; }
  .linkedin-link { font-size:20px; line-height:1.25; }
  .contact-crane-perch { --crane-extra-room:42px; right:100%; bottom:7px; width:122px; height:150px; }
  .site-footer { padding:20px 7vw; }
  .footer-meta { gap:20px; }
}
@media (max-width:390px) {
  .hero h1 { font-size:10.8vw; }
  .logo { width:195px; }
  .espresso-postcards { min-height:430px; }
  .postcard-croissant { width:112%; }
  .postcard-latte { width:98%; top:29%; }
  .postcard-machine { width:106%; right:-32%; }
}