:root{--bg:#fff;--text:#3a3a3a;--strong:#111;--line:#aaa;--focus:#666;--muted:#999;--soft:#777;--softer:#888;--title:#21201c;--body:#63635e;color-scheme:light;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-synthesis:none;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
/* Home: warm off-white page. Sits before the dark rules, which have equal specificity and so still win. */
:root:has(.home){--bg:#fdfdfc}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121212;--text:#d2d2d2;--strong:#fff;--line:#555;--focus:#aaa;--muted:#6f6f6f;--soft:#999;--softer:#8a8a8a;--title:#ededed;--body:#a1a1a0;color-scheme:dark}}
:root[data-theme=dark]{--bg:#121212;--text:#d2d2d2;--strong:#fff;--line:#555;--focus:#aaa;--muted:#6f6f6f;--soft:#999;--softer:#8a8a8a;--title:#ededed;--body:#a1a1a0;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
main{max-width:688px;padding:128px 24px 40px;margin:0 auto;line-height:1.75}
h1,h2,h3,p{font:inherit;margin:0}
h1{font-weight:500;margin-bottom:28px}
p{margin-bottom:28px}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--strong);text-decoration-color:var(--strong)}
a:focus-visible{outline:2px solid var(--focus);outline-offset:5px;border-radius:1px}
.collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;margin-top:64px}
.collections>section:first-child{grid-column:1/-1}
.collections h2{font-size:14px;line-height:20px;margin-bottom:24px}
.collections article{margin-bottom:28px}
.collections h3{margin:0}
.collections article p{margin:0}
.about,.contact{margin-top:64px}
/* Home: footer sits at the bottom of the screen when the page is shorter than it. */
.home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.home .intro p{margin-bottom:0}
.home footer{margin-top:auto;padding-top:100px}
/* Home type: Inter variable (rsms.me, linked in index.html), one 16px size. Titles and labels take the dark tone and
   weight 500, descriptions and body the grey; line height 1.5 for title + description pairs, 1.65 for paragraphs.
   Sections are spaced well apart so the gaps do the grouping. */
body:has(.home){font-family:InterVariable,Inter,Arial,Helvetica,sans-serif;font-feature-settings:"cv01","ss03"}
.home{line-height:1.65;color:var(--body)}
.home h1{color:var(--title);margin-bottom:0}
.home .collections{grid-template-columns:1fr;gap:112px;margin-top:112px}
.home :is(.collections,.about,.contact) h2{font-size:16px;line-height:24px;font-weight:500;color:var(--title);margin-bottom:24px}
.home .collections article{margin-bottom:36px;line-height:1.5}
.home .collections article:last-child{margin-bottom:0}
.home .collections h3{color:var(--title)}
.home .collections h3 a:hover,.home .about a:hover,.home .contact a:hover{color:var(--title);text-decoration-color:var(--title)}
.home :is(.about,.contact){margin-top:112px}
.about h2,.contact h2{font-size:14px;line-height:20px;margin-bottom:24px}
.about p{margin-bottom:16px}
.about p:last-child,.contact p{margin:0}
.soon{font-size:12px;color:var(--muted);margin-left:8px;white-space:nowrap}
footer{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px;line-height:1.75;margin-top:100px}
.back{display:inline-block;font-size:14px;color:var(--soft);margin-bottom:52px}
.project h1{margin-bottom:4px}
.project .category{font-size:14px;color:var(--softer);margin-bottom:44px}
.project .empty{color:var(--soft)}
.project footer{margin-top:100px;font-size:14px}
.project footer a{color:var(--soft)}
.theme-toggle{position:fixed;top:max(20px,env(safe-area-inset-top));right:24px;z-index:11;font:inherit;font-size:12px;line-height:1.75;color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:1px}
.fx-toggle{right:calc(24px + 5.5em + 16px)}
:root[data-particles=off] canvas.fluid{display:none}
.theme-toggle:hover{color:var(--strong);text-decoration-color:var(--strong)}
.theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:1px}
@media(max-width:600px){main{padding-top:72px;padding-inline:28px}.collections{grid-template-columns:1fr;gap:28px;margin-top:48px}.home .collections{gap:72px;margin-top:72px}.home :is(.about,.contact){margin-top:72px}.home :is(.collections,.about,.contact) h2{margin-bottom:16px}.collections h2{margin-bottom:16px}.collections article:last-child{margin-bottom:0}footer{margin-top:72px}.back{margin-bottom:40px}.project footer{margin-top:72px}.home footer{padding-top:72px}}
/* Touch: a press on a thumbnail link develops its image (fluid.js), so no link callout or grey tap box over it. */
@media(hover:none){a[data-fluid]{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}
@media(prefers-reduced-motion:reduce){a{transition:none}}
/* Air Atlas project page: the deck, slide by slide. Each slide is a 1920x1080 design scaled with cqw (1 design px = 1/19.2 cqw). */
.deckpage{max-width:1328px;padding-inline:24px}
.deckpage .slides{display:flex;flex-direction:column;gap:48px}
.deckpage .slide{position:relative;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;border-radius:8px;color:#3a3a3a;font-family:Arial,Helvetica,sans-serif;line-height:1.2;-webkit-font-smoothing:antialiased}
.deckpage .slide:not(.dark){box-shadow:0 0 0 1px #e5e5e5}
.deckpage .frame{position:absolute;inset:0;box-sizing:border-box}
.deckpage .frame :is(h1,h2,p){margin:0}
.deckpage .frame a{text-decoration-color:currentColor}
.deckpage .frame video,.deckpage .frame img{display:block;max-width:none;background:#0c100e}
.deckpage .frame .atlas{display:block;background:#0c100e}
.deckpage .frame .hint,.deckpage #cover .frame :is(h1,p){pointer-events:none}
.deckpage .cap{display:none}
.deckpage footer{margin-top:72px}
@media(max-width:600px){
.deckpage{padding-inline:24px}
.deckpage .slides{gap:40px}
.deckpage .frame :is(h1,h2,p):not(.rows){visibility:hidden}
.deckpage .cap{display:block;margin-top:16px;font-size:14px;line-height:1.6}
.deckpage .cap h2{color:var(--strong);font-size:16px;margin-bottom:2px}
.deckpage .cap p{margin:0 0 8px;color:var(--soft)}
.deckpage .cap .small{font-size:12px;color:var(--softer)}
}

/* Air Atlas booth 02 (booths/one-dot.js): one value, one dot.
   Desktop: sizes use --u (1cqw of the slide, 19.2 design px); the panel is pinned over the globe. Corner radii follow the
   slide: --r for panels (8px on a 1280px slide), --ri inside them. Phone (.od-phone): the slide grows, the globe sits on
   top and the panel flows under it. Hover styling is for mouse pointers only. */
.od-globe{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.od-globe:active{cursor:grabbing}
.od-source{position:absolute;left:8.3333cqw;top:6.6667cqw;font-family:Arial,Helvetica,sans-serif;font-size:1.25cqw;color:#94a480;pointer-events:none}
.od-ui{--u:1cqw;--r:calc(var(--u)*.625);--ri:calc(var(--u)*.42);position:absolute;inset:0;pointer-events:none;color:#e4ebd9;font-family:-apple-system,BlinkMacSystemFont,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.od-ui>*{pointer-events:auto}
.od-card,.od-tip{background:#141a16eb;border:1px solid #e1e7d51c;border-radius:var(--r);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-sizing:border-box}
.od-card{position:absolute;left:calc(var(--u)*8.3333);top:calc(var(--u)*9.6);width:calc(var(--u)*22);padding:calc(var(--u)*.35)}
.od-row{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*3.4);padding:0 calc(var(--u)*.8);border-radius:var(--ri);font-size:calc(var(--u)*1.2);cursor:ew-resize;touch-action:pan-y}
.od-row.dragging{background:#e1ead312}
.od-lab{display:flex;align-items:center;gap:calc(var(--u)*.55);color:#94a480;font-size:calc(var(--u)*1.1)}
.od-lab svg{width:calc(var(--u)*1.15);height:calc(var(--u)*1.15);fill:none;stroke:currentColor;stroke-width:1.4}
.od-val{display:flex;align-items:baseline;gap:calc(var(--u)*.3)}
.od-n{color:#e4ebd9;font-variant-numeric:tabular-nums;cursor:text;outline:none;padding:calc(var(--u)*.15) calc(var(--u)*.35);border-radius:var(--ri)}
.od-n:focus-visible,.od-n[contenteditable=true]{background:#e1ead31a;box-shadow:inset 0 0 0 1px #e1e7d540}
.od-u{color:#7d8b6e;font-size:calc(var(--u)*.95);white-space:nowrap;min-width:calc(var(--u)*1.6)}
.od-ruler{position:absolute;left:calc(var(--u)*.8);right:calc(var(--u)*.8);bottom:calc(var(--u)*.3);height:calc(var(--u)*.42);pointer-events:none;opacity:0;transition:opacity .25s;
  background-image:linear-gradient(90deg,#e1e7d566 0 1px,transparent 1px),linear-gradient(90deg,#e1e7d533 0 1px,transparent 1px);background-size:40px 100%,8px 55%;background-repeat:repeat-x;background-position-y:bottom;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.od-row.dragging .od-ruler,.od-n:focus-visible~.od-ruler{opacity:1}
.od-name{display:flex;align-items:center;color:#94a480;font-size:calc(var(--u)*1.1)}
.od-name .od-sw{margin:0 calc(var(--u)*.225)} /* ring centred in the icon column; the label gap does the rest */
.od-chips{display:flex;gap:calc(var(--u)*.35);overflow-x:auto;margin:0 calc(var(--u)*-.35);padding:calc(var(--u)*.35) calc(var(--u)*.7) calc(var(--u)*.6);border-bottom:1px solid #e1e7d514;scrollbar-width:none;overscroll-behavior-x:contain;
  --fade:calc(var(--u)*2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.od-chips::-webkit-scrollbar{display:none}
.od-chips.at-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade)),transparent)}
.od-chips.at-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade));mask-image:linear-gradient(90deg,transparent,#000 var(--fade))}
.od-chips.at-start.at-end{-webkit-mask-image:none;mask-image:none}
.od-chip{all:unset;flex:none;display:flex;align-items:center;height:calc(var(--u)*2.3);padding:0 calc(var(--u)*.75);border-radius:var(--ri);background:#e1ead30a;box-shadow:inset 0 0 0 1px #e1e7d51c;color:#b8c4a8;font-size:calc(var(--u)*1);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.od-chip.on{background:#e1ead31f;box-shadow:inset 0 0 0 1px #e1e7d54d;color:#e4ebd9}
.od-chip:focus-visible{outline:2px solid #d5ddc4;outline-offset:-2px}
.od-chip .od-sw{width:calc(var(--u)*.6);height:calc(var(--u)*.6);margin-right:calc(var(--u)*.45)}
.od-sw{display:inline-block;flex:none;width:calc(var(--u)*.7);height:calc(var(--u)*.7);border-radius:50%;border:1.5px solid var(--c);margin-right:calc(var(--u)*.55);box-sizing:border-box}
.od-tip{position:absolute;left:calc(var(--u)*8.3333);top:calc(var(--u)*24.5);width:calc(var(--u)*22);padding:calc(var(--u)*.85) calc(var(--u)*1);font-size:calc(var(--u)*.95);line-height:1.6;color:#c8d4b8;opacity:0;transition:opacity .2s;pointer-events:none}
.od-tip.on{opacity:1}
.od-m{color:#7d8b6e}
.od-hint{position:absolute;left:calc(var(--u)*8.6);top:calc(var(--u)*24.9);display:flex;align-items:center;gap:calc(var(--u)*.5);font-size:calc(var(--u)*.95);color:#94a480;transition:opacity .35s;pointer-events:none}
.od-hint.gone,.od-ui:has(.od-tip.on) .od-hint{opacity:0}
.od-hint-arrows{display:inline-block;flex:none;white-space:nowrap;letter-spacing:.15em;color:#e4ebd9;animation:od-nudge 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes od-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(calc(var(--u)*-.3))}60%{transform:translateX(calc(var(--u)*.3))}}
@media(prefers-reduced-motion:reduce){.od-hint-arrows{animation:none}}
@media(hover:hover) and (pointer:fine){
  .od-row:hover{background:#e1ead30d}
  .od-row:hover .od-ruler{opacity:.7}
  .od-row:hover .od-lab{color:#c8d4b8}
  .od-chip:not(.on):hover{background:#e1ead314;color:#e4ebd9}
}

/* Phone: one dark slide holding the globe and the panel. */
.deckpage .slide.od-phone{aspect-ratio:auto}
.od-phone .frame{position:relative}
.od-phone .od-globe{position:relative;display:block;height:auto;aspect-ratio:1}
.od-phone .od-source{left:16px;top:14px;font-size:12px;color:#7d8b6e}
.od-ui.od-flow{--u:13px;--ri:6px;position:relative;inset:auto;padding:0 16px 14px;display:flex;flex-direction:column}
.od-flow .od-card{position:static;width:auto;padding:0;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.od-flow .od-row{height:56px;padding:0 2px;border-bottom:1px solid #e1e7d514;border-radius:0;font-size:17px}
.od-flow .od-row.dragging{background:none}
.od-flow .od-lab{font-size:14px;gap:9px}
.od-flow .od-lab svg{width:18px;height:18px}
.od-flow .od-n{font-size:19px;padding:6px 8px;margin-right:-2px}
.od-flow .od-u{font-size:13px}
.od-flow .od-ruler{left:0;right:0;bottom:5px;height:6px;opacity:.5}
.od-flow .od-row.dragging .od-ruler{opacity:1}
.od-flow .od-name{font-size:14px}
.od-flow .od-name .od-sw{width:9px;height:9px;margin:0 4.5px}
.od-flow .od-chips{--fade:20px;gap:6px;margin:0 -16px;padding:4px 16px 12px}
.od-flow .od-chip{height:36px;padding:0 13px;font-size:14px}
.od-flow .od-chip .od-sw{width:9px;height:9px;margin-right:8px}
.od-flow .od-hint{position:static;order:1;padding:2px 2px 0;font-size:12.5px;color:#7d8b6e;transition:none}
.od-flow .od-hint.gone{display:none}
.od-ui.od-flow:has(.od-tip.on) .od-hint{opacity:1}
.od-flow .od-tip{position:static;order:2;opacity:1;width:auto;height:calc(3 * 1.6em + 16px);overflow:hidden;padding:12px 2px 4px;box-sizing:border-box;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:13px;color:#c8d4b8}

/* Booth full screen: the browser's own, or (iPhone Safari) a fixed overlay. Inline on touch screens the globe ignores
   fingers so the page scrolls; in full screen it takes them. */
.od-fs{all:unset;position:absolute;right:8.3333cqw;top:5.9cqw;z-index:3;display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:.42cqw;background:#141a16cc;box-shadow:inset 0 0 0 1px #e1e7d51c;color:#b8c4a8;cursor:pointer;-webkit-tap-highlight-color:transparent}
.od-fs svg{width:1.3cqw;height:1.3cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.od-fs:focus-visible{outline:2px solid #d5ddc4;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.od-fs:hover{color:#e4ebd9;background:#1b221de6}}
.od-phone .od-fs{right:12px;top:12px;width:40px;height:40px;border-radius:8px}
.od-phone .od-fs svg{width:18px;height:18px}
.deckpage .slide.od-full{position:fixed;inset:0;z-index:1000;width:auto;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none}
.od-full .od-globe{touch-action:none}
.od-phone.od-full .frame{position:absolute;inset:0;display:flex;flex-direction:column}
.od-phone.od-full .od-globe{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto}
.od-phone.od-full .od-ui{flex:none;padding:0 max(20px,calc(env(safe-area-inset-right) + 12px)) max(20px,calc(env(safe-area-inset-bottom) + 12px)) max(20px,calc(env(safe-area-inset-left) + 12px))}
.od-phone.od-full .od-chips{margin:0 calc(-1 * max(20px,calc(env(safe-area-inset-left) + 12px)));padding-inline:max(20px,calc(env(safe-area-inset-left) + 12px))}
.od-phone.od-full .od-source{top:max(24px,calc(env(safe-area-inset-top) + 14px));left:max(22px,calc(env(safe-area-inset-left) + 14px))}
.od-phone.od-full .od-fs{top:max(14px,calc(env(safe-area-inset-top) + 8px));right:max(14px,calc(env(safe-area-inset-right) + 8px))}
html.od-lock,html.od-lock body{overflow:hidden;overscroll-behavior:none}

/* Air Atlas page: no theme toggle (it sat on the booth's full-screen button); the page follows the system theme. */
body:has(.deckpage) .theme-toggle{display:none}
/* Tape-dial feel: a centre notch reads the value; the number flashes at each major ruler mark. */
.od-ruler::after{content:'';position:absolute;left:50%;top:-30%;bottom:-10%;width:1.5px;margin-left:-.75px;border-radius:1px;background:#e4ebd9;opacity:.35;transition:opacity .2s}
.od-row.dragging .od-ruler::after{opacity:1}
.od-n.tick{animation:od-tick .18s ease-out}
@keyframes od-tick{from{color:#fff;text-shadow:0 0 .6em #e4ebd966}to{color:#e4ebd9;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.od-n.tick{animation:none}}
.od-hint-touch{display:none}
@media(pointer:coarse){.od-hint-touch{display:inline}.od-hint-fine{display:none}}

/* Air Atlas case study: text sections in page flow between the media cards, project facts, the Directions sketches
   (booths/directions.js) and media cards (the image centred with room around it, one short title below). Phone: text spans the full width, grids drop to two columns. */
.deckpage .cs-text{max-width:560px;margin-left:8.3333%;line-height:1.7}
.deckpage .cs-text h2{font-size:16px;font-weight:500;color:var(--strong);margin:0 0 8px}
.deckpage .cs-text p{margin:0 0 12px;color:var(--text)}
.cs-label{font-size:12px;color:var(--muted)}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:-16px 0 0 8.3333%;max-width:83.3333%;font-size:14px;line-height:1.5}
.cs-facts p{margin:0}
.cs-rules{margin:0}
.cs-rules div{display:flex;gap:8px;margin-bottom:6px}
.cs-rules dt{color:var(--strong);flex:none}
.cs-rules dd{margin:0;color:var(--soft)}
.cs-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;width:min(1066px,calc((100vw - 48px) * 0.8333))}
.cs-steps p{font-size:13px;line-height:1.5;margin:0}
.cs-steps .cs-label{margin:8px 0 2px}
.cs-tile{aspect-ratio:4/3;background:#0c100e;border-radius:6px;overflow:hidden}
.cs-tile canvas{display:block;width:100%;height:100%}
.deckpage .cs-media{background:#0c100e}
.cs-media-box{position:absolute;inset:0}
.deckpage .frame .cs-media-box img{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:66%;max-height:68%;border-radius:0.4cqw}
.cs-media-title{position:absolute;left:0;right:0;bottom:4.2cqw;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:1.25cqw;color:#c8d4b8}
@media(max-width:600px){
.deckpage .cs-text{margin-left:0}
.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;max-width:none}
.cs-rules div{display:block}
.cs-steps{grid-template-columns:repeat(2,minmax(0,1fr));width:auto}
.deckpage .slide.cs-media{aspect-ratio:4/3}
.deckpage .frame .cs-media-box img{max-width:88%;max-height:70%;top:44%}
.cs-media-title{font-size:12px;bottom:10px}
}
.gate{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.gate[hidden]{display:none}
.gate input{font:inherit;color:var(--strong);background:none;border:0;border-bottom:1px solid var(--line);padding:4px 0;width:180px;outline:none;transition:border-color .15s}
.gate input:focus{border-color:var(--strong)}
.gate button{font:inherit;color:var(--soft);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.gate button:hover{color:var(--strong)}
.gate-err{flex-basis:100%;margin:0;font-size:12px;color:var(--muted);min-height:1em}