/* ============================================================
   ZENO — zenoai.app
   Source of truth: references/brand-book.md + zeno-brand.css
   Hand-written CSS. No build step. No framework.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Core palette (brand book §12) */
  --ink:            #10151C;  /* primary dark surface + ink text */
  --ink-800:        #161C25;  /* slightly lifted dark surface */
  --ink-700:        #1F2937;  /* body text on light */
  --white:          #FFFFFF;
  --primary:        #6D8099;  /* slate-blue — leads */
  --primary-light:  #9FADBF;
  --secondary:      #D9CFC2;  /* warm neutral */
  --gold:           #CCB86F;  /* tertiary — used at most once per frame */
  --paper-50:       #F7F4F0;  /* lightest */
  --paper-100:      #F2ECE5;  /* light card */
  --paper-200:      #E7E2DC;  /* borders */
  --paper-300:      #C8C5C2;  /* muted */

  /* Semantic */
  --bg:             var(--paper-50);
  --text:           var(--ink-700);
  --muted:          #5B6B7E;          /* accessible muted on paper (>=4.5:1) */
  --rule:           var(--paper-200);

  /* Type */
  --font: "Jost", "Futura PT", "Century Gothic", "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;  /* editorial serif for headlines */
  --slate-deep: #54647B;  /* slate-blue, dark enough for small text on paper (WCAG AA) */

  /* Fluid type scale (clamp: min, vw, max) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);

  /* Space */
  --container: 1180px;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 9vw, 9rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.95s;

  --radius: 14px;
  --shadow-soft: 0 1px 2px rgba(16,21,28,0.04), 0 12px 36px -18px rgba(16,21,28,0.28);
  --shadow-device: 0 2px 6px rgba(16,21,28,0.08), 0 40px 80px -40px rgba(16,21,28,0.45);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: rgba(204,184,111,0.28); }

/* Visible focus for keyboard nav (accessibility) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper-50);
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px; z-index: 200;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ---------- 3. Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 840px; }
.section { padding-block: var(--section-y); position: relative; }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--slate-deep);
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block;
}
.eyebrow--center { justify-content: center; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-700); font-weight: 300; max-width: var(--measure); }

h1, .h1 { font-size: var(--fs-display); font-weight: 300; line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
/* Editorial serif display face for headlines (paired with Jost for body/UI) */
h1, h2, h3, .post__title, .blog-entry__title { font-family: var(--font-display); letter-spacing: -0.005em; }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }

/* Tone surfaces */
.tone-dark { background: var(--ink); color: var(--paper-100); }
.tone-dark h1, .tone-dark h2, .tone-dark h3 { color: #FAF7F2; }
.tone-dark .eyebrow { color: var(--primary-light); }
.tone-dark .lead { color: var(--primary-light); }
.tone-paper { background: var(--paper-50); }
.tone-paper-100 { background: var(--paper-100); }

/* ---------- 4. Buttons & store badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; letter-spacing: 0.01em; font-size: 0.98rem;
  transition: background-color 0.22s var(--ease-out), color 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.btn--primary { background: var(--ink); color: var(--paper-50); }
.btn--primary:hover { background: #232c38; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--paper-300); }
.btn--ghost:hover { border-color: var(--ink); }
.tone-dark .btn--primary { background: var(--paper-50); color: var(--ink); }
.tone-dark .btn--primary:hover { background: #fff; }
.tone-dark .btn--ghost { color: var(--paper-50); border-color: rgba(255,255,255,0.28); }
.tone-dark .btn--ghost:hover { border-color: var(--paper-50); }

/* Store badges (official artwork) */
.store-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.badge-link { display: inline-flex; transition: opacity 0.22s var(--ease-out); }
.badge-link:hover { opacity: 0.82; }
.badge-link img { height: 48px; width: auto; display: block; }
@media (max-width: 420px) { .badge-link img { height: 44px; } }
.badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.72rem 1.15rem 0.72rem 1.05rem; border-radius: 12px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  transition: transform 0.22s var(--ease-out), background-color 0.22s var(--ease-out);
  min-height: 56px;
}
.badge:hover { background: #232c38; }
.badge svg { width: 26px; height: 26px; flex: 0 0 auto; }
.badge .badge-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.badge .badge-small { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; font-weight: 400; }
.badge .badge-big { font-size: 1.08rem; font-weight: 500; letter-spacing: 0.01em; }
.tone-dark .badge { background: var(--paper-50); color: var(--ink); border-color: var(--paper-50); }
.tone-dark .badge:hover { background: #fff; }

/* ---------- 5. Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background-color 0.3s var(--ease-out), padding 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(247,244,240,0.82);
  backdrop-filter: saturate(1.1) blur(12px);
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  box-shadow: 0 1px 0 rgba(16,21,28,0.06);
  padding-block: 0.7rem;
}
.nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.nav__brand img { height: 22px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__link { font-size: 0.92rem; color: var(--ink-700); position: relative; padding-block: 0.3rem; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--ink);
  transition: width 0.28s var(--ease-out);
}
.nav__link:hover::after { width: 100%; }
.nav__cta { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
.nav__toggle { display: none; background: none; border: 0; padding: 0.4rem; }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; transition: 0.25s var(--ease-out); }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav { flex-wrap: wrap; }
  .nav.is-open {
    background: rgba(247,244,240,0.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(16,21,28,0.06);
  }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
    flex-basis: 100%; padding: 1.5rem 0 0.7rem;
  }
  .nav.is-open .nav__cta { margin-top: 0.3rem; }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; padding-block: 8rem 4rem; }
.hero__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(204,184,111,0.16), transparent 55%),
    radial-gradient(120% 110% at 12% 92%, rgba(109,128,153,0.20), transparent 58%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.32fr 0.68fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero__copy { max-width: 44rem; }
.hero h1 { margin-top: 1.4rem; }
.hero h1 .accent { display: block; color: var(--primary); }
.hero__body { margin-top: 1.6rem; }
.hero__cta { margin-top: 2.2rem; }
.hero__note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__note svg { width: 15px; height: 15px; color: var(--primary); }

/* Hero enso (SVG self-draw) */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 360px; }
@property --enso-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* The brush touches down at ~5:30 (165deg) and travels CLOCKWISE: down through the
   bottom, up the heavy left side, over the top, down the right, to the thin tail.
   The mask paints the ink on in that order, with a feathered "wet tip". */
.hero-enso {
  width: min(74%, 360px); aspect-ratio: 1;
  background: url("assets/img/enso-ink.png") center / contain no-repeat;
  --feather: 16deg;
  -webkit-mask: conic-gradient(from 165deg,
      #000 0deg,
      #000 max(0deg, calc(var(--enso-sweep) - var(--feather))),
      transparent var(--enso-sweep));
          mask: conic-gradient(from 165deg,
      #000 0deg,
      #000 max(0deg, calc(var(--enso-sweep) - var(--feather))),
      transparent var(--enso-sweep));
  animation: enso-paint 3.4s cubic-bezier(0.5, 0.05, 0.32, 1) 0.2s forwards;
}
@keyframes enso-paint { from { --enso-sweep: 0deg; } to { --enso-sweep: 374deg; } }
.hero__visual .hero__phone { position: absolute; bottom: -2rem; right: 0; width: 210px; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; min-height: 240px; margin-bottom: 1rem; }
  .enso-draw { width: 190px; }
  .hero__visual .hero__phone { display: none; }
}

/* ---------- 7. Device frame + app screens ---------- */
/* Real iPhone 17 Pro frame (Apple device art, via the CC0-ish mockup-device-frames repo) is
   overlaid on top; the app screenshot sits behind it, showing through the transparent screen
   cutout. Photoreal, and it still rotates as a unit for the scroll movement. */
.device {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1406 / 2822;
  filter: drop-shadow(0 26px 30px rgba(16,21,28,0.42)) drop-shadow(0 4px 7px rgba(16,21,28,0.22));
}
.device__screen {
  position: absolute; top: 3.4%; left: 7%; right: 7%; bottom: 3.4%;
  border-radius: 8.4% / 3.9%;
  overflow: hidden; background: #000; z-index: 1;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device::after { /* the photoreal device frame, on top of the screenshot */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("assets/img/iphone-17.png") center / 100% 100% no-repeat;
}

/* Scroll-driven 3D tilt. The media columns provide the perspective; JS rotates the
   phones on scroll. No-JS and reduced-motion users simply see them flat and readable. */
/* perspective for each phone's OWN tilt comes from its immediate parent (the media column,
   or the flat pair container). The walls get their perspective from the .device itself
   (set in main.js). No nested preserve-3d anywhere. */
.feature__media, .spotlight__media { perspective: 1200px; }
.feature__media > .device,
.feature__media > .device-pair,
.spotlight__media > .device {
  transform: rotateX(0deg) rotateY(0deg);
}

/* Paired phones: entry behind, reflection in front (the "write -> reflect" loop) */
/* Base = the FINISH state: side by side with a small gap, upright, facing forward (also the no-JS / reduced-motion view).
   JS animates from a crossed/overlapping V (scroll extremes) to this. */
.device-pair { display: flex; justify-content: center; align-items: flex-end; gap: 22px; padding-block: 2.5rem 1.5rem; perspective: 1200px; }
.device-pair .device { width: 200px; max-width: none; flex: 0 0 auto; transform-origin: center; }
.device-pair .device:first-child { z-index: 1; }
.device-pair .device:last-child  { z-index: 2; }
@media (max-width: 820px) {
  .device-pair { gap: 14px; }
  .device-pair .device { width: 150px; }
}

/* ---------- 8. Features ---------- */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { display: flex; justify-content: center; }
.feature__copy { max-width: 30rem; }
.feature__copy h3 { margin-top: 1rem; }
.feature__copy p { margin-top: 0.9rem; color: var(--muted); }
.feature__index { font-size: 0.78rem; letter-spacing: 0.2em; color: var(--slate-deep); font-weight: 500; }

@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 2.2rem; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature__media { order: -1; }
}

/* Secondary feature grid (the lighter-touch features) */
.minigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.minicard {
  background: var(--paper-50); border: 1px solid var(--paper-200); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.minicard:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--paper-300); }
.minicard__icon { width: 30px; height: 30px; color: var(--primary); margin-bottom: 1rem; }
.minicard h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.minicard p { font-size: 0.92rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.55; }
.tone-dark .minicard { background: var(--ink-800); border-color: rgba(255,255,255,0.08); }
.tone-dark .minicard h4 { color: #FAF7F2; }
.tone-dark .minicard p { color: var(--primary-light); }
.tone-dark .minicard__icon { color: var(--primary-light); }

@media (max-width: 820px) { .minigrid { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- 9. The problem (dark narrative) ---------- */
.statement { max-width: 22ch; font-weight: 300; }
.problem__cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); margin-top: 3rem; align-items: end; }
.problem__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.problem__list li { padding-left: 1.5rem; position: relative; color: var(--primary-light); max-width: 46ch; }
.problem__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--gold); }
@media (max-width: 760px) { .problem__cols { grid-template-columns: 1fr; } }

/* ---------- 10. Pattern-insight highlight ---------- */
.spotlight { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.spotlight__media { display: flex; justify-content: center; }
@media (max-width: 820px) { .spotlight { grid-template-columns: 1fr; } .spotlight__media { order: -1; } }

/* ---------- 11. Story ---------- */
.story { position: relative; }
.story__enso { width: 60px; height: 60px; opacity: 0.9; margin-bottom: 2rem; }
.story blockquote { margin: 2.4rem 0 0; padding: 0; }
.story blockquote p { font-size: var(--fs-h3); font-weight: 300; line-height: 1.35; color: #FAF7F2; max-width: 32ch; }
.story__sign { margin-top: 1.4rem; font-size: 0.9rem; color: var(--primary-light); letter-spacing: 0.02em; }

/* ---------- 12. Privacy band ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.trust__item { display: flex; gap: 0.9rem; align-items: flex-start; }
.trust__item svg { width: 24px; height: 24px; color: var(--primary); flex: 0 0 auto; margin-top: 2px; }
.trust__item h4 { font-size: 1rem; font-weight: 500; color: var(--ink); }
.trust__item p { font-size: 0.9rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.5; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; gap: 1.3rem; } }

/* ---------- 13. Download CTA ---------- */
.download { text-align: center; }
.download .store-row { justify-content: center; margin-top: 2.2rem; }
/* Two store columns: badge on top, its QR centred directly beneath. */
.download__stores { margin-top: 2.6rem; display: flex; justify-content: center; align-items: flex-start; gap: clamp(2.5rem, 8vw, 5.5rem); }
.download__store { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.download__qr { display: inline-flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.download__qr img { width: 116px; height: 116px; border-radius: 12px; border: 1px solid var(--paper-200); background: #fff; padding: 8px; }
.download__qr span { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 620px) { .download__qr { display: none; } .download__stores { gap: 1.4rem; } }

/* ---------- 14. Footer ---------- */
.footer { background: var(--ink); color: var(--primary-light); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer__brand img { height: 26px; margin-bottom: 1.1rem; }
.footer__tag { font-size: 1.1rem; color: #FAF7F2; font-weight: 300; }
.footer__social { margin-top: 1.3rem; display: flex; gap: 0.9rem; }
.footer__social a { color: var(--primary-light); display: inline-flex; transition: color 0.2s var(--ease-out); }
.footer__social a:hover { color: #fff; }
.footer__social svg { width: 23px; height: 23px; }
.footer__nav { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer__col h5 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 1rem; font-weight: 500; }
.footer__col a, .footer__col p { display: block; font-size: 0.92rem; color: var(--primary-light); margin-bottom: 0.6rem; transition: color 0.2s var(--ease-out); }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; font-size: 0.82rem; color: #6F7E8F; }
.footer__disclaimer { max-width: 52ch; }

/* ---------- 15. Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-enso { -webkit-mask: none !important; mask: none !important; }
  * { animation: none !important; }
}

/* ---------- FAQ ---------- */
.faq__list { margin-top: 2.6rem; border-top: 1px solid rgba(255,255,255,0.12); }
.faq__item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: #FAF7F2;
  transition: color 0.2s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #fff; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.6rem; max-width: var(--measure); }
.faq__answer p { margin: 0; color: var(--primary-light); }
@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}

/* ---------- Writing / blog ---------- */
.prose h2 { margin: 2.4rem 0 0.5rem; font-size: var(--fs-h3); font-weight: 600; color: var(--primary); max-width: var(--measure); line-height: 1.25; }
.prose h3 { margin: 1.8rem 0 0.4rem; font-size: 1.1rem; font-weight: 600; color: var(--ink); max-width: var(--measure); }
.prose blockquote { margin: 2rem 0; padding-left: 1.3rem; border-left: 2px solid var(--gold); }
.prose blockquote p { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--ink); }
.prose a { color: var(--slate-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }

.post__head { margin-bottom: 2.6rem; }
.post__meta { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.post__title { margin: 0.8rem 0 0; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.8rem); font-weight: 600; line-height: 1.12; color: var(--ink); letter-spacing: -0.01em; }
.post__lead { margin: 1.3rem 0 0; font-size: var(--fs-lead); font-weight: 300; line-height: 1.45; color: var(--ink-700); max-width: var(--measure); }
.post__foot { margin-top: 3.5rem; padding-top: 1.7rem; border-top: 1px solid var(--rule); }
.post__cta { color: var(--muted); max-width: var(--measure); }
.post__cta a { color: var(--slate-deep); text-decoration: underline; text-underline-offset: 2px; }
.post__back { display: inline-block; margin-top: 1.1rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-deep); text-decoration: none; }
.post__back:hover { color: var(--ink); }

.blog-intro { max-width: var(--measure); }
.blog-list { margin-top: 2.8rem; border-top: 1px solid var(--rule); }
.blog-entry { display: block; padding: 2.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.blog-entry__meta { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.blog-entry__title { margin: 0.6rem 0 0.55rem; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--ink); transition: color 0.2s var(--ease-out); }
.blog-entry:hover .blog-entry__title { color: var(--primary); }
.blog-entry__excerpt { margin: 0; color: var(--muted); max-width: var(--measure); }
.blog-entry__more { display: inline-block; margin-top: 0.9rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-deep); }
.post__author { margin: 0 0 1.2rem; color: var(--muted); max-width: var(--measure); }
.post__author strong { color: var(--ink); font-weight: 600; }

/* ---------- Consent banner ---------- */
.consent {
  position: fixed; left: 50%; bottom: clamp(0.8rem, 3vw, 1.6rem); transform: translateX(-50%);
  z-index: 1000; width: min(680px, calc(100% - 2rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
  padding: 1.05rem 1.3rem; background: var(--ink); color: var(--paper-100);
  border-radius: var(--radius); box-shadow: var(--shadow-device);
}
.consent__text { margin: 0; flex: 1 1 280px; font-size: 0.88rem; line-height: 1.55; color: var(--primary-light); }
.consent__text a { color: var(--paper-50); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.consent__btn { font: inherit; font-size: 0.82rem; letter-spacing: 0.03em; padding: 0.58rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.consent__btn--ghost { background: transparent; color: var(--paper-50); border-color: rgba(255,255,255,0.3); }
.consent__btn--ghost:hover { border-color: var(--paper-50); }
.consent__btn--solid { background: var(--paper-50); color: var(--ink); }
.consent__btn--solid:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) { .consent__btn { transition: none; } }