@layer base, layout, components, motion;

@layer base {
  :root { --paper:#f5f0e8; --paper-light:#faf7f1; --ink:#242923; --muted:#676b60; --green:#7e9a83; --green-dark:#355340; --orange:#d8583d; --line:#d7d4c9; --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif; --serif:Georgia,"Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
  body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.1; background:repeating-linear-gradient(90deg,transparent 0 3px,#fff 4px 5px); mix-blend-mode:soft-light; }
  img { display:block; max-width:100%; }
  a { color:inherit; }
  button,input,select,textarea { font:inherit; }
  button { cursor:pointer; }
  h1,h2,h3,p,figure { margin:0; }
  h1,h2 { font-weight:400; letter-spacing:-.055em; }
  h1 em,h2 em { color:var(--green-dark); font-family:var(--serif); font-weight:400; }
  ::selection { background:#d8e2d2; color:var(--ink); }
  :focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
  .skip-link { position:fixed; z-index:100; top:-100px; left:20px; padding:12px 18px; background:var(--green-dark); color:#fff; }
  .skip-link:focus { top:15px; }
}

@layer layout {
  .site-header { position:relative; z-index:30; width:min(100% - 8vw,1500px); height:104px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
  .wordmark { display:inline-flex; align-items:center; width:152px; }
  .wordmark img { width:100%; height:auto; }
  .primary-nav { display:flex; align-items:center; gap:clamp(24px,3vw,52px); }
  .primary-nav a { font-size:13px; text-decoration:none; transition:color .2s; }
  .primary-nav a:hover { color:var(--orange); }
  .primary-nav .nav-contact { border:1px solid var(--green-dark); border-radius:100px; padding:12px 20px; }
  .primary-nav .nav-contact:hover { background:var(--green-dark); color:#fff; }
  .menu-toggle { display:none; }
  .site-main { position:relative; overflow:hidden; }
  .story-section { position:relative; }
  .story-section > *:not(.story-thread) { position:relative; z-index:2; }
  .story-thread { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .story-thread__guide,.story-thread__draw,.story-thread__mask { fill:none; vector-effect:non-scaling-stroke; }
  .story-thread__guide { stroke:var(--orange); stroke-width:1.25; opacity:.13; }
  .story-thread__draw { stroke:var(--orange); stroke-width:2; stroke-dasharray:7 8; stroke-linecap:round; }
  .story-thread__mask { stroke:#fff; stroke-width:16; stroke-linecap:round; }
  .story-thread__machine { filter:drop-shadow(0 1px 1px #24352824); }
  .story-thread__body { fill:var(--paper); stroke:var(--green-dark); stroke-width:1.4; stroke-linejoin:round; }
  .story-thread__needle { fill:var(--green-dark); stroke:none; }
  .story-thread__foot { fill:none; stroke:var(--green-dark); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .story-thread__eye { fill:var(--paper); stroke:var(--green-dark); stroke-width:.7; }
  .story-thread__loose { fill:none; stroke:var(--orange); stroke-width:1.35; stroke-linecap:round; }
  .story-thread__point { fill:var(--orange); }
  .hero { min-height:min(840px,calc(100svh - 104px)); display:grid; grid-template-columns:45% 55%; width:min(100% - 8vw,1500px); margin:auto; align-items:center; padding:74px 0 110px; }
  .hero__copy { padding:0 8vw 35px 0; }
  .hero__copy h1 { max-width:690px; font-size:clamp(66px,7.2vw,120px); line-height:.98; margin:30px 0 35px; }
  .hero__copy h1 em { display:block; }
  .hero__copy .intro { max-width:420px; font-size:clamp(17px,1.6vw,20px); line-height:1.65; }
  .hero__copy .text-link { margin-top:36px; }
  .hero__media { height:min(660px,60vw); position:relative; }
  .hero__image { position:absolute; }
  .hero__image--main { width:79%; height:89%; top:0; right:0; }
  .hero__image--small { width:43%; height:43%; left:0; bottom:0; border:10px solid var(--paper); border-left:0; border-bottom:0; }
  .hero__image img { width:100%; height:100%; object-fit:cover; }
  .hero__image--main img { object-position:50% 50%; }
  .hero__image--small img { object-position:55% 50%; }
  .hero__image figcaption { position:absolute; bottom:15px; right:15px; padding:8px 10px; background:var(--paper); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
  .scroll-cue { position:absolute!important; left:0; bottom:45px; font:10px var(--mono); text-decoration:none; letter-spacing:.18em; text-transform:uppercase; }
  .scroll-cue span { font:23px var(--sans); margin-right:9px; vertical-align:-3px; color:var(--orange); }
  .chapter { min-height:850px; display:flex; align-items:center; padding:130px 0; }
  .chapter:nth-of-type(even) { background:var(--paper-light); }
  .chapter__inner,.selected__inner,.about__inner,.contact__inner { width:min(100% - 8vw,1500px); margin:auto; }
  .chapter__inner { display:grid; grid-template-columns:38% 62%; align-items:center; gap:0; }
  .chapter__copy { max-width:520px; padding-right:5vw; }
  .chapter__copy h2 { font-size:clamp(66px,6.9vw,108px); line-height:1.02; margin:30px 0 32px; }
  .chapter__copy h2 em { display:block; }
  .chapter__copy > p:not(.eyebrow) { max-width:370px; font-size:18px; line-height:1.7; }
  .chapter__copy .chapter__meta { color:var(--muted); font-size:12px!important; letter-spacing:.05em; margin-top:28px; }
  .chapter__copy .text-link { margin-top:34px; }
  .chapter__media--overlap { position:relative; height:650px; }
  .media-frame { position:relative; }
  .media-frame img { width:100%; height:100%; object-fit:cover; }
  .media-frame figcaption { position:absolute; bottom:16px; left:16px; padding:8px 10px; background:var(--paper); font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
  .media-frame--portrait { width:57%; height:85%; position:absolute; top:0; left:8%; }
  .media-frame--detail { width:55%; height:46%; position:absolute; bottom:0; right:0; border:9px solid var(--paper); border-right:0; border-bottom:0; }
  .chapter--custom { min-height:970px; }
  .process-images { position:relative; height:680px; display:grid; grid-template-columns:1.2fr .75fr; grid-template-rows:1fr 1fr; gap:15px; }
  .process-images__main { grid-row:1/3; }
  .process-images .media-frame:nth-child(2) img { object-position:54% 50%; }
  .process-images .media-frame:nth-child(3) img { object-position:50% 32%; }
  .chapter--material { min-height:760px; }
  .chapter__material-image { height:560px; margin-left:7%; }
  .chapter__material-image img { object-position:center; }
  .selected { padding:160px 0 180px; min-height:900px; background:#e9eee6; }
  .selected__heading { margin-bottom:60px; }
  .selected__heading h2 { font-size:clamp(72px,8vw,130px); line-height:1; margin-top:20px; }
  .selected__body { display:grid; grid-template-columns:48% 52%; gap:7%; align-items:center; }
  .work-list { padding-right:5%; }
  .work-list__item { width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:15px; padding:26px 0; background:transparent; border:0; border-top:1px solid #a7b6a5; text-align:left; color:var(--ink); }
  .work-list__item:last-of-type { border-bottom:1px solid #a7b6a5; }
  .work-list__item span,.work-list__item small { font:11px var(--mono); color:var(--muted); }
  .work-list__item strong { font-weight:400; font-size:clamp(30px,3vw,46px); letter-spacing:-.045em; transition:transform .25s,color .25s; }
  .work-list__item:hover strong,.work-list__item[aria-pressed="true"] strong { transform:translateX(10px); color:var(--green-dark); }
  .selected__link { margin-top:35px; }
  .selected__image { height:520px; position:relative; }
  .selected__image img { width:100%; height:100%; object-fit:cover; object-position:center; }
  .selected__image figcaption { position:absolute; bottom:16px; left:16px; background:var(--paper); padding:8px 10px; font:10px var(--mono); text-transform:uppercase; }
  .about { padding:175px 0 185px; }
  .about__inner { position:relative; max-width:1100px; }
  .about h2 { max-width:940px; font-size:clamp(70px,8vw,128px); line-height:1.03; margin:28px 0 45px; }
  .about h2 em { white-space:nowrap; }
  .about__inner > p:not(.eyebrow) { max-width:640px; margin-left:25%; font-size:clamp(19px,2vw,25px); line-height:1.6; }
  .about .text-link { margin:38px 0 0 25%; }
  .about__signet { width:112px; height:auto; position:absolute; right:4%; bottom:0; opacity:.42; }
  .contact { padding:150px 0 110px; background:var(--green-dark); color:var(--paper-light); }
  .contact__inner { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px 60px; }
  .contact .eyebrow { grid-column:1/-1; color:#ceddca; }
  .contact h2 { grid-column:1/-1; max-width:1020px; font-size:clamp(75px,8.5vw,132px); line-height:1.03; background:var(--green-dark); }
  .contact h2 em { color:#e7bfae; }
  .contact__inner > p:not(.eyebrow) { max-width:560px; font-size:20px; line-height:1.65; }
  .contact__cta { grid-column:2; grid-row:3; display:inline-flex; align-items:center; justify-content:space-between; gap:42px; min-width:250px; padding:21px 27px; border-radius:100px; background:var(--orange); color:#fff; font-size:16px; text-decoration:none; transition:background .2s,transform .2s; }
  .contact__cta:hover { background:#b84934; transform:translateY(-3px); }
  .contact__cta span { font-size:22px; }
  .contact__email { grid-column:2; grid-row:4; justify-self:end; margin-top:-17px; color:#ceddca; font:12px var(--mono)!important; }
  .site-footer { width:min(100% - 8vw,1500px); margin:auto; display:flex; align-items:center; gap:30px; padding:45px 0; font-size:11px; color:var(--muted); }
  .site-footer img { width:100px; height:auto; }
  .site-footer p:nth-of-type(2) { margin-left:auto; }
  .site-footer a { text-decoration:none; }
  .site-footer a:hover { text-decoration:underline; }
  .footer-links { display:flex; gap:25px; }
  .site-footer--dark { display:block; width:100%; padding:0; background:var(--green-dark); color:#ceddca; }
  .site-footer__inner { width:min(100% - 8vw,1500px); margin:auto; display:flex; align-items:center; gap:30px; border-top:1px solid #79907e; padding:36px 0 42px; }
  .site-footer--dark .site-footer__inner > a { margin-left:0; }
}

@layer components {
  .eyebrow { font:11px var(--mono); text-transform:uppercase; letter-spacing:.19em; color:var(--green-dark); }
  .chapter-number { color:var(--orange); margin-right:18px; }
  .text-link { display:inline-flex; gap:28px; align-items:center; width:max-content; text-decoration:none; font-size:14px; border-bottom:1px solid currentColor; padding-bottom:9px; }
  .text-link span { color:var(--orange); font-size:18px; transition:transform .2s; }
  .text-link:hover span { transform:translate(3px,-3px); }
  .project-hero { width:min(100% - 8vw,1500px); margin:auto; display:grid; grid-template-columns:42% 58%; min-height:660px; align-items:center; gap:4%; padding:100px 0; }
  .project-hero h1 { font-size:clamp(70px,8vw,128px); line-height:1; margin:30px 0; }
  .project-hero p:not(.eyebrow) { max-width:410px; font-size:19px; line-height:1.6; }
  .project-hero .text-link { margin-top:36px; }
  .project-hero__image { height:580px; }
  .project-hero__image img { width:100%; height:100%; object-fit:cover; }
  .project-detail { padding:135px 0 160px; background:var(--paper-light); }
  .project-detail__inner { width:min(100% - 8vw,1260px); margin:auto; display:grid; grid-template-columns:34% 66%; gap:6%; }
  .project-detail h2 { font-size:clamp(48px,5vw,75px); line-height:1.1; }
  .project-detail__body { max-width:750px; }
  .project-detail__body p { font-size:19px; line-height:1.7; margin-bottom:26px; }
  .project-gallery { width:min(100% - 8vw,1500px); margin:150px auto; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
  .project-gallery figure:nth-child(even) { margin-top:140px; }
  .project-gallery img { width:100%; height:620px; object-fit:cover; }
  .project-gallery figcaption { margin-top:12px; color:var(--muted); font:11px var(--mono); }
  .project-next { padding:110px 4vw; text-align:center; background:#e9eee6; }
  .project-next p { margin-bottom:14px; }
  .project-next a { font-size:clamp(55px,7vw,110px); letter-spacing:-.05em; text-decoration:none; }
  .project-next a:hover { color:var(--green-dark); }
  .legal-page { width:min(100% - 8vw,900px); margin:110px auto 150px; }
  .legal-page h1 { font-size:clamp(65px,8vw,110px); margin:20px 0 65px; }
  .legal-page h2 { font-size:clamp(33px,4vw,48px); line-height:1.14; margin:70px 0 22px; }
  .legal-page h2:first-of-type { margin-top:0; }
  .legal-page p,.legal-page li,.legal-page address { max-width:790px; font-size:17px; line-height:1.75; margin:0 0 18px; font-style:normal; }
  .legal-page ul { padding-left:22px; }
  .legal-page a { text-underline-offset:3px; }
  .legal-page .text-link { margin-top:55px; }
  .legal-back { font-size:13px; text-decoration:none; }
  .legal-back:hover { color:var(--orange); }
  .legal-page__draft { border-left:2px solid var(--orange); padding:15px 20px; background:#eee7dc; font-size:14px!important; }
}

@layer motion {
  .js .reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1); }
  .js .reveal.is-visible { opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .js .reveal { opacity:1; transform:none; transition:none; } .story-thread__machine { display:none; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
}

@media (max-width:1000px) {
  .hero__copy h1 { font-size:clamp(60px,7vw,85px); }
  .chapter { min-height:auto; padding:100px 0; }
  .chapter__inner { grid-template-columns:42% 58%; }
  .chapter__copy h2 { font-size:clamp(58px,7vw,78px); }
  .chapter__media--overlap,.process-images { height:560px; }
  .chapter__material-image { height:500px; }
  .selected__image { height:460px; }
}

@media (max-width:700px) {
  .site-header { width:calc(100% - 40px); height:76px; }
  .wordmark { width:128px; }
  .menu-toggle { display:inline-flex; align-items:center; gap:8px; border:0; background:none; color:var(--ink); font-size:13px; }
  .menu-toggle span { font-size:17px; }
  .primary-nav { display:none; position:absolute; top:75px; left:-20px; right:-20px; background:var(--paper); padding:20px 30px 30px; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; box-shadow:0 15px 25px #253a2d15; }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { padding:15px 0; font-size:17px; }
  .primary-nav .nav-contact { width:max-content; margin-top:10px; padding:10px 20px; }
  .hero { width:calc(100% - 40px); min-height:auto; display:flex; flex-direction:column; align-items:stretch; padding:75px 0 90px; }
  .hero__copy { padding:0; }
  .hero__copy h1 { font-size:clamp(65px,12vw,100px); margin:23px 0 23px; }
  .hero__copy .intro { font-size:17px; }
  .hero__media { margin-top:65px; height:490px; }
  .hero__image--main { width:82%; height:85%; }
  .hero__image--small { width:50%; height:45%; }
  .scroll-cue { bottom:25px; }
  .chapter { padding:110px 0; }
  .chapter__inner { width:calc(100% - 40px); display:flex; flex-direction:column; align-items:stretch; gap:55px; }
  .chapter__copy { padding-right:0; }
  .chapter__copy h2 { font-size:clamp(64px,11vw,90px); margin:25px 0; }
  .chapter__copy > p:not(.eyebrow) { font-size:17px; }
  .chapter__media--overlap { height:580px; }
  .media-frame--portrait { left:0; width:64%; }
  .media-frame--detail { width:55%; }
  .process-images { height:620px; }
  .chapter__material-image { height:450px; margin-left:0; }
  .selected { min-height:0; padding:110px 0; }
  .selected__inner,.about__inner,.contact__inner { width:calc(100% - 40px); }
  .selected__heading { margin-bottom:35px; }
  .selected__heading h2 { font-size:80px; }
  .selected__body { display:flex; flex-direction:column-reverse; align-items:stretch; gap:28px; }
  .selected__image { height:430px; }
  .work-list { padding-right:0; }
  .about { padding:115px 0 140px; }
  .about h2 { font-size:clamp(68px,11vw,100px); margin:24px 0 35px; }
  .about h2 em { white-space:normal; }
  .about__inner > p:not(.eyebrow),.about .text-link { margin-left:0; }
  .about__inner > p:not(.eyebrow) { font-size:20px; }
  .about__signet { width:80px; right:0; bottom:-80px; }
  .contact { padding:110px 0 80px; }
  .contact__inner { display:block; }
  .contact h2 { font-size:clamp(67px,11vw,95px); margin:25px 0 35px; }
  .contact__inner > p:not(.eyebrow) { font-size:17px; }
  .contact__cta { margin-top:40px; min-width:0; }
  .contact__email { width:auto; justify-self:auto; margin-top:17px!important; }
  .site-footer { width:calc(100% - 40px); flex-wrap:wrap; gap:16px 30px; padding:35px 0; }
  .site-footer p:nth-of-type(2) { margin-left:0; width:100%; order:4; }
  .site-footer a { margin-left:auto; }
  .site-footer--dark { width:100%; padding:0; }
  .site-footer__inner { width:calc(100% - 40px); flex-wrap:wrap; gap:16px 30px; padding:30px 0 35px; }
  .site-footer--dark .site-footer__inner p:nth-of-type(2) { margin-left:0; width:100%; order:4; }
  .site-footer--dark .site-footer__inner > a { margin-left:auto; }
  .footer-links { gap:20px; }
  .legal-page { width:calc(100% - 40px); margin:80px auto 120px; }
  .legal-page h1 { margin-bottom:50px; }
  .project-hero { width:calc(100% - 40px); display:flex; flex-direction:column; gap:50px; padding:75px 0 90px; }
  .project-hero h1 { font-size:clamp(72px,12vw,100px); }
  .project-hero__image { height:470px; width:100%; }
  .project-detail { padding:100px 0; }
  .project-detail__inner { width:calc(100% - 40px); display:flex; flex-direction:column; gap:35px; }
  .project-detail__body p { font-size:17px; }
  .project-gallery { width:calc(100% - 40px); margin:100px auto; gap:12px; }
  .project-gallery img { height:340px; }
  .project-gallery figure:nth-child(even) { margin-top:65px; }
  .project-next { padding:85px 20px; }
}

@media (max-width:420px) {
  .hero__copy h1,.chapter__copy h2,.contact h2 { font-size:58px; }
  .hero__media { height:390px; }
  .chapter__media--overlap { height:470px; }
  .process-images { height:500px; gap:8px; }
  .chapter__material-image { height:320px; }
  .selected__image { height:350px; }
  .selected__heading h2 { font-size:68px; }
  .work-list__item { grid-template-columns:28px 1fr auto; gap:8px; }
  .work-list__item strong { font-size:28px; }
  .project-hero__image { height:360px; }
  .project-gallery img { height:280px; }
}