/*
  Claror: a concept site for a fictional agency, made by Labs.
  Base layer, in the studio's panel system: a cool grey page holding white panels, dark map panels, lime used as
  a fill for whatever the sun is on, Archivo for the voice, Instrument Serif italic for the poetic line, Space Mono
  for the small caps and every readout. Then the chrome every page shares and the parts that answer to the sun
  (the dial, the island, the pins, the day strips, the light-study photograph).
*/

/* ---------- fonts (self-hosted, SIL Open Font Licence, Latin subsets) ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --page: #e7e7ea;
  --panel: #ffffff;
  --panel-soft: #f4f4f6;
  --dark: #0d0e10;
  --dark-2: #1b1c20;
  --ink: #16171a;
  --ink-2: #45464c;
  --muted: #6d6e74;
  --line: rgba(20, 20, 22, 0.10);
  --line-strong: rgba(20, 20, 22, 0.22);
  --edge: rgba(20, 20, 22, 0.46);
  --lime: #d7f169;
  --lime-deep: #c4e24a;
  --lime-wash: #eef8c6;
  --lime-ink: #23300a;
  --amber: #f2a24a;
  --btn-bg: #141517;
  --btn-fg: #ffffff;
  --focus: var(--ink);
  --surface: var(--panel);
  color-scheme: light;

  /* names the page scripts and drawings already use */
  --paper: var(--panel);
  --paper-lit: #ffffff;
  --paper-shade: #ececef;
  --stone: #dadbe0;
  --ink-3: var(--muted);
  --hair: var(--line);
  --hair-strong: var(--line-strong);
  --on-ink: var(--btn-fg);

  --sans: "Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --display: "Anton", "Archivo", sans-serif;

  --container: 1560px;
  --gutter: clamp(16px, 2.4vw, 40px);
  --pad: clamp(22px, 5vw, 72px);
  --gap: clamp(14px, 1.7vw, 28px);
  --r-panel: 30px;
  --r-card: 18px;
  --header-h: 78px;
  --strip-h: 0px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: var(--ease);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-theme: 600ms;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* the distance from the screen edge to a panel's edge, at any width */
  --edge-x: max(var(--gutter), (100vw - var(--container)) / 2);
}

/* night is the studio's dark theme: the sun going down is what switches it */
html[data-theme="night"] {
  --page: #0b0c0e;
  --panel: #17181b;
  --panel-soft: #202225;
  --dark: #0f1012;
  --dark-2: #1d1f23;
  --ink: #f0f1f3;
  --ink-2: #c6c7cc;
  --muted: #9a9ba1;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --edge: rgba(255, 255, 255, 0.46);
  --lime-wash: #3a4319;
  --btn-bg: #f0f1f3;
  --btn-fg: #141517;
  --paper-lit: #202225;
  --paper-shade: #242629;
  --stone: #2c2e33;
  color-scheme: dark;
}

/* a dark surface inside a light page: the map panels, the glass card, the sun dock */
.on-dark {
  --ink: #ffffff;
  --ink-2: #cdced3;
  --muted: #a6a7ad;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --edge: rgba(255, 255, 255, 0.5);
  --btn-bg: #ffffff;
  --btn-fg: #141517;
  --focus: var(--lime);
  --paper-shade: #1e2024;
  --paper-lit: #26282d;
  color: var(--ink);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: var(--gutter);
  padding-top: calc(var(--gutter) + var(--strip-h));
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, [role="slider"] { touch-action: manipulation; }
select, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--lime-ink); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 300; padding: 10px 16px; background: var(--btn-bg); color: var(--btn-fg);
  border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* the theme crossfades only while the sun is crossing the horizon */
html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color var(--t-theme) var(--ease-io), color var(--t-theme) var(--ease-io),
    border-color var(--t-theme) var(--ease-io), fill var(--t-theme) var(--ease-io), stroke var(--t-theme) var(--ease-io) !important;
}

/* ---------- type ---------- */
.display, .display-xl, .display-l, .display-m {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
.display { font-size: clamp(2.6rem, 1rem + 4.4vw, 6rem); letter-spacing: -0.035em; line-height: 0.95; }
.display-xl { font-size: clamp(2.1rem, 1rem + 3.3vw, 4.25rem); letter-spacing: -0.025em; line-height: 1.02; }
.display-l { font-size: clamp(1.75rem, 1rem + 1.9vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.06; }
.display-m { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); letter-spacing: -0.012em; line-height: 1.14; }
.poem, .display em, .display-xl em, .display-l em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.serif-line { font-family: var(--sans); font-size: 1.1875rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.lede { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 40ch; text-wrap: pretty; }
.kicker, .label {
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--muted);
}
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.num--still { font-variant-numeric: lining-nums proportional-nums; font-feature-settings: normal; }
.serif-num { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; font-weight: 500; letter-spacing: -0.02em; }
.mono { font-family: var(--mono); }

/* ---------- panels: every section is one ---------- */
main { display: block; }
.panel {
  --surface: var(--panel);
  position: relative; max-width: var(--container); margin: 0 auto var(--gutter);
  background: var(--panel); border-radius: var(--r-panel); overflow: clip;
}
.panel--dark { --surface: var(--dark); background: var(--dark); }
.sec { padding: clamp(44px, 6vw, 88px) var(--pad); }
.sec--top { padding-top: max(var(--header-h), clamp(44px, 6vw, 88px)); }
.wrap { width: 100%; }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 60px); }

/* the two-column head the studio uses: a big line left, the reason and the action right */
.split-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
.split-head .kicker { margin-bottom: 14px; }
.split-head .lede { max-width: 44ch; }

/* ---------- the concept label: in its own lane, never on the page ---------- */
.fiction {
  position: fixed; z-index: 250; display: inline-flex; align-items: center; gap: 8px;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: 0.65625rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
}
.fiction__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }
.fiction__arrow { width: 10px; height: 10px; flex: none; transition: transform 300ms var(--ease); }
.fiction:focus-visible { outline-color: var(--lime); }
/* desk: it runs up the grey margin to the left of the panels, a lane of its own */
@media (min-width: 821px) {
  :root { --gutter: clamp(32px, 2.4vw, 40px); }
  .fiction {
    left: calc((var(--edge-x) - 24px) / 2); bottom: var(--gutter); width: 24px; padding: 12px 0; justify-content: center; border-radius: 999px;
    writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100svh - 2 * var(--gutter));
  }
  .fiction__arrow { transform: rotate(180deg); }
  .fiction:hover .fiction__arrow { transform: rotate(180deg) translate(-2px, 2px); }
}

/* ---------- the floating controls ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--strip-h) + 18px) calc(var(--edge-x) + 12px) 0;
}
.site-header > * { pointer-events: auto; }
.glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 8px 28px rgba(30, 32, 38, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-theme="night"] .glass { background: rgba(30, 32, 36, 0.72); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); }
/* the brand pill: the wordmark and the three pages, top centre */
.topbar {
  position: absolute; left: 50%; top: calc(var(--strip-h) + 18px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px; border-radius: 14px; color: #26272b;
}
html[data-theme="night"] .topbar { color: #eef0f2; }
.topbar .wordmark { display: flex; align-items: center; min-height: 34px; padding: 0 12px 0 10px; }
.topbar .wordmark svg { height: 17px; width: auto; }
.topbar__div { width: 1px; height: 20px; background: currentColor; opacity: 0.18; margin: 0 6px 0 2px; }
.topbar__link {
  position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transition: background-color 250ms var(--ease);
}
.topbar__link:hover { background: rgba(20, 20, 22, 0.07); }
html[data-theme="night"] .topbar__link:hover { background: rgba(255, 255, 255, 0.1); }
.topbar__link[aria-current="page"]::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; }
.site-header__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.wordmark { display: block; color: inherit; line-height: 0; text-decoration: none; }
.wordmark svg { width: auto; height: 30px; overflow: visible; }

/* white pills, and the black Menu pill */
.hpill {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); color: #17181b; border: 1px solid rgba(20, 20, 22, 0.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform 400ms var(--ease), border-color 250ms;
}
.hpill:hover { transform: translateY(-1px); border-color: rgba(20, 20, 22, 0.3); }
html[data-theme="night"] .hpill { background: rgba(30, 32, 36, 0.78); border-color: rgba(255, 255, 255, 0.16); color: #eef0f2; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 17px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-size: 0.8125rem; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 400ms var(--ease), opacity 300ms;
}
.menu-btn:hover { transform: translateY(-1px); opacity: 0.9; }
.menu-btn__icon { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; line-height: 0; }
.menu-btn__icon i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.menu-btn__icon i:first-child { border-bottom: 5px solid currentColor; }
.menu-btn__icon i:last-child { border-top: 5px solid currentColor; }

/* day and night: the studio's toggle. Pressing it sends the sun to dusk, or back to midday */
.daynight { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; }
.daynight__track {
  width: 50px; height: 28px; padding: 3px; border-radius: 999px; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(20, 20, 22, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.daynight__knob {
  position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #141517; color: #fff; transition: transform 380ms var(--ease);
}
.daynight__knob svg { position: absolute; width: 12px; height: 12px; transition: opacity 250ms; }
.daynight__moon { opacity: 0; }
html[data-theme="night"] .daynight__track { background: rgba(30, 32, 36, 0.78); border-color: rgba(255, 255, 255, 0.18); }
html[data-theme="night"] .daynight__knob { transform: translateX(20px); background: var(--lime); color: var(--lime-ink); }
html[data-theme="night"] .daynight__sun { opacity: 0; }
html[data-theme="night"] .daynight__moon { opacity: 1; }

/* the dock: the island in miniature, the hour and how many houses are in sun, carried in the controls */
.dock { padding: 0 16px 0 7px; gap: 10px; }
.dock { max-width: 260px; overflow: hidden; }
.dock.is-hidden { max-width: 0; padding: 0; border-width: 0; margin-left: -10px; opacity: 0; pointer-events: none; visibility: hidden; transition: max-width 450ms var(--ease), padding 450ms var(--ease), margin 450ms var(--ease), opacity 250ms, visibility 0s 450ms; }
.dock { transition: max-width 450ms var(--ease), padding 450ms var(--ease), margin 450ms var(--ease), opacity 300ms var(--ease), border-color 250ms, transform 400ms var(--ease); }
.dock [data-dock-island] { width: 46px; flex: none; }
.dock .island { pointer-events: none; }
.dock .island__orbit-line { opacity: 0; }
.dock .island__sun { r: 46; }
.dock .island--mini .island__pins > li.dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-width: 0.5px; }
.dock__line { display: flex; gap: 8px; align-items: baseline; margin: 0; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.dock__line b { font-weight: 700; letter-spacing: 0.04em; }
.dock__line span { opacity: 0.72; }

/* what the page still does without scripts */
.noscript { margin: 0 auto var(--gutter); max-width: var(--container); padding: 14px 22px; background: var(--panel); border-radius: var(--r-card); font-size: 0.875rem; color: var(--ink-2); }
html:not(.js) .dock, html:not(.js) .ribbon-dock, html:not(.js) .hero__instrument, html:not(.js) .isle__arc, html:not(.js) .houses__map, html:not(.js) .filters, html:not(.js) .rail__study, html:not(.js) .masthead__study { display: none; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px;
  background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  transition: transform 400ms var(--ease), opacity 300ms, background-color 250ms, color 250ms;
}
.button:hover { transform: translateY(-2px); opacity: 0.9; }
.button svg { width: 15px; height: 15px; transition: transform 350ms var(--ease); }
.button:hover svg { transform: translateX(3px); }
.button--quiet { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.button--quiet:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--ink); }
.button--lime { background: var(--lime); color: var(--lime-ink); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; font-size: 0.84375rem; font-weight: 600; text-decoration: none;
  transition: gap 250ms var(--ease);
}
.link-arrow:hover { gap: 11px; }
.link-arrow svg { width: 14px; height: 14px; }

/* a price, as a pill with a dot. It takes the lime when its house is in the sun */
.price-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--panel-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms;
}
.price-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.45; transition: opacity 300ms; }
.is-lit .price-pill, .price-pill.is-lit { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.is-lit .price-pill::before, .price-pill.is-lit::before { opacity: 1; }
.chip-dark { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 10px; background: #141517; color: #fff; font-size: 0.75rem; font-weight: 500; }

/* season: four fixed days, a segmented pill */
.seasons { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel-soft); box-shadow: inset 0 0 0 1px var(--line); }
.seasons button {
  min-height: 32px; padding: 0 13px; border-radius: 999px; color: var(--ink-2);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.seasons button:hover { color: var(--ink); }
.seasons button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.on-dark .seasons { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.on-dark .seasons button { color: rgba(255, 255, 255, 0.78); }
.on-dark .seasons button:hover { color: #fff; }
.on-dark .seasons button[aria-pressed="true"] { background: #fff; color: #141517; }
.s-short { display: none; }

/* every readout is mono: the clock, the date, which faces the sun is on */
.readout { font-family: var(--mono); font-size: 0.71875rem; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }

/* ---------- the dial ---------- */
.dial { position: relative; width: 100%;
  --d-line: var(--line-strong); --d-day: var(--ink-2); --d-trail: var(--ink); --d-disc: var(--ink); --d-ring: var(--ink); --d-label: var(--muted); }
.on-dark .dial { --d-line: rgba(255, 255, 255, 0.24); --d-day: rgba(255, 255, 255, 0.55); --d-trail: #ffffff; --d-disc: var(--lime); --d-ring: var(--lime); --d-label: rgba(255, 255, 255, 0.66); }
.dial__slider { display: block; border-radius: 6px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.dial--ribbon .dial__slider { touch-action: pan-y; }
.dial.is-dragging .dial__slider { cursor: grabbing; }
.dial__svg { display: block; overflow: visible; }
.dial__horizon { stroke: var(--d-line); stroke-width: 1; }
.dial__day { fill: none; stroke: var(--d-day); stroke-width: 1; }
.dial__night { fill: none; stroke: var(--d-line); stroke-width: 1; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.dial__trail { fill: none; stroke: var(--d-trail); stroke-width: 2.25; stroke-linecap: round; }
.dial--ribbon .dial__day { stroke-width: 2; }
.dial--ribbon .dial__trail { stroke-width: 3; }
.dial__tick { stroke: var(--d-line); stroke-width: 1; }
.dial__tick--major { stroke: var(--d-label); }
.dial__label, .dial__edge { font-family: var(--mono); font-size: 10px; fill: var(--d-label); letter-spacing: 0.06em; }
.dial__edge { text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; }
.dial__drop { stroke: var(--d-line); stroke-width: 1; stroke-dasharray: 2 3; }
.dial__disc { fill: var(--d-disc); }
.dial__halo { fill: none; stroke: var(--d-ring); stroke-width: 1; opacity: 0.35; transition: opacity 250ms, r 250ms var(--ease); }
.dial__slider:hover .dial__halo, .dial.is-dragging .dial__halo { opacity: 0.7; }
.dial__slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.dial__slider:focus-visible .dial__halo { opacity: 1; stroke-width: 2; }

/* ---------- the island ---------- */
.island { position: relative; width: 100%;
  --land: var(--paper-shade); --coast: var(--ink); --coast-lit: var(--ink); --orbit: var(--line-strong); --letter: var(--muted); --sunc: var(--ink); }
.on-dark .island { --land: #1f2125; --coast: rgba(255, 255, 255, 0.9); --coast-lit: var(--lime); --orbit: rgba(255, 255, 255, 0.24); --letter: rgba(255, 255, 255, 0.62); --sunc: var(--lime); }
html[data-theme="night"] .on-dark .island { --land: #222428; }
.island__svg { width: 100%; height: auto; overflow: visible; }
.island__land { fill: var(--land); stroke: none; transition: fill 400ms; }
.island__bin { fill: none; stroke: var(--coast); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; transition: opacity 140ms linear; }
.island__bin--lit { stroke: var(--coast-lit); stroke-width: 3.4; }
.island__orbit-line { fill: none; stroke: var(--orbit); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
.island__orbit-gap { fill: var(--surface); }
.island__orbit-letter { font-family: var(--mono); font-size: 15px; fill: var(--letter); letter-spacing: 0.05em; }
.island__ray { stroke: var(--sunc); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 0.7; }
.island__sun { fill: var(--sunc); }
.island__orbit.is-down .island__sun, .island__orbit.is-down .island__ray { opacity: 0; }
.island__sun, .island__ray { transition: opacity 300ms; }

/* price pins: white for the houses in shade, lime for the ones the sun is on */
.island__pins { position: absolute; inset: 0; pointer-events: none; }
.island__pins > li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px 0 7px;
  background: #f3f4f6; color: #17181b; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: lining-nums proportional-nums; text-decoration: none; letter-spacing: 0;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  pointer-events: auto; white-space: nowrap;
  transition: color 220ms var(--ease), background-color 220ms var(--ease), box-shadow 220ms;
}
.pin__tick { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1; flex: none; overflow: visible; }
.pin__tick-dot { fill: currentColor; stroke: none; }
.pin__name {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translate(-50%, -3px);
  padding: 4px 9px; background: #ffffff; color: #141517; border-radius: 8px;
  font-size: 0.6875rem; font-weight: 600; opacity: 0; pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  transition: opacity 180ms var(--ease), transform 260ms var(--ease);
}
.pin:hover .pin__name, .pin:focus-visible .pin__name, .pin.is-active .pin__name { opacity: 1; transform: translate(-50%, 0); }
li.is-lit > .pin { background: var(--lime); color: var(--lime-ink); }
.pin:hover, .pin:focus-visible, .pin.is-active { z-index: 5; box-shadow: 0 0 0 2px #ffffff, 0 10px 24px -10px rgba(0, 0, 0, 0.6); outline: none; }
li:has(> .pin:hover), li:has(> .pin:focus-visible), li:has(> .pin.is-active) { z-index: 6; }
.island.is-filtered li:not(.is-match) > .pin { background: rgba(13, 14, 16, 0.6); color: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }

.island--mini .island__pins > li.dot {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--surface); border: 1px solid var(--muted);
  transition: background-color 200ms, border-color 200ms;
}
.island--mini .island__pins > li.dot.is-lit { background: var(--lime); border-color: var(--ink); }
.on-dark .island--mini .island__pins > li.dot.is-lit { border-color: var(--lime); }
.island--mini .island__bin { stroke-width: 2.6; }
.island--mini .island__bin--lit { stroke-width: 6; }

/* ---------- day strips: one bar per half hour, 05:00 to 23:00 ---------- */
.strip { position: relative; height: 38px; --bar: var(--line-strong); --bar-lit: var(--ink); --head: var(--ink); }
.strip__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.strip__bars i { flex: 1 1 0; min-width: 0; height: var(--h, 3px); background: var(--bar); border-radius: 2px 2px 0 0; }
.strip__bars i.is-lit { background: var(--bar-lit); }
.strip__head { position: absolute; inset: -6px 0 0 0; width: 100%; pointer-events: none; transform: translateX(calc((var(--p, 0) - 1) * 100%)); will-change: transform; }
.strip__head::after { content: ""; position: absolute; right: -0.75px; top: 0; bottom: 0; width: 1.5px; background: var(--head); }
.strip__head::before { content: ""; position: absolute; right: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--head); }
.strip__axis { position: absolute; left: 0; right: 0; top: calc(100% + 6px); height: 14px; font-family: var(--mono); font-size: 0.625rem; line-height: 14px; letter-spacing: 0.06em; color: var(--muted); pointer-events: none; }
.strip__axis span { position: absolute; top: 0; transform: translateX(-50%); }
.strip__axis span::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 4px; background: var(--line-strong); }

/* ---------- photographs ---------- */
.print, .media { position: relative; overflow: hidden; background: var(--paper-shade); border-radius: var(--r-card); }
.print img, .media img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.88); color: #17181b; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 0.59375rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; white-space: nowrap;
}
/* four prepared states of one house, crossfaded on the 15 minute detents */
.statephoto { position: relative; overflow: hidden; background: var(--paper-shade); }
.statephoto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease); }
.statephoto > img.is-on { opacity: 1; }

/* the frosted card that sits on a photograph */
.glass-dark {
  background: rgba(16, 18, 22, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* thin crosshair guides over a photograph */
.guides { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.guides .v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.16); }
.guides .h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.16); }
.guides .plus { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
.guides .plus::before, .guides .plus::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.95); }
.guides .plus::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.guides .plus::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }

/* ---------- the menu: a full page, names in Anton, a lime wipe on the one you point at ---------- */
.menu {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(84px, 12vh, 120px) clamp(24px, 6vw, 96px) clamp(40px, 8vh, 80px);
  background: var(--panel); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 650ms cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 650ms;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 650ms cubic-bezier(0.76, 0, 0.24, 1); }
.menu__close {
  position: absolute; top: calc(var(--strip-h) + 18px); right: calc(var(--edge-x) + 12px);
  display: inline-flex; align-items: center; gap: 12px; height: 40px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.menu__close-x { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); transition: 250ms; }
.menu__close-x svg { width: 14px; height: 14px; }
.menu__close:hover .menu__close-x { background: var(--ink); color: var(--panel); border-color: transparent; }
.menu__list { display: flex; flex-direction: column; }
.menu__item { display: flex; align-items: baseline; gap: 24px; padding: clamp(2px, 0.7vh, 8px) 0; text-decoration: none; }
.menu__tag { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.menu__name { position: relative; display: inline-block; font-family: var(--display); font-size: clamp(3rem, 9vw, 8.25rem); line-height: 1.02; letter-spacing: -0.005em; text-transform: none; }
.menu__fill { position: absolute; left: 0; top: 0; color: var(--lime-deep); white-space: nowrap; clip-path: inset(-12% 102% -18% -2%); transition: clip-path 480ms cubic-bezier(0.45, 0.02, 0.16, 1); }
html[data-theme="night"] .menu__fill { color: var(--lime); }
.menu__item:hover .menu__fill, .menu__item:focus-visible .menu__fill { clip-path: inset(-12% -2% -18% -2%); }
.menu__item[aria-current="page"] .menu__tag { display: inline-grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); }
.menu__note { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.menu__side { display: flex; flex-wrap: wrap; gap: 22px clamp(30px, 5vw, 80px); margin-top: clamp(30px, 6vh, 60px); }
.menu__side .label { margin-bottom: 10px; }
.menu__side p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.menu__side a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
html.js .menu .menu__item { opacity: 0; transform: translateY(40%) rotate(2deg); transition: opacity 500ms var(--ease), transform 800ms var(--ease); }
html.js .menu.is-open .menu__item { opacity: 1; transform: none; }
html.js .menu.is-open .menu__item:nth-child(2) { transition-delay: 70ms; }
html.js .menu.is-open .menu__item:nth-child(3) { transition-delay: 140ms; }
html.js .menu.is-open .menu__item:nth-child(4) { transition-delay: 210ms; }

/* ---------- footer: the dark panel ---------- */
.site-footer {
  --mark-hole: var(--dark);
  color: #ffffff; padding: clamp(40px, 5vw, 72px) var(--pad) clamp(26px, 3vw, 40px); margin-bottom: 0;
}
.footer__top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer__links { display: flex; gap: 28px clamp(40px, 5vw, 80px); flex-wrap: wrap; }
.footer__col .label { color: #8a8b91; margin-bottom: 16px; letter-spacing: 0.22em; }
.footer__col a, .footer__col p { display: block; font-size: 0.9375rem; margin-bottom: 6px; color: #d7d8dc; text-decoration: none; transition: color 200ms; }
.footer__col a { display: flex; align-items: center; min-height: 28px; }
.footer__col a:hover { color: #ffffff; }
.footer__col p { color: #a6a7ad; max-width: 30ch; }
.footer__accent { width: clamp(64px, 7vw, 96px); color: #ffffff; opacity: 0.9; }
.footer__accent svg { width: 100%; height: auto; }
.footer__mark { display: block; margin: clamp(44px, 6vw, 80px) 0 clamp(28px, 3vw, 40px); color: #ffffff; }
.footer__mark svg { height: clamp(64px, 9vw, 140px); }
.footer__bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; color: #a6a7ad; }
.footer__bottom p { max-width: 70ch; }
.footer__bottom a { color: #e3e4e8; text-underline-offset: 0.15em; }
.footer__bottom a:hover { color: #fff; }
.site-footer .switch { color: #d7d8dc; }

/* a small switch, the studio's toggle track */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.switch__track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(120, 120, 130, 0.22); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 250ms; flex: none; }
.switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 300ms var(--ease); }
.switch[aria-checked="true"] .switch__track { background: var(--lime-deep); box-shadow: none; }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(18px); background: var(--lime-ink); }

/* ---------- the phone dock: readout, season and ribbon in the thumb zone ---------- */
.ribbon-dock { display: none; }

/* ---------- reveal: visible by default, enhanced only when scripts run ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].is-in, html.reveal-all [data-reveal] { opacity: 1; transform: none; }

/* ---------- motion off ---------- */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* cross-document view transitions: a picture opens out into the next page's masthead; everything else crossfades */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease); }
html[data-motion="off"]::view-transition-group(*), html[data-motion="off"]::view-transition-old(*), html[data-motion="off"]::view-transition-new(*) { animation-duration: 0.01ms; }

/* ====================================================== phone ====================================================== */
@media (max-width: 820px) {
  :root { --gutter: 12px; --pad: 20px; --gap: 14px; --r-panel: 22px; --r-card: 16px; --strip-h: 28px; --header-h: 70px; }
  .fiction {
    left: 0; right: 0; top: 0; height: 28px; justify-content: center; padding: 0 10px;
    font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0; text-transform: none; font-weight: 500;
  }
  .site-header { padding: calc(var(--strip-h) + 12px) calc(var(--gutter) + 10px) 0; }
  .topbar { position: static; transform: none; height: 40px; padding: 0 4px; border-radius: 999px; }
  .topbar__link, .topbar__div { display: none; }
  .topbar .wordmark { padding: 0 12px; }
  .topbar .wordmark svg { height: 16px; }
  .site-header__right { gap: 8px; }
  .dock { display: none; }
  .hpill { display: none; }
  .menu-btn { padding: 0 15px; }
  .daynight__track { width: 46px; height: 26px; }
  .daynight__knob { width: 20px; height: 20px; }
  html[data-theme="night"] .daynight__knob { transform: translateX(18px); }
  .menu { justify-content: flex-start; padding: calc(var(--strip-h) + 96px) 24px calc(40px + var(--safe-b)); }
  .menu__close { top: calc(var(--strip-h) + 12px); right: calc(var(--gutter) + 10px); }
  .menu__item { gap: 14px; }
  .menu__name { font-size: clamp(3.2rem, 17vw, 5.4rem); }
  .menu__side { gap: 24px; }
  .menu__note { display: none; }

  .split-head { grid-template-columns: 1fr; }

  .ribbon-dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 0 10px calc(10px + var(--safe-b)); pointer-events: none;
  }
  .ribbon-dock__card {
    pointer-events: auto; padding: 10px 16px 6px; border-radius: 22px; background: #141517; color: #fff;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  html[data-theme="night"] .ribbon-dock__card { background: #1d1f23; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12); }
  .ribbon-dock__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
  .ribbon-dock__readout { display: grid; gap: 1px; min-width: 0; font-family: var(--mono); line-height: 1.2; }
  .ribbon-dock__readout b { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; }
  .ribbon-dock__readout span { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ribbon-dock .seasons { flex: none; }
  .ribbon-dock .seasons button { min-height: 30px; padding: 0 10px; font-size: 0.625rem; }
  .ribbon-dock .s-long { display: none; }
  .ribbon-dock .s-short { display: inline; }

  .site-footer { padding-bottom: calc(var(--dock-h, 110px) + 24px); }
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__links { gap: 30px 44px; }
  .footer__accent { display: none; }
  .footer__mark { margin: 10px 0 22px; }
  .footer__mark svg { height: clamp(52px, 16vw, 76px); }
  .footer__bottom { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 400px) {
  .fiction { font-size: 0.65625rem; gap: 6px; }
}
@media (max-width: 380px) {
  .fiction { font-size: 0.625rem; gap: 5px; }
  .fiction__arrow { display: none; }
}

/* desk only helpers */
@media (min-width: 821px) { .only-phone { display: none !important; } }
@media (max-width: 820px) { .only-desk { display: none !important; } }

/* icons and the wordmark: the o is the sun, a solid dot, and at night it holds one lit window. The counter is filled
   by a shape cut a touch larger than the hole, so no seam shows at display size */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mark__shade { display: none; }
.mark__dot { opacity: 0; fill: var(--mark-hole, var(--panel)); }
html[data-theme="night"] .mark__dot { opacity: 1; }
.topbar .mark__dot { fill: var(--lime); }

/* drawn elevations: the houses that have no photograph yet, drawn as an architect would. One pixel hairlines, the
   shaded face hatched, earth cut in section, louvred shutters, and the sun standing in the drawing's sky while it is
   on the face, when the face itself takes the lime wash. */
.elev { display: block; width: 100%; height: 100%; overflow: visible; }
.elev * { vector-effect: non-scaling-stroke; }
.elev__ground { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.elev__line { fill: none; stroke: var(--ink); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.elev__earth { fill: url(#elev-earth); stroke: none; }
.elev__face { fill: url(#elev-shade); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; transition: fill 300ms; }
.elev__roof { fill: url(#elev-tile); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.elev__win rect { fill: var(--paper-lit); stroke: var(--ink); stroke-width: 0.9; }
.elev__shutter rect { fill: url(#elev-louvre); stroke: var(--ink); stroke-width: 0.75; }
.elev__door { fill: var(--ink); stroke: var(--ink); stroke-width: 0.9; }
.is-lit .elev__face, .elev.is-sunlit .elev__face { fill: var(--lime-wash); }
.pat__ground { fill: var(--paper-lit); }
.pat__ground--shade { fill: var(--paper-shade); }
.pat__line { stroke: var(--ink); stroke-width: 0.5; opacity: 0.38; vector-effect: none; }
.pat__line--strong { stroke-width: 0.7; opacity: 0.55; }
.pat__louvre { fill: var(--ink-2); }
.pat__slat { stroke: var(--paper-lit); stroke-width: 0.5; opacity: 0.45; }
.pat__tile { fill: var(--stone); }
.elev__sun { transition: opacity 300ms; }
.elev__sun.is-down { opacity: 0; }
.elev__sun-disc { fill: var(--lime); stroke: var(--ink); stroke-width: 1; }
.elev__sun-halo { fill: none; stroke: var(--ink); stroke-width: 0.6; opacity: 0.5; }
.elev__track { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-dasharray: 1 4; stroke-linecap: round; opacity: 0.45; }
.plate__title {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  height: 26px; padding: 0 12px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.plate__title b { color: var(--ink); font-weight: 700; }

/* chips on glass keep their ink on the light glass and turn light on the night glass */
html[data-theme="night"] .hero__chip, html[data-theme="night"] .close__label { color: #eef0f2; }
html[data-theme="night"] .close__label::before { box-shadow: 0 0 0 1px #eef0f2; }

/* the carousel control: round arrows either side of a row of dots, the current one a short bar */
.deck__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; }
.deck__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); transition: background-color 250ms, color 250ms, opacity 250ms; }
.deck__arrow svg { width: 16px; height: 16px; }
.deck__arrow:hover:not(:disabled) { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
.deck__arrow:disabled { opacity: 0.35; cursor: default; }
.deck__dots { display: flex; gap: 4px; }
.deck__dots button { position: relative; width: 24px; height: 24px; }
.deck__dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: var(--line-strong); transition: width 300ms var(--ease), margin 300ms var(--ease), background-color 300ms; }
.deck__dots button.on::after { width: 22px; margin-left: -11px; background: var(--ink); }