/* aaro — site stylesheet (v5).
   Rooms and fields. Photographs of one living room through a day, and the sound in that room drawn live.
   Colour comes from the room's light: every section is lit as day, dusk, evening or night, and the page takes
   its paper, ink and line colour from that light. Type is a serif with a voice (Newsreader) over a quiet grotesk.
   No labels in capitals, no chips, no gloss. Glass appears only over photographs. One deliberate look. */

/* ---------------------------------------------------------------- light states (registered so they cross-fade) */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #EEE8DF; }
@property --bg-2 { syntax: "<color>"; inherits: true; initial-value: #E6DED2; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #1D1A16; }
@property --ink-2 { syntax: "<color>"; inherits: true; initial-value: #4B453C; }
@property --ink-3 { syntax: "<color>"; inherits: true; initial-value: #6A6155; }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(29, 26, 22, 0.14); }
@property --f-line { syntax: "<color>"; inherits: true; initial-value: #9A5B22; }
@property --f-ring { syntax: "<color>"; inherits: true; initial-value: #1D1A16; }
@property --fill { syntax: "<color>"; inherits: true; initial-value: rgba(29, 26, 22, 0.045); }

:root {
  color-scheme: light;
  /* day: morning sun on plaster and oak */
  --bg: #EEE8DF; --bg-2: #E6DED2; --ink: #1D1A16; --ink-2: #4B453C; --ink-3: #6A6155;
  --line: rgba(29, 26, 22, 0.14); --f-line: #9A5B22; --f-ring: #1D1A16; --fill: rgba(29, 26, 22, 0.045);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* one tempo for every motion: 96 BPM, the same beat the sound fields run on */
  --beat: 625ms;
  --half: 312ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --page: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 60px;
  --r: 6px;
}
[data-light] { background: var(--bg); color: var(--ink);
  transition: --bg calc(var(--beat) * 2) var(--ease-io), --bg-2 calc(var(--beat) * 2) var(--ease-io), --ink calc(var(--beat) * 2) var(--ease-io),
    --ink-2 calc(var(--beat) * 2) var(--ease-io), --ink-3 calc(var(--beat) * 2) var(--ease-io), --line calc(var(--beat) * 2) var(--ease-io),
    --f-line calc(var(--beat) * 2) var(--ease-io), --f-ring calc(var(--beat) * 2) var(--ease-io), --fill calc(var(--beat) * 2) var(--ease-io); }
[data-light="day"], :root[data-theme="day"] { --bg: #EEE8DF; --bg-2: #E6DED2; --ink: #1D1A16; --ink-2: #4B453C; --ink-3: #6A6155; --line: rgba(29, 26, 22, 0.14); --f-line: #9A5B22; --f-ring: #1D1A16; --fill: rgba(29, 26, 22, 0.045); }
/* dusk: low gold on the same wall */
[data-light="dusk"], :root[data-theme="dusk"] { --bg: #E6D3BC; --bg-2: #DCC6AC; --ink: #281D13; --ink-2: #503D2C; --ink-3: #66503B; --line: rgba(40, 29, 19, 0.16); --f-line: #983F14; --f-ring: #281D13; --fill: rgba(40, 29, 19, 0.05); }
/* evening: blue hour through the sheers, a warm lamp inside */
[data-light="evening"], :root[data-theme="evening"] { --bg: #1B1F2B; --bg-2: #232837; --ink: #EDEAE4; --ink-2: #BCBBC0; --ink-3: #9497A5; --line: rgba(237, 234, 228, 0.14); --f-line: #A9BDF5; --f-ring: #F2B279; --fill: rgba(237, 234, 228, 0.05); }
/* night: only the screen and the lamp */
[data-light="night"], :root[data-theme="night"] { --bg: #0F0E10; --bg-2: #18171A; --ink: #EEEAE4; --ink-2: #BAB5AE; --ink-3: #8F8A83; --line: rgba(238, 234, 228, 0.13); --f-line: #F0B27A; --f-ring: #C3B5F5; --fill: rgba(238, 234, 228, 0.045); }

*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 56px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 1100px) { body { font-size: 18px; } }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--f-line) 30%, transparent); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- type: a serif with a voice, a grotesk that stays out of the way */
.t-display, .t-title, .t-lede, .t-sub, .t-head { font-family: var(--serif); font-optical-sizing: auto; margin: 0; text-wrap: balance; color: inherit; }
.t-display { font-weight: 300; font-size: clamp(50px, 8.2vw, 124px); line-height: 0.98; letter-spacing: -0.022em; }
.t-title { font-weight: 300; font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.018em; }
.t-lede { font-weight: 300; font-size: clamp(25px, 2.9vw, 42px); line-height: 1.2; letter-spacing: -0.012em; text-wrap: pretty; }
.t-sub { font-weight: 350; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.32; letter-spacing: -0.006em; color: var(--ink-2); }
.t-head { font-weight: 400; font-size: clamp(23px, 2vw, 29px); line-height: 1.18; letter-spacing: -0.008em; }
.t-display em, .t-title em, .t-lede em { font-style: italic; }
.t-body { margin: 0; color: var(--ink-2); max-width: 33em; text-wrap: pretty; }
.t-body b { color: var(--ink); font-weight: 500; }
.t-small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 60em; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.price { margin: 0; font: 400 clamp(22px, 1.8vw, 26px)/1.25 var(--serif); letter-spacing: -0.005em; }
.price span { font: 400 15px/1.4 var(--sans); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }

/* ---------------------------------------------------------------- frame */
.page { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { padding-block: clamp(76px, 10vw, 152px); }
.sec.tight { padding-block: clamp(52px, 6vw, 92px); }
.stack { display: grid; gap: 20px; align-content: start; }
.row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.measure { max-width: 34em; }
.head { display: grid; gap: 22px; max-width: 860px; }
.head .t-body { font-size: clamp(17px, 1.3vw, 19px); }
/* twelve columns; text sits in a narrow column, pictures take the rest */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); row-gap: 40px; }
.grid > * { min-width: 0; }
.c-1-5 { grid-column: 1 / span 5; } .c-1-6 { grid-column: 1 / span 6; } .c-1-7 { grid-column: 1 / span 7; } .c-1-8 { grid-column: 1 / span 8; }
.c-6-12 { grid-column: 6 / -1; } .c-7-12 { grid-column: 7 / -1; } .c-8-12 { grid-column: 8 / -1; } .c-9-12 { grid-column: 9 / -1; } .c-2-12 { grid-column: 2 / -1; }
.c-all { grid-column: 1 / -1; }
.c-2-7 { grid-column: 2 / span 6; } .c-2-9 { grid-column: 2 / span 8; }
@media (max-width: 900px) { .grid > [class*="c-"] { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- navigation: plain paper, the page's own light */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
.nav-in { display: flex; align-items: center; gap: 32px; height: var(--nav-h); width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; color: inherit; border-radius: 6px; }
.brand svg { height: 19px; width: auto; overflow: visible; }
.nav-links { display: flex; gap: 30px; margin-inline: auto; }
.nav-links a { font-size: 15px; line-height: 20px; color: var(--ink-2); text-decoration: none; padding: 6px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: inherit; }
.icon-btn:hover { background: var(--fill); }
.icon-btn svg { width: 20px; height: 20px; }
.bag-n { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 10px/16px var(--sans); text-align: center; transform: scale(0); transition: transform var(--half) var(--ease); }
.bag-n.on { transform: scale(1); }
.menu-btn { display: none; }
.menu { border-top: 1px solid var(--line); background: var(--bg); }
.menu-in { display: grid; width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: 8px 20px; }
.menu a { padding: 14px 2px; font: 300 26px/1.15 var(--serif); text-decoration: none; border-bottom: 1px solid var(--line); }
/* where the product bar has its own Buy, the main bar doesn't repeat it */
.site:has(.subnav) .nav-actions .btn { display: none; }
@media (max-width: 920px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav-actions { margin-left: auto; }
}

/* product sub-navigation */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); z-index: 40; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
.subnav-in { display: flex; align-items: center; gap: 26px; height: 50px; width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
.subnav-name { font: 400 21px/1 var(--serif); white-space: nowrap; }
.subnav-links { display: flex; gap: 24px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a { font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.subnav-links a:hover, .subnav-links a[aria-current="true"] { color: var(--ink); }
.subnav-links a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.subnav-buy { display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 15px; color: var(--ink-2); }
@media (max-width: 780px) { .subnav-links { display: none; } .subnav-buy { margin-left: auto; } }

/* ---------------------------------------------------------------- actions: flat ink, no gloss */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 500 15px/1 var(--sans); background: var(--ink); color: var(--bg);
  transition: opacity var(--half) var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn:active { opacity: 0.74; }
.btn-s { min-height: 34px; padding: 0 16px; font-size: 14px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { opacity: 1; background: var(--fill); }
.link { display: inline-flex; align-items: center; gap: 6px; font: 500 16px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); border-radius: 3px; }
.link:hover { text-decoration-color: currentColor; }
.link svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- photographs: covers and spreads */
.cover { position: relative; display: grid; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--bg); }
.cover > picture, .cover > .ph { grid-area: 1 / 1; }
.cover img { width: 100%; height: min(calc(100svh - var(--nav-h)), 62vw); min-height: 520px; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cover .cover-tx { grid-area: 1 / 1; z-index: 1; align-self: var(--ay, start); width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(36px, 6vw, 88px); display: grid; gap: 22px; }
.cover .cover-tx > * { max-width: var(--tw, 15em); }
.cover .cover-tx.right { justify-items: end; text-align: right; }
.cover .cover-tx.right > * { margin-left: auto; }
.cover.on-dark { color: #F3EFE8; }
/* a scrim in the section's own colour, only where words sit on a dark photograph */
.cover.scrim::after { content: ""; grid-area: 1 / 1; z-index: 0; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 30%, transparent 58%); }
@media (max-width: 700px) { .cover.scrim::after { display: none; } }
.cover.on-dark .t-sub, .cover.on-dark .t-body { color: rgba(243, 239, 232, 0.82); }
.cover .t-sub { color: var(--ink-2); }
/* where the words sit on each photograph: over its calm wall, never over the subject */
.hero-tx { width: 100%; padding-inline: 34vw var(--gutter); padding-block: clamp(40px, 8vh, 96px) 0; gap: 20px; }
.hero-tx .t-display { font-size: clamp(50px, 7.2vw, 108px); }
.hero-tx .t-sub { max-width: 19em; color: var(--ink); }
.cover .cover-tx > .row { max-width: none; }
.cover .cin-tx { align-self: end; padding-block: 0 clamp(36px, 6vw, 80px); }
.cin-tx > * { max-width: 24em; }
.cin-tx .t-display, .cin-tx .t-title { max-width: 11em; }
@media (max-width: 700px) {
  /* on a phone the words follow the photograph, in the section's own light */
  .cover .cover-tx, .hero-tx, .cin-tx { grid-area: 2 / 1; align-self: start; width: auto; margin-inline: var(--gutter); padding: 28px 0 8px; color: var(--ink); }
  .cover.on-dark .t-sub, .cover.on-dark .t-body { color: var(--ink-2); }
  .hero-tx .t-sub { color: var(--ink-2); }
}
.cover-cap { position: absolute; right: var(--gutter); bottom: 18px; z-index: 1; margin: 0; font-size: 13px; color: inherit; opacity: 0.72; }
@media (max-width: 700px) {
  .cover img { height: auto; min-height: 0; aspect-ratio: var(--mar, 3 / 4); }
  .cover .cover-tx { padding-block: 28px; }
}

/* a spread: a photograph to the page edge on one side, the words in a column on the other */
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; min-height: min(92svh, 980px); }
.spread.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.spread .ph { position: relative; overflow: hidden; background: var(--bg-2); }
.spread .ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.spread.flip .ph { order: 2; }
.spread .tx { display: grid; align-content: center; gap: 24px; padding: clamp(48px, 7vw, 120px) clamp(28px, 6vw, 112px); }
.spread .tx > * { max-width: 30em; }
@media (max-width: 900px) {
  .spread, .spread.flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .spread.flip .ph { order: 0; }
  .spread .ph img { height: auto; aspect-ratio: var(--mar, 4 / 5); }
  .spread .tx { padding: 44px var(--gutter) 64px; }
}

/* a figure in the page column */
.fig { margin: 0; display: grid; gap: 14px; }
.fig img { width: 100%; }
.fig figcaption { font-size: 14px; color: var(--ink-3); line-height: 1.5; max-width: 52em; }

/* crossfading images, stacked in a fixed box */
.swap { position: relative; display: grid; }
.swap > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity calc(var(--beat) * 1.4) var(--ease-io); }
.swap > img.on { opacity: 1; z-index: 1; }
.swap > img.was { opacity: 1; transition: none; }

/* ---------------------------------------------------------------- the sound fields */
.field { position: relative; margin: 0; aspect-ratio: 6.6 / 5.4; width: 100%; max-width: 100%; }
.field.is-section { aspect-ratio: 5.4 / 3.3; }
.field canvas, .field svg.plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.field svg.plan { overflow: visible; }
.f-furn * { fill: var(--fill); stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.85; }
.f-furn .f-rug { fill: none; stroke-dasharray: 2 5; opacity: 0.6; }
.f-furn .f-screen { fill: var(--ink-3); stroke: none; }
.f-wall { fill: none; stroke: var(--ink); stroke-linecap: square; }
.f-glass { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f-dot { fill: var(--ink); }
.f-dot.sub { fill: var(--ink); opacity: 0.8; }
.f-stand { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
[data-finish="pearl"] .f-dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
[data-finish="pearl"] .f-dot.sub { fill: var(--ink); stroke: none; }
.f-halo { fill: none; stroke: var(--f-line); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; }
.f-head { fill: var(--ink); }
.f-pair { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 5; opacity: 0.32; transition: opacity var(--half), stroke var(--half); }
.f-pair.on { stroke: var(--f-ring); opacity: 1; }
.f-ray { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.f-bounce, .f-obj { fill: var(--f-line); }
.f-iso { fill: none; stroke: var(--f-line); stroke-width: calc(0.7px + 1.3px * var(--w)); opacity: calc(0.3 + 0.7 * var(--w)); vector-effect: non-scaling-stroke; }
.f-iso.down { stroke-dasharray: 3 4; }
.f-tune-before, .f-tune-after { transition: opacity calc(var(--beat) * 2) var(--ease-io); }
[data-mix="before"] .f-tune-after, [data-mix="after"] .f-tune-before { opacity: 0; }
.f-seats { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.f-seat { fill: var(--ink); }
.f-labels { position: absolute; inset: 0; pointer-events: none; }
.f-label { position: absolute; transform: translate(-50%, -50%); font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--ink-2); }
.f-label.l { transform: translate(0, -50%); }
.f-label.r { transform: translate(-100%, -50%); }
@media (max-width: 600px) { .f-label { font-size: 11px; } .field[data-mode="roles"] .f-label { display: none; } }
.field-cap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.field-cap p { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 46em; }
/* the field's legend: a line, a dashed line, a dot, set in running text */
.lg { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; white-space: nowrap; }
.lg i { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--f-line); }
.lg i.d { border-top-style: dashed; }
.lg i.o { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--ink); }

/* ---------------------------------------------------------------- the day: a scroll story, the light turning as you read */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.story-steps { display: grid; }
.step { min-height: 76vh; display: grid; align-content: center; gap: 16px; padding-block: 28px; }
.step .when { margin: 0; font: italic 400 19px/1.3 var(--serif); color: var(--ink-3); }
.step .t-body { transition: color var(--beat) var(--ease-io); }
.step:not(.on) .t-head { color: var(--ink-3); transition: color var(--beat); }
.story-stage { align-self: stretch; }
.story-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 6vh); display: grid; gap: 12px; }
.story-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-stage { order: -1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); z-index: 5; background: var(--bg); padding-block: 10px 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); box-shadow: 0 1px 0 var(--line); }
  .story-sticky { position: static; gap: 6px; }
  .story-stage .field-cap { display: none; }
  .step { min-height: 56vh; align-content: start; padding-top: 34px; }
  .step:not(.on) .t-head { color: inherit; }
}

/* ---------------------------------------------------------------- choices: segmented control and option buttons */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; width: max-content; max-width: 100%; box-shadow: inset 0 0 0 1px var(--line); }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform var(--half) var(--ease), width var(--half) var(--ease); }
.seg button { position: relative; z-index: 1; min-width: 44px; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 15px/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: color var(--half); }
.seg button[aria-checked="true"] { color: var(--bg); }
.seg.num button { font: 400 19px/1 var(--serif); }
@media (max-width: 420px) { .seg.num button { min-width: 36px; padding: 0 9px; } }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: none; font-size: 15px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--half), color var(--half); }
.opt-btn[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.opt-btn i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

/* ---------------------------------------------------------------- annotated renders (callouts) */
.callouts { position: relative; margin: 0; }
.callouts svg { width: 100%; height: auto; overflow: visible; }
.callouts .ln { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.5; vector-effect: non-scaling-stroke; }
.callouts .dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.callouts .lt { font-family: var(--serif); font-weight: 400; fill: var(--ink); }
.callouts .ls { font-family: var(--sans); font-weight: 400; font-size: 0.8em; fill: var(--ink-3); }
.callouts .n { font-family: var(--sans); font-weight: 600; fill: var(--ink); }
.callout-list { display: none; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: c; }
.callout-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); counter-increment: c; font-size: 16px; }
.callout-list li::before { content: counter(c); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px var(--ink); font: 600 12px/1 var(--sans); }
.callout-list b { font-weight: 600; }
.callout-list span { color: var(--ink-3); }
@media (max-width: 860px) { .wide-only { display: none !important; } .callout-list { display: block; } }
@media (min-width: 861px) { .narrow-only { display: none !important; } }

/* ---------------------------------------------------------------- drawings, to scale */
.drawing { width: 100%; height: auto; overflow: visible; }
.drawing.narrow-only { max-width: 380px; }
.dwrap { flex-shrink: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
@media (max-width: 700px) { .dwrap > svg { min-width: var(--minw, 0); } }
.drawing text { font-family: var(--sans); font-weight: 400; fill: var(--ink-3); }
.drawing .ttl { font-family: var(--serif); font-weight: 400; font-size: 1.15em; fill: var(--ink); }
.drawing .ink { stroke: var(--ink); fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.drawing .thin { stroke: var(--ink); fill: none; stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.drawing .dim { stroke: var(--ink-3); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.drawing .solid { fill: var(--ink); }
.drawing .soft { fill: var(--fill); }
.drawing .sound { fill: none; stroke: var(--f-line); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.drawing .accent { fill: var(--f-line); }
.drawing .box { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.drawing .box.on { fill: var(--ink); }
.drawing .box-t.on { fill: var(--bg); }

/* charts */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--ink-3); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .before { fill: none; stroke: var(--f-line); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: 0.9; }
.chart .after { fill: none; stroke: var(--ink); stroke-width: 2; }

/* ---------------------------------------------------------------- lists that read like a page */
.rows { display: grid; margin-block: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows > * { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); padding-block: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--line); }
.rows dt, .rows h3 { margin: 0; }
.rows dd, .rows p { margin: 0; color: var(--ink-2); max-width: 36em; }
.rows.compact > * { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-block: 18px; }
.rows.compact dt { font: 400 21px/1.3 var(--serif); }
@media (max-width: 760px) { .rows > *, .rows.compact > * { grid-template-columns: minmax(0, 1fr); } }
.specs { margin-block: 0; border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2fr); gap: 8px 40px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 400 21px/1.3 var(--serif); }
.spec dd { margin: 0; display: grid; gap: 4px; color: var(--ink-2); }
@media (max-width: 640px) { .spec { grid-template-columns: 1fr; } }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-block: 0; }
.qa > div { padding-block: 26px; border-top: 1px solid var(--line); }
.qa dt { font: 400 23px/1.25 var(--serif); }
.qa dd { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the privacy switch (the real one is under the speaker) */
.hw { display: inline-flex; align-items: center; gap: 16px; }
.hw-switch { position: relative; flex: none; width: 84px; height: 38px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 4px rgba(0, 0, 0, 0.12); }
.hw-thumb { position: absolute; top: 4px; left: 4px; width: 44px; height: 30px; border-radius: 7px; background: var(--ink);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bg) 22%, transparent) 0 1px, transparent 1px 5px); background-size: 20px 12px; background-position: center; background-repeat: no-repeat;
  transition: transform var(--half) var(--ease); }
.hw-switch[aria-checked="true"] .hw-thumb { transform: translateX(32px); }
.hw-label b { display: block; font-weight: 600; font-size: 16px; }
.hw-label span { font-size: 14px; color: var(--ink-2); }

/* ---------------------------------------------------------------- the light (a side feature, one dark chapter) */
.albums { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.album { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--ink-3); }
.album i { width: 26px; height: 26px; border-radius: 4px; background: var(--art); opacity: 0.75; }
.album[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.album[aria-pressed="true"] i { opacity: 1; }
/* the glow renders melt into the night page instead of sitting in a box */
.lit { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* ---------------------------------------------------------------- store */
.buy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.buy-visual { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 24px); display: grid; gap: 12px; }
.buy-form { display: grid; gap: 30px; }
.opt { display: grid; gap: 12px; }
.opt h3 { margin: 0; font: 400 22px/1.2 var(--serif); }
.choices { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; padding: 14px 18px; border: 0; border-radius: var(--r); cursor: pointer; text-align: left; background: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--half) var(--ease); }
.choice b { font-weight: 500; font-size: 16px; }
.choice span { font-size: 14px; color: var(--ink-3); grid-column: 1; }
.choice em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; }
.choice[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.choice[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice .sw { display: inline-flex; align-items: center; gap: 12px; }
.choice .sw i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.total b { font: 300 40px/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.shop-item { display: grid; gap: 16px; align-content: start; }
.shop-item .img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.shop-item .img img { width: 100%; height: 100%; object-fit: cover; }
.shop-item .meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shop-item h3 { margin: 0; font: 400 24px/1.2 var(--serif); }
.shop-item p { margin: 2px 0 0; font-size: 15px; color: var(--ink-3); }
@media (max-width: 900px) { .buy { grid-template-columns: 1fr; } .buy-visual { position: static; } .shop { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; font-size: 15px; transform: translate(-50%, 160%); opacity: 0; visibility: hidden;
  background: #1D1A16; color: #EEE8DF; transition: transform var(--beat) var(--ease), opacity var(--half), visibility 0s linear var(--beat); }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--beat) var(--ease), opacity var(--half), visibility 0s; }
.toast svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- footer: the wordmark, and its circles become wavefronts */
.foot { padding-block: clamp(64px, 8vw, 112px) 40px; }
.foot-in { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 56px; }
.foot-mark { position: relative; color: var(--ink); padding-block: 2% 4%; }
.foot-mark svg { width: min(560px, 78%); height: auto; overflow: visible; }
.foot-mark .wf { fill: none; stroke: var(--f-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.foot-brand { color: var(--ink-2); font-size: 15px; max-width: 22em; margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-cols h4 { margin: 0 0 12px; font: 400 18px/1.2 var(--serif); color: var(--ink); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-cols a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- motion: tied to the beat, and always optional */
@keyframes wavefront { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.5); opacity: 0; } }
.foot-mark .wf { animation: wavefront calc(var(--beat) * 4) linear infinite; animation-delay: calc(var(--i) * var(--beat) * -1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-light] { transition: none; }
  .foot-mark .wf { animation: none; opacity: 0.35; }
  .swap > img, .seg-thumb, .hw-thumb, .toast, .f-tune-before, .f-tune-after { transition: none; }
}

/* ---------------------------------------------------------------- spacing utilities (last, so they win) */
.mt-s { margin-top: clamp(20px, 2.4vw, 32px); }
.mt-m { margin-top: clamp(40px, 5vw, 72px); }
.mt-l { margin-top: clamp(64px, 8vw, 120px); }