/* =========================================================================
   PERSEVERANCE FORGED . foundation
   Tokens, reset, typography, components, header, footer.
   Direction: "Perseverance Forged" (see the Novamira active design).
   ========================================================================= */

/* ---------- Fonts (self-hosted, no external request) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-italic-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;
}

/* ---------- Tokens ---------- */
:root {
  --black-0:        #0A0807;
  --bg:             #0E0B09;
  --surface:        #16120F;
  --surface-raised: #1F1915;
  --ink:            #EFE5D6;
  --ink-muted:      #A79B8C;
  /* Carries 12px caption and kicker text, which needs 4.5:1 to pass AA.
     Measured 5.09:1 on --bg and 4.75:1 on --surface. Do not darken. */
  --ink-faint:      #8F8477;
  /* Aged, editorial gold. 7.5:1 on --black-0, so it can carry small text. */
  --gold:           #C19A4B;
  /* The gold for cream ground: 5.0:1 on --cream at caption size. */
  --gold-deep:      #7A5E20;
  --cream:          #F4E8DA;
  --accent:         #C19A4B;
  --accent-deep:    #7A5E20;
  --ember:          #5F241C;
  --ember-deep:     #4A0A0C;
  /* A lift of the ember for controls that need to be seen against the ground.
     --ember itself measures only 1.79:1 on --bg, under the 3:1 that non-text
     UI has to clear; this one measures 3.42:1. */
  --ember-lift:     #8E3B2C;
  --line:           #2C2624;

  /* Stand-in for brother-1816 (the book page's Adobe face). One token to swap. */
  --font: 'Montserrat', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Denser and heavier than the first pass. Condensed weight at scale is
     what makes a headline monumental rather than merely large. */
  /* Montserrat has no width axis; the stretch stays neutral. */
  --display-stretch: 100%;
  --display-track: -0.02em;
  --display-weight: 800;

  --t-display-xl: clamp(3.25rem, 12.5vw, 12rem);
  --t-display:    clamp(2.75rem, 8.5vw, 8rem);
  --t-h1:         clamp(2.25rem, 6vw, 5.25rem);
  --t-h2:         clamp(1.85rem, 4.4vw, 3.75rem);
  --t-h3:         clamp(1.4rem, 2.6vw, 2.1rem);
  --t-h4:         clamp(1.1rem, 1.7vw, 1.35rem);
  --t-lead:       clamp(1.05rem, 1.6vw, 1.4rem);
  /* The reading tier. 16px on a phone, 17px once there is room. */
  --t-body:       clamp(1rem, 1.2vw, 1.0625rem);
  --t-small:      0.875rem;
  --t-caption:    0.8125rem;
  --t-eyebrow:    0.6875rem;
  --t-numeral:    clamp(3rem, 9vw, 8.5rem);

  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 32px;
  --s-lg: 64px;
  --s-xl: clamp(72px, 10vw, 120px);
  --s-xxl: clamp(104px, 15vw, 180px);

  --container: 1390px;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 65ch;
  /* Two radii under one stated rule: buttons are pills, every structural
     element stays at 2px. Mixed radii are only coherent when the rule is
     explicit and followed everywhere. */
  --radius: 2px;
  --radius-btn: 999px;

  /* One grade for every photograph on the site, so imagery from different
     shoots reads as one universe instead of a folder of pictures. Applied
     via .graded and carried by the placeholder plates until real photos
     arrive. */
  --grade: saturate(0.86) contrast(1.06) brightness(0.92);

  --dur-fast: 160ms;
  --dur-std: 300ms;
  --dur-narrative: 800ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-cursor: 100;
  --z-grain: 90;
  --z-menu: 70;
  --z-header: 60;
}

/* ---------- Reset. :where keeps specificity at 0 so components always win --- */
*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; padding: 0; }
:where(ul[class], ol[class]) { list-style: none; }
:where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(blockquote, figure) { border: 0; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; text-decoration: none; }

/* Lenis owns the scroll when it is running; without it, native smooth. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden. overflow-x:hidden turns the body into a scroll
     container, which silently kills position:sticky on every descendant.
     clip stops the sideways scroll without that side effect; hidden stays as
     the fallback for engines without it. */
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- Scrollbar ----------
   Narrow, on-palette, and it warms to gold on grab: the bar is part of the
   page, not an operating-system leftover sitting next to it. ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--ember-lift);
  border: 2px solid var(--bg);
  border-radius: 0;
}
/* Gold is the interaction colour everywhere else on the site, so the thumb
   answers the pointer the same way every other control does. */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* Firefox has no pseudo-elements for this, only the two-value shorthand.
   It has to stay behind a guard: in Chrome, declaring scrollbar-width turns
   off ::-webkit-scrollbar entirely, so an unguarded rule would quietly undo
   everything above. Firefox fails the selector test and takes this branch. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--ember-lift) var(--bg); scrollbar-width: thin; }
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: var(--bg);
  padding: 12px 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-small);
}
.skip-link:focus { left: 0; }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   INTRO . the way in

   Two panels meet at the middle over a field of ember and gold. The mark
   arrives out of focus and resolves, a line of the three principles types
   itself underneath, then the panels part and the forge is behind them.

   Visible by default so nothing flashes before the deferred script runs. A
   <noscript> rule hides it without JavaScript, and the keyframe clears it
   even if the script never arrives. Nothing can leave the page covered.
   ========================================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  animation: pf-intro-failsafe 0s linear 6s forwards;
}
@keyframes pf-intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Each half carries the same field sized to the whole window and anchored to
   its own edge, so the two line up into one continuous glow across the seam.
   Half a percent of overlap keeps a hairline gap off fractional pixels. */
.intro__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background-color: var(--bg);
  background-image:
    radial-gradient(34% 30% at 24% 26%, rgba(224, 183, 50, 0.17), transparent 72%),
    radial-gradient(40% 34% at 78% 76%, rgba(200, 30, 34, 0.24), transparent 72%);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  will-change: transform;
}
.intro__panel--top { top: 0; background-position: left top; }
.intro__panel--bottom { bottom: 0; background-position: left bottom; }

.intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  width: min(380px, 78vw);
  text-align: center;
}

/* The focus pull. CSS interpolates the blur, so no script has to write a
   filter string frame by frame. */
.intro__mark {
  filter: blur(15px);
  opacity: 0;
  transform: scale(1.06);
  transition: filter 1000ms var(--ease),
              opacity 700ms var(--ease),
              transform 1200ms var(--ease);
}
.intro.is-focused .intro__mark {
  filter: blur(0);
  opacity: 1;
  transform: none;
}
.intro__mark img {
  display: block;
  height: clamp(26px, 3.4vw, 38px);
  width: auto;
  max-width: none;
}
.intro__wordmark {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  font-stretch: 74%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.intro__type {
  font-size: var(--t-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.intro__type .pf-t { opacity: 0; }

body.is-intro { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--s-xxl); }

/* ---------- Inverted ground ----------
   One chapter printed on paper. The tokens are re-pointed for everything
   inside rather than patched element by element.

   Gold cannot carry text on bone: #E0B732 on #E8E1D5 measures 1.5:1. On this
   ground the accent is the ember, at 8.43:1. One accent per ground, and the
   brand keeps both of its colours doing the same job on the surface each was
   built for.

   The surface tokens are deliberately left dark, so buttons and the book
   cover stay dark objects sitting on paper. ---------- */
.section--invert {
  background: #E8E1D5;
  --ink: #14100F;
  --ink-muted: #4B443D;
  --ink-faint: #635B53;
  --line: #C6BCAC;
  --accent: #8E1114;
  --accent-deep: #6E0D10;
  color: var(--ink);
}

/* Buttons stay dark objects on this ground, so they keep the dark-ground
   rules. Without this the label inherits the inverted ink and goes dark on a
   dark face, which no contrast check against the section background would
   catch: the face is a background-image, not a background-colour. */
.section--invert .btn--primary { color: #E8E1D5; }
.section--invert .btn--primary:hover,
.section--invert .btn--primary:focus-visible { color: #E0B732; }

.section--invert .btn--ghost {
  color: var(--ink);
  border-color: rgba(20, 16, 15, 0.3);
  background-image: linear-gradient(to bottom, var(--accent) 0 50%, transparent 50% 100%);
}
.section--invert .btn--ghost:hover { color: #E8E1D5; border-color: var(--accent); }
.section--tight { padding-block: var(--s-xl); }
.rule { height: 1px; background: var(--line); border: 0; width: 100%; }

/* ---------- Type scale ---------- */
.display-xl, .display, .h1, .h2 {
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track);
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-xl { font-size: var(--t-display-xl); font-weight: 900; }
.display    { font-size: var(--t-display); }
.h1         { font-size: var(--t-h1); }
.h2         { font-size: var(--t-h2); }

.h3 { font-size: var(--t-h3); font-weight: 700; font-stretch: 92%; line-height: 1.15; letter-spacing: -0.01em; }
.h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.25; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 34ch; }
.body-text { max-width: var(--measure); color: var(--ink-muted); }
.body-text p + p { margin-top: 1.15em; }
.body-text strong { color: var(--ink); font-weight: 600; }
.small { font-size: var(--t-small); line-height: 1.5; }
.caption { font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.numeral {
  font-size: var(--t-numeral);
  font-weight: 900;
  font-stretch: 70%;
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.accent-word { color: var(--accent); }

/* ---------- Buttons ---------- */
/* The fill sweeps down from the top rather than switching colour flatly.
   Done with a background-image twice the box height and an animated
   background-position, so the label needs no wrapper element and nothing
   in the layout is touched. */
/* An angle has to be a registered property to be animatable at all; without
   this the conic gradient below would jump rather than turn. Where the
   registration is unsupported the ring simply holds still, which still reads
   as a lit edge. */
@property --pf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes pf-orbit { to { --pf-angle: 360deg; } }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms var(--ease),
              border-color 200ms var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn__arrow { display: inline-block; transition: transform var(--dur-std) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(6px); }

/* ---------- The forge button ----------
   An ember travels the edge of the metal, hottest at its core, where it turns
   gold. Two background layers do the whole thing: the face is painted to the
   padding box and the turning cone to the border box, so a transparent 1px
   border becomes the light. On hover the whole edge takes.
   ---------- */
.btn--primary {
  color: var(--ink);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--pf-angle),
      transparent 0deg,
      rgba(193, 154, 75, 0.25) 26deg,
      var(--gold) 50deg,
      rgba(193, 154, 75, 0.25) 76deg,
      transparent 104deg) border-box;
  box-shadow: 0 0 18px -8px rgba(193, 154, 75, 0.55);
  animation: pf-orbit 5.2s linear infinite;
  transition: color 220ms var(--ease), box-shadow 320ms var(--ease);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--gold);
  animation-duration: 2.4s;
  box-shadow: 0 0 28px -6px rgba(193, 154, 75, 0.4);
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(193, 154, 75, 0.3),
      var(--gold) 50%,
      rgba(193, 154, 75, 0.3)) border-box;
}

.btn--ghost {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--accent) 0 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 202%;
  background-position: 0 100%;
  color: var(--ink);
  border-color: var(--line);
  transition: background-position 360ms var(--ease),
              color 200ms var(--ease),
              border-color 200ms var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn--ghost:hover { background-position: 0 0; color: var(--bg); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary { animation: none; }
  .btn--ghost { transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear; }
  .btn--ghost:hover { background-color: var(--accent); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

.link-underline {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-small);
  padding-bottom: 6px;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--dur-std) var(--ease);
}
.link-underline:hover::after { transform: scaleX(0); }

/* On touch, expand the hit area to a comfortable target without moving the
   rule or changing the layout. */
@media (pointer: coarse) {
  .link-underline::before,
  .brand::before {
    content: '';
    position: absolute;
    inset: -13px -8px;
  }
  .brand { position: relative; }
}

/* ---------- Placeholder art ----------
   Stands in for photography that is not on the server yet, composed like the
   final image so a swap does not move the layout. ---------- */
.plate {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(224, 183, 50, 0.20) 0%, transparent 55%),
    radial-gradient(95% 75% at 82% 88%, rgba(142, 17, 20, 0.55) 0%, transparent 62%),
    linear-gradient(168deg, var(--surface-raised) 0%, var(--surface) 55%, var(--bg) 100%);
}
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 11, 10, 0.92) 0%, rgba(13, 11, 10, 0.18) 45%, transparent 75%);
}
.plate--ember {
  background:
    radial-gradient(85% 70% at 30% 100%, rgba(142, 17, 20, 0.85) 0%, transparent 60%),
    radial-gradient(70% 60% at 78% 8%, rgba(224, 183, 50, 0.16) 0%, transparent 58%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Every image carries the house grade. */
.plate, .graded { filter: var(--grade); }

.plate--portrait { aspect-ratio: 3 / 4; }
.plate--wide { aspect-ratio: 16 / 9; }
.plate__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Reveal. Hidden only when JS is present, so no-JS and crawlers
     get visible content. ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-narrative) var(--ease), transform var(--dur-narrative) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }
.js .reveal[data-delay="4"] { transition-delay: 360ms; }

/* A second reveal vocabulary: the frame opens rather than the element
   sliding. Used on imagery, where a slide reads as cheap and an unveiling
   reads as film. */
.js .reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease);
}
.js .reveal-clip.is-in { clip-path: inset(0 0 0% 0); }

/* A slow pass of light. Scroll-driven, not looping: it marks progress
   through the section rather than decorating it. */
.sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}
.sweep__beam {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(232, 225, 213, 0.62) 50%, transparent 100%);
  transform: translateX(-180%) skewX(-12deg);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .reveal-clip { clip-path: none !important; transition: none !important; }
  .hero__gl { transition: none !important; }
  .sweep { display: none; }
}

/* ---------- Cursor (fine pointer only) ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-std) var(--ease),
              width var(--dur-std) var(--ease),
              height var(--dur-std) var(--ease),
              margin var(--dur-std) var(--ease),
              background-color var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease);
}
.cursor.is-visible { opacity: 1; }
.cursor.is-link {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: rgba(224, 183, 50, 0.14);
  border-color: var(--accent);
}
.cursor.is-view {
  width: 86px; height: 86px; margin: -43px 0 0 -43px;
  background: rgba(142, 17, 20, 0.22);
  border-color: var(--ember);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

/* =========================================================================
   HEADER . global, on every page
   ========================================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  /* Leaving is quick and quiet; returning is the show. The long spring only
     plays on the way back down. */
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease),
              box-shadow var(--dur-std) var(--ease);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 11, 10, 0.85), transparent);
  pointer-events: none;
  transition: opacity var(--dur-std) var(--ease);
}
.header.is-solid {
  background: rgba(10, 8, 7, 0.86);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.55);
}
.header.is-solid::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); transition-duration: 300ms; }

/* A little air above the bar so it floats rather than sitting welded to the
   top edge of the window. Held constant in both states: changing it on scroll
   would jump the layout at the exact moment the background arrives. */
.header { padding-top: 12px; }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  line-height: 1;
}
.brand__logo { display: flex; align-items: center; }
.brand__logo img {
  display: block;
  height: 27px;
  width: auto;
  max-width: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.brand:hover .brand__logo img { opacity: 0.78; }
@media (min-width: 1280px) { .brand__logo img { height: 31px; } }

.brand__mark {
  font-weight: 900;
  font-stretch: 76%;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.brand:hover .brand__mark { color: var(--accent); }
/* A hairline separates the name from the imprint, the same device that
   builds every other structure on the site. */
.brand__rule {
  width: 1px;
  height: 18px;
  background: var(--line);
  flex-shrink: 0;
}
.brand__sub {
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 1399px) {
  .brand__rule, .brand__sub { display: none; }
}

/* ---------- Burger ----------
   Shown at every width. Seven routes never fitted a bar comfortably, and a
   panel gives each one room to be read. ---------- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: calc(var(--z-menu) + 1);
}
.burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-std) var(--ease),
              opacity var(--dur-fast) var(--ease),
              width var(--dur-std) var(--ease);
}
.burger span:nth-child(2) { width: 18px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 26px; transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================================
   MENU . a panel from the right
   ========================================================================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }

/* The page is pushed back out of focus rather than covered flat. */
.menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 10, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 460ms var(--ease);
}
.menu.is-open .menu__scrim { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 88vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Every vertical measure in here breathes with the viewport so the whole
     panel fits 100svh without scrolling; overflow stays as the last-resort
     guard for very short landscape screens. */
  gap: clamp(14px, 2.6vh, 40px);
  padding: clamp(60px, 9.4vh, 100px) clamp(24px, 4vw, 44px) clamp(12px, 2vh, 26px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 560ms var(--ease);
  will-change: transform;
}
.menu.is-open .menu__panel { transform: none; }

.menu__list { border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); overflow: hidden; }
.menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: clamp(6px, 1.2vh, 14px) 0;
  color: var(--ink);
  transform: translateY(105%);
  transition: transform 540ms var(--ease),
              color var(--dur-fast) var(--ease),
              padding-left var(--dur-std) var(--ease);
}
.menu.is-open .menu__list a { transform: none; }
.menu__list a:hover { color: var(--accent); padding-left: 10px; }
.menu__list [aria-current="page"] { color: var(--accent); }

.menu__label {
  /* One step down: eight items now, and the labels read better as an index
     than as headlines. */
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  letter-spacing: var(--display-track);
  line-height: 1;
}
.menu__num {
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Each row arrives just after the one above it. */
.menu.is-open li:nth-child(1) a { transition-delay: 120ms; }
.menu.is-open li:nth-child(2) a { transition-delay: 165ms; }
.menu.is-open li:nth-child(3) a { transition-delay: 210ms; }
.menu.is-open li:nth-child(4) a { transition-delay: 255ms; }
.menu.is-open li:nth-child(5) a { transition-delay: 300ms; }
.menu.is-open li:nth-child(6) a { transition-delay: 345ms; }
.menu.is-open li:nth-child(7) a { transition-delay: 390ms; }

.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.2vh, 22px) 14px; }
.menu__foot .btn { padding: 12px 20px; font-size: 0.75rem; }
.menu__foot .social { flex-basis: 100%; }
.menu__foot .menu__place { flex-basis: 100%; }
.menu__place {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .menu__panel, .menu__scrim, .menu__list a { transition: none; }
  .menu__list a { transform: none; }
}

/* =========================================================================
   FOOTER . global, on every page
   ========================================================================= */
.footer {
  position: relative;
  /* A step lighter than the page, with a gold edge. The reveal below only
     reads if there is a visible boundary to watch pass: footer and page on the
     same ground slide over each other invisibly, which is the same as not
     moving at all. */
  border-top: 1px solid var(--accent);
  /* Kept tight on purpose: the reveal only engages while the footer fits the
     window, so every pixel of padding here is spent from that budget. */
  padding-top: clamp(48px, 7vh, 84px);
  padding-bottom: var(--s-sm);
  background: var(--surface);
}

/* ---------- Footer reveal ----------
   The footer sits still at the bottom of the window while the page slides up
   off it. Main carries an opaque ground so it covers the footer until its own
   content runs out, and the body gains exactly the footer's height in space to
   scroll into.

   Script adds the class, and only when the footer actually fits the window. No
   class means the ordinary stacked layout, which is the safe default. */
.has-footer-reveal #main {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.has-footer-reveal .footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.has-footer-reveal body { padding-bottom: var(--footer-h, 0px); }
/* Large enough to be the thing the reveal uncovers. A footer that slides out
   from under the page needs something worth arriving at, or the movement
   registers as nothing happening. */
.footer__wordmark {
  font-size: clamp(3rem, 15vw, 13rem);
  font-weight: 900;
  font-stretch: 68%;
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-faint);
  margin-bottom: var(--s-md);
  user-select: none;
}

/* ---------- The cut line ----------
   A perforation across the very bottom with a blade working its way along it.
   The book is a daily one, and a page you tear off is exactly what this marks.
   Full-bleed, outside the container, so the dashes run edge to edge. ---------- */
.cutline {
  position: relative;
  height: 28px;
  margin-top: var(--s-sm);
  overflow: hidden;
}
.cutline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--line);
}
.cutline__blade {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  padding: 0 7px;
  color: var(--ink-faint);
  background: var(--surface);
  transform: translate3d(-40px, -50%, 0);
  animation: pf-cut 17s linear infinite;
}
@keyframes pf-cut {
  from { transform: translate3d(-40px, -50%, 0); }
  to { transform: translate3d(100vw, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cutline__blade { animation: none; transform: translate3d(clamp(40px, 30vw, 420px), -50%, 0); }
}
.footer__grid {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-lg);
}
/* At tablet the three columns squeeze the email field below its own minimum,
   so the newsletter takes a full row of its own until there is room. */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer__col h2 {
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-sm);
  font-weight: 600;
}
.footer__nav li + li { margin-top: 10px; }
.footer__nav a { font-size: var(--t-small); color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
.footer__nav a:hover { color: var(--accent); }

.social { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.social a {
  font-size: var(--t-small);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social a:hover { color: var(--accent); border-color: var(--accent); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--s-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-md);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Newsletter ---------- */
.subscribe { display: grid; gap: 14px; max-width: 460px; }
.subscribe__row { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 2px;
  font-size: var(--t-body);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.subscribe input[type="email"]::placeholder { color: var(--ink-faint); }
.subscribe input[type="email"]:focus { outline: none; border-bottom-color: var(--accent); }
.subscribe__note { font-size: var(--t-caption); color: var(--ink-faint); letter-spacing: 0.04em; }


/* One size up. Same shape: the padding and the gap grow with the type.
   Specificity ties with .btn, so this has to stay AFTER it in the file. */
.btn--lg { padding: 22px clamp(24px, 6vw, 42px); gap: 14px; font-size: 0.9375rem; letter-spacing: 0.09em; }


/* =========================================================================
   Shared across pages. These began on the home page and are now used on
   About as well, so they live in the sheet every page loads.
   ========================================================================= */
.tag {
  display: inline-flex; align-items: center; gap: 9px; justify-self: start;
  padding: 7px 15px 7px 11px; border: 1px solid var(--line); border-radius: var(--radius-btn);
  font-family: var(--font); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted);
}
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

@keyframes pf-bob {
  0%, 100% { translate: 0 4px;  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.36); }
  50%      { translate: 0 -6px; box-shadow: 0 26px 34px rgba(0, 0, 0, 0.20); }
}

@keyframes pf-orb {
  0%, 100% { translate: 0 5px;  opacity: 0.72; }
  50%      { translate: 0 -7px; opacity: 1; }
}


/* ---- page-level patterns, shared by the inner pages ----
   These began on About and are now used on Coaching too, so they belong in
   the sheet every page loads. The sections that host them keep their own
   grounds and token re-pointing. */
.aonward__list { display: grid; border-top: 1px solid var(--line); }
.pcard {
  position: relative; overflow: clip; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 2.6vw, 44px);
  background: #F3EFE7; border: 1px solid var(--line);
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease),
              box-shadow 420ms var(--ease), transform 420ms var(--ease), opacity 420ms var(--ease);
}
.pcard__rule {
  position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; z-index: 2;
  background: var(--ember); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 720ms var(--ease);
}
.pcard.is-in .pcard__rule { transform: scaleX(1); transition-delay: 240ms; }
.pcard__num {
  font-weight: 900; font-stretch: 70%; font-size: clamp(2.4rem, 3.8vw, 3.4rem);
  line-height: 0.8; letter-spacing: -0.03em; color: rgba(20, 16, 15, 0.16);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  transition: color 420ms var(--ease);
}
.pcard__name {
  margin-top: var(--s-md); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track); text-transform: uppercase; line-height: 1;
}
.pcard__thesis { margin-top: 10px; font-size: var(--t-body); font-weight: 600; color: var(--ember); }
.pcard__desc { margin-top: 12px; font-size: var(--t-body); line-height: 1.55; color: var(--ink-muted); }
.pcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(122% 102% at 0% 0%, rgba(142, 17, 20, 0.10), transparent 62%);
  opacity: 0; transition: opacity 460ms var(--ease);
}
.pcard.reveal.is-in:hover {
  transform: translateY(-6px); box-shadow: 0 22px 40px rgba(27, 22, 19, 0.17);
  border-color: rgba(142, 17, 20, 0.32);
}
.pcard:hover::before { opacity: 1; }
.pcard:hover .pcard__num { color: var(--ember); }

.onward {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: padding 420ms var(--ease), color 300ms var(--ease), opacity 420ms var(--ease), transform 420ms var(--ease);
}
.onward__num { font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--ink-faint); transition: color 300ms var(--ease); }
.onward__label {
  font-size: clamp(1.15rem, 2.4vw, 2.1rem);
  font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track); text-transform: uppercase; line-height: 1.05;
}
.onward__arrow { font-size: 1.25rem; transition: transform 420ms var(--ease); }
/* The row steps in on hover, which is the whole gesture: nothing moves but
   the inset and the arrow. */
.onward.reveal.is-in:hover { padding-inline: clamp(8px, 1.4vw, 22px); color: var(--ember); }
.onward:hover .onward__num { color: var(--ember); }
.onward:hover .onward__arrow { transform: translateX(10px); }
.onward:focus-visible { outline: 2px solid var(--ember); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard.reveal.is-in:hover { transform: none; }
  .pcard__rule { transform: scaleX(1); transition: none; }
  .onward__arrow { transition: none; }
}

@keyframes pf-cue {
  0%       { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

@keyframes pf-emberdrift {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* The closing "where to next" band, shared by the inner pages. */
.aonward {
  padding-block: var(--s-xxl); background: #E8E1D5;
  --ink: #14100F; --ink-muted: #4B443D; --ink-faint: #635B53;
  --line: rgba(20, 16, 15, 0.16); color: var(--ink);
}
.aonward__head { margin-bottom: var(--s-xl); text-align: center; }
.aonward__sign { margin-top: var(--s-xl); text-align: center; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.aphil__head .tag, .aonward__head .tag { justify-self: center; }
.aphil__head .tag i, .aonward__head .tag i { background: var(--ember); }
.aonward__head .tag { color: var(--ember); border-color: rgba(142, 17, 20, 0.34); }

/* Credential cards, shared by About and Coaching. */
.cred {
  position: relative; overflow: clip; isolation: isolate;
  padding: clamp(22px, 2vw, 30px) clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px);
  border: 1px solid var(--line); background: var(--bg);
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease),
              transform 420ms var(--ease), opacity 420ms var(--ease);
}
.cred__idx {
  position: absolute; z-index: 2; top: clamp(14px, 1.3vw, 18px); right: clamp(16px, 1.4vw, 20px);
  font-size: 0.625rem; letter-spacing: 0.16em; color: var(--ink-faint);
  transition: color 380ms var(--ease);
}
.cred::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(126% 104% at 0% 0%, rgba(224, 183, 50, 0.15), transparent 64%);
  opacity: 0; transition: opacity 460ms var(--ease);
}
.cred__source { position: relative; z-index: 1; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.cred__what { position: relative; z-index: 1; margin-top: 7px; font-size: var(--t-caption); color: var(--ink-muted); transition: color 380ms var(--ease), transform 460ms var(--ease); }
.cred.reveal.is-in:hover { transform: translateY(-6px); background: var(--surface); border-color: rgba(224, 183, 50, 0.34); }
.cred:hover::before { opacity: 1; }
.cred:hover .cred__idx { color: var(--accent); }
.cred:hover .cred__what { color: var(--ink); transform: translateX(3px); }


/* =========================================================================
   ONE PAGE, SO THE NAV IS AN INDEX
   ========================================================================= */

/* Anchor targets sit under a fixed header. Without this, any jump the smooth
   scroller does not handle -- touch, reduced motion, a pasted URL -- parks the
   heading behind the header instead of under it. */
section[id] { scroll-margin-top: 132px;}

/* Set by the scrollspy in app.js on whichever chapter is in view, in both the
   menu and the footer, so the two never disagree about where you are. */
.menu__list a.is-here { color: var(--accent);}
.menu__list a.is-here .menu__num { color: var(--accent);}
.footer__nav a.is-here { color: var(--accent);}

/* =========================================================================
   ANNOUNCEMENT BAR . one message at a time, no rotation, no countdown
   ========================================================================= */
.annbar {
  display: block;
  padding: 9px var(--gutter);
  background: var(--gold);
  color: #1B1410;
  text-align: center; text-decoration: none;
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease);
}
.annbar:hover { background: #D3AC5C; }
.annbar span { display: inline-block; margin-left: 4px; }

/* The bar joins the fixed header, so the header loses its float padding and
   the anchor targets sit deeper (scroll-margin above). */
.header { padding-top: 0; }
.header__inner { height: 72px; }

.header__end { display: flex; align-items: center; gap: var(--s-sm); flex-shrink: 0; }
.header__cta { padding: 12px 22px; font-size: 0.75rem; }
@media (max-width: 640px) {
  .header__cta { display: none; }
}

.menu__heading {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-sm);
}

/* ---- footer brand statement ---- */
.footer__brandline { margin-bottom: var(--s-lg); max-width: 620px; }
.footer__power {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.footer__bio { margin-top: 10px; font-size: var(--t-small); line-height: 1.7; color: var(--ink-muted); }
/* Away from the top the announcement folds up by its own measured height
   (set by initHeader), so the bar that returns on scroll-up is compact
   glass. A gold hairline stays as its trace. */
.annbar {
  transition: margin-top 460ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 260ms var(--ease),
              background var(--dur-fast) var(--ease);
}
.header.is-away .annbar {
  margin-top: calc(-1 * var(--annbar-h, 36px));
  opacity: 0;
  pointer-events: none;
}
.header.is-away.is-solid { border-bottom-color: rgba(193, 154, 75, 0.34); }

@media (prefers-reduced-motion: reduce) {
  .header, .annbar { transition: none; }
}
/* Nunca uma palavra orfa: the engine rebalances every paragraph's last
   line. Standing rule, requested 25/08/2026. Browsers without text-wrap:
   pretty simply ignore it. */
p, .pp-lead { text-wrap: pretty; }

/* ---- the way out: an X in the panel's own corner. The burger lives in the
   header, a layer below the open menu, so the panel carries its own door. */
.menu__close {
  position: absolute;
  top: clamp(18px, 3vh, 28px); right: clamp(20px, 4vw, 40px);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              rotate 400ms var(--ease);
}
.menu__close svg { width: 15px; height: 15px; display: block; }
.menu__close:hover { color: var(--gold); border-color: var(--gold); rotate: 90deg; }
@media (prefers-reduced-motion: reduce) {
  .menu__close { transition: none; }
  .menu__close:hover { rotate: none; }
}
/* =========================================================================
   FOOTER v2 . the close of every page
   A gold beam drifts through the hollow wordmark, the newsletter block
   sits in a framed room, the nav answers the pointer with a slide, the
   social links stand as pills, and a way back up closes the bottom bar.
   ========================================================================= */
.footer__wordmark {
  color: transparent;
  background-image: linear-gradient(100deg,
    rgba(224, 183, 50, 0) 38%, rgba(224, 183, 50, 0.45) 50%, rgba(224, 183, 50, 0) 62%);
  background-size: 46% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: footer-beam 7.5s ease-in-out infinite;
}
@keyframes footer-beam {
  0%, 18% { background-position: -60% 0; }
  60%, 100% { background-position: 170% 0; }
}
.footer__col:first-child {
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid rgba(224, 183, 50, 0.2);
  border-radius: 12px;
  background: rgba(255, 252, 246, 0.025);
}
.footer__nav a { display: inline-block; transition: color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.footer__nav a:hover { translate: 4px 0; }
.footer .social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-sm); }
.footer .social a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              translate var(--dur-fast) var(--ease);
}
.footer .social a:hover {
  color: var(--accent);
  border-color: rgba(224, 183, 50, 0.5);
  translate: 0 -2px;
}
.footer__top {
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: baseline; gap: 7px;
}
.footer__top span { display: inline-block; transition: translate var(--dur-fast) var(--ease); }
.footer__top:hover span { translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) {
  .footer__wordmark { animation: none; background-image: none; }
  .footer__nav a:hover, .footer .social a:hover, .footer__top:hover span { translate: none; }
}
/* ---- footer v2.1: four columns wide, the books close the connect ---- */
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: 1.3fr 0.7fr 0.95fr 1.05fr; }
  .footer__col:first-child { grid-column: auto; }
}
.footer__books {
  display: flex; gap: 14px; align-items: flex-end;
  margin-top: var(--s-md);
}
.footer__books a {
  display: block; width: 76px; flex: none;
  rotate: -4deg;
  transition: rotate var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.footer__books a + a { rotate: 4deg; }
.footer__books a:hover { rotate: 0deg; translate: 0 -5px; }
.footer__books img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
}
.footer__tag {
  margin-top: 12px;
  font-size: var(--t-caption); font-style: italic; letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.footer__tag em { font-style: italic; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .footer__books a, .footer__books a + a, .footer__books a:hover { rotate: none; translate: none; transition: none; }
}
/* ---- footer v2.2: the studio credit ---- */
.footer__credit {
  display: inline-flex; align-items: center; gap: 9px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.footer__credit:hover { opacity: 1; translate: 0 -2px; }
.footer__credit span {
  font-size: var(--t-caption); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.footer__credit img { height: 15px; width: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .footer__credit, .footer__credit:hover { translate: none; transition: none; }
}
/* ---- footer v2.3: the social row holds one line, and so does the tag ---- */
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: 1.25fr 0.62fr 0.88fr 1.25fr; }
}
.footer .social { flex-wrap: nowrap; gap: 6px; }
.footer .social a { padding: 6px 11px; letter-spacing: 0.05em; }
.footer__tag { white-space: nowrap; }
@media (max-width: 480px) {
  .footer .social { flex-wrap: wrap; }
  .footer__tag { white-space: normal; }
}

/* ===== VEIL GLOBAL v9.27.0 . the preloader on every page (markup in header.php, engine in app.js; home.css carries an identical copy for the front) ===== */
html.pp-loading { overflow: clip; }

.veil {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
}
.veil__bank {
  position: absolute; left: 0; right: 0; height: 50.15%;
  background: var(--black-0);
  transition: transform 980ms cubic-bezier(0.77, 0, 0.18, 1) 240ms;
}
.veil__bank--top { top: 0; }
.veil__bank--bottom { bottom: 0; }

/* The two halves of the line, one from each shore. */
.veil__line {
  position: absolute; top: 50%; width: 50%; height: 1px;
  transform: scaleX(0);
  transition: transform 1150ms var(--ease) 250ms, opacity 300ms var(--ease);
}
.veil__line--l {
  left: 0; transform-origin: left center;
  background: linear-gradient(to right, transparent 4%, var(--gold));
}
.veil__line--r {
  right: 0; transform-origin: right center;
  background: linear-gradient(to left, transparent 4%, var(--gold));
}
.veil.is-lit .veil__line { transform: scaleX(1); }

/* Ignition at the meeting point. */
.veil__spark {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  translate: -50% -50%; scale: 0.2; opacity: 0;
  background: var(--gold);
  box-shadow: 0 0 26px 7px rgba(193, 154, 75, 0.5);
  transition: opacity 420ms var(--ease) 1350ms, scale 520ms var(--ease) 1350ms;
}
.veil.is-lit .veil__spark { opacity: 1; scale: 1; animation: pf-orb 2.4s ease-in-out 1900ms infinite; }

.veil__core {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  transition: opacity 420ms var(--ease), translate 420ms var(--ease);
}
.veil__gap { height: clamp(72px, 12vh, 120px); }
.veil__mark {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  opacity: 0; translate: 0 16px;
  transition: opacity 750ms var(--ease) 150ms, translate 750ms var(--ease) 150ms;
}
.veil__mark img.veil__logo {
  display: block; width: clamp(190px, 26vw, 320px); height: auto;
}
.veil__tag {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  opacity: 0; translate: 0 -12px;
  transition: opacity 750ms var(--ease) 650ms, translate 750ms var(--ease) 650ms,
              letter-spacing 1400ms var(--ease) 650ms;
}
.veil.is-lit .veil__mark { opacity: 1; translate: 0 0; }
.veil.is-lit .veil__tag { opacity: 1; translate: 0 0; letter-spacing: 0.42em; }

/* The count: a ghost numeral, outlined in gold, low in the corner. */
.veil__count {
  position: absolute; z-index: 2;
  right: clamp(20px, 4vw, 60px); bottom: clamp(14px, 3vh, 38px);
  font-size: clamp(3.4rem, 9vw, 7rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(193, 154, 75, 0.55);
  transition: opacity 360ms var(--ease);
}

/* Departure: everything quiets, then the banks part along the seam. */
.veil.is-done .veil__core,
.veil.is-done .veil__count { opacity: 0; }
.veil.is-done .veil__core { translate: 0 -18px; }
.veil.is-done .veil__line { opacity: 0; transition-delay: 0ms; }
.veil.is-done .veil__spark { opacity: 0; scale: 2.4; animation: none;
  transition: opacity 300ms var(--ease), scale 300ms var(--ease); }
.veil.is-done .veil__bank--top { transform: translateY(-101%); }
.veil.is-done .veil__bank--bottom { transform: translateY(101%); }
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }
.header { will-change: transform; }
html.pp-loading .header { transform: translateY(-100%); transition: none; }
html.pp-ready .header { transition-delay: 500ms; }
html.pp-settled .header { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  html.pp-loading .header { transform: none; transition: none; }
  html.pp-ready .header, html.pp-settled .header { transition-delay: 0ms; }
}

/* FOOTER COVER GLOBAL v9.66.0 . the front page's footer-over-the-last-chapter play, armed on every page (initFooterCover tags the last section .pf-cover) */
html.pp-fcover .pf-cover { position: sticky; top: var(--pin-top, auto); z-index: 1; }
html.pp-fcover main::after { content: ''; display: block; height: var(--fcover, 60vh); }
html.pp-fcover .footer { position: relative; z-index: 2; margin-top: calc(-1 * var(--fcover, 60vh)); box-shadow: 0 -34px 70px -30px rgba(0, 0, 0, 0.6); }

/* pf-btn-wrap-fix: long labels have to fit a phone. inline-block puts the
   arrow back in the text flow, so a wrapped label keeps it on the last word
   instead of standing alone beside a two-line block. */
@media (max-width: 640px) {
  main .btn {
    display: inline-block; max-width: 100%;
    padding: 14px 18px;
    white-space: normal; text-align: center; text-wrap: balance;
    line-height: 1.35; letter-spacing: 0.045em;
  }
  main .btn .btn__arrow { margin-left: 8px; }
  main .btn--lg { padding: 18px 20px; font-size: 0.875rem; }
  .footer .btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.3; }
}

/* pf-menu-short: on a short screen the whole panel still has to fit without
   scrolling -- the index tightens and the foot closes up. */
@media (max-height: 760px) {
  .menu__panel { padding-top: clamp(40px, 7vh, 58px); gap: clamp(9px, 1.5vh, 14px); }
  .menu__list a { padding: 5px 0; }
  .menu__label { font-size: clamp(1rem, 2.6vw, 1.25rem); }
  .menu__foot { gap: 10px 12px; }
  .menu__foot .btn { padding: 10px 16px; font-size: 0.7rem; }
}

/* pf-no-x-scroll: o html tambem precisa clipar. overflow-x:hidden no html
   ainda deixa o dedo arrastar de lado no iOS; clip nao deixa. */
html { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* pf-main-clip: ultima linha de defesa contra vazamento lateral. 'clip' nao
   cria scroll container, entao position:sticky segue funcionando dentro --
   ao contrario de overflow:hidden. */
main { overflow-x: clip; }
.pf-form__msg[hidden]{display:none!important}.pf-form__msg{margin:14px 0 0;font-size:.875rem;font-style:italic;opacity:.85}.pf-form__msg--ok{color:var(--gold,#C19A4B)}.pf-form__msg--bad{color:var(--ink-muted,#A79B8C)}form.is-sending [type=submit]{opacity:.6;cursor:progress}
.footer__mail { color: var(--accent, #C19A4B) !important; overflow-wrap: anywhere; }

/* Typeform frames (2026-10-08): dark plate with the gold hairline; compact for one-question forms. */
.pf-tf { position: relative; width: 100%; border: 1px solid rgba(193, 154, 75, 0.35); border-radius: 6px; overflow: clip; background: #0E0B09; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
.pf-tf__frame { width: 100%; height: min(640px, 78svh); }
.pf-tf--compact .pf-tf__frame { height: 420px; }
.pf-tf__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.subscribe--tf { display: grid; gap: 14px; max-width: 460px; }
.pn-news .pf-tf, .pbd-launch .pf-tf { margin-top: clamp(24px, 4vh, 40px); max-width: 640px; }
@media (max-width: 640px) { .pf-tf__frame { height: min(560px, 72svh); } .pf-tf--compact .pf-tf__frame { height: 420px; } }

/* v12.12.2: the newsletter heading in the footer stays on one line on desktop. */
@media (min-width: 1020px) {
  .footer__col:first-child h2 { white-space: nowrap; letter-spacing: 0.1em; }
}

/* v12.12.5: the footer's newsletter column grows so the Typeform has room
   for its field and a one-line button on desktop. */
@media (min-width: 1020px) {
  .footer__grid { grid-template-columns: 1.7fr 0.55fr 1.05fr 1.2fr; }
  .footer__col:first-child { padding: clamp(20px, 2vw, 28px); }
  .subscribe--tf { max-width: none; }
}

/* v12.12.7: below 901px the ride engine never runs, so every --rp-driven
   rule reads 0 and leaves text faded. Pin the progress to 1 there: the
   base state becomes the final state (Who this book is for, the DP lists,
   the rings, the piers, every one at once). */
@media (max-width: 900px) {
  [data-ride] { --rp: 1; }
}

/* ---- v12.13.1: the two footer books, larger on every screen (Jonathan, 2026-10-09) ---- */
.footer__books { gap: 20px; margin-top: clamp(28px, 3vw, 40px); }
.footer__books a { flex: 1 1 0; width: auto; min-width: 0; max-width: 168px; }
.footer__books img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)); }
.footer__tag { margin-top: 18px; }
@media (max-width: 1019px) {
  .footer__books { gap: 24px; justify-content: flex-start; }
  .footer__books a { flex: none; width: min(156px, 42%); max-width: none; }
}

/* ---- v12.13.5: Pastel 2026-10-09 note 4, a taller announcement bar with larger type ---- */
.annbar { padding: 15px var(--gutter); font-size: 0.9rem; letter-spacing: 0.16em; }
.annbar span { margin-left: 8px; }
@media (max-width: 640px) { .annbar { padding: 13px var(--gutter); font-size: 0.78rem; letter-spacing: 0.12em; } }

/* =========================================================================
   v12.16.0 . BLOG . cards (Articles page + archive) and the reading page
   ========================================================================= */
.pb-card { display: grid; gap: clamp(18px, 2vw, 28px); color: inherit; text-decoration: none; }
.pb-card__img { display: block; overflow: hidden; border-radius: 6px; background: #1C1713; }
.pb-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88);
  transition: scale 700ms var(--ease), filter 500ms var(--ease);
}
.pb-card:hover .pb-card__img img { scale: 1.04; filter: saturate(1); }
.pb-card__body { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pb-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 232, 218, 0.52);
}
.pb-card__meta span { color: var(--gold, #C19A4B); }
.pb-card__title { font-weight: 700; color: #F4E8DA; line-height: 1.22; text-wrap: balance; overflow-wrap: anywhere; transition: color 250ms var(--ease); }
.pb-card:hover .pb-card__title { color: var(--light-gold, #F3D88E); }
.pb-card__sum { color: rgba(244, 232, 218, 0.7); line-height: 1.7; font-size: clamp(0.98rem, 1.1vw, 1.06rem); text-wrap: pretty; }
.pb-card__cta { margin-top: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold, #C19A4B); }
.pb-card__cta i { font-style: normal; display: inline-block; transition: translate 250ms var(--ease); }
.pb-card:hover .pb-card__cta i { translate: 6px 0; }
.pb-card:focus-visible { outline: 2px solid var(--gold, #C19A4B); outline-offset: 6px; border-radius: 6px; }

.pb-card--lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.pb-card--lead .pb-card__img { aspect-ratio: 4 / 3; }
.pb-card--lead .pb-card__title { font-size: clamp(1.5rem, 2.6vw, 2.35rem); }
.pb-card--row {
  grid-template-columns: clamp(92px, 10vw, 140px) minmax(0, 1fr); align-items: center;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid rgba(244, 232, 218, 0.12);
}
.pb-card--row .pb-card__img { aspect-ratio: 1; }
.pb-card--row .pb-card__title { font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.pb-card--row .pb-card__body { gap: 8px; }
.pb-card--row:not(:has(.pb-card__img)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .pb-card--lead { grid-template-columns: minmax(0, 1fr); }
  .pb-card--lead .pb-card__img { aspect-ratio: 16 / 10; }
}

/* Articles page: the blog section, right under the hero */
.pi-blog {
  background: var(--surface, #16120F);
  padding-block: var(--s-xxl);
  position: relative;
  border-top: 1px solid rgba(193, 154, 75, 0.22);
}
.pi-blog__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 56px);
}
.pi-blog__head .pp-h2 { margin-bottom: 0; color: #F4E8DA; }
.pi-blog__all {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border: 1px solid rgba(193, 154, 75, 0.55); border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #C19A4B); text-decoration: none;
  transition: background 250ms var(--ease), color 250ms var(--ease);
}
.pi-blog__all i { font-style: normal; }
.pi-blog__all:hover { background: var(--gold, #C19A4B); color: #14100F; }
.pi-blog__grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.pi-blog__grid--more { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.pi-blog__grid--more .pb-card--lead { grid-template-columns: minmax(0, 1fr); }
.pi-blog__grid--more .pb-card--lead .pb-card__img { aspect-ratio: 16 / 10; }
.pi-blog__list { display: grid; align-content: start; }
.pi-blog__list .pb-card:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .pi-blog__grid--more { grid-template-columns: minmax(0, 1fr); }
  .pi-blog__list .pb-card:first-child { border-top: 1px solid rgba(244, 232, 218, 0.12); padding-top: clamp(16px, 1.8vw, 22px); }
}

/* the archive: /category/blog/ */
.pb-archive { padding-top: calc(var(--s-xl) + 120px); padding-bottom: var(--s-xxl); }
.pb-archive__head { margin-bottom: clamp(36px, 5vw, 64px); }
.pb-archive__title {
  margin: 18px 0 0;
  font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; line-height: 1;
  text-transform: uppercase; color: #F4E8DA;
}
.pb-archive__list { display: grid; }
.pb-archive__list .pb-card--lead { margin-bottom: clamp(36px, 5vw, 64px); }
.pb-archive__list .pb-card--row:last-child { border-bottom: 1px solid rgba(244, 232, 218, 0.12); }
.pb-archive__pages { margin-top: var(--s-lg); }

/* the reading page */
.pb-post { padding-top: calc(var(--s-xl) + 120px); padding-bottom: var(--s-xxl); }
.pb-post__back {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #C19A4B); text-decoration: none;
}
.pb-post__back i { font-style: normal; transition: translate 250ms var(--ease); }
.pb-post__back:hover i { translate: -5px 0; }
.pb-post__meta {
  margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 232, 218, 0.55);
}
.pb-post__meta span { color: var(--gold, #C19A4B); }
.pb-post__title {
  margin: 16px 0 0; max-width: 20ch;
  font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 800; line-height: 1.04;
  text-transform: uppercase; color: #F4E8DA; text-wrap: balance; overflow-wrap: anywhere;
}
.pb-post__plate { margin-top: clamp(36px, 5vw, 64px); margin-bottom: 0; }
.pb-post__plate img {
  display: block; width: 100%; height: auto; max-height: 620px; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 8px;
}
.pb-post__body {
  margin-top: clamp(40px, 5vw, 64px); max-width: 70ch;
  font-size: clamp(1.02rem, 1.15vw, 1.12rem); line-height: 1.78;
  color: rgba(244, 232, 218, 0.8);
}
.pb-post__body > * + * { margin-top: 1.15em; }
.pb-post__body > ul + ul, .pb-post__body > ol + ol { margin-top: 0.4em; }
.pb-post__body h2 {
  margin-top: 2.1em; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.25;
  font-weight: 700; color: #F4E8DA; text-transform: none; letter-spacing: 0;
}
.pb-post__body h3 {
  margin-top: 1.8em; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.3;
  font-weight: 700; color: var(--light-gold, #F3D88E); text-transform: none; letter-spacing: 0;
}
.pb-post__body h2 + *, .pb-post__body h3 + * { margin-top: 0.6em; }
.pb-post__body :is(h2, h3) b, .pb-post__body :is(h2, h3) strong { font-weight: inherit; color: inherit; }
.pb-post__body ul, .pb-post__body ol { padding-left: 1.3em; }
.pb-post__body li + li { margin-top: 0.45em; }
.pb-post__body li::marker { color: var(--gold, #C19A4B); }
.pb-post__body a { color: var(--light-gold, #F3D88E); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pb-post__body a:hover { color: #F4E8DA; }
.pb-post__body strong, .pb-post__body b { color: #F4E8DA; font-weight: 700; }
.pb-post__body blockquote { margin-left: 0; padding-left: 1.2em; border-left: 2px solid var(--gold, #C19A4B); color: #F4E8DA; font-style: italic; }
.pb-post__body img { max-width: 100%; height: auto; border-radius: 6px; }
.pb-post__foot {
  margin-top: var(--s-xl); padding-top: var(--s-lg); max-width: 70ch;
  display: flex; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid rgba(244, 232, 218, 0.12);
}
.pb-post__more { margin-top: var(--s-xl); max-width: 860px; }
.pb-post__kicker { margin: 0 0 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold, #C19A4B); }
.pb-post__more-list .pb-card--row:last-child { border-bottom: 1px solid rgba(244, 232, 218, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .pb-card__img img, .pb-card__cta i, .pb-post__back i { transition: none; }
  .pb-card:hover .pb-card__img img { scale: none; }
}