@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:200 500;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-semibold.ttf') format('truetype');font-style:normal;font-weight:550 800;font-display:swap}
:root{--paper:#faf7ee;--ink:#15372f;--muted:#686e64;--accent:#ad4b30;--sage:#e7ebdb;--line:#dcded1;--font:'Avenir Next',Manrope,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}button{border:0}::selection{background:#d7dfc6}.wrap{width:min(1260px,calc(100% - 100px));margin-inline:auto}.skip-link{position:fixed;top:-80px;left:20px;background:var(--ink);color:white;padding:12px;z-index:20}.skip-link:focus{top:15px}.site-header{display:flex;align-items:center;justify-content:space-between;height:100px;position:relative;z-index:2}.name{font-size:16px;font-weight:500;letter-spacing:-.02em}.name-dot{color:var(--accent)}nav{display:flex;gap:34px;font-size:14px;font-weight:500}nav a{padding-block:8px;border-bottom:1px solid transparent}nav a:hover{border-color:var(--accent)}
.hero{position:relative;min-height:660px}.hero-copy{position:relative;z-index:2;padding-top:59px;pointer-events:none;width:58%}h1,h2,p{margin:0}h1{font-weight:600;letter-spacing:-.065em;line-height:1.08;font-size:clamp(64px,7vw,96px)}.period{color:var(--ink)}.hero-copy p{font-size:clamp(18px,1.9vw,25px);margin-top:24px;letter-spacing:-.035em}.sketch-scene{position:absolute;inset:0;isolation:isolate;pointer-events:none}.interest{position:absolute;opacity:0;transform:translateY(7px) rotate(-.7deg);transition:opacity 4.8s ease-in-out,transform 7s ease-in-out,filter 4s ease;filter:blur(1.3px);mix-blend-mode:multiply;will-change:opacity;pointer-events:none}.interest.visible{opacity:.95;transform:translateY(0) rotate(0);filter:blur(0)}.drawing{width:100%;aspect-ratio:1;background-image:url('assets/hero-atlas.png');background-size:300% 200%;background-repeat:no-repeat;mask-image:radial-gradient(ellipse at center,#000 56%,transparent 77%)}.squash{width:43%;left:54%;top:-5%}.squash .drawing{background-position:0 0}.sound{width:30%;left:-2%;top:42%}.sound .drawing{background-position:50% 0}.notes{width:28%;left:33%;top:42%}.notes .drawing{background-position:100% 0}.nature{width:43%;left:54%;top:-5%}.nature .drawing{background-position:0 100%}.conversation{width:28%;left:70%;top:47%}.conversation .drawing{background-position:50% 100%}.building{width:28%;left:33%;top:42%}.building .drawing{background-position:100% 100%}.annotation{position:absolute;font-family:'Segoe Print','Bradley Hand',cursive;font-size:19px;line-height:1.3;letter-spacing:.015em;transform:rotate(-5deg);color:#5d675d;white-space:nowrap;opacity:.85}.squash .annotation{top:53%;left:61%}.sound .annotation{top:80%;left:27%}.notes .annotation{bottom:5%;left:23%}.nature .annotation{top:0;left:0;font-size:16px}.conversation .annotation{bottom:0;left:12%}.building .annotation{top:0;left:20%}.connecting-line{position:absolute;width:100%;height:100%;z-index:-1;overflow:visible}.connecting-line path{fill:none;stroke:#bd8e76;stroke-width:1.3;stroke-dasharray:1400;stroke-dashoffset:1400;opacity:.42;animation:thread 28s ease-in-out infinite}.hero-bottom{position:absolute;bottom:8px;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:16px;color:var(--muted);font-size:12px}.motion-toggle{background:none;display:flex;gap:7px;align-items:center;padding:10px 0 10px 10px;font-size:12px;color:var(--muted)}.motion-toggle:hover{color:var(--ink)}.motion-symbol{font-size:13px;min-width:12px}.animation-paused .connecting-line path{animation-play-state:paused}.animation-paused .interest{transition:none}
@keyframes thread{0%,9%{stroke-dashoffset:1400;opacity:0}34%,65%{stroke-dashoffset:0;opacity:.38}88%,100%{stroke-dashoffset:-1400;opacity:0}}
.workshop{padding-block:52px 76px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:30px}h2{font-size:clamp(28px,3.1vw,42px);line-height:1.2;letter-spacing:-.05em;font-weight:500}.section-aside{font-size:13px;color:var(--muted);white-space:nowrap}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-card{display:block;text-align:left;padding:0;background:#fbf8ee;border:1px solid #e5e3d8;border-radius:5px;overflow:hidden;box-shadow:0 3px 5px #24312607;transition:transform .35s,box-shadow .35s}.project-card:hover{transform:translateY(-5px);box-shadow:0 9px 20px #2431260c}.project-art{display:block;width:100%;aspect-ratio:1.42;background-image:url('assets/project-art.png');background-size:300% auto;background-repeat:no-repeat}.art-sound{background-position:0 50%;background-color:#182033}.art-notes{background-position:50% 50%;background-color:#c87552}.art-decisions{background-position:100% 50%;background-color:#bbd2dd}.project-body{display:flex;align-items:center;justify-content:space-between;padding:20px 23px 21px}.project-title,.project-status{display:block}.project-title{font-size:21px;font-weight:550;letter-spacing:-.035em}.project-status{font-size:13px;color:var(--muted);margin-top:4px}.card-arrow{font-size:25px;font-weight:300;transition:transform .3s}.project-card:hover .card-arrow{transform:translate(2px,-2px)}
.questions{background:var(--sage);padding:53px 0 67px}.questions .section-heading{margin-bottom:43px}.question-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-inline:35px}.question-card{position:relative;text-align:left;display:flex;flex-direction:column;min-height:246px;padding:27px 39px 23px;background:#fbf5e8;box-shadow:1px 6px 11px #29342410;transform:rotate(-1.5deg);transition:transform .35s,box-shadow .35s;border-radius:2px}.question-insight{background:#efeaf4;transform:rotate(1.1deg)}.question-card:hover{transform:rotate(0) translateY(-3px);box-shadow:1px 9px 20px #29342414}.tape{position:absolute;width:84px;height:25px;background:#dfc9a786;top:-12px;left:43%;transform:rotate(3deg);border-inline:1px solid #e5d9b8aa;backdrop-filter:blur(1px)}.question-insight .tape{transform:rotate(-4deg)}.question-number{font-size:12px;color:#76766a;letter-spacing:.04em}.question-text{display:block;font-size:clamp(24px,2.4vw,33px);line-height:1.35;letter-spacing:-.04em;font-weight:450;margin-block:20px 26px}.question-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;font-size:12px;color:#78786c}.question-foot>span{font-size:21px;color:var(--ink)}
.hello{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding-block:67px 68px;min-height:430px}.conversation-art{display:block;width:100%;height:auto;mix-blend-mode:multiply}.hello h2{font-size:clamp(37px,4vw,56px);line-height:1.15;margin:15px 0 19px}.eyebrow{font-size:12px;letter-spacing:.05em;color:var(--muted)}.hello-copy>p{font-size:15px;color:var(--muted);line-height:1.75}.hello-link{display:inline-block;font-size:24px;color:var(--accent);letter-spacing:-.035em;margin-top:21px;border-bottom:1px solid #ad4b3070;padding-bottom:5px}.hello-link span{display:inline-block;margin-left:14px;transition:transform .3s}.hello-link:hover span{transform:translate(3px,-3px)}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding-block:25px 30px;font-size:12px;color:var(--muted)}
.detail-dialog{color:var(--ink);background:var(--paper);border:1px solid #d5d9cc;border-radius:10px;padding:54px 48px 43px;width:min(620px,calc(100% - 32px));max-height:85dvh;box-shadow:0 20px 90px #182e2633}.detail-dialog::backdrop{background:#182c256b;backdrop-filter:blur(4px)}.detail-dialog h2{margin:15px 0 24px;font-size:36px}.detail-dialog p+p{margin-top:18px}.detail-dialog #detail-content{font-size:16px;color:#596258}.close-dialog{position:absolute;right:18px;top:12px;width:38px;height:38px;font-size:28px;background:transparent;font-weight:300}.detail-link{display:inline-block;color:var(--accent);margin-top:25px;border-bottom:1px solid var(--accent)}.detail-link[hidden]{display:none}
@media(min-width:1500px){.hero{min-height:700px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero{min-height:590px}.hero-copy{padding-top:55px}h1{font-size:72px}.hero-copy p{font-size:20px}.annotation{font-size:16px}.section-aside{display:none}.project-grid{gap:16px}.project-body{padding:16px}.project-title{font-size:18px}.question-grid{padding-inline:15px;gap:30px}.question-card{padding-inline:28px}.hello{gap:25px}.hero-bottom{font-size:11px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.site-header{height:80px}.name{font-size:14px}nav{gap:17px;font-size:12px}nav a:first-child{display:none}.hero{min-height:660px}.hero-copy{width:100%;padding-top:26px}h1{font-size:clamp(52px,11.8vw,76px);letter-spacing:-.065em}.hero-copy p{font-size:17px;margin-top:18px}.sketch-scene{top:200px;bottom:36px;left:-15px;right:-15px}.squash{width:75%;left:22%;top:0}.nature{width:76%;left:25%;top:0}.sound{width:61%;left:-7%;top:37%}.notes,.building{width:62%;left:37%;top:48%}.conversation{width:62%;left:0;top:40%}.annotation{font-size:14px}.sound .annotation{top:80%;left:24%}.squash .annotation{top:53%;left:61%}.notes .annotation{left:15%;bottom:0}.hero-bottom{align-items:end;bottom:0}.motion-toggle{font-size:11px}.workshop{padding-block:43px 49px}.section-heading{margin-bottom:24px}h2{font-size:30px}.project-grid{grid-template-columns:1fr;gap:23px}.project-art{aspect-ratio:1.75}.project-title{font-size:22px}.project-body{padding:18px 21px}.project-status{font-size:13px}.questions{padding:40px 0 47px}.questions .section-heading{margin-bottom:33px}.question-grid{grid-template-columns:1fr;gap:34px;padding-inline:8px}.question-card{min-height:222px;padding:25px 28px 22px}.question-text{font-size:28px;margin-block:18px 25px}.hello{grid-template-columns:1fr;gap:5px;padding-block:37px 48px}.conversation-art{width:85%;margin-inline:auto}.hello-copy{padding-left:9px}.hello h2{font-size:42px}.site-footer{flex-wrap:wrap;row-gap:12px}.site-footer>span:nth-child(2){order:3;width:100%}.detail-dialog{padding:49px 28px 33px}.detail-dialog h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.connecting-line{display:none}}

body:has(.detail-dialog[open]){overflow:hidden}
.interest:nth-child(2n){transition-delay:.6s}.interest:nth-child(3n){transition-delay:1.2s}

/* Additional sketches share the established hero positions. */
.contraption,.rest{width:43%;left:54%;top:-5%}
.play{width:30%;left:-2%;top:42%}
.perspective{width:28%;left:33%;top:42%}
.reminder{width:28%;left:70%;top:40%}
.contraption .drawing,.play .drawing,.perspective .drawing,.reminder .drawing,.rest .drawing{background-size:100% 100%;background-position:center}
.contraption .drawing{background-image:url('assets/hero-contraption.png')}
.play .drawing{background-image:url('assets/hero-play.png')}
.perspective .drawing{background-image:url('assets/hero-perspective.png')}
.reminder .drawing{background-image:url('assets/hero-reminder.png')}
.rest .drawing{background-image:url('assets/hero-rest.png')}
.contraption .annotation{top:0;left:0;font-size:16px}
.play .annotation{top:87%;left:0;width:100%;text-align:center;white-space:normal}
.perspective .annotation{top:0;left:6%}
.reminder .annotation{top:0;left:0;font-size:22px}
.rest .annotation{top:0;left:25%}
@media(max-width:700px){
  .contraption,.rest{width:76%;left:25%;top:0}
  .play{width:61%;left:-7%;top:37%}
  .perspective{width:62%;left:37%;top:48%}
  .reminder{width:58%;left:39%;top:40%}
  .contraption .annotation{left:0;font-size:20px}
  .rest .annotation{left:15%}
  .play .annotation{left:4%}
  .perspective .annotation{left:1%}
  .reminder .annotation{left:0;font-size:24px}
}

/* Text follows the illustration silhouette; paths themselves stay invisible. */
.curved-annotation{width:100%;height:100%;overflow:visible;transform:none;fill:currentColor}

/* A quiet carousel retaining the two paper-card composition. */
.question-card[hidden],.question-controls button[hidden]{display:none}
.question-carousel .question-grid{min-height:280px;align-items:stretch}
.question-carousel .question-card{min-height:280px}
.question-play{background:#f5eddf;transform:rotate(-1deg)}
.question-depth{background:#eaf0ec;transform:rotate(1.2deg)}
.question-village{background:#f1e5de;transform:rotate(-.8deg)}
.question-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:24px 35px 0;color:var(--muted)}
.question-position{font-size:11px;letter-spacing:.08em;margin-right:10px}
.question-controls button{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #65725b30;border-radius:50%;background:transparent;color:#58634f;font-size:20px;transition:background .2s,border-color .2s}
.question-controls button:hover{background:#ffffff65;border-color:#65725b70}
.question-controls .question-rotation{font-size:12px;width:30px;height:30px;border-color:transparent}
@media(max-width:1050px){.question-carousel .question-grid,.question-carousel .question-card{min-height:300px}.question-controls{padding-inline:15px}}
@media(max-width:700px){.question-carousel .question-grid,.question-carousel .question-card{min-height:280px}.question-controls{padding:23px 8px 0}.question-carousel .question-text{font-size:28px}}

@media(max-width:700px){.nature .annotation{font-size:20px}}

/* Mobile has one illustration stage, with copy and controls in normal flow. */
.mobile-sketch-caption{display:none}
@media(max-width:700px){
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero .hero-copy{flex-shrink:0}
  .hero .sketch-scene{position:relative;inset:auto;width:min(100%,340px);aspect-ratio:1;margin:20px auto 0;flex-shrink:0}
  .hero .sketch-scene .interest{inset:0;width:100%;height:100%;transform:none;filter:none;visibility:hidden;opacity:0;transition:opacity .6s ease;transition-delay:0}
  .hero .sketch-scene .interest.visible{visibility:visible;opacity:.95}
  .hero.sketch-changing .sketch-scene .interest.visible{opacity:0}
  .hero .interest .annotation,.hero .connecting-line{display:none}
  .hero .mobile-sketch-caption{display:block;align-self:center;width:100%;max-width:34ch;min-height:3em;margin:10px 0 0;padding:0 8px;font-family:'Segoe Print','Bradley Hand',cursive;font-size:16px;line-height:1.5;letter-spacing:.015em;text-align:center;color:#5d675d;transform:rotate(-3deg);transition:opacity .6s ease}
  .hero.sketch-changing .mobile-sketch-caption{opacity:0}
  .hero .hero-bottom{position:static;flex-shrink:0;margin-top:10px;min-height:44px;align-items:center}
  .hero .motion-toggle{min-height:44px;padding:10px 0 10px 10px}
}