@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/prata-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Faustina'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/faustina-italic-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Faustina'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/faustina-italic-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Faustina'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/faustina-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Faustina'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/faustina-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/fonts/chivo-italic-300-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/fonts/chivo-italic-300-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/chivo-300-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/chivo-300-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* raneris.com: the whole stylesheet. Fonts are inlined above this by build.mjs. */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
/* The palette is not a light mode and a dark mode. It is four hours of one day, because a
   room is made by its light: lime plaster and pewter by day, damson and lamplight after it.
   The reader moves the hour with the dial in the header; the front page also walks it forward
   as they scroll. --sun-x and --sun-lift turn every shadow with the light. */
/* The palette is not a light mode and a dark mode. It is four watches of one day at sea:
   salt and navy under the afternoon sun, cold blue at first light, teal and lamp oil at dusk,
   and near black with one warm light at night. The reader moves the watch with the dial in the
   header; the front page walks it forward as they scroll. --sun-x and --sun-lift turn the shadows. */
:root, [data-hour='day'] {
  --ground: #e7eaea;
  --paper: #f2f4f3;
  --raised: #dadfdf;
  --ink: #0d1a24;
  --ink-2: #33454f;
  --muted: #63737d;
  --faint: #94a2aa;
  --line: rgba(13, 26, 36, 0.15);
  --line-2: rgba(13, 26, 36, 0.07);
  --deep: #0c1a24;
  --deep-ink: #081119;
  --brass: #a86f2c;
  --brass-2: #c6903f;
  --clay: #9c4530;
  --olive: #3f6b63;
  --pewter: #4f7f95;
  --accent: var(--brass);
  --on-brass: #fdfbf7;
  --on-deep: #e6edef;
  --glow: 0;

  --sun-x: -1;
  --sun-lift: 1;
  --shadow-1: calc(var(--sun-x) * 1px) 2px 3px rgba(13, 26, 36, 0.07);
  --shadow-2: calc(var(--sun-x) * 10px) calc(var(--sun-lift) * 20px) 44px -26px rgba(13, 26, 36, 0.46);
  --shadow-3: calc(var(--sun-x) * 22px) calc(var(--sun-lift) * 44px) 90px -48px rgba(13, 26, 36, 0.62);

  --display: 'Prata', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --body: 'Faustina', Georgia, 'Times New Roman', serif;
  --ui: 'Chivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --wide: 1360px;
  --mid: 1080px;
  --read: 40rem;
  --rail: 15rem;

  --r-s: 1px;
  --r-m: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --slow: 0.65s var(--ease);
  --hour-shift: background-color 0.9s var(--ease), color 0.9s var(--ease), border-color 0.9s var(--ease);
}

/* Morning watch. Cold, blue, the light coming over the breakwater from the other side. */
[data-hour='dawn'] {
  --ground: #dce4e8;
  --paper: #e9eff1;
  --raised: #ced9de;
  --ink: #0f1e28;
  --ink-2: #37474f;
  --muted: #64757e;
  --faint: #93a3ac;
  --line: rgba(15, 30, 40, 0.15);
  --line-2: rgba(15, 30, 40, 0.07);
  --deep: #14262f;
  --deep-ink: #0d1c24;
  --brass: #9a6a33;
  --brass-2: #ba8a4c;
  --clay: #91432f;
  --olive: #3c6a63;
  --pewter: #47708a;
  --on-brass: #fdfbf7;
  --on-deep: #e4edf0;
  --glow: 0;
  --sun-x: 1;
  --sun-lift: 0.6;
}

/* Dog watch. The sea goes teal, the deck lights come on and the accent starts to carry. */
[data-hour='dusk'] {
  --ground: #163139;
  --paper: #1d3b45;
  --raised: #112830;
  --ink: #e9efee;
  --ink-2: #bbcacb;
  --muted: #8ba1a4;
  --faint: #67807f;
  --line: rgba(233, 239, 238, 0.17);
  --line-2: rgba(233, 239, 238, 0.08);
  --deep: #0d232b;
  --deep-ink: #091a20;
  --brass: #dda05a;
  --brass-2: #eebb7c;
  --clay: #c86a4b;
  --olive: #6e9384;
  --pewter: #79a2b6;
  --on-brass: #12242b;
  --on-deep: #e9efee;
  --glow: 0.5;
  --sun-x: 1;
  --sun-lift: 0.4;
  --shadow-2: 0 18px 44px -26px rgba(0, 0, 0, 0.72);
  --shadow-3: 0 40px 90px -48px rgba(0, 0, 0, 0.86);
}

/* Night watch. Everything off but the chart light and the starboard sidelight. */
[data-hour='night'] {
  --ground: #08131a;
  --paper: #0f1c24;
  --raised: #060f15;
  --ink: #e4ecee;
  --ink-2: #afc0c4;
  --muted: #82969b;
  --faint: #5b6e74;
  --line: rgba(228, 236, 238, 0.16);
  --line-2: rgba(228, 236, 238, 0.07);
  --deep: #060e14;
  --deep-ink: #04090e;
  --brass: #e4a967;
  --brass-2: #f2c48a;
  --clay: #ce7350;
  --olive: #739a8a;
  --pewter: #85a8bc;
  --on-brass: #0a1218;
  --on-deep: #e4ecee;
  --glow: 1;
  --sun-x: 0;
  --sun-lift: 1;
  --shadow-2: 0 18px 44px -26px rgba(0, 0, 0, 0.88);
  --shadow-3: 0 40px 90px -48px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Prata is a didone: very high contrast, wide, and it breaks up if it is tracked in. Give it
   a little air between the lines and never let it go below about 1.4 rem. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.0; letter-spacing: 0; margin: 0; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
::selection { background: var(--brass); color: var(--on-brass); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: var(--r-s); }
:target { scroll-margin-top: 7rem; }

.skip {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 200;
  padding: 0.7rem 1.1rem; background: var(--ink); color: var(--ground);
  font-family: var(--ui); font-size: 0.8rem; text-decoration: none; border-radius: var(--r-m);
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip:focus { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.wrap { width: min(100% - var(--gut) * 2, var(--wide)); margin-inline: auto; }
.wrap--mid { width: min(100% - var(--gut) * 2, var(--mid)); margin-inline: auto; }
.wrap--read { width: min(100% - var(--gut) * 2, var(--read)); margin-inline: auto; }
.bleed { width: 100%; }
main { display: block; }
.sec { padding-block: clamp(3.4rem, 8vw, 7rem); }
.sec--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }
.sec--deep { background: var(--deep); color: var(--on-deep); }
.sec--deep h2, .sec--deep h3 { color: var(--on-deep); }
.sec--raised { background: var(--raised); }
.sec + .sec--raised, .sec--raised + .sec { border-top: 1px solid var(--line-2); }

/* ==========================================================================
   4. Type utilities
   ========================================================================== */
/* Labels are set in Chivo, spaced out, which reads as a chart legend rather than a tagline. */
.kicker {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 500; font-stretch: 112%;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.3rem;
}
.kicker::before { content: ''; width: 2.2rem; height: 1px; background: var(--brass); flex: none; }
.kicker--plain::before { display: none; }
.kicker--brass { color: var(--brass); }
.sec--deep .kicker { color: color-mix(in srgb, var(--on-deep) 60%, transparent); }
.sec--deep .kicker::before { background: var(--brass-2); }

.h-hero { font-size: clamp(2.5rem, 7.6vw, 5.9rem); line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; }
.h-1 { font-size: clamp(1.95rem, 4.9vw, 3.7rem); line-height: 1.02; text-wrap: balance; }
.h-2 { font-size: clamp(1.55rem, 3.1vw, 2.45rem); line-height: 1.06; }
.h-3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.1; }
.h-4 { font-size: 1.18rem; line-height: 1.1; }
/* The one place the display face is allowed to speak twice: an italic phrase inside a headline. */
.h-hero em, .h-1 em, .h-2 em { font-style: italic; color: var(--brass); }

.lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--ink-2); font-weight: 300; }
.dek { font-size: 1.04rem; line-height: 1.55; color: var(--muted); }
.small { font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--muted); }
.meta { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.num { font-family: var(--display); font-weight: 400; letter-spacing: -0.03em; }

/* ==========================================================================
   5. Links, buttons
   ========================================================================== */
.link {
  font-family: var(--ui); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); transition: border-color 0.25s, gap 0.25s, color 0.25s;
}
.link:hover { border-color: var(--brass); color: var(--brass); gap: 0.8rem; }
.link svg { width: 1em; height: 1em; }
.sec--deep .link { color: var(--on-deep); border-color: rgba(239, 233, 221, 0.25); }
.sec--deep .link:hover { color: var(--brass-2); border-color: var(--brass-2); }

.btn {
  font-family: var(--ui); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem; border: 1px solid var(--ink); background: var(--ink); color: var(--ground);
  border-radius: var(--r-m); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: transparent; border-color: var(--brass); color: var(--brass); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.btn--brass:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.btn--sm { padding: 0.62rem 1.1rem; font-size: 0.73rem; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.sec--deep .btn--ghost { color: var(--on-deep); border-color: rgba(239, 233, 221, 0.3); }
.sec--deep .btn--ghost:hover { color: var(--brass-2); border-color: var(--brass-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* icon button */
.ibtn {
  width: 2.35rem; height: 2.35rem; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--ink); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ibtn:hover { border-color: var(--brass); color: var(--brass); }
.ibtn svg { width: 1.05rem; height: 1.05rem; }
.ibtn.is-on { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }

/* ==========================================================================
   6. Header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.hdr.is-stuck { border-bottom-color: var(--line-2); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in { display: flex; align-items: center; gap: 1.2rem; height: 4.3rem; }
.hdr__nav { display: none; margin-left: auto; align-items: center; gap: 1.7rem; }
.hdr__right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.hdr__nav + .hdr__right { margin-left: 1.5rem; }

.brand { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; flex: none; }
.brand__name {
  font-family: var(--display); font-size: 1.42rem; font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The tagline sat at 8.5px in the faintest ink, which read as a smudge under the masthead. */
.brand__tag { font-family: var(--ui); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.32rem; }

.navlink {
  font-family: var(--ui); font-size: 0.79rem; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); position: relative; padding-block: 0.35rem;
  transition: color 0.2s;
}
.navlink::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--brass); transition: right 0.3s var(--ease);
}
.navlink:hover, .navlink[aria-current] { color: var(--ink); }
.navlink:hover::after, .navlink[aria-current]::after { right: 0; }

.burger { display: inline-grid; }
@media (min-width: 1080px) {
  .hdr__nav { display: flex; }
  .burger { display: none; }
}
/* The language switch took the last spare width in the header. Below 1280px, and below 1400px for the German
   edition with its longer section names, the sections live in the menu instead of wrapping onto two lines or
   running out of the bar. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .hdr__nav { display: none; }
  .burger { display: inline-grid; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  html[lang="de"] .hdr__nav { display: none; }
  html[lang="de"] .burger { display: inline-grid; }
}

/* reading progress */
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--brass); width: 0; transition: width 0.1s linear; }

/* menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--ground);
  display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__top { display: flex; align-items: center; height: 4.3rem; border-bottom: 1px solid var(--line-2); }
.menu__body { overflow-y: auto; padding-block: clamp(1.6rem, 5vw, 3.4rem); }
.menu__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .menu__grid { grid-template-columns: 1.4fr 1fr; } }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid var(--line-2); }
.menu__link {
  display: flex; align-items: baseline; gap: 0.9rem; padding: 0.85rem 0; text-decoration: none;
  font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.1rem);
  transition: color 0.2s, padding-left 0.3s var(--ease);
}
.menu__link:hover { color: var(--brass); padding-left: 0.6rem; }
.menu__link span { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.menu__sub { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.menu__sub a { font-family: var(--ui); font-size: 0.85rem; text-decoration: none; color: var(--ink-2); display: block; padding: 0.42rem 0; transition: color 0.2s; }
.menu__sub a:hover { color: var(--brass); }

/* ==========================================================================
   7. Cards and the article grid
   ========================================================================== */
.grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card { display: flex; flex-direction: column; text-decoration: none; position: relative; }
/* The photograph is taller than its frame and drifts inside it, so a grid of cards
   breathes as the reader scrolls past instead of sitting dead on the page. */
.card__media { position: relative; overflow: clip; background: var(--raised); margin-bottom: 1.15rem; aspect-ratio: 3 / 2; }
.card__media img { width: 100%; height: 112%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.9s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--tall { aspect-ratio: 3 / 4; }
.card__dept {
  position: absolute; left: 0; top: 0; z-index: 2;
  font-family: var(--ui); font-size: 0.6rem; font-stretch: 110%; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ground); color: var(--ink); padding: 0.42rem 0.7rem;
}
.card__title { font-family: var(--display); font-size: 1.45rem; line-height: 1.02; margin-bottom: 0.55rem; transition: color 0.25s; }
.card:hover .card__title { color: var(--brass); }
.card__dek { color: var(--muted); font-size: 0.95rem; line-height: 1.52; margin-bottom: 0.75rem; }
.card__meta { margin-top: auto; }
.card--lg .card__title { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.card--sm .card__title { font-size: 1.16rem; }

/* horizontal card list */
.rows { display: grid; gap: 0; }
.row {
  display: grid; gap: 1.1rem; grid-template-columns: 4.5rem 1fr; align-items: start;
  padding: 1.4rem 0; border-top: 1px solid var(--line-2); text-decoration: none;
}
.row:first-child { border-top: 0; }
.row__n { font-family: var(--display); font-size: 1.5rem; color: var(--faint); line-height: 1; padding-top: 0.15rem; }
.row__title { font-family: var(--display); font-size: 1.22rem; line-height: 1.18; margin-bottom: 0.35rem; transition: color 0.2s; }
.row:hover .row__title { color: var(--brass); }
@media (min-width: 760px) {
  .row { grid-template-columns: 4.5rem 1fr 9rem; align-items: center; }
  .row__side { text-align: right; }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
/* Three layers at three speeds: the room drifts slowest and keeps growing, the words
   ride up against it, the hairline runs fastest. The overhang on the media layer is
   what stops the drift from ever exposing an edge. */
.hero { position: relative; overflow: clip; background: var(--deep-ink); color: var(--on-deep); isolation: isolate; }
.hero__media { position: absolute; inset: -12% 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }

/* Background clips: they run once and hold their last frame. Never looped. */
.bgvid { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--deep-ink); }
.deptmedia { position: relative; background: var(--deep-ink); }
.bgvid--dept { aspect-ratio: 16 / 9; opacity: 0.94; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.58) 0%, rgba(6, 16, 22, 0.34) 38%, rgba(6, 16, 22, 0.92) 100%),
    linear-gradient(95deg, rgba(6, 16, 22, 0.62) 0%, rgba(6, 16, 22, 0.34) 42%, rgba(6, 16, 22, 0) 72%);
}
.hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(92svh, 52rem); padding-block: clamp(4rem, 12vw, 8rem) clamp(3.4rem, 7vw, 5.5rem); }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 28px rgba(4, 12, 18, 0.5); }
.hero h1 em { color: var(--brass-2); }
.hero .lede { color: rgba(255, 253, 249, 0.88); max-width: 44ch; margin-top: 1.6rem; text-shadow: 0 1px 18px rgba(4, 12, 18, 0.55); }
.hero .kicker { color: rgba(255, 253, 249, 0.68); }
.hero .kicker::before { background: var(--brass-2); }
.hero .btn-row { margin-top: 2.1rem; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.hero .btn--ghost:hover { color: var(--brass-2); border-color: var(--brass-2); }
.hero__scroll {
  position: absolute; right: var(--gut); bottom: 2.4rem; z-index: 3; display: none;
  font-family: var(--ui); font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 253, 249, 0.6); writing-mode: vertical-rl; align-items: center; gap: 0.8rem;
}
.hero__scroll::after { content: ''; width: 1px; height: 3rem; background: linear-gradient(to bottom, var(--brass-2), transparent); animation: drop 2.4s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1080px) { .hero__scroll { display: flex; } }

/* page head, used on every non-home page */
.phead { padding-block: clamp(2.6rem, 6vw, 5rem) clamp(1.8rem, 4vw, 3rem); }
.phead__grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .phead__grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: end; } }
.phead h1 { max-width: 15ch; }

.crumbs { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.4rem; display: flex; gap: 0.55rem; flex-wrap: wrap; }
.crumbs a { text-decoration: none; color: inherit; transition: color 0.2s; }
.crumbs a:hover { color: var(--brass); }

/* ==========================================================================
   9. Article
   ========================================================================== */
.art__hero { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.art__hero { overflow: clip; aspect-ratio: 16 / 9; }
.art__hero img { width: 100%; height: 112%; object-fit: cover; }
.art__layout { display: grid; gap: clamp(2rem, 4vw, 3.6rem); }
@media (min-width: 1120px) {
  .art__layout { grid-template-columns: var(--rail) minmax(0, var(--read)) var(--rail); justify-content: center; align-items: start; }
  .art__rail { position: sticky; top: 6.2rem; }
  .art__rail--r { order: 3; }
}
@media (max-width: 1119px) { .art__rail { display: none; } }

.prose { font-size: 1.05rem; line-height: 1.72; font-optical-sizing: auto; hanging-punctuation: first last; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 3.2rem; letter-spacing: 0; line-height: 1.0; }
.prose h3 { font-size: 1.34rem; margin-top: 2.3rem; color: var(--ink); line-height: 1.06; }
.prose h2 + p, .prose h3 + p { margin-top: 0.9rem; }
.prose p { margin: 0; }
.prose a { color: var(--brass); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose .lead-p {
  font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; font-weight: 400; color: var(--ink); letter-spacing: 0;
}
.prose ul { margin: 0; padding: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.8rem; }
.prose ul li::before { content: ''; position: absolute; left: 0.15rem; top: 0.72em; width: 0.45rem; height: 1px; background: var(--brass); }
.prose ul li:last-child { margin-bottom: 0; }

.pquote {
  margin: 2.8rem 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--brass);
}
.pquote p {
  font-family: var(--display); font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.12; font-weight: 400; letter-spacing: 0; margin: 0 0 0.9rem;
}
.pquote cite { font-family: var(--ui); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-style: normal; }

.pnote {
  background: var(--raised); border-radius: var(--r-m); padding: clamp(1.3rem, 3vw, 1.9rem);
  border-left: 2px solid var(--brass); margin: 2.4rem 0;
}
.pnote h4 { font-family: var(--ui); font-size: 0.71rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.7rem; }
.pnote p { font-size: 1rem; margin: 0; }

.pfigure { margin: 2.6rem 0; }
.pfigure img { border-radius: var(--r-m); width: 100%; }
.pfigure figcaption, .pcap { font-family: var(--ui); font-size: 0.76rem; line-height: 1.5; color: var(--muted); margin-top: 0.7rem; }

/* facts table */
.facts { margin: 2.2rem 0; border-top: 1px solid var(--line); }
.facts__row { display: grid; gap: 0.2rem 1.4rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 620px) { .facts__row { grid-template-columns: 13rem 1fr; } }
.facts__k { font-family: var(--ui); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.facts__v { font-size: 0.99rem; color: var(--ink-2); line-height: 1.56; }

/* big numbers strip */
.numbers { display: grid; gap: 1px; background: var(--line-2); margin: 2.4rem 0; border-block: 1px solid var(--line-2); }
@media (min-width: 620px) { .numbers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .numbers--4 { grid-template-columns: repeat(4, 1fr); } }
.numbers__i { background: var(--ground); padding: 1.3rem 1.2rem 1.4rem; }
.numbers__n { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 400; letter-spacing: -0.03em; color: var(--brass); line-height: 1; margin-bottom: 0.55rem; }
.numbers__t { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

/* animated share bars */
.scale { margin: 2.4rem 0; }
.scale__h { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.scale__row { margin-bottom: 0.95rem; }
.scale__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.scale__l { font-size: 0.94rem; color: var(--ink-2); }
.scale__v { font-family: var(--display); font-size: 1.05rem; color: var(--brass); }
.scale__track { height: 4px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.scale__fill { height: 100%; background: var(--brass); border-radius: 999px; width: 0; transition: width 1.1s var(--ease); }
.scale__row:nth-child(2) .scale__fill { transition-delay: 0.08s; }
.scale__row:nth-child(3) .scale__fill { transition-delay: 0.16s; }
.scale__row:nth-child(4) .scale__fill { transition-delay: 0.24s; }
.scale__row:nth-child(5) .scale__fill { transition-delay: 0.32s; }

/* interactive checklist */
.check { margin: 2.4rem 0; background: var(--raised); border-radius: var(--r-m); padding: clamp(1.2rem, 3vw, 1.8rem); }
.check__h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.check__t { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass); }
.check__c { font-family: var(--ui); font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.check__l { list-style: none; margin: 0; padding: 0; }
.check__i { border-top: 1px solid var(--line-2); }
.check__i:first-child { border-top: 0; }
.check__b {
  display: flex; gap: 0.85rem; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; padding: 0.8rem 0; cursor: pointer; font-family: var(--body); font-size: 0.99rem;
  line-height: 1.55; color: var(--ink-2); transition: color 0.2s;
}
.check__b:hover { color: var(--ink); }
.check__box { flex: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--faint); border-radius: var(--r-s); margin-top: 0.2rem; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.check__box svg { width: 0.8rem; height: 0.8rem; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; color: var(--on-brass); }
.check__i.is-done .check__box { background: var(--brass); border-color: var(--brass); }
.check__i.is-done .check__box svg { opacity: 1; transform: none; }
.check__i.is-done .check__b { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line); }

/* before / after compare */
.compare { margin: 2.6rem 0; }
.compare__box { position: relative; overflow: hidden; border-radius: var(--r-m); touch-action: none; cursor: ew-resize; user-select: none; }
.compare__box img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.compare__b { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.compare__b img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; }
.compare__bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.compare__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--shadow-2); pointer-events: none;
}
.compare__knob svg { width: 1.1rem; height: 1.1rem; }
.compare__lab {
  position: absolute; bottom: 0.9rem; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; background: rgba(15, 17, 19, 0.62); color: #fff; padding: 0.32rem 0.6rem;
  border-radius: var(--r-s); backdrop-filter: blur(4px); pointer-events: none;
}
.compare__lab--a { left: 0.9rem; }
.compare__lab--b { right: 0.9rem; }

/* gallery */
.pgal { margin: 2.6rem 0; }
.pgal__strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: thin; }
@media (min-width: 760px) { .pgal__strip { grid-auto-columns: 46%; } }
.pgal__i { scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--r-m); overflow: hidden; }
.pgal__i img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.7s var(--ease); }
.pgal__i:hover img { transform: scale(1.04); }

/* in-article tool card */
.toolcard {
  display: grid; gap: 1.2rem; align-items: center; margin: 2.8rem 0;
  background: var(--deep); color: var(--on-deep); border-radius: var(--r-m); padding: clamp(1.4rem, 3vw, 2rem);
  text-decoration: none; transition: transform 0.3s var(--ease);
}
@media (min-width: 620px) { .toolcard { grid-template-columns: 1fr auto; } }
.toolcard:hover { transform: translateY(-2px); }
.toolcard__k { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 0.55rem; }
.toolcard__t { font-family: var(--display); font-size: 1.42rem; margin-bottom: 0.5rem; }
.toolcard__d { font-size: 0.96rem; color: rgba(239, 233, 221, 0.76); line-height: 1.55; }
.toolcard .btn { background: var(--brass-2); border-color: var(--brass-2); color: var(--deep-ink); white-space: nowrap; }
.toolcard:hover .btn { background: var(--on-deep); border-color: var(--on-deep); }

/* article rails */
.rail__h { font-family: var(--ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.toc { list-style: none; margin: 0 0 2rem; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 0.44rem 0 0.44rem 0.9rem; margin-left: -1px; border-left: 1px solid transparent; font-family: var(--ui); font-size: 0.81rem; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.toc a:hover { color: var(--ink); }
.toc a.is-cur { color: var(--brass); border-left-color: var(--brass); }
.railbox { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-bottom: 1.8rem; }

/* share bar */
.share { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.share__lab { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }

/* ==========================================================================
   10. Poll
   ========================================================================== */
.poll { background: var(--raised); border-radius: var(--r-m); padding: clamp(1.4rem, 3.5vw, 2.2rem); }
.poll__q { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.24; margin-bottom: 1.3rem; }
.poll__opts { display: grid; gap: 0.55rem; }
.poll__opt {
  display: block; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 0.85rem 1.05rem; cursor: pointer; position: relative; overflow: hidden;
  font-family: var(--body); font-size: 0.99rem; color: var(--ink); transition: border-color 0.2s, transform 0.2s;
}
.poll__opt:hover { border-color: var(--brass); }
.poll__opt:active { transform: scale(0.995); }
.poll__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--brass) 15%, transparent); transition: width 0.8s var(--ease); }
.poll__row { position: relative; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.poll__pct { font-family: var(--ui); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--brass); opacity: 0; transition: opacity 0.4s 0.3s; }
.poll.is-done .poll__pct { opacity: 1; }
.poll.is-done .poll__opt { cursor: default; }
.poll.is-done .poll__opt.is-mine { border-color: var(--brass); }
.poll__foot { margin-top: 1rem; font-family: var(--ui); font-size: 0.74rem; color: var(--muted); min-height: 1.2em; }

/* ==========================================================================
   11. FAQ accordion
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line-2); }
.faq__q {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; width: 100%;
  background: none; border: 0; padding: 1.15rem 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: 1.1rem; line-height: 1.3;
  color: var(--ink); transition: color 0.2s;
}
.faq__q:hover { color: var(--brass); }
.faq__ic { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; position: relative; }
.faq__ic::before, .faq__ic::after { content: ''; position: absolute; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.faq__ic::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq__ic::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.faq__i.is-open .faq__ic::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.2rem; color: var(--ink-2); font-size: 1rem; max-width: 62ch; }

/* ==========================================================================
   12. Tools
   ========================================================================== */
.tool { display: grid; gap: clamp(1.6rem, 3.5vw, 2.8rem); }
@media (min-width: 980px) { .tool { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; } }
.tpanel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(1.2rem, 3vw, 1.7rem); }
@media (min-width: 980px) { .tool > .tpanel:first-child { position: sticky; top: 6rem; } }
.tpanel__h { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-2); }

.f { margin-bottom: 1.25rem; }
.f:last-child { margin-bottom: 0; }
.f__l { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; font-family: var(--ui); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.45rem; }
.f__v { font-family: var(--display); font-size: 1rem; color: var(--brass); font-variant-numeric: tabular-nums; }
.f__hint { font-family: var(--ui); font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; line-height: 1.45; }

input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 3px; background: var(--line); border-radius: 999px; }
input[type='range']::-moz-range-track { height: 3px; background: var(--line); border-radius: 999px; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--brass); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--brass); margin-top: -7px; transition: transform 0.15s; }
input[type='range']::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--brass); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--brass); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.15); }

select, input[type='text'], input[type='email'], input[type='number'], textarea {
  width: 100%; font-family: var(--ui); font-size: 0.92rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 0.68rem 0.85rem; transition: border-color 0.2s;
}
select:focus, input:focus, textarea:focus { border-color: var(--brass); outline: none; }
textarea { min-height: 8rem; resize: vertical; font-family: var(--body); font-size: 1rem; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.42rem; }
.chip {
  font-family: var(--ui); font-size: 0.78rem; padding: 0.5rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ground); cursor: pointer; color: var(--ink-2);
  transition: all 0.2s;
}
.chip:hover { border-color: var(--brass); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chip__sw { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.15); }

.out { display: grid; gap: 1.4rem; }
.out__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
.big {
  font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.9rem);
  font-weight: 300; letter-spacing: -0.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.big small { font-size: 0.35em; font-family: var(--ui); letter-spacing: 0.08em; color: var(--muted); margin-left: 0.4rem; }

.result { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(1.2rem, 3vw, 1.8rem); }
.result + .result { margin-top: 1rem; }
.result__h { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }

.kv { border-top: 1px solid var(--line-2); }
.kv__r { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.68rem 0; border-bottom: 1px solid var(--line-2); }
.kv__k { font-family: var(--ui); font-size: 0.86rem; color: var(--ink-2); }
.kv__v { font-family: var(--display); font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv__r--total { border-bottom: 0; padding-top: 0.9rem; }
.kv__r--total .kv__k { font-weight: 600; color: var(--ink); }
.kv__r--total .kv__v { font-size: 1.3rem; color: var(--brass); }
.kv__note { font-family: var(--ui); font-size: 0.74rem; color: var(--muted); display: block; margin-top: 0.15rem; }

.bars { display: grid; gap: 0.75rem; }
.bar__top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.3rem; }
.bar__l { font-family: var(--ui); font-size: 0.83rem; color: var(--ink-2); }
.bar__v { font-family: var(--ui); font-size: 0.8rem; color: var(--brass); font-variant-numeric: tabular-nums; }
.bar__t { height: 5px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.bar__f { height: 100%; background: var(--brass); border-radius: 999px; transition: width 0.6s var(--ease); }
.bar__f--2 { background: var(--olive); }
.bar__f--3 { background: var(--clay); }
.bar__f--4 { background: var(--deep); }

.plan { background: var(--raised); border-radius: var(--r-m); padding: 1rem; }
.plan svg { width: 100%; height: auto; display: block; }
.plan text { font-family: var(--ui); font-size: 11px; fill: var(--muted); }
.plan .pl-room { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.plan .pl-rug { fill: color-mix(in srgb, var(--brass) 22%, transparent); stroke: var(--brass); stroke-width: 1; }
.plan .pl-obj { fill: color-mix(in srgb, var(--ink) 18%, transparent); stroke: var(--ink-2); stroke-width: 1; }
.plan .pl-walk { fill: none; stroke: var(--clay); stroke-width: 1; stroke-dasharray: 4 3; }
.plan .pl-dim { stroke: var(--faint); stroke-width: 1; }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.sw { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.sw__c { height: 4.5rem; }
.sw__t { padding: 0.5rem 0.6rem; background: var(--paper); font-family: var(--ui); font-size: 0.68rem; line-height: 1.35; }
.sw__t b { display: block; font-weight: 500; color: var(--ink); }
.sw__t span { color: var(--muted); font-variant-numeric: tabular-nums; }

.roompv { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.roompv svg { display: block; width: 100%; height: auto; }

.note { font-family: var(--ui); font-size: 0.79rem; line-height: 1.55; color: var(--muted); }
.note strong { color: var(--ink); font-weight: 500; }

/* stepper (compass, the eye) */
.step__bar { display: flex; gap: 0.3rem; margin-bottom: 1.8rem; }
.step__seg { height: 2px; flex: 1; background: var(--line); border-radius: 999px; transition: background 0.4s; }
.step__seg.is-done { background: var(--brass); }
.step__n { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.step__q { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.7rem; max-width: 22ch; }
.opts { display: grid; gap: 0.6rem; }
.opt {
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 1.05rem 1.2rem; cursor: pointer; font-family: var(--body); font-size: 1.02rem; color: var(--ink);
  display: flex; align-items: center; gap: 0.9rem; transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.opt:hover { border-color: var(--brass); transform: translateX(3px); }
.opt__k { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--faint); flex: none; width: 1.2rem; }

/* the eye: image pairs */
.pair { display: grid; gap: 0.7rem; }
@media (min-width: 660px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair__b { position: relative; padding: 0; border: 1px solid var(--line); background: none; border-radius: var(--r-m); overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.25s; }
.pair__b:hover { border-color: var(--brass); transform: translateY(-3px); }
.pair__b img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pair__k {
  position: absolute; left: 0.7rem; top: 0.7rem; font-family: var(--ui); font-size: 0.68rem;
  letter-spacing: 0.14em; background: rgba(15, 17, 19, 0.6); color: #fff; padding: 0.3rem 0.55rem;
  border-radius: var(--r-s); backdrop-filter: blur(4px);
}
.axis { margin-bottom: 1.5rem; }
.axis__top { display: flex; justify-content: space-between; font-family: var(--ui); font-size: 0.76rem; color: var(--muted); margin-bottom: 0.45rem; }
.axis__track { height: 3px; background: var(--line-2); border-radius: 999px; position: relative; }
.axis__dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--brass); border: 3px solid var(--ground); transform: translate(-50%, -50%); transition: left 0.8s var(--ease); }
.axis__n { font-family: var(--ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.6rem; }

/* wall planner */
.wallpv { background: var(--raised); border-radius: var(--r-m); padding: clamp(1rem, 3vw, 2rem); }
.wallpv svg { width: 100%; height: auto; }
.wallpv .wf { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.wallpv .wm { fill: color-mix(in srgb, var(--brass) 30%, transparent); }
.wallpv .wl { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 3 3; }
.wallpv text { font-family: var(--ui); font-size: 10px; fill: var(--muted); }
.framelist { display: grid; gap: 0.5rem; }
.frameitem { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.5rem; align-items: center; }
.frameitem input { padding: 0.5rem 0.6rem; font-size: 0.85rem; }

/* ==========================================================================
   13. The 50
   ========================================================================== */
.fifty__bar { position: sticky; top: 4.3rem; z-index: 20; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); padding-block: 0.9rem; margin-bottom: 2rem; }
.fifty__bar-in { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; }
.fifty__prog { display: flex; align-items: center; gap: 0.8rem; font-family: var(--ui); font-size: 0.78rem; color: var(--muted); }
.fifty__track { width: 6rem; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.fifty__fill { height: 100%; background: var(--brass); width: 0; transition: width 0.4s var(--ease); }
.fgroup { margin-bottom: 3rem; }
.fgroup__h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.fgroup__n { font-family: var(--display); font-size: 1.5rem; }
.fitem { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.fitem.is-hidden { display: none; }
.fitem__b { background: none; border: 0; padding: 0; cursor: pointer; margin-top: 0.15rem; }
.fitem__box { width: 1.2rem; height: 1.2rem; border: 1px solid var(--faint); border-radius: var(--r-s); display: grid; place-items: center; transition: all 0.2s; }
.fitem__box svg { width: 0.8rem; height: 0.8rem; opacity: 0; color: var(--on-brass); transition: opacity 0.2s; }
.fitem.is-done .fitem__box { background: var(--brass); border-color: var(--brass); }
.fitem.is-done .fitem__box svg { opacity: 1; }
.fitem.is-done .fitem__t { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line); }
.fitem__t { font-family: var(--display); font-size: 1.08rem; line-height: 1.3; margin-bottom: 0.3rem; }
.fitem__d { font-size: 0.94rem; color: var(--muted); line-height: 1.5; }
.fitem__n { font-family: var(--ui); font-size: 0.7rem; color: var(--faint); }
.fitem__a { font-family: var(--ui); font-size: 0.72rem; color: var(--brass); text-decoration: none; letter-spacing: 0.04em; }
.fitem__a:hover { text-decoration: underline; }

/* ==========================================================================
   14. Department page bits
   ========================================================================== */
.primer { display: grid; gap: 2rem; }
@media (min-width: 940px) { .primer { grid-template-columns: 1.25fr 1fr; gap: 3.4rem; } }
.dept-nav { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.dept-nav a {
  font-family: var(--ui); font-size: 0.77rem; letter-spacing: 0.05em; text-decoration: none;
  padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); transition: all 0.2s;
}
.dept-nav a:hover { border-color: var(--brass); color: var(--brass); }
.dept-nav a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

/* ==========================================================================
   15. Forms, newsletter, footer
   ========================================================================== */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-family: var(--ui); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 0.4rem; color: var(--ink-2); }
.form .req { color: var(--clay); }
.form__consent { display: flex; gap: 0.7rem; align-items: flex-start; font-family: var(--ui); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.form__consent input { width: 1rem; height: 1rem; margin-top: 0.2rem; accent-color: var(--brass); flex: none; }
.form__msg { font-family: var(--ui); font-size: 0.85rem; padding: 0.9rem 1.05rem; border-radius: var(--r-m); display: none; }
.form__msg.is-ok { display: block; background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--ink); }
.form__msg.is-err { display: block; background: color-mix(in srgb, var(--clay) 15%, transparent); color: var(--ink); }
.hp { position: absolute; left: -9999px; }

.news { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .news { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
/* FormDialog-Rahmen (seit 18.10.2026): Das eingebettete Formular bringt eigene Luft mit. Es ist neutral
   (schwarze Schrift, transparenter Grund), deshalb steht es immer in einem hellen Kasten: auf der dunklen
   Newsletter-Fläche und auch dann, wenn die Hunde- oder Nachtwache die ganze Seite dunkel färbt. */
.fd-hull { background: #f2f4f3; color: #0d1a24; border: 1px solid rgba(13, 26, 36, 0.12); border-radius: var(--r-m); }
.news__fd { min-width: 0; padding: 0.35rem 0.2rem; }
.form--fd.tpanel { padding-inline: 0.2rem; }
.form--fd .tpanel__h { margin-inline: 0.9rem; color: #63737d; border-color: rgba(13, 26, 36, 0.07); }

.ftr { background: var(--deep-ink); color: rgba(239, 233, 221, 0.72); padding-block: clamp(2.8rem, 6vw, 4.5rem) 2rem; }
.ftr a { color: rgba(239, 233, 221, 0.72); text-decoration: none; transition: color 0.2s; }
.ftr a:hover { color: var(--brass-2); }
.ftr__grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; } }
.ftr__h { font-family: var(--ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 233, 221, 0.42); margin-bottom: 1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 0.55rem; font-family: var(--ui); font-size: 0.85rem; }
.ftr .brand__name { color: var(--on-deep); }
/* The footer is dark in every watch, so the tagline cannot follow --ink-2 here. */
.ftr .brand__tag { color: rgba(239, 233, 221, 0.66); }
.ftr__note { font-family: var(--ui); font-size: 0.78rem; line-height: 1.6; color: rgba(239, 233, 221, 0.5); max-width: 34ch; margin-top: 1rem; }
.ftr__bot { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(239, 233, 221, 0.12); display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; justify-content: space-between; font-family: var(--ui); font-size: 0.75rem; color: rgba(239, 233, 221, 0.42); }
.badges { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.badge svg { width: 0.85rem; height: 0.85rem; color: var(--brass-2); }

/* ==========================================================================
   16. Lightbox, toast, reveal
   ========================================================================== */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10, 11, 13, 0.94); display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-height: 86vh; width: auto; border-radius: var(--r-m); }
.lb__cap { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--ui); font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); text-align: center; max-width: 40ch; }
.lb__x { position: absolute; top: 1.2rem; right: 1.2rem; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.lb__nav--p { left: 1.2rem; }
.lb__nav--n { right: 1.2rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 150%); z-index: 210;
  background: var(--ink); color: var(--ground); font-family: var(--ui); font-size: 0.83rem;
  padding: 0.8rem 1.3rem; border-radius: 999px; box-shadow: var(--shadow-3); transition: transform 0.4s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }

/* Only hidden once the script has confirmed it is running, so a failed script never blanks the page. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

.totop { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; background: var(--paper); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s var(--ease); }
.totop.is-on { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   17. Print
   ========================================================================== */
@media print {
  .hdr, .ftr, .menu, .totop, .share, .toolcard, .poll, .hero__scroll, .art__rail { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: 0; color: #000; background: none; }
  .hero__media { display: none; }
  .hero h1, .hero .lede { color: #000; }
  a { text-decoration: none; color: #000; }
  .sec { padding-block: 1rem; }
}

/* == ki-badge anfang: KI-Kennzeichnung, Quelle C:/cc/_ki-hinweis/badge (immer 24 px hoch, unten rechts, Bild bleibt klickbar) == */
.ki-bild { position: relative; }
img.ki-badge { position: absolute !important; inset: var(--ki-o, auto) var(--ki-r, 10px) var(--ki-u, 10px) auto !important; z-index: 3; width: auto !important; height: 24px !important; min-height: 0 !important; max-height: none !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: fill !important; aspect-ratio: auto !important; transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; animation: none !important; pointer-events: none; }
.pfigure__bild { display: block; } /* Badge am Bild, nicht an der Bildunterschrift */
.compare__box { --ki-u: 3rem; --ki-r: 0.9rem; } /* Beschriftung des rechten Bildes sitzt unten rechts */
@media (min-width: 760px) { .stack__media { --ki-o: 10px; --ki-u: auto; } } /* Ressortstapel: die nächste Karte schiebt sich von unten darüber, oben bleibt das Badge sichtbar */
/* == ki-badge ende == */
/* == netzbaustein anfang, gepflegt in C:\cc\_netz\netz.master.mjs == */
.ftr__netz{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.ftr__netz-h{margin:0 0 .9rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:600}
.ftr__netz-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem 1.4rem;grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:1000px){.ftr__netz-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.ftr__netz-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr__netz-list li{margin:0;padding:0}
.ftr__netz-list li::before{content:none}
.ftr__netz-list a{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;line-height:1.3;padding:.15rem 0}
.ftr__netz-list a:hover b,.ftr__netz-list a:focus-visible b{text-decoration:underline}
.ftr__netz-list b{font-weight:600;font-size:.95rem}
.ftr__netz-list span{font-size:.78rem;opacity:.65}
.ftr__netz-dach{margin:1.2rem 0 0;font-size:.8rem;opacity:.7;max-width:62ch}
.ftr__netz-dach a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.ftr__netz-list{gap:.5rem 1rem}}
/* == netzbaustein ende == */

/* ==========================================================================
   18. The hour dial
   --------------------------------------------------------------------------
   The signature control, and the only theme switch on the site. Four hours of one
   day rather than a light and a dark mode, because this magazine is about rooms and
   a room is made by its light. The front page also walks the hour forward on its own
   as the reader scrolls, until they touch the dial and take it over.
   ========================================================================== */
.hour {
  display: inline-flex; align-items: center; gap: 0.1rem; position: relative;
  padding: 0.22rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.hour__b {
  position: relative; width: 1.85rem; height: 1.6rem; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--faint); transition: color 0.3s var(--ease);
}
.hour__b svg { width: 0.95rem; height: 0.95rem; }
.hour__b:hover { color: var(--ink-2); }
.hour__b[aria-checked='true'] { color: var(--brass); }
/* The marker slides between the four hours instead of each button lighting up on its own. */
.hour__mark {
  position: absolute; top: 0.22rem; left: 0.22rem; width: 1.85rem; height: 1.6rem;
  background: color-mix(in srgb, var(--brass) 15%, transparent);
  border-bottom: 1px solid var(--brass); pointer-events: none;
  transform: translateX(calc(var(--h, 1) * 1.95rem));
  transition: transform 0.45s var(--ease);
}
@media (max-width: 419px) { .hour { display: none; } }

/* The whole page eases from one hour into the next instead of snapping. */
body, .hdr, .sec--deep, .sec--raised, .ftr, .card, .tpanel, .result, .plate__in, .stack__card {
  transition: var(--hour-shift);
}
@media (prefers-reduced-motion: reduce) { body, .hdr, .sec--deep, .sec--raised, .ftr, .card, .tpanel, .result, .plate__in, .stack__card { transition: none; } }

/* Photographs are lit by the hour too, very slightly, so the images belong to the room. */
.card__media img, .plate__media img, .hero__media img, .hero__media video, .stack__card img {
  transition: filter 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-hour='dawn'] .card__media img, [data-hour='dawn'] .plate__media img, [data-hour='dawn'] .hero__media img, [data-hour='dawn'] .hero__media video, [data-hour='dawn'] .stack__card img {
  filter: saturate(0.86) brightness(1.02) contrast(0.97) hue-rotate(-6deg);
}
[data-hour='dusk'] .card__media img, [data-hour='dusk'] .plate__media img, [data-hour='dusk'] .hero__media img, [data-hour='dusk'] .hero__media video, [data-hour='dusk'] .stack__card img {
  filter: saturate(1.04) brightness(0.88) contrast(1.04) sepia(0.1);
}
[data-hour='night'] .card__media img, [data-hour='night'] .plate__media img, [data-hour='night'] .hero__media img, [data-hour='night'] .hero__media video, [data-hour='night'] .stack__card img {
  filter: saturate(0.92) brightness(0.74) contrast(1.08);
}

/* ==========================================================================
   19. Parallax
   --------------------------------------------------------------------------
   One engine, one convention: data-px="<factor>" on anything that should drift, and
   site.js writes --pxy in pixels on a requestAnimationFrame. Negative factors move
   against the scroll. Everything falls back to a still page without the script and
   under prefers-reduced-motion.
   ========================================================================== */
[data-px] { will-change: transform; }
.js [data-px] { transform: translate3d(0, var(--pxy, 0px), 0) scale(var(--pxs, 1)); }
/* A framed photograph keeps its frame still and drifts the picture inside it. Custom properties
   inherit, so --pxy set on the frame reaches the image without a second measurement. */
.js .art__hero[data-px], .js .card__media[data-px] { transform: none; }
.js .art__hero[data-px] img, .js .card__media[data-px] img { transform: translate3d(0, var(--pxy, 0px), 0); }
.js .card__media[data-px]:hover img, .card:hover .card__media[data-px] img { transform: translate3d(0, var(--pxy, 0px), 0) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .js [data-px] { transform: none !important; } .js [data-px] img { transform: none !important; } }

/* A full-bleed plate: the photograph drifts inside a fixed frame while the words hold still. */
.plate { position: relative; overflow: clip; min-height: min(88vh, 46rem); display: grid; align-items: end; isolation: isolate; }
.plate--short { min-height: min(62vh, 32rem); }
.plate__media { position: absolute; inset: -14% 0; z-index: -2; }
.plate__media img, .plate__media video { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12, 10, 16, 0.82) 0%, rgba(12, 10, 16, 0.34) 42%, rgba(12, 10, 16, 0.08) 74%);
}
.plate__in { position: relative; padding-block: clamp(2.6rem, 7vw, 5rem); color: #f2eeec; }
.plate__in h2, .plate__in h3 { color: #f7f4f2; }
.plate__in .kicker { color: rgba(247, 244, 242, 0.66); }
.plate__in .kicker::before { background: var(--brass-2); }
.plate__in .lede { color: rgba(247, 244, 242, 0.8); }
.plate__in .crumbs { color: rgba(247, 244, 242, 0.55); }
.plate__in .crumbs a:hover { color: var(--brass-2); }
/* A department plate carries a running clip, which needs the same cover fit as a still. */
.plate__media .bgvid { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   20. The stack
   --------------------------------------------------------------------------
   The eight departments as a deck that the reader deals out by scrolling: each card
   pins under the one before it, so the whole magazine is legible from one place.
   The order is the magazine's own running order, which is why it is numbered.
   ========================================================================== */
.stack { display: grid; gap: clamp(1rem, 2.4vw, 1.7rem); }
.stack__card {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  display: grid; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-2);
}
@media (min-width: 760px) {
  .stack { gap: 1.4rem; }
  .stack__card { position: sticky; top: calc(5.6rem + var(--i, 0) * 0.85rem); grid-template-columns: 1fr 1.05fr; min-height: 19rem; }
}
.stack__media { position: relative; overflow: clip; min-height: 13rem; }
.stack__media img { width: 100%; height: 100%; object-fit: cover; }
.stack__body { padding: clamp(1.4rem, 3.2vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.stack__n {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.2em;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.stack__t { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 0.98; }
.stack__d { color: var(--muted); font-size: 0.99rem; line-height: 1.55; max-width: 42ch; }
.stack__go { font-family: var(--ui); font-size: 0.74rem; font-stretch: 108%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.stack__go svg { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease); }
.stack__card:hover .stack__go { color: var(--brass); }
.stack__card:hover .stack__go svg { transform: translateX(0.35rem); }
.stack__card:hover .stack__media img { transform: scale(1.04); }
.stack__media img { transition: transform 0.8s var(--ease); }

/* ==========================================================================
   21. Material points
   --------------------------------------------------------------------------
   Three points sit on the opening photograph and name what the room is actually made
   of. It is the vocabulary of the trade rather than a caption, and it gives a reader
   something to do in the first screen.
   ========================================================================== */
.spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; }
.spot__d {
  display: block; width: 0.72rem; height: 0.72rem; border-radius: 50%;
  background: #f7f4f2; box-shadow: 0 0 0 1px rgba(12, 10, 16, 0.35), 0 0 0 0 rgba(247, 244, 242, 0.45);
  animation: spotpulse 3.4s var(--ease) infinite;
}
@keyframes spotpulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(12, 10, 16, 0.35), 0 0 0 0 rgba(247, 244, 242, 0.4); }
  55% { box-shadow: 0 0 0 1px rgba(12, 10, 16, 0.35), 0 0 0 0.75rem rgba(247, 244, 242, 0); }
}
@media (prefers-reduced-motion: reduce) { .spot__d { animation: none; } }
.anat { position: relative; overflow: visible; }
.anat > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.spot__n {
  position: absolute; left: 50%; bottom: calc(100% + 0.8rem); transform: translateX(-50%) translateY(0.35rem);
  width: max-content; max-width: min(17rem, 60vw); text-align: left;
  font-family: var(--ui); font-size: 0.76rem; font-stretch: 100%; letter-spacing: 0; text-transform: none;
  line-height: 1.45; color: #17161a; background: #f7f4f2; padding: 0.7rem 0.85rem; box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.spot__n b {
  display: block; font-size: 0.64rem; font-weight: 600; font-stretch: 110%; letter-spacing: 0.18em;
  text-transform: uppercase; color: #9d5527; margin-bottom: 0.35rem;
}
/* Points near an edge open inwards so the note never runs off the photograph. The side comes
   from the point's own x position, not from its order in the list. */
.spot[data-align='l'] .spot__n { left: 0; transform: translateX(0) translateY(0.35rem); }
.spot[data-align='r'] .spot__n { left: auto; right: 0; transform: translateX(0) translateY(0.35rem); }
.spot[data-align='l']:hover .spot__n, .spot[data-align='l']:focus-within .spot__n, .spot[data-align='l'][aria-expanded='true'] .spot__n,
.spot[data-align='r']:hover .spot__n, .spot[data-align='r']:focus-within .spot__n, .spot[data-align='r'][aria-expanded='true'] .spot__n { transform: translateX(0) translateY(0); }

/* ==========================================================================
   22. The running band
   --------------------------------------------------------------------------
   A sideways run of studios that the reader drives with the vertical scroll, so the
   nine tools are met as a shelf rather than a list. It degrades to an ordinary
   horizontal scroller without the script.
   ========================================================================== */
.band { position: relative; }
.band__stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; overflow: hidden; }
.band__track { display: flex; gap: clamp(0.9rem, 2vw, 1.6rem); padding-inline: var(--gut); will-change: transform; }
.js .band__track { transform: translate3d(var(--bandx, 0px), 0, 0); }
.band__head { padding-inline: var(--gut); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.band__i {
  flex: 0 0 clamp(15rem, 25vw, 20rem); background: var(--paper); border: 1px solid var(--line);
  padding: clamp(1.1rem, 2.4vw, 1.6rem); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.55rem; min-height: 13.5rem;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.band__i:hover { border-color: var(--brass); transform: translateY(-0.4rem); }
.band__ic { width: 1.4rem; height: 1.4rem; color: var(--brass); margin-bottom: 0.3rem; }
.band__t { font-family: var(--display); font-size: 1.55rem; line-height: 1; }
.band__d { font-family: var(--ui); font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.band__k { font-family: var(--ui); font-size: 0.64rem; font-stretch: 110%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-top: auto; }
/* Without the script the band is simply a scroller, so nothing is ever unreachable. */
html:not(.js) .band__stage { min-height: 0; position: static; }
html:not(.js) .band__track { overflow-x: auto; padding-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .band__stage { position: static; min-height: 0; }
  .band__track { overflow-x: auto; transform: none !important; padding-bottom: 1rem; }
}

/* ==========================================================================
   23. Reveals
   --------------------------------------------------------------------------
   Headlines arrive from under a mask, the way a plate is uncovered. Everything else
   keeps the quiet fade it had, because one gesture repeated is a signature and two
   is noise.
   ========================================================================== */
.js .rv--mask { clip-path: inset(0 0 102% 0); transition: clip-path 1.05s var(--ease); opacity: 1; transform: none; }
.js .rv--mask.is-in { clip-path: inset(0 0 -12% 0); }
@media (prefers-reduced-motion: reduce) { .js .rv--mask { clip-path: none; } }

/* A hairline that draws itself across the page when a section arrives. */
.rule { height: 1px; background: var(--line); transform-origin: left; }
.js .rule { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.js .rule.is-in { transform: scaleX(1); }

/* ==========================================================================
   24. The fleet strip: the six sizes the market is built around, to scale
   ========================================================================== */
.fleet__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) {
  .fleet__head { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
}
.fleet { border-top: 1px solid var(--line); }
.fleet__row {
  display: grid; gap: 0.35rem 1.4rem; padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-2); align-items: center;
}
@media (min-width: 760px) {
  .fleet__row {
    grid-template-columns: 14.5rem minmax(0, 1fr) 10rem;
    grid-template-areas: 'label bar meta' 'label note note';
    row-gap: 0.5rem;
  }
  .fleet__label { grid-area: label; }
  .fleet__bar { grid-area: bar; }
  .fleet__meta { grid-area: meta; }
  .fleet__note { grid-area: note; }
}
.fleet__label { display: flex; align-items: baseline; gap: 0.7rem; }
.fleet__n { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--brass); white-space: nowrap; }
.fleet__t { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
/* The bar is a waterline: a hairline the full width of the scale, with the hull drawn on it. */
.fleet__bar { position: relative; height: 0.85rem; border-bottom: 1px solid var(--line); }
.fleet__fill {
  position: absolute; left: 0; bottom: 0; height: 0.5rem; width: 0;
  background: linear-gradient(90deg, var(--pewter), var(--brass));
  transition: width 1.1s var(--ease); border-radius: 0 2px 2px 0;
}
.fleet__meta { display: flex; gap: 1.1rem; white-space: nowrap; font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.fleet__meta b { color: var(--ink); font-weight: 600; }
.fleet__note { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 62ch; }

/* ==========================================================================
   25. Raneris signature: the masthead sits on a waterline
   ========================================================================== */
.brand__name { position: relative; }
.brand__name::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.28em; height: 1px;
  background: var(--brass); opacity: 0.75;
}
.ftr .brand__name::after { background: var(--brass-2); }
/* Prata has no italic of its own, so an emphasised phrase in a headline borrows the text face. */
.h-hero em, .h-1 em, .h-2 em { font-family: var(--body); font-style: italic; font-weight: 400; }
.kicker { font-stretch: normal; font-weight: 600; }

/* ==========================================================================
   26. Instrument output: matched lists, comparison columns, ticked lists
   ========================================================================== */
.match { display: grid; gap: 0.9rem; }
.match__i { border: 1px solid var(--line); border-radius: var(--r-m); padding: 1rem 1.1rem; background: var(--ground); }
.match__i.is-top { border-color: var(--brass); box-shadow: inset 3px 0 0 var(--brass); }
.match__head { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 0.5rem; }
.match__n { font-family: var(--display); font-size: 1.15rem; color: var(--brass); line-height: 1; }
.match__t { font-family: var(--ui); font-size: 0.95rem; font-weight: 600; margin: 0; line-height: 1.25; }
.match__p { font-family: var(--ui); font-size: 0.75rem; color: var(--muted); margin: 0.1rem 0 0; }
.match__s { margin-left: auto; font-family: var(--display); font-size: 1.05rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.match__d { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 0.7rem; }
.match__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
  font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.6rem;
}

.cols { display: grid; gap: 1rem; }
@media (min-width: 720px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cols__c { border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem; background: var(--paper); }
.cols__c.is-best { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 7%, var(--paper)); }
.cols__t { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.cols__big { font-family: var(--display); font-size: 1.8rem; line-height: 1; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cols__s { font-family: var(--ui); font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0.9rem; }
.cols__c .kv__k { font-size: 0.8rem; }
.cols__c .kv__v { font-size: 0.92rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem;
  border: 1px solid var(--brass); border-radius: 1px;
}

/* The watch dial is the one control the header hides on a narrow screen, so the
   menu carries it instead: on a phone it is the only way to change the light. */
.menu__watch { display: none; margin-left: 1.2rem; }
@media (max-width: 419px) { .menu__watch { display: block; } }
.menu__watch .hour { display: flex; }

/* ==========================================================================
   From the houses: brand pieces with press photographs (20.10.2026)
   Every press picture and clip carries the credit of its house underneath.
   ========================================================================== */
.houses__head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: 1.6rem; }
@media (min-width: 900px) { .houses__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.houses__head .h-2 { max-width: 18ch; }
.house__brand { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 0 0 0.45rem; }
.credit { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); }
.credit--card { margin: -0.7rem 0 0.8rem; }
.credit--hero { display: block; margin-top: 0.6rem; text-align: right; }
.art__fig { margin: 0 0 clamp(2rem, 4vw, 3.2rem); }
.art__fig .art__hero { margin-bottom: 0; }
.pfigure figcaption .credit { white-space: nowrap; }
.pfigure--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pfigure--pair figcaption { grid-column: 1 / -1; margin-top: 0; }
.pfigure__cell { display: block; overflow: clip; border-radius: var(--r-m); aspect-ratio: 4 / 5; }
.pfigure--pair .pfigure__cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.pvideo video { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: var(--raised); }