/* ============================================================
   RIM & BAY — an independent digest of Singapore
   Night-over-paper editorial theme · Fraunces + Sora
   ============================================================ */

:root {
  --night: #061018;
  --bay: #0c1d2a;
  --bay-2: #102636;
  --paper: #f6f1e8;
  --paper-2: #efe6d8;
  --foam: #fffaf3;
  --ring: #d92b2b;
  --ring-deep: #a81c1c;
  --brass: #c9a46a;
  --brass-2: #e6d3a3;
  --jade: #3d8f86;
  --text: #1c2d38;
  --muted: #5d7382;
  --max: 1160px;
  --line: rgba(28, 45, 56, 0.16);
  --line-strong: rgba(28, 45, 56, 0.32);
  --line-dark: rgba(230, 211, 163, 0.16);
  --line-dark-strong: rgba(230, 211, 163, 0.34);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Sora", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(120% 55% at 50% -12%, var(--foam) 0%, transparent 62%),
    radial-gradient(90% 50% at 100% 30%, rgba(201, 164, 106, 0.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

::selection { background: var(--ring); color: var(--foam); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 4vw; }

.display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 144;
}

a { color: inherit; }

/* ---------- buttons ---------- */
/* The single button style — always the active red. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--ring);
  background: var(--ring);
  color: var(--foam);
  font: 600 0.8rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.btn:hover { background: var(--ring-deep); border-color: var(--ring-deep); transform: translateY(-1px); }
.btn .arr { transition: transform 0.25s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-ghost {
  background: transparent;
  color: var(--foam);
  border-color: var(--line-dark-strong);
}
.btn-ghost:hover { background: rgba(230, 211, 163, 0.08); border-color: var(--brass); }
.btn-ghost-dark {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost-dark:hover { background: rgba(28, 45, 56, 0.05); border-color: var(--text); }

/* ---------- header ---------- */
.site-head {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-head .head-in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.1rem 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: padding 0.4s;
}
.site-head.scrolled {
  background: rgba(246, 241, 232, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-head.scrolled .head-in { padding-block: 0.75rem; }

.wordmark {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--text);
  line-height: 1;
}
.wordmark .wm-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wordmark .wm-name em { font-style: italic; color: var(--ring); font-weight: 500; }
.wordmark .wm-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* header over the dark hero */
.site-head.on-hero:not(.scrolled) .wordmark,
.site-head.on-hero:not(.scrolled) .head-nav a { color: var(--foam); }
.site-head.on-hero:not(.scrolled) .wordmark .wm-tag { color: var(--brass); }
.site-head.on-hero:not(.scrolled) .head-nav a { opacity: 0.75; }
.site-head.on-hero:not(.scrolled) .head-nav a:hover { opacity: 1; color: var(--brass-2); }

.head-right { display: flex; align-items: center; gap: 1.8rem; }
.head-nav { display: flex; gap: 1.5rem; }
.head-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s, opacity 0.25s;
  position: relative;
}
.head-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: var(--ring);
  transition: right 0.3s;
}
.head-nav a:hover { color: var(--ring); }
.head-nav a:hover::after { right: 0; }
.head-cta { padding: 0.7rem 1.25rem; font-size: 0.7rem; }

/* ---------- hero (index) ---------- */
.hero {
  position: relative;
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 78% 42%, rgba(201, 164, 106, 0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 115%, var(--bay-2) 0%, var(--bay) 45%, var(--night) 100%);
  color: var(--foam);
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
  padding: 9rem 4vw 0;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--brass);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.hero-kicker::before { content: ""; width: 3.5rem; height: 1px; background: var(--ring); }
.hero h1 {
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: 0.98;
  max-width: 12ch;
  margin-bottom: 2rem;
}
.hero h1 em { font-style: italic; font-weight: 480; color: var(--brass-2); }
.hero-sub {
  max-width: 42ch;
  color: rgba(255, 250, 243, 0.62);
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 3.2rem;
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 4rem; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-dark);
}
.hero-meta div {
  flex: 1 1 170px;
  padding: 1.5rem 1.8rem 1.9rem 0;
  border-inline-end: 1px solid var(--line-dark);
}
.hero-meta div:last-child { border-inline-end: 0; }
.hero-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 560;
  color: var(--brass-2);
  line-height: 1.1;
}
.hero-meta span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.45);
}

/* ---------- the wheel ---------- */
.wheel-wrap {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -8vw;
  transform: translateY(-56%);
  width: min(58vw, 720px);
  pointer-events: none;
}
.wheel { width: 100%; height: auto; display: block; }
.wheel-rotor {
  transform-origin: 300px 300px;
  animation: wheel-turn 140s linear infinite;
}
@keyframes wheel-turn { to { transform: rotate(360deg); } }
.w-rim { fill: none; stroke: rgba(201, 164, 106, 0.55); stroke-width: 2.4; }
.w-rim-inner { stroke: rgba(201, 164, 106, 0.22); stroke-width: 1.4; }
.w-spoke { stroke: rgba(201, 164, 106, 0.18); stroke-width: 1.2; }
.w-capsule { fill: var(--night); stroke: var(--brass); stroke-width: 1.6; }
.w-capsule-red { fill: var(--ring); stroke: var(--ring); }
.w-leg { stroke: rgba(201, 164, 106, 0.4); stroke-width: 2.2; }
.w-hub { fill: var(--brass); }
.w-water { stroke: rgba(230, 211, 163, 0.28); stroke-width: 1.4; stroke-dasharray: 1 9; stroke-linecap: round; }
.waterline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background: linear-gradient(to top, rgba(6, 16, 24, 0.9), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--foam);
  padding: 0.85rem 0;
}
.ticker-inner {
  display: flex;
  gap: 2.8rem;
  width: max-content;
  animation: tick 30s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--muted);
  white-space: nowrap;
}
.ticker-inner span::after { content: "·"; margin-inline-start: 2.8rem; color: var(--ring); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- section chrome ---------- */
.section { padding: 6.5rem 0; }
.section-head { margin-bottom: 3.4rem; max-width: 46rem; }
.section-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ring);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.section-label::before { content: ""; width: 2.2rem; height: 1px; background: var(--ring); }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04; }
.section-head h2 em { font-style: italic; color: var(--ring); font-weight: 480; }
.section-head p { color: var(--muted); margin-top: 1.1rem; max-width: 48ch; font-size: 0.95rem; }

/* ---------- four ways into the rim ---------- */
.ways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.way {
  border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  padding: 2.4rem 1.9rem 2.6rem;
  background: transparent;
  transition: background 0.4s;
  position: relative;
}
.way:hover { background: var(--foam); }
.way::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ring);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s;
}
.way:hover::before { transform: scaleX(1); }
.way .way-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ring);
  display: block;
  margin-bottom: 1.4rem;
}
.way h3 { font-size: 1.35rem; line-height: 1.12; margin-bottom: 0.8rem; }
.way p { color: var(--muted); font-size: 0.86rem; line-height: 1.7; }

/* ---------- the bay is the point (dark band) ---------- */
.bay-band {
  background:
    radial-gradient(70% 90% at 88% 10%, rgba(201, 164, 106, 0.09), transparent 60%),
    linear-gradient(165deg, var(--bay) 0%, var(--night) 100%);
  color: var(--foam);
  position: relative;
  overflow: hidden;
}
.bay-band::after {
  content: "";
  position: absolute;
  right: -14rem;
  bottom: -18rem;
  width: 44rem;
  height: 44rem;
  border: 1px solid rgba(201, 164, 106, 0.14);
  border-radius: 50%;
  pointer-events: none;
}
.bay-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  align-items: start;
}
.bay-band .section-label { color: var(--brass); }
.bay-band .section-label::before { background: var(--brass); }
.bay-band h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.4rem;
}
.bay-band h2 em { font-style: italic; color: var(--brass-2); font-weight: 480; }
.bay-lede { color: rgba(255, 250, 243, 0.6); font-size: 0.98rem; max-width: 44ch; font-weight: 300; }
.bay-points { display: flex; flex-direction: column; }
.bay-point {
  padding: 1.8rem 0 1.8rem 2rem;
  border-left: 1px solid var(--line-dark-strong);
  position: relative;
}
.bay-point::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 2.4rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ring);
}
.bay-point h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.bay-point h3 span { color: var(--brass); font-style: italic; font-weight: 480; }
.bay-point p { color: rgba(255, 250, 243, 0.55); font-size: 0.88rem; font-weight: 300; max-width: 38ch; }

/* ---------- a desk, not a box office ---------- */
.desk-in {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.desk-copy p { color: var(--muted); font-size: 0.96rem; margin-bottom: 1.2rem; max-width: 52ch; }
.desk-copy p strong { color: var(--text); font-weight: 600; }
.desk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.8rem 0 2.2rem;
  list-style: none;
}
.desk-facts li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 0.5rem 1rem;
  background: var(--foam);
}
.desk-sign {
  margin-top: 2.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
}
.desk-sign b { color: var(--ring); font-weight: 560; }

/* ---------- guide cards ---------- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.gcard {
  background: var(--foam);
  border: 1px solid var(--line);
  padding: 2rem 1.9rem 1.9rem;
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.gcard:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px -22px rgba(6, 16, 24, 0.35);
}
.gcard-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.gcard-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ring);
}
.gcard-cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.gcard h3 { font-size: 1.55rem; line-height: 1.1; margin-bottom: 0.7rem; }
.gcard-dek { color: var(--muted); font-size: 0.87rem; line-height: 1.65; flex: 1; }
.gcard-link {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.25s;
}
.gcard-link .arr { transition: transform 0.25s; color: var(--ring); }
.gcard:hover .gcard-link { color: var(--ring); }
.gcard:hover .gcard-link .arr { transform: translateX(5px); }

/* ---------- notes ---------- */
.notes-list { border-top: 1px solid var(--line); }
.note-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0.4rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background 0.3s, padding 0.3s;
}
.note-row:hover { background: var(--foam); padding-inline: 1rem; }
.note-row .n-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ring);
}
.note-row h3 { font-size: 1.4rem; line-height: 1.1; margin-bottom: 0.35rem; }
.note-row p { color: var(--muted); font-size: 0.87rem; max-width: 52ch; }
.note-row .n-arr {
  font-size: 1.2rem;
  color: var(--muted);
  transition: transform 0.3s, color 0.3s;
}
.note-row:hover .n-arr { transform: translateX(6px); color: var(--ring); }

/* ---------- footer ---------- */
.site-foot {
  background: linear-gradient(180deg, var(--bay) 0%, var(--night) 70%);
  color: var(--foam);
  padding: 4.5rem 0 2.4rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.6rem;
}
.foot-brand .wordmark { color: var(--foam); margin-bottom: 1.1rem; }
.foot-brand .wordmark .wm-tag { color: var(--brass); }
.foot-brand p { color: rgba(255, 250, 243, 0.5); font-size: 0.85rem; max-width: 34ch; font-weight: 300; margin-bottom: 1.6rem; }
.foot-mail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--brass-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 211, 163, 0.4);
  transition: color 0.25s, border-color 0.25s;
}
.foot-mail:hover { color: var(--foam); border-color: var(--foam); }
.foot-col h4 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.2rem;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0.65rem; }
.foot-col a {
  color: rgba(255, 250, 243, 0.55);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 300;
  transition: color 0.25s;
}
.foot-col a:hover { color: var(--brass-2); }
.foot-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line-dark);
  color: rgba(255, 250, 243, 0.4);
  font-size: 0.76rem;
  font-weight: 300;
}
.foot-legal nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 250, 243, 0.4); text-decoration: none; }
.foot-legal a:hover { color: var(--foam); }

/* ---------- hub pages (guides / notes index) ---------- */
.hub-hero { padding: 9.5rem 0 3.5rem; }
.hub-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; margin-bottom: 1.3rem; }
.hub-hero h1 em { font-style: italic; color: var(--ring); font-weight: 480; }
.hub-hero .standfirst { color: var(--muted); max-width: 52ch; font-size: 1rem; }
.hub-count {
  margin-top: 2.2rem;
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-count::before { content: ""; width: 2rem; height: 1px; background: var(--line-strong); }

.index-list { border-top: 1px solid var(--line); margin-bottom: 6rem; }
.index-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 2.2rem;
  align-items: baseline;
  padding: 2.3rem 0.4rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background 0.3s, padding 0.3s;
}
.index-row:hover { background: var(--foam); padding-inline: 1.2rem; }
.index-num {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 2.1rem;
  color: var(--brass);
  transition: color 0.3s;
}
.index-row:hover .index-num { color: var(--ring); }
.index-row h2 { font-size: 1.65rem; line-height: 1.1; margin-bottom: 0.45rem; }
.index-row p { color: var(--muted); font-size: 0.88rem; max-width: 56ch; }
.index-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.index-meta .arr { font-size: 1.1rem; color: var(--ring); letter-spacing: 0; }

/* ---------- article pages ---------- */
.article-hero { padding: 9.5rem 0 3rem; }
.article-hero .crumbs {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.article-hero .crumbs a { color: var(--ring); text-decoration: none; }
.article-hero .crumbs a:hover { text-decoration: underline; }
.article-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.02; max-width: 18ch; margin-bottom: 1.5rem; }
.article-hero h1 em { font-style: italic; font-weight: 480; color: var(--ring); }
.standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.45;
  color: var(--muted);
  max-width: 40ch;
}
.article-meta {
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-meta b { color: var(--text); font-weight: 700; }

.article-body { max-width: 44rem; padding-bottom: 4rem; }
.article-body p { font-size: 0.99rem; color: var(--text); margin-bottom: 1.4rem; font-weight: 300; }
.article-body p strong { font-weight: 600; }
.article-body .lede::first-letter {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--ring);
}
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.75rem;
  margin: 3rem 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.article-body h2::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--ring);
  flex-shrink: 0;
}
.article-body h3 { font-family: var(--font-display); font-weight: 560; font-size: 1.25rem; margin: 2.2rem 0 0.8rem; }
.article-body ul { margin: 0 0 1.4rem 1.2rem; }
.article-body li { font-size: 0.95rem; font-weight: 300; margin-bottom: 0.55rem; padding-inline-start: 0.3rem; }
.article-body li::marker { color: var(--ring); }
.article-body a { color: var(--ring-deep); text-decoration-color: rgba(217, 43, 43, 0.4); }
.article-body a:hover { color: var(--ring); }

.field-note {
  margin: 2.4rem 0;
  padding: 1.6rem 1.8rem;
  background: var(--foam);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brass);
}
.field-note .fn-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
}
.field-note p { font-size: 0.9rem !important; margin-bottom: 0 !important; color: var(--muted) !important; }

.pull-line {
  margin: 2.8rem 0;
  padding: 0 0 0 1.8rem;
  border-inline-start: 2px solid var(--ring);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--text);
}

/* article footer nav */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-bottom: 6rem;
}
.article-nav a {
  padding: 1.8rem 0.4rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background 0.3s;
}
.article-nav a:hover { background: var(--foam); }
.article-nav a + a { border-inline-start: 1px solid var(--line); text-align: end; align-items: flex-end; }
.article-nav .an-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-nav .an-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 560; }
.article-nav a:hover .an-title { color: var(--ring); }

/* ---------- legal / simple pages ---------- */
.legal-hero { padding: 9.5rem 0 3.2rem; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; }
.legal-hero .updated { margin-top: 1.5rem; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.06em; }
.legal-body { padding: 3.5rem 0 6rem; max-width: 46rem; }
.legal-body section { margin-bottom: 2.8rem; }
.legal-body h2 { font-family: var(--font-display); font-weight: 560; font-size: 1.6rem; margin-bottom: 0.9rem; }
.legal-body p, .legal-body li { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.8rem; font-weight: 300; }
.legal-body ul { padding-inline-start: 1.3rem; }
.legal-body li { margin-bottom: 0.5rem; }
.legal-body li::marker { color: var(--ring); }
.legal-body a { color: var(--ring-deep); }

/* ---------- contact ---------- */
.contact-block {
  background: var(--foam);
  border: 1px solid var(--line);
  padding: 3rem;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.contact-block h2 { font-size: 1.9rem; margin-bottom: 0.9rem; }
.contact-block p { color: var(--muted); font-size: 0.93rem; font-weight: 300; margin-bottom: 1.8rem; max-width: 44ch; }
.contact-side { border-inline-start: 1px solid var(--line); padding-inline-start: 3rem; }
.contact-side h4 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.contact-side ul { list-style: none; }
.contact-side li { font-size: 0.87rem; color: var(--muted); font-weight: 300; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); }
.contact-side li:last-child { border-bottom: 0; }

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 1.2rem;
  inset-inline: 1.2rem;
  z-index: 95;
  max-width: 44rem;
  margin-inline: auto;
  background: rgba(12, 29, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-dark-strong);
  color: var(--foam);
  padding: 1.3rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  transform: translateY(160%);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: 0.82rem; color: rgba(255, 250, 243, 0.65); flex: 1; font-weight: 300; }
.cookie-banner p a { color: var(--brass-2); }
.cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.68rem; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-inner { animation: none; }
  .wheel-rotor { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .ways { grid-template-columns: repeat(2, 1fr); }
  .bay-in { grid-template-columns: 1fr; gap: 2.5rem; }
  .desk-in { grid-template-columns: 1fr; gap: 2rem; }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-block { grid-template-columns: 1fr; }
  .contact-side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); padding-top: 2rem; }
  .wheel-wrap { opacity: 0.35; right: -20vw; width: 80vw; }
}
@media (max-width: 680px) {
  .head-nav { display: none; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .hero-meta div { flex-basis: 48%; border-inline-end: 0; }
  .ways { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .section { padding: 4.2rem 0; }
  .index-row { grid-template-columns: 3.4rem 1fr; }
  .index-row .index-meta { display: none; }
  .note-row { grid-template-columns: 3.2rem 1fr; }
  .note-row .n-arr { display: none; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav a + a { border-inline-start: 0; border-top: 1px solid var(--line); text-align: start; align-items: flex-start; }
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-actions { justify-content: center; }
  .contact-block { padding: 2rem; }
}