/* Observatory: the shared look for the homepage (body.home), All Projects (body.index) and the case studies (body.case).
   Every hex is measured from a mood-board entry (~/Desktop/dev/moodboard/library.json):
   Day    20260927-walnut-forest-palette  paper #e3ccb4 (Pale Oak) · text/dots #633e14 (Walnut) · accent #034732 (Deep Forest) · marks #008148 (Sea Green)
   Night  20260927-walnut-forest-palette  ground #034732 (Deep Forest) · text/dots/accent/marks #e3ccb4 (Pale Oak)
   Charts (same entry): findings #008148 (Sea Green) in both modes; second series #034732 by day, #e3ccb4 by night
   Night applies under html.dark, set by assets/js/theme.js. */
:root{
  color-scheme: light;
  --bg:#e3ccb4; --surface:#e3ccb4; --dot:#633e14; --dot-deep:#633e14; --text:#633e14; --accent:#034732; --mark:#008148; --band:#e3ccb4; --chart-ink:var(--text); --chart-muted:#633e14; --chart-a:#008148; --chart-b:#034732; --warm:#008148;
  --panel: var(--bg);
  --feather: 40px;
  --strip: 124px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: "Cedarville Cursive", "Segoe Script", "Bradley Hand", cursive;
  --g: clamp(16px, 3.6vw, 56px);
  --ease: .6s ease;
}
html.dark{
  color-scheme: dark;
  --bg:#034732; --surface:#034732; --dot:#e3ccb4; --dot-deep:#e3ccb4; --text:#e3ccb4; --accent:#e3ccb4; --mark:#e3ccb4; --band:#034732; --chart-muted:#e3ccb4; --chart-b:#e3ccb4; --warm:#e3ccb4;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color var(--ease),color var(--ease)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--mark)}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--bg)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:400}

/* ---------- masthead (both pages) ---------- */
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--g) 0}
.lockup{font-family:var(--hand);font-size:25px;line-height:1.1;text-decoration:none;white-space:nowrap}
.mast nav{display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;justify-content:flex-end}
.mast nav a{text-decoration:none}
.theme-toggle{appearance:none;background:transparent;color:var(--text);border:1px solid color-mix(in srgb, var(--text) 35%, transparent);padding:6px 10px;cursor:pointer;transition:color var(--ease),border-color var(--ease)}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- homepage: the sky, ground and band ---------- */
.home #ground,.home #band,.home #sky{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;pointer-events:none}
.home #ground{background:var(--bg);z-index:0;transition:background-color var(--ease)}
.home #band{background:var(--band);z-index:0;opacity:0;transition:background-color var(--ease)}
.home #sky{z-index:1}

/* Text sits on the ground colour, feathered at the edges, so dots and canvas labels pass behind it. */
.home .topstrip{position:fixed;top:0;left:0;right:0;z-index:5;height:calc(env(safe-area-inset-top,0px) + var(--strip));background:var(--panel);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--feather)),transparent);mask-image:linear-gradient(to bottom,black calc(100% - var(--feather)),transparent)}
.home .mast{position:fixed;top:0;left:0;right:0;z-index:6;pointer-events:none}
.home .mast > *{pointer-events:auto}
.home .readout{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 76px);right:var(--g);margin:0;color:var(--text);text-align:right;max-width:min(46rem, 60vw);transition:color var(--ease)}
.home #ro-note{display:block;text-transform:none;letter-spacing:.02em;font-size:10px}

.home .rail{position:fixed;z-index:6;right:calc(var(--g) - 4px);top:22vh;bottom:22vh;width:30px;list-style:none;margin:0;padding:0}
.home .rail::before{content:"";position:absolute;right:4px;top:0;bottom:0;width:1px;background:color-mix(in srgb, var(--text) 35%, transparent)}
.home .rail li{position:absolute;right:0;transform:translateY(-50%)}
.home .rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:4px 0}
.home .rail button::after{content:"";width:9px;height:1px;background:currentColor}
.home .rail button.minor::after{width:5px}
.home .rail button:hover,.home .rail button[aria-current="true"]{color:var(--accent)}
.home .rail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home .rail .marker{position:absolute;right:1px;width:7px;height:7px;border-radius:50%;background:var(--mark);transform:translateY(-50%)}

/* ---------- homepage plates: one per screen, text pinned to corners ---------- */
.home main{position:relative;z-index:2;overflow-x:clip}
.home .sec{position:relative;height:100vh;height:100dvh;min-height:600px}
.home .c{position:absolute;z-index:2}
.home .c::before{content:"";position:absolute;inset:calc(var(--feather) * -1);z-index:-1;background:var(--panel);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,black var(--feather),black calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,black var(--feather),black calc(100% - var(--feather)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,black var(--feather),black calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,black var(--feather),black calc(100% - var(--feather)),transparent);
  mask-composite:intersect}
.home .tl{top:calc(env(safe-area-inset-top,0px) + var(--strip) + 8px);left:var(--g);max-width:min(44vw, 40rem)}
.home .bl{bottom:24px;left:var(--g);max-width:min(36vw, 30rem)}
.home .br{bottom:92px;right:calc(var(--g) + 44px);max-width:19rem;text-align:right}

.eyebrow{color:var(--accent);margin:0 0 18px;display:flex;gap:6px 16px;flex-wrap:wrap}
.eyebrow span:first-child::before,.fig .cap.tl::before{content:"";display:inline-block;width:7px;height:7px;background:var(--mark);margin-right:8px;vertical-align:1px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(58px, 8.4vw, 156px);line-height:.88}
h2{font-size:clamp(48px, 6.2vw, 112px);line-height:.9}
h1 em,h2 em{color:var(--accent)}
.home #top h1{font-size:clamp(54px, 7vw, 120px)}
.statement{font-family:var(--serif);font-size:clamp(24px, 2.2vw, 34px);line-height:1.12;margin:0;text-wrap:balance}
.desc{font-size:19px;line-height:1.45;margin:18px 0 0;max-width:27rem}
.small{font-size:15px;line-height:1.5;margin:0}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:13px 16px;border:1px solid var(--accent);color:var(--text);transition:background-color .25s,color .25s,border-color var(--ease)}
.btn.solid{background:var(--mark);border-color:var(--mark);color:var(--bg)}
.btn:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tags li{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);padding:5px 8px}
.read{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.read:hover{text-decoration:underline}
.cap{color:var(--text);margin:0 0 10px}
.finding{font-family:var(--serif);font-size:24px;line-height:1.12;margin:0}
/* Abstract (Beck, 2026-09-30, study D): the intro as a serif statement under a one-line heading, the
   "bit about me" list as a row of five along the foot; the planet fits the space between (sky.mjs). */
.home #abstract h2{font-size:clamp(46px, 4.9vw, 88px)}
.about-intro{font-family:var(--serif);font-size:clamp(19px, 1.74vw, 30px);line-height:1.16;margin:22px 0 0;text-wrap:pretty}
.home .row{bottom:26px;left:var(--g);right:calc(var(--g) + 44px)}
.about-h{margin:0 0 12px}
.about{list-style:none;margin:0;padding:14px 0 0;border-top:1px dotted color-mix(in srgb, var(--text) 45%, transparent);display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:22px}
.about li{font-size:13px;line-height:1.42}
.about span{display:block;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--accent);margin-bottom:4px}
/* Short windows: smaller type, so the statement, the planet and the row still share one screen. */
@media (max-height: 820px) and (min-width: 700px){
  .about-intro{font-size:clamp(17px, 1.45vw, 24px)}
  .about li{font-size:12px;line-height:1.38}
  .about span{font-size:15px;margin-bottom:2px}
}
.refs{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.refs li{display:grid;grid-template-columns:2.6rem 1fr;gap:8px;align-items:baseline}
.refs a{font-family:var(--serif);font-size:28px;line-height:1.05;text-decoration:none}
.refs .sub{display:block;font-size:14.5px;margin-top:3px}
.email{font-family:var(--mono);font-size:13px;user-select:all;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);padding:10px 12px;display:inline-block}
.links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
/* Case studies strip (Fig. 3): heading and lede on one line, the index table below, then the button.
   Taller than a screen when it needs to be; the tiles figure sits in the gap between heading and lede. */
.home .sec.st-sec{height:auto;min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + var(--strip) + 8px) calc(var(--g) + 44px) 72px var(--g);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,22rem);grid-template-areas:"head . lede" "body body body";align-items:end;row-gap:28px;align-content:start}
.home .sec.st-sec .c{position:relative;inset:auto;max-width:none}
.st-head{grid-area:head}
.st-lede{grid-area:lede}
.st-body{grid-area:body}
.st-head .eyebrow{margin-bottom:12px}
.home #case-studies h2{font-size:clamp(46px, 4.9vw, 88px)}
.st-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.st-list li{border-bottom:1px dotted color-mix(in srgb, var(--text) 45%, transparent)}
.st-list a{display:grid;grid-template-columns:44px minmax(0,1.05fr) minmax(0,1.5fr) 28px;gap:24px;align-items:baseline;padding:20px 0;text-decoration:none}
.st-no{color:var(--accent)}
.st-topic{display:block;font-size:9px;opacity:.75}
.st-list .st-name{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.25;letter-spacing:0;margin:6px 0 0}
.st-find{font-family:var(--serif);font-size:24px;line-height:1.2}
.st-cap{display:block;font-size:9px;opacity:.75;margin-bottom:6px}
.st-go{justify-self:end;font-size:18px;transition:transform .3s ease}
.st-list a:hover .st-find{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--mark)}
.st-list a:hover .st-go{transform:translateX(4px)}
.st-list a:focus-visible{outline-offset:-2px}
.st-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.st-count{margin:0;opacity:.75}

/* ---------- All Projects: specimen plates ---------- */
.index .mast{position:sticky;top:0;z-index:6;background:var(--bg);padding-bottom:16px;transition:background-color var(--ease)}
.index .wrap{padding-inline:var(--g);max-width:1440px;margin-inline:auto}
.index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:clamp(32px,6vw,88px) 28px;border-bottom:1px solid color-mix(in srgb, var(--text) 20%, transparent)}
.index-head .eyebrow{margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,32px);padding-block:36px 72px}
.tile{display:flex;flex-direction:column;gap:18px;outline:none}
.fig{position:relative;aspect-ratio:4/3;max-width:100%;background:linear-gradient(var(--mark) 0 0) top left/18px 2px no-repeat,linear-gradient(var(--mark) 0 0) top left/2px 18px no-repeat,linear-gradient(var(--mark) 0 0) top right/18px 2px no-repeat,linear-gradient(var(--mark) 0 0) top right/2px 18px no-repeat,linear-gradient(var(--mark) 0 0) bottom left/18px 2px no-repeat,linear-gradient(var(--mark) 0 0) bottom left/2px 18px no-repeat,linear-gradient(var(--mark) 0 0) bottom right/18px 2px no-repeat,linear-gradient(var(--mark) 0 0) bottom right/2px 18px no-repeat;cursor:crosshair;overflow:hidden;transition:background-color var(--ease),box-shadow .3s}
.fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tile.live .fig,.tile:focus-visible .fig{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dot) 60%, transparent)}
.fig .cap{position:absolute;z-index:2;margin:0;pointer-events:none;letter-spacing:.16em}
.fig .cap.tl{top:14px;left:16px}
.fig .cap.br{bottom:14px;right:16px;text-align:right}
.fig.text{cursor:default;display:flex;flex-direction:column;justify-content:center;padding:48px 24px}
.fig.text .statement{font-size:clamp(22px,2vw,28px)}
.meta h3{font-size:clamp(26px,2.2vw,32px);line-height:1.02;letter-spacing:-.01em}
.meta p{margin:8px 0 0;font-size:15.5px;line-height:1.5;max-width:34rem}
.meta .fig-note{margin:6px 0 0;font-size:13px;line-height:1.4}
.meta .fig-note:empty{display:none}
.meta .tags{margin-top:12px}
.meta .read{margin-top:12px}
.meta .pending{margin:12px 0 0;color:var(--accent);font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.foot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb, var(--text) 20%, transparent);padding-block:18px 56px}

/* ---------- case studies (body.case) ---------- */
.case .mast{position:sticky;top:0;z-index:6;background:var(--bg);padding-bottom:16px;transition:background-color var(--ease)}
.case .wrap{padding-inline:var(--g);max-width:1200px;margin-inline:auto}
.case-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(32px,6vw,88px) clamp(32px,5vw,64px);border-bottom:1px solid color-mix(in srgb, var(--text) 20%, transparent)}
.case-intro h1{font-size:clamp(48px,6vw,96px);line-height:.92}
.case-intro .lede{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.15;margin:20px 0 0;text-wrap:balance}
.case-meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:24px 0 0}
.case-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.case-meta dd{margin:0;font-size:15.5px}
.hero-plate .fig{aspect-ratio:4/3}
.hero-plate .fig-note{margin:8px 0 0;font-size:13px;line-height:1.4}
.prose{max-width:65ch;margin-inline:auto;padding-block:40px 24px}
.prose h2{font-size:clamp(34px,3.4vw,52px);line-height:1;margin:56px 0 18px}
.prose h3{font-size:clamp(24px,2.2vw,32px);line-height:1.08;margin:40px 0 12px;letter-spacing:-.01em}
.prose p,.prose li{font-size:18px;line-height:1.62}
.prose a{color:var(--text);text-decoration-color:var(--accent)}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul.dash,.prose ul.tags{list-style:none;padding-left:0}
/* .prose li's 18px body-copy size (above) has equal specificity to .tags li's 10px chip size
   and comes later in the sheet, so it was winning inside prose — the tags read as loud,
   oversized labels instead of small mono chips. This selector's extra class/element outranks
   both, restoring the chip size and matching .case-meta dt / eyebrow's own ~10.5px/.09em. */
.prose ul.tags li{font-size:10.5px;letter-spacing:.09em}
.prose ul.dash{display:grid;gap:18px;margin:24px 0}
.prose ul.dash li{display:flex;gap:10px}
.prose ul.dash li>span:first-child{flex:none;color:var(--accent)}
figure.chart{margin-block:36px;width:min(135%, calc(100vw - 2 * var(--g)));margin-left:50%;transform:translateX(-50%)}
.chart-cap{display:block;color:var(--text);margin:0 0 10px}
.chart-slot{min-height:120px}
.chart-slot svg{display:block;max-width:100%;height:auto;overflow:visible;--plot-background:var(--bg)}
/* Plot's own legend swatches (residence-vs-workplace) render in its default sans; Plot
   scopes their built-in styles with :where(), which carries zero specificity, so this plain
   attribute selector overrides it regardless of load order without needing the swatches'
   randomly-hashed class name. No new colour — inherits the surrounding chart text colour. */
.chart-slot [class*="-swatches"]{font-family:var(--mono);font-size:10px}
.prose .chart-source{margin:8px 0 0;font-size:13px;line-height:1.4}
details.chart-data{margin-top:8px}
details.chart-data summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.chart-table,.provenance-table{overflow-x:auto;margin-top:8px}
.chart-table table,.provenance-table table{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.chart-table th,.chart-table td,.provenance-table th,.provenance-table td{padding:4px 12px 4px 0;text-align:left;border-bottom:1px solid color-mix(in srgb, var(--text) 15%, transparent)}
.plate-shot{margin:32px 0;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);padding:12px}
.plate-shot img{display:block;width:100%;height:auto}
.video{position:relative;aspect-ratio:16/9;max-width:100%;margin:24px 0;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;opacity:.6}
.case-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:32px;border-top:1px solid color-mix(in srgb, var(--text) 20%, transparent)}
.case-nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.case-nav a:hover{color:var(--accent)}
.case .foot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:18px 56px}
@media (max-width: 759px){
  .case-intro{grid-template-columns:minmax(0,1fr)}
  figure.chart{width:100%;margin-left:0;transform:none}
  .prose p,.prose li{font-size:17px}
}

/* ---------- homepage hero: the workshop sky ---------- */
.home .hero .hero-col{width:300px;max-width:none;display:flex;flex-direction:column;gap:26px}
.hero .intro{font-size:20px;line-height:1.4;margin:0}
.hero .now{border-top:1px dotted color-mix(in srgb, var(--text) 45%, transparent);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.hero .now[hidden]{display:none}
.hero .now-h{color:var(--accent);margin:0;font-size:9px}
.hero #now-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hero .now-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:44px;color:var(--text)}
.hero .now-item .mono{display:flex;align-items:center;gap:6px;font-size:9px}
.hero .now-item .line{font-style:italic;font-size:15px;line-height:1.4}
.hero .now-item:hover .line{text-decoration:underline;text-underline-offset:3px}
.hero .wdot{width:6px;height:6px;border-radius:50%;background:var(--warm);display:inline-block;flex:none}
html.dark .hero .key-day,html:not(.dark) .hero .key-night{display:none}
.hero .now-bar{display:flex;justify-content:space-between;align-items:center}
.hero .rw{display:flex;gap:2px;margin:-12px -12px -12px 0}
.hero .rw-btn,.hero .rw-today{all:unset;cursor:pointer;font-family:var(--mono);color:var(--accent)}
.hero .rw-btn{width:40px;height:40px;text-align:center;font-size:14px}
.hero .rw-btn:disabled{cursor:default;opacity:.3}
.hero .rw-today{text-decoration:underline;text-underline-offset:3px}
.hero .rw-btn:focus-visible,.hero .rw-today:focus-visible{outline:1px dashed var(--accent);outline-offset:2px}
.hero .now-span,.hero .now-foot{margin:-4px 0 0;font-size:9px;line-height:1.8;opacity:.8}
.hero .now-foot[hidden]{display:none}
/* Warm today, resting in the viewed week: the dot keeps its space, hidden. */
.hero .body.warm:not(.lit) .lbl .wdot{visibility:hidden}
/* A body resting in the as-of data, warm only in the viewed week: an inline dot right before the
   name, built to take zero net width (-11+6+5=0) so no label ever re-wraps when it shows. */
.hero .lbl .vdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warm);margin-left:-11px;margin-right:5px;vertical-align:1px;visibility:hidden}
.hero .body.lit .lbl .vdot{visibility:visible}
.hero .more{font-size:14px;color:var(--accent)}
.hero .bodies{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero .body{all:unset;box-sizing:border-box;position:absolute;border-radius:50%;cursor:pointer;pointer-events:auto}
.hero .bodies.faded .body{pointer-events:none}
.hero .bodies:focus-within{opacity:1 !important}
.hero .lbl{position:absolute;font-family:var(--mono);font-size:9px;line-height:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--text);opacity:.75}
.hero .lbl .wdot{margin-right:5px;vertical-align:1px}
.hero .body:hover .lbl,.hero .body:focus-visible .lbl,.hero .body[aria-expanded="true"] .lbl{opacity:1;text-decoration:underline;text-underline-offset:3px}
.hero .body:focus-visible,.hero .now-item:focus-visible,.hero .fn-close:focus-visible{outline:1px dashed var(--accent);outline-offset:6px}
.hero .desc{position:absolute;margin:0;text-align:center;font-size:13px;line-height:19px;opacity:.85;color:var(--text);pointer-events:none}
.hero .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .body.hovered .lbl{opacity:1}
.hero .region-label{position:absolute;margin:0;font-family:var(--mono);font-size:10px;line-height:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);pointer-events:none;white-space:nowrap}
.hero .region-label span{opacity:.6}
.hero .sel-mark{position:absolute;pointer-events:none;z-index:3}
.hero .sel-mark i{position:absolute;width:10px;height:10px;border:0 solid var(--accent)}
.hero .sel-mark i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.hero .sel-mark i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.hero .sel-mark i:nth-child(3){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.hero .sel-mark i:nth-child(4){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.hero .field-note{position:absolute;z-index:4;width:300px;box-sizing:border-box;padding:20px 22px 22px;background:var(--bg);color:var(--text);border:1px solid color-mix(in srgb, var(--text) 35%, transparent);display:flex;flex-direction:column;gap:10px}
.hero .field-note[hidden]{display:none}
.hero .fn-head{display:flex;justify-content:space-between;align-items:flex-start}
.hero .fn-eyebrow{margin:0;font-size:9px}
.hero .fn-close{all:unset;cursor:pointer;width:44px;height:44px;margin:-14px -14px 0 0;text-align:center;font-family:var(--mono);font-size:18px;color:var(--text)}
.hero #fn-name{font-size:30px;line-height:1.05;color:var(--accent)}
.hero #fn-name:focus{outline:none}
.hero .fn-blurb,.hero .fn-line{margin:0;font-size:15px;line-height:1.45}
.hero .fn-now{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px dotted color-mix(in srgb, var(--text) 45%, transparent)}
.hero .fn-now[hidden]{display:none}
.hero .fn-now .mono{margin:0;font-size:9px;color:var(--accent)}
.hero .fn-line{font-style:italic}
.hero .fn-link{font-size:14px;color:var(--accent)}
.hero .fn-link[hidden]{display:none}
.hero .fn-trail{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dotted color-mix(in srgb, var(--text) 45%, transparent)}
.hero .fn-trail .mono{margin:0;font-size:9px;color:var(--accent)}
.hero #fn-trail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto}
.hero #fn-trail-list li{font-size:13px;line-height:1.4;padding-left:8px;border-left:2px solid transparent}
.hero #fn-trail-list li.inweek{border-left-color:var(--warm)}
.hero #fn-trail-list .d{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.hero .fn-more{all:unset;cursor:pointer;font-family:var(--mono);font-size:9px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.hero .fn-more[hidden]{display:none}
.hero .hover-card{position:absolute;z-index:4;width:240px;box-sizing:border-box;padding:14px 16px;background:var(--bg);color:var(--text);border:1px solid color-mix(in srgb, var(--text) 35%, transparent);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hero .hover-card[hidden]{display:none}
.hero .hc-eyebrow{margin:0;font-size:9px;opacity:.75}
.hero .hc-name{margin:0;font-family:var(--serif);font-size:22px;line-height:1.1}
.hero .hc-text{margin:0;font-size:14px;line-height:1.45}
.hero .phone-sky{display:none}
/* The legend: how to read the sky, in its bottom-right corner (hero.mjs moves it into the column
   when a project sits there). Stacked layouts put it in the flow, above the sky. */
.hero .legend{position:absolute;z-index:3;right:calc(var(--g) + 64px);bottom:48px;width:300px;box-sizing:border-box;padding:14px 16px 12px;background:var(--bg);color:var(--text);border:1px solid color-mix(in srgb, var(--text) 55%, transparent);transition:background-color var(--ease),border-color var(--ease)}
.hero .legend.in-col{position:static;width:auto}
.hero .lg-h{margin:0 0 10px;font-size:9px;color:var(--accent)}
.hero .legend dl{margin:0;display:grid;grid-template-columns:34px 1fr;gap:9px 12px;align-items:center}
.hero .legend .lg-row{display:contents}
.hero .legend dt{display:flex;justify-content:center;align-items:center}
.hero .legend dd{margin:0;font-size:14px;line-height:1.3}
.hero .lg-warm{width:9px;height:9px;border-radius:50%;background:var(--warm);animation:lg-pulse 2.4s ease-in-out infinite}
.hero .lg-rest{width:7px;height:7px;border-radius:50%;background:var(--text);opacity:.3}
@keyframes lg-pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--warm) 30%, transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--warm) 0%, transparent)}}
.hero.no-sky .now,.hero.no-sky .legend{display:none}
.hero .now-more{font-family:var(--mono);font-size:9px;line-height:1.8;opacity:.8;margin:0}

/* hero, stacked (below 1200×700, and all phones): column first, then one block per constellation.
   These use `.home .sec.hero.stacked` (not `.hero.stacked`) so they outrank the phones @media
   block below on specificity — that block comes later in the sheet and would otherwise win. */
.home .sec.hero.stacked{height:auto;min-height:100vh;min-height:100dvh;padding:calc(env(safe-area-inset-top,0px) + var(--strip) + 8px) var(--g) 72px;display:flex;flex-direction:column;gap:40px;box-sizing:border-box}
.home .sec.hero.stacked .c{position:relative;inset:auto;max-width:36rem;width:auto}
.home .sec.hero.stacked .bodies{display:none}
.home .sec.hero.stacked .key-hover{display:none} /* hover does nothing in the stacked layout */
.home .sec.hero.stacked .legend{position:relative;right:auto;bottom:auto;z-index:2;width:auto;max-width:36rem}
.home .sec.hero.stacked .phone-sky{display:flex;flex-direction:column;gap:28px;position:relative;z-index:2}
.hero .cblock{position:relative}
.hero .cblock .region-label{position:static;margin:0 0 4px}
.hero .cwrap{position:relative}
.hero .cwrap canvas{position:absolute;left:0;top:0;pointer-events:none}
.hero .cwrap .body{min-width:44px;min-height:44px}
.hero .field-note.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:7;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.home #contact h2{font-size:clamp(34px, 3.4vw, 48px);line-height:1.1}
.home #contact .contact-sub{margin-top:18px;max-width:34rem}
.home #contact .cap a{color:inherit}
@media (min-width: 700px){ .home #contact .tl{top:50%;transform:translateY(-50%)} } /* headline sits at the vertical centre, the address stays at the foot */

/* ---------- homepage landing: the sunrise ---------- */
.home #sunrise-canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;pointer-events:none;z-index:0;image-rendering:pixelated}
.home .sunrise .sunrise-col{width:360px;max-width:none;display:flex;flex-direction:column;gap:16px}
.sunrise .intro{font-size:21px;line-height:1.4;margin:0}
.sunrise .more{font-size:14px;color:var(--accent)}
/* the caption belongs to the picture: fixed to the horizon, fading with the landing (--landing: 1 at the top, 0 once gone) */
.home .horizon-cap{position:fixed;margin:0;font-size:9px;letter-spacing:.14em;opacity:var(--landing, 1);pointer-events:none;left:32.6%;top:calc(65.56% + 14px);background:var(--bg);padding:3px 7px}
.hero .workshop-h{margin:0;font-size:10px;letter-spacing:.14em;color:var(--accent)}
.hero .ws-intro{margin:0;font-size:15px;line-height:1.45}
.home .rail{opacity:calc(1 - var(--landing, 0))}

/* ---------- phones ---------- */
@media (max-width: 1100px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 759px){ .grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 699px){
  :root{--strip:84px}
  .mast nav .navlink{display:none}
  .lockup{font-size:22px}
  .home .readout{top:calc(env(safe-area-inset-top,0px) + 58px);font-size:9px;max-width:calc(100vw - 2 * var(--g))}
  .home .rail{display:none}
  .home .sec{height:auto;min-height:0;padding:56vh var(--g) 72px;display:grid;gap:18px}
  .home .c{position:relative;inset:auto;max-width:none;text-align:left}
  h1{font-size:clamp(50px, 14vw, 72px)}
  h2{font-size:clamp(42px, 12vw, 64px)}
  .home #contact{padding-bottom:110px}
  .about{grid-template-columns:minmax(0, 1fr);gap:14px}
  .home .sec.st-sec{padding:56vh var(--g) 72px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lede" "body";row-gap:18px}
  .st-list a{grid-template-columns:28px minmax(0,1fr) 20px;gap:6px 12px}
  .st-find{grid-column:2;font-size:20px}
  .st-go{grid-row:1;grid-column:3}
  .st-foot{flex-direction:column-reverse;align-items:flex-start}
}
.home .sec.sunrise{height:100vh;height:100dvh;min-height:0;padding:0}
@media (max-width: 1199px), (max-height: 699px){
  .home .sec.sunrise .sunrise-col{position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--strip) + 16px);left:var(--g);right:var(--g);width:auto}
  .home .sec.sunrise .horizon-cap{left:var(--g);top:calc(60% + 12px)}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} .hero .lg-warm{animation:none;box-shadow:0 0 0 4px color-mix(in srgb, var(--warm) 25%, transparent)} }