/* ---- base ---------------------------------------------------------------- */
:root{font-family:Arial,Helvetica,sans-serif;color:#242427;background:#fff;--line:#e8e8eb;--ink:#242427;--muted:#6c6c74}
*{box-sizing:border-box}body{margin:0;background:#fff}html{scroll-behavior:smooth;scroll-padding-top:35px}
a{color:inherit;text-decoration:none}h1,h2,p,figure{margin:0}h1,h2{font-weight:400}p{line-height:1.75}[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid #575761;outline-offset:6px}a:hover{color:#111}
.skip{position:fixed;top:-100px;left:15px;padding:15px;background:#222;color:white;z-index:10}.skip:focus{top:15px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.eyebrow{font-size:10px;color:#72727a;line-height:1.7;letter-spacing:.045em;text-transform:uppercase}

/* Background field (field.js): fixed, faint, home page only. */
.field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.project-page .field{display:none}
.header,main,footer{position:relative;z-index:1}
.header,footer,.work-stage,.home-about{width:90%;max-width:1280px;margin:auto}

/* ---- header and wordmark (wordmark.js) ----------------------------------- */
.header{height:110px;display:flex;align-items:center;justify-content:space-between}
.header nav{display:flex;gap:32px;font-size:13px}.header nav a:hover{text-decoration:underline;text-underline-offset:6px}
.wordmark{position:relative;display:block;width:132px;height:50px;font-size:23px;line-height:50px;letter-spacing:-.04em}
.wordmark-svg{display:block;width:100%;height:100%;overflow:visible}
.wordmark-name path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wordmark-dot{fill:var(--ink)}
.wordmark-name{opacity:0;transform-box:view-box;transform-origin:0 38px;transition:opacity .4s}
.wordmark.is-written .wordmark-name{opacity:1}
.wordmark-code{opacity:0}.wordmark-code rect{fill:var(--ink);transform-box:fill-box;transform-origin:left center}
.wordmark.is-folding .wordmark-code,.wordmark.is-code .wordmark-code{opacity:1}.wordmark.is-code .wordmark-name{display:none}
.wordmark-arms{position:absolute;pointer-events:none}

/* ---- home: heading and spectrum (spectrum.js) ----------------------------- */
.work-stage{padding:34px 0 20px}
.work-heading{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
.work-heading h1{font-size:32px;letter-spacing:-.035em;line-height:1.2}
#spectrum{width:min(480px,100%)}
.spectrum{position:relative}
.spectrum-domains{display:grid;grid-template-columns:repeat(3,1fr)}
.spectrum-domain{appearance:none;border:0;background:none;margin:0;padding:0 0 4px;font:inherit;color:#7a7a83;cursor:default;display:flex;flex-direction:column;align-items:stretch;gap:11px;text-align:center}
.spectrum-seg,.spectrum-band{display:block;height:8px;mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px);-webkit-mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px)}
.spectrum-seg{opacity:.4;transition:opacity .35s}
.spectrum-name{font-size:9px;letter-spacing:.09em;text-transform:uppercase;transition:color .35s}
.spectrum-band{position:absolute;top:0;opacity:0;pointer-events:none;transition:opacity .35s,left .45s cubic-bezier(.7,0,.3,1),width .45s cubic-bezier(.7,0,.3,1)}
.spectrum[data-domain] .spectrum-seg,.spectrum[data-project] .spectrum-seg{opacity:.13}
.spectrum[data-domain=design] [data-domain=design] .spectrum-seg,.spectrum[data-domain=engineering] [data-domain=engineering] .spectrum-seg,.spectrum[data-domain=fabrication] [data-domain=fabrication] .spectrum-seg{opacity:1}
.spectrum[data-domain=design] [data-domain=design],.spectrum[data-domain=engineering] [data-domain=engineering],.spectrum[data-domain=fabrication] [data-domain=fabrication],.spectrum[data-project] .in-band{color:#202024}
.spectrum[data-project] .spectrum-band{opacity:1}
.spectrum-domain:focus-visible{outline-offset:4px}

/* ---- home: orbit and project cards (orbit.js) ----------------------------- */
.orbit-area{padding:46px 0 30px}
.project-orbit{position:relative;width:min(100%,clamp(540px,100vh - 240px,700px));aspect-ratio:1;margin:auto}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e5e5e9;stroke-width:.7}.orbit-lines line{stroke:#e5e5e8;stroke-dasharray:2 6}
.orbit-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:29%;z-index:1;pointer-events:none;background:radial-gradient(#fff 50%,#fff0 70%)}
#centre-figure{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:none}
.orbit-project{position:absolute;transform:translate(-50%,-50%);width:130px;text-align:center;z-index:2;transition:opacity .35s,filter .35s}
.orbit-project:focus-visible{outline:none}
.orbit-bubble{position:relative;display:block;width:112px;height:112px;border-radius:50%;margin:auto;border:1px solid #e4e4e7;overflow:hidden;background:#fff}
.orbit-bubble img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.4);opacity:.85;transition:filter .35s,opacity .35s}
.orbit-label{display:block;font-size:11px;margin-top:16px;color:#6c6c74;transition:color .35s}
/* The glow starts at the circle's edge in the project colour and fades outward. */
.orbit-halo{position:absolute;left:50%;top:56px;width:200px;height:200px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.7,0,.3,1);
  background:radial-gradient(circle closest-side,var(--project-colour) 0 55%,color-mix(in srgb,var(--project-colour) 55%,transparent) 57%,color-mix(in srgb,color-mix(in srgb,var(--project-colour) 62%,#fff) 26%,transparent) 72%,transparent 100%)}
.orbit-project.lit .orbit-halo,.orbit-project:focus-visible .orbit-halo{opacity:.85;transform:translate(-50%,-50%) scale(1)}
.orbit-project.lit img,.orbit-project.active img,.orbit-project:hover img{filter:saturate(.9);opacity:1}
.orbit-project.lit .orbit-label{color:#202024}
.orbit-project.dimmed{opacity:.25;filter:grayscale(1)}
.project-orbit.has-card .orbit-project:not(.active){opacity:.6}
.orbit-card{position:absolute;display:none;z-index:6;overflow:hidden;background:#fff;color:var(--ink);text-align:left;
  box-shadow:0 0 0 1px var(--project-colour),0 0 12px 2px color-mix(in srgb,var(--project-colour) 42%,transparent),0 0 32px 9px color-mix(in srgb,color-mix(in srgb,var(--project-colour) 62%,#fff) 22%,transparent),0 0 70px 20px color-mix(in srgb,var(--project-colour) 7%,transparent)}
.orbit-card.is-shown{display:block}
.card-media{display:block;overflow:hidden;background:#fff}.card-media img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{display:block;padding:16px 20px 20px}
.card-body>*{opacity:0;transform:translateY(8px);transition:opacity .12s,transform .12s}
.orbit-card.is-open .card-body>*{opacity:1;transform:none;transition:opacity .3s var(--ease,ease) calc(var(--open-ms,560ms)*.55 + var(--k,0)*80ms),transform .3s var(--ease,ease) calc(var(--open-ms,560ms)*.55 + var(--k,0)*80ms)}
.card-title{color:var(--ink);display:block;font-size:25px;line-height:1.15;letter-spacing:-.035em;margin-bottom:9px}
.card-text{display:block;font-size:13px;line-height:1.65;color:#65656d}
.card-link{color:var(--ink);display:inline-block;margin-top:12px;padding:5px 0;font-size:11.5px;border-bottom:1px solid var(--project-colour)}
.work-index{display:none}

/* ---- home: bio and footer -------------------------------------------------- */
.home-about{display:grid;grid-template-columns:1fr 2fr;gap:55px;align-items:start;border-top:1px solid var(--line);padding:65px 0 90px;margin-top:15px;background:#fff}
.home-about h2{font-size:24px;letter-spacing:-.025em}.bio-copy{max-width:720px}.bio-copy>p{font-size:17px;line-height:1.85;color:#4d4d55;margin-bottom:22px}.bio-copy>p:last-of-type{margin-bottom:0}
.contact-links:empty{display:none}.contact-links{display:flex;gap:25px;font-size:13px;margin-top:25px}.contact-links a{border-bottom:1px solid #ccc;padding-bottom:4px}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:28px 0 35px;font-size:10px;color:#7f7f87;background:#fff}

/* ---- project pages (app.js renderWatch) ------------------------------------ */
.reader{width:86%;max-width:1120px;margin:45px auto 80px;min-height:60vh;background:#fff}
.plain-link{display:inline-block;font-size:12px;border-bottom:1px solid #aaa;padding:7px 0}
.case-heading{max-width:760px;padding:55px 0 45px}.case-heading .eyebrow{margin-bottom:16px}
.case-heading h1{font-size:43px;letter-spacing:-.035em;line-height:1.15;margin-bottom:22px}
.editorial-lead{font-size:20px;line-height:1.6;color:#55555e;max-width:650px}
.case-about{font-size:15px;line-height:1.8;color:#4d4d55;max-width:650px;margin-top:20px}
.watch-media{margin-bottom:90px}.watch-media video{display:block;width:100%;height:auto;max-height:720px;background:#fff}
.watch-media figcaption,figcaption{font-size:11px;color:#73737c;line-height:1.7;margin-top:13px}
.project-section{margin:0 0 90px}.project-section figure{margin:0}
.figure-zoom{display:block;cursor:zoom-in}.figure-zoom img{display:block;width:100%;height:auto;max-height:790px;object-fit:contain;background:#fff}
.section-copy{display:grid;grid-template-columns:35px 1fr 1.75fr;gap:20px;margin-bottom:30px;padding-top:22px;border-top:1px solid var(--line)}
.section-number{font-size:10px;color:#8c8c94;padding-top:7px}
.section-copy h2{font-size:21px;line-height:1.4;letter-spacing:-.02em;max-width:270px}
.section-copy p{font-size:15px;line-height:1.8;color:#616169;max-width:670px}
.study-note{display:grid;grid-template-columns:1.75fr 1fr;gap:20px 55px;border-top:1px solid var(--line);padding-top:28px;margin-top:20px}
.study-note h2{font-size:12px;margin-bottom:12px}.study-note p{font-size:13px;color:#61616a;line-height:1.8;max-width:640px}
.study-note .tool-line{color:#61616a}
.project-next{display:flex;justify-content:space-between;gap:25px;margin-top:65px;padding-top:25px;border-top:1px solid var(--line);font-size:13px}.project-next a:hover{text-decoration:underline;text-underline-offset:6px}
.spectrum-mini{width:min(240px,100%);margin:0 0 24px;font-size:10px}
.spectrum-track{position:relative;display:block;height:6px;margin-bottom:6px}
.spectrum-track i{position:absolute;top:0;bottom:0;mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px);-webkit-mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px)}
.spectrum-full{left:0;right:0;opacity:.12}
.spectrum-mini .spectrum-band{opacity:1;height:auto;transition:none}
.spectrum-axis{display:flex;justify-content:space-between;font-size:8px;color:#767680;letter-spacing:.03em;text-transform:uppercase;gap:10px}

/* ---- smaller screens --------------------------------------------------------- */
@media(max-width:1000px){.orbit-bubble{width:95px;height:95px}.orbit-project{width:115px}.orbit-halo{top:47.5px;width:170px;height:170px}}
@media(max-width:700px){
  .header{height:80px}.header nav{gap:23px}.wordmark{width:112px;height:43px;font-size:21px;line-height:43px}
  .work-stage{padding-top:22px}.work-heading{gap:24px}.work-heading h1{font-size:25px}
  .orbit-area{padding:46px 0 20px}.project-orbit{width:min(440px,100%)}
  .orbit-project{width:95px}.orbit-bubble{width:77px;height:77px}.orbit-halo{top:38.5px;width:138px;height:138px}
  .orbit-label{font-size:10px;margin-top:12px}
  .card-body{padding:14px 16px 16px}.card-title{font-size:21px}.card-text{font-size:12px}
  .home-about{grid-template-columns:1fr;gap:25px;padding:35px 0 50px}.bio-copy>p{font-size:16px}
  .reader{width:90%;margin-top:28px}.case-heading{padding:35px 0}.case-heading h1{font-size:33px}.editorial-lead{font-size:18px}.case-about{font-size:14px}
  .watch-media{margin-bottom:55px}.project-section{margin-bottom:60px}
  .section-copy{grid-template-columns:25px 1fr;gap:12px;margin-bottom:22px;padding-top:18px}.section-copy h2{font-size:21px;max-width:none}.section-copy p{grid-column:2;font-size:14px}
  .study-note{grid-template-columns:1fr}.project-next{font-size:12px;margin-top:40px}footer{flex-wrap:wrap}footer>span:nth-child(2){order:3;width:100%}
}
@media(max-width:380px){.orbit-bubble{width:66px;height:66px}.orbit-project{width:80px}.orbit-halo{top:33px;width:118px;height:118px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit-bubble img,.orbit-halo,.orbit-project,.spectrum-seg,.spectrum-band,.spectrum-name,.wordmark-name,.card-body>*,.orbit-card.is-open .card-body>*{transition:none}}