/* ==========================================================
   CARSON — GHOSTWRITER
   Blue-pencil on bond: manuscript ink, proof paper, and the
   non-photo blue that never reproduced on the printed page.
   ========================================================== */

:root {
  --paper: #F2F1EC;        /* bond stock, neutral — not cream */
  --paper-deep: #E7E6E0;   /* a second sheet under the first */
  --ink: #141A21;          /* blue-black, the color of manuscript ink */
  --ink-soft: #3C4653;
  --ink-faint: #656E7A;

  /* the editor's blue pencil. "To blue-pencil" is the trade's verb for
     editing; non-photo blue was chosen precisely because it vanished
     when the page was shot for print. The mark that doesn't survive
     to the finished copy — which is the whole job. */
  --pencil: #215D8C;
  --pencil-dark: #17456A;
  --pencil-line: #4E7FA5;                    /* working marks, captions */
  --pencil-soft: rgba(33, 93, 140, 0.16);    /* rules inside working UI */
  --pencil-wash: #E4F0F7;                    /* proof-sheet tint */
  --pencil-light: #9FC7E8;                   /* the blue, on dark ground */

  --rule: rgba(20, 26, 33, 0.14);

  /* EB Garamond: the face the ghost actually writes his manuscripts in.
     Display runs 700-800, body runs 500 (Garamond's strokes are fine and
     its x-height small — the extra weight and size keep it sturdy on screen). */
  --serif-display: "EB Garamond", Georgia, serif;
  --serif-body: "EB Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: 5.5rem; /* sticky header clearance for anchor links */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow { max-width: 720px; }

::selection { background: var(--pencil); color: var(--paper); }

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

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 2px solid var(--pencil);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin-bottom: 1.25rem;
}
/* Break the scale: sections no longer share one headline size.
   Services is the commercial pivot — biggest. FAQ is utility — smallest. */
.services .section-title { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.faq .section-title { font-size: clamp(1.7rem, 3.4vw, 2.35rem); }

.section-note {
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 2.5rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Best of both worlds: the map's alpha is baked into the image itself
     (lines ~20% opaque, pale areas nearly clear), floating over translucent
     paper — so the map shows AND scrolling content shows through at ~12%,
     blurred, like the original frost. Knobs: re-bake the webp for map
     /* frost strength: this alpha — 0.82 quieter, 0.75 glassier */
  background-image: url('/img/header-strip-alpha.webp');
  background-size: cover;
  background-position: left bottom;
  background-color: rgba(242, 241, 236, 0.78);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.nav-logo {
  height: 28px;
  width: auto;
  display: block;
}
/* The logo dog-ear, done for real: clip-path animates the icon's corner
   AWAY — genuinely transparent, so the map header (or scrolling content)
   shows through the cut — while the pseudo supplies only the flap,
   the tile's lighter underside. Clipped to the icon's rounded silhouette.
   (px values assume the fixed 28px icon.) */
.nav-logo-wrap {
  position: relative;
  display: block;
  line-height: 0;
  overflow: hidden;
  border-radius: 4px;
}
.nav-logo {
  clip-path: polygon(0 0, 28px 0, 28px 0, 28px 28px, 0 28px);
  transition: clip-path 0.18s ease-out;
}
.nav-brand:hover .nav-logo,
.nav-brand:focus-visible .nav-logo {
  clip-path: polygon(0 0, 18px 0, 28px 10px, 28px 28px, 0 28px);
}
.nav-logo-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: linear-gradient(225deg, #465360 0%, #2E3846 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: width 0.18s ease-out, height 0.18s ease-out;
  pointer-events: none;
  z-index: 3;
}
.nav-brand:hover .nav-logo-wrap::after,
.nav-brand:focus-visible .nav-logo-wrap::after {
  width: 10px;
  height: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo,
  .nav-logo-wrap::after { transition: none; }
}
.nav-wordmark {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.4rem;
}
.nav-dot { color: var(--pencil); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Plain links only — the CTA owns its color and its transition.
   Unscoped, this rule is (0,1,1) and outranks .nav-cta (0,1,0), so its
   `transition: color` replaced the button's whole transition list in the
   resting state. Hover still animated (.nav-cta:hover is (0,2,0)), so the
   button entered smoothly and snapped on exit — background and corner cut
   reverted in one frame while the flap, which this rule can't reach, kept
   animating. That stranded the blue flap on a black, uncut button.
   Keep the CTA excluded here. */
.nav-links a:not(.nav-cta) {
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav-links a:not(.nav-cta):hover { color: var(--pencil); }

.nav-cta {
  color: var(--paper);
  background-color: var(--ink);
  padding: 0.5rem 1rem;
  position: relative;
  /* Done for real, like the logo: clip-path cuts the corner AWAY —
     genuinely transparent, so the header's map shows through the cut.
     Every vertex is the same computed type (length-percentage calc) so
     the polygon interpolates smoothly everywhere instead of falling
     back to a discrete snap — which is what left the flap hanging on
     the restored corner. The cut is a px size, not a %, so the mobile
     full-width button works untouched.
     Exit timing (mouse-out uses this base spec): the peel retracts
     first while the background color waits 200ms — longer than the
     fold's 180ms, so the flap is fully gone before the button starts
     turning black and the two never share a frame. */
  clip-path: polygon(0 0, calc(100%) 0, calc(100%) 0, calc(100%) calc(100%), 0 calc(100%));
  transition: background-color 0.15s ease 0.20s, clip-path 0.18s ease-out;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  /* Color and fold must answer to the SAME states. The fold listens to
     :focus-visible so keyboard users get the peel — so the color has to
     as well. Otherwise a clicked button (which keeps focus) un-hovers to
     black while focus holds the fold open: blue flap on black, frozen.
     Entry timing: the color turns first and the peel waits a beat, so
     the blue flap never lands on a still-black button. Delays live only
     on these state rules; exit uses the base timing above. */
  background-color: var(--pencil);
  clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100%) 10px, calc(100%) calc(100%), 0 calc(100%));
  transition: background-color 0.15s ease, clip-path 0.18s ease-out 0.06s;
}

/* The flap, in two layers — the same split the vd-panel fold bakes into
   one gradient, kept separate here so the flap stays exactly triangle-
   shaped as it grows (a shadow stop inside one gradient would leak past
   the fold's diagonal). ::before is the fold-line shadow, ::after is
   the folded corner's pencil-blue underside; both grow with the cut.
   The flap's hypotenuse lies exactly on the cut's diagonal, inside the
   kept region, so the button's own clip-path never clips it. */
.nav-cta::before,
.nav-cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  transition: width 0.18s ease-out, height 0.18s ease-out;
  pointer-events: none;
}
.nav-cta::before {
  background: linear-gradient(225deg,
    transparent 42%,
    rgba(20, 26, 33, 0.22) 50%,
    transparent 58%);
  z-index: 1;
}
.nav-cta::after {
  background: linear-gradient(225deg, #7BA9CC 0%, #5A8DB5 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 2;
}
.nav-cta:hover::before,
.nav-cta:focus-visible::before,
.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  width: 10px;
  height: 10px;
  /* matches the clip-path delay on the button — cut and flap stay glued */
  transition-delay: 0.06s;
}
@media (prefers-reduced-motion: reduce) {
  /* state selectors included: they now carry their own transition spec,
     and equal specificity + later source order is what overrides them */
  .nav-cta,
  .nav-cta:hover,
  .nav-cta:focus-visible,
  .nav-cta::before,
  .nav-cta::after,
  .nav-cta:hover::before,
  .nav-cta:hover::after,
  .nav-cta:focus-visible::before,
  .nav-cta:focus-visible::after { transition: none; }
}

/* ---------- Mobile nav ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 14px;
}
.nav-toggle-bars span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-open .nav-toggle-bars span:first-child { transform: translateY(2.5px) rotate(45deg); }
.nav-open .nav-toggle-bars span:last-child  { transform: translateY(-2.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 1.5rem 1.25rem;
    display: none;
  }
  .nav-open .nav-links { display: flex; }
  .nav-links a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.85rem;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta {
    margin-top: 0.9rem;
    text-align: center;
    padding: 0.85rem 1rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--ink);
  transition: all 0.15s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--pencil);
  border-color: var(--pencil);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--pencil);
  color: var(--pencil);
}
.btn-large { font-size: 1rem; padding: 1.1rem 2.25rem; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
}
/* The map descends from the header and dissolves into the bond — same
   ink-line bake as the header strip, a touch fainter, masked to fade out
   before the demo card. This is what ties the header to the page. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(260px, 34vw, 400px);
  background: url('/img/hero-map-alpha.webp') center top / cover no-repeat;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }

.hero-head {
  /* no max-width: the head spans the container so the portrait can snap
     to the page's right edge, on the same vertical line as the demo card
     and the nav button. The title self-limits well short of it. */
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.hero-title {
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.hero-title em {
  font-style: italic;
  color: var(--pencil);
}

.hero-sub {
  max-width: 560px;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* The portrait: the face the byline is hiding. Small, square, quiet —
   the concept is the caption, not the size. */
.hero-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.hero-portrait {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(130px, 13vw, 160px);
}
.hero-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--rule);
  filter: contrast(1.02);
}
.hero-portrait figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}

/* Desktop: pin the portrait to the bottom-right corner of the hero head,
   out of the text flow, so the intro keeps its natural place under the
   title and the portrait occupies the genuinely empty right zone. */
@media (min-width: 861px) {
  .hero-head { position: relative; }
  .hero-intro { display: block; }
  .hero-portrait { position: absolute; right: 0; bottom: 0; }
}

@media (max-width: 860px) {
  .hero-intro {
    align-items: flex-start;
    gap: 1.25rem;
  }
  .hero-portrait {
    width: 88px;
    order: -1; /* face first, then "I'm Carson" — like a message avatar */
    margin-top: 0.2rem;
  }
  .hero-portrait figcaption { display: none; }
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.hero-photo {
  margin: 0;
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
  filter: grayscale(40%) contrast(1.02);
}

@media (max-width: 760px) {
  .hero-photo {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ---------- Proof bar ---------- */
.proofbar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.proofbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
.proof-number {
  display: block;
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.2;
}
.proof-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}
@media (max-width: 720px) {
  .proofbar-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Pitch ---------- */
.pitch {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  overflow: hidden;
}
/* Faint ink-on-cream linework, multiply-blended over the bond paper: the
   image's light field multiplies to transparent so --paper is preserved
   exactly, and only the sparse contour lines darken in. Same construction
   as .proofband::before — pseudo-layer so opacity is an independent knob.
   The source is warm (cream + sepia ink), so at faint strength the band
   picks up a slight aged-manuscript warmth — deliberate, on brand. */
.pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper) url('/img/simple_banner.jpg') center / cover no-repeat;
  background-blend-mode: multiply;
  /* faintness knob: 0.15 = whisper. ~0.25 starts to assert itself */
  opacity: 0.15;
  pointer-events: none;
}
.pitch > .container { position: relative; z-index: 1; }
.pitch-text {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.62;
  font-weight: 400;
}
.pitch-text em { color: var(--pencil); font-style: italic; }
.dropcap {
  float: left;
  font-family: var(--serif-display);
  font-weight: 700;
  /* box must equal exactly two line boxes (2 x 1.62em of .pitch-text)
     so line three clears the float: 3.4em x 0.953 = 3.24em */
  font-size: 3.4em;
  line-height: 0.953;
  padding-right: 0.1em;
  color: var(--pencil);
}

/* ---------- Services ---------- */
.services {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--rule);
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
.service-card {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
/* The inspiration plates: vintage ink illustrations printed on the card
   itself. Height follows the card; the negative right offset lets the plate
   bleed off the trim edge, like a book plate — less of the box, more intent.
   Multiply dissolves the plate's white into the card's; the low opacity lets
   text run full width over it — watermark, not picture. */
.service-art {
  position: absolute;
  right: -12%;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.service-art--soft { opacity: 0.15; }
.service-card > :not(.service-art) { position: relative; }
.service-card:hover {
  border-color: var(--pencil);
  transform: translateY(-3px);
}
.service-num {
  font-family: var(--mono);
  color: var(--pencil);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}
.service-card h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}
.service-desc { color: var(--ink-soft); margin-bottom: 1.25rem; }
.service-list {
  list-style: none;
  margin-bottom: 1.75rem;
}
.service-list li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
}
.service-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--pencil);
}
.service-link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pencil);
}
.service-link:hover { color: var(--pencil-dark); text-decoration: underline; }

@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Service pricing + fine print ---------- */
.service-price {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.service-price strong { color: var(--ink); font-weight: 500; }
.services-fine {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 2rem;
}

/* ---------- Samples page ---------- */
.page-header {
  /* same start line as the homepage hero: one answer to "how far below
     the nav does content begin" across every page */
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.page-title {
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.page-title em { font-style: italic; color: var(--pencil); }
.page-sub { color: var(--ink-soft); font-size: 1.2rem; max-width: 640px; margin: 0 auto; text-align: center; }

/* The samples-page plate: Paget's Holmes. Same language as the service
   plates — full header height, right-anchored, bled slightly at the trim,
   multiplied into the bond paper at watermark strength. Denser plate than
   the service pair, so it runs lighter. */
.ph-art { position: relative; overflow: hidden; }
.ph-plate {
  position: absolute;
  right: -3%;
  bottom: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right bottom;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.ph-art > :not(.ph-plate) { position: relative; }

/* Left-aligned page header variant */
.page-header-left { text-align: left; }
.page-header-left .page-sub { margin-left: 0; text-align: left; }
.page-header-left .page-title {
  letter-spacing: -0.01em;
}

/* ---------- Samples index ---------- */
.sindex {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.sindex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sindex-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.sfilter { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sfilter-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--pencil-soft);
  color: var(--pencil-line);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sfilter-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.sfilter-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.sindex-list { list-style: none; margin: 0; padding: 0; }
.sindex-row { border-top: 1px solid var(--rule); }
.sindex-row:last-child { border-bottom: 1px solid var(--rule); }
.sindex-row[hidden] { display: none; }
.sindex-row a {
  display: grid;
  grid-template-columns: 110px minmax(180px, 250px) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0.75rem 1rem 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.sindex-row a:hover {
  background: rgba(33, 93, 140, 0.05);
  padding-left: 0.75rem;
}
.sindex-kind {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}
.sindex-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
}
.sindex-ctx {
  font-size: 0.95rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
@media (max-width: 820px) {
  .sindex-row a {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .sindex-ctx { font-size: 0.9rem; }
}

.sample {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.sample[hidden] { display: none; }
.sample-inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .sample-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
.sample-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--pencil);
  display: inline-block;
  padding: 0.28rem 0.65rem;
  margin-bottom: 1rem;
}
.sample h2 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin-bottom: 0.75rem;
}
.sample-context {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  font-size: 1.02rem;
}
.sample-body {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* The manuscript excerpts inherit the body serif — that's the product. */
.sample-body p { margin-bottom: 1.1rem; color: var(--ink); line-height: 1.8; }
.sample-body p:last-child { margin-bottom: 0; }

/* Read More — Truncated Preview */
.sample-content-wrapper {
  position: relative;
  max-height: 250px;
  overflow: hidden;
}
.sample-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #fff 90%);
  pointer-events: none;
}
.btn-read-more {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.5rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-read-more:hover {
  background: var(--pencil);
}

/* ---------- Sample Modal ---------- */
.sample-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 26, 33, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, background 0.3s ease, visibility 0s 0.3s;
}
.sample-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
  background: rgba(20, 26, 33, 0.65);
  transition: opacity 0.3s ease, background 0.3s ease, visibility 0s 0s;
}
.sample-modal {
  background: #fff;
  border: 1px solid var(--rule);
  width: 92vw;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s ease;
}
.sample-modal-overlay.is-active .sample-modal {
  transform: translateY(0) scale(1);
}
.sample-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.sample-modal-header-text {
  flex: 1;
  min-width: 0;
}
.sample-modal-header .sample-label {
  margin-bottom: 0.5rem;
}
.sample-modal-header h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  margin: 0;
}
.sample-modal-close {
  background: none;
  border: 1px solid var(--rule);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--ink-faint);
  flex-shrink: 0;
  margin-left: 1.5rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sample-modal-close:hover {
  border-color: var(--pencil);
  color: var(--pencil);
}
.sample-modal-body {
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overscroll-behavior: contain;
}
.sample-modal-body p {
  margin-bottom: 1.1rem;
  color: var(--ink);
  line-height: 1.8;
}
.sample-modal-body p:last-child { margin-bottom: 0; }
.sample-modal-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem auto;
  width: 40%;
}
.sample-modal-body h2,
.sample-modal-body h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 1.25rem 0;
  text-align: left;
}

.sample-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-top: 0;
}

.sample-byline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- The proof band ----------
   The strongest quote, full-bleed, no header — it shouts while everything
   else whispers. The "01" is the page's one numbered marker: it reads as
   "exhibit no. 1", which is information, not decoration. */
.proofband {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  overflow: hidden;
}
/* The ornate engraving, multiply-blended over the ink: the image's white
   areas multiply to transparent (so the band's --ink color is preserved
   exactly — only the engraved lines show, darkened toward black), which is
   why the section color never shifts. A pseudo-layer, not background-image
   on .proofband itself, so opacity is an independent knob for the ornament's
   strength without re-baking the JPEG. */
.proofband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink) url('/img/testimonial_bg.jpg') center / cover no-repeat;
  background-blend-mode: multiply;
  /* ornament strength: 1 = full multiply, lower = quieter engraving */
  opacity: 0.55;
  pointer-events: none;
}
/* Keep the quote above the ornament layer. */
.proofband > .container { position: relative; z-index: 1; }
.proofband-quote { max-width: 52rem; margin: 0 auto; }
.proofband-text {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}
.proofband-quote footer { position: relative; }
.proofband-quote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil-light);
}
.proofband-quote .scope {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(159, 199, 232, 0.55);
  margin-top: 0.25rem;
  max-width: 65%;
}
.proofband-quote .badge {
  position: absolute;
  right: 0;
  top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pencil-light);
  border: 1px solid rgba(159, 199, 232, 0.4);
  padding: 0.3rem 0.55rem;
}
@media (max-width: 560px) {
  .proofband-quote .badge { position: static; display: inline-block; margin-top: 0.75rem; }
  .proofband-quote .scope { max-width: none; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(242, 241, 236, 0.08);
}
.testimonials .eyebrow { color: var(--pencil-light); }
.testimonials .section-note { color: rgba(242, 241, 236, 0.55); }

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.testimonial {
  border: 1px solid rgba(242, 241, 236, 0.08);
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.testimonial:hover {
  border-color: rgba(242, 241, 236, 0.18);
}
.testimonial p {
  font-family: var(--serif-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.testimonial footer {
  border-top: 1px solid rgba(242, 241, 236, 0.08);
  padding-top: 1.25rem;
}
.testimonial cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil-light);
}
.testimonial .scope {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(159, 199, 232, 0.55);
  margin-top: 0.25rem;
}
@media (max-width: 720px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- About ---------- */
.about { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.about-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: stretch;
}

.about-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.about-photo-crop {
  overflow: hidden;
  border: 1px solid rgba(33, 93, 140, 0.25);
  flex-grow: 1;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  transform-origin: center center;
}
.about-photo figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}
.about-text p { margin-bottom: 1.25rem; color: var(--ink-soft); }
.about-text p:first-of-type { color: var(--ink); }
.about-text em { color: var(--pencil); }
@media (max-width: 760px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-photo { max-width: 320px; }
}

/* ---------- Process ---------- */
.process {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.25rem) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
}
/* The engraver's hand with the compass — the instrument of precision —
   ghosted into the right side of the band. Multiply over --paper-deep
   (this section uses the darker second sheet): the image's white field
   goes transparent, only the linework darkens in. Sized by height so
   the art never crops horizontally. Barely visible by request. */
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-deep) url('/img/simple_section_bg.jpg') no-repeat;
  background-size: auto 115%;
  /* Anchored just PAST the content's right rail, in the page margin —
     marginalia: the engraver's hand works offstage, next to the content,
     which is the section's whole point ("I vanish. That's the deal.").
     Offset mirrors .container (max-width 1080px, 1.5rem padding,
     border-box) minus a 2rem push into the gutter; max() clamps to the
     1.5rem gutter before the push can slide it off-screen, so below
     ~1140px viewport it falls back to rail-flush. (If .container's 1080
     or 1.5rem ever changes, update the 516px. Knob: the 2rem.) */
  background-position: right max(1.5rem, calc(50vw - 516px - 2rem)) center;
  background-blend-mode: multiply;
  /* faintness knob: 0.08 = barely there. ~0.2 and the hand starts waving */
  opacity: 0.08;
  pointer-events: none;
}
/* Mobile: the band goes tall and narrow — shrink to `contain` so the
   whole hand stays visible as a small ghost instead of a cropped limb.
   (Position offset is moot once the image fills the width.) */
@media (max-width: 820px) {
  .process::before {
    background-size: contain;
    background-position: right center;
  }
}
.process > .container { position: relative; z-index: 1; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.process-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--pencil);
  margin-bottom: 0.15rem;
}
.process-step h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.process-step p { color: var(--ink-soft); font-size: 1.05rem; }
@media (max-width: 720px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.cta {
  padding: clamp(5.5rem, 10vw, 8.5rem) 0;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
}
.cta .eyebrow {
  color: var(--pencil-light);
  margin-bottom: 1.25rem;
}
.cta-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.cta-title em { font-style: italic; color: var(--pencil-light); }
.cta-sub {
  color: rgba(242, 241, 236, 0.7);
  margin-bottom: 2.5rem;
  font-size: 1.2rem;
}
.cta .btn-primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  position: relative;
  /* No overflow: hidden — it clips the fold's -1px overhang to the
     padding box, so the border ring keeps drawing the corner the fold
     is supposed to have removed (same fix as .vd-panel) */
}
.cta .btn-primary:hover {
  background: var(--pencil);
  border-color: var(--pencil);
  color: var(--paper);
}

/* Same peel language as the nav CTA, inverted for the dark section.
   The fold's top triangle is the ink background, the underside is the
   lighter paper — like the corner of a letter lifting off a desk.
   Slightly larger fold: this is the final ask, it earns the emphasis.
   -1px overhang so the fold covers the button's 1px border ring too —
   otherwise the outline keeps drawing the corner the fold removed. */
.cta .btn-primary::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  background: linear-gradient(225deg,
    var(--ink) 0%,
    var(--ink) 46%,
    rgba(242, 241, 236, 0.12) 50%,
    #D4CFC4 54%,
    #C4BFB4 100%);
  transition: width 0.2s ease-out, height 0.2s ease-out;
  pointer-events: none;
  z-index: 2;
}
.cta .btn-primary:hover::after,
.cta .btn-primary:focus-visible::after {
  width: 14px;
  height: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .cta .btn-primary::after { transition: none; }
}
.cta-email {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: rgba(242, 241, 236, 0.55);
}
.cta-email a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cta-email a:hover { color: var(--pencil-light); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(242, 241, 236, 0.08);
  padding: 3rem 0;
  background: var(--ink);
  color: var(--paper);
}
.footer-inner { text-align: center; }
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.footer-logo {
  height: 24px;
  width: auto;
  display: block;
}
.footer-mark {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  color: var(--paper);
}
.site-footer .nav-dot { color: var(--pencil-light); }
.footer-line {
  font-style: italic;
  color: rgba(242, 241, 236, 0.6);
  margin: 0.4rem 0 0.9rem;
}
.footer-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(242, 241, 236, 0.4);
}
.footer-legal {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-legal a {
  color: rgba(242, 241, 236, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-legal a:hover { color: var(--pencil-light); }
.footer-legal-sep {
  margin: 0 0.4rem;
  color: rgba(242, 241, 236, 0.3);
}

/* ---------- Legal Pages ---------- */
.legal-page {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.legal-container {
  max-width: 680px;
}
.legal-updated {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.legal-page h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2.25rem 0 0.75rem;
}
.legal-page p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
  line-height: 1.75;
}
.legal-page ul {
  color: var(--ink-soft);
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.legal-page li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.legal-page a {
  color: var(--pencil);
  text-decoration: underline;
  text-decoration-color: rgba(33, 93, 140, 0.3);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.15s ease;
}
.legal-page a:hover {
  text-decoration-color: var(--pencil);
}

/* ---------- Articles / Posts ---------- */
.post-list-section { padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 clamp(4rem, 8vw, 7rem); }
/* Articles index + guides rail: the rail carries the lead magnets so the
   index doesn't float in dead space — and the funnel meets the reader. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 3rem;
}
.post-list {
  display: grid;
  gap: 2.5rem;
}
.post-rail {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.post-rail-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil-line);
  margin-bottom: 1.5rem;
  text-align: right;
}
.rail-guide {
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.rail-guide:hover { border-color: var(--pencil); }
.rail-guide-for {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 0.6rem;
}
.rail-guide-title {
  display: block;
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.rail-guide-sub {
  display: block;
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}
.rail-guide-cta {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
}
@media (max-width: 860px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-rail {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 2.5rem;
  }
}
.post-card {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2rem;
}
.post-card:last-child { border-bottom: none; }
.post-card-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a:hover { color: var(--pencil); }
.post-card-excerpt {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post-card-date {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.post-card-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--pencil);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.post-card-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.featured-article {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: #fff;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.featured-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.featured-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.featured-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(20, 26, 33, 0.08);
}
.featured-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.featured-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.featured-card:hover .featured-card-img img {
  transform: scale(1.03);
}
.featured-card-body {
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.featured-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pencil);
  margin: 0 0 0.75rem;
}
.featured-title {
  font-family: var(--serif-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--ink);
  transition: color 0.15s ease;
}
.featured-card:hover .featured-title { color: var(--pencil); }
.featured-excerpt {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.featured-card .post-card-link { align-self: flex-start; }

@media (max-width: 768px) {
  .featured-article-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Single Post */
.post-single { padding: clamp(4rem, 8vw, 7rem) 0; }
.post-container { max-width: 680px; margin: 0 auto; }
.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--pencil); }

.post-header { margin-bottom: 3rem; }
.post-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.post-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2rem;
}

.post-content {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
}
.post-content h2 {
  font-family: var(--serif-display);
  font-size: 1.75rem;
  margin: 2.5rem 0 1rem;
  font-weight: 600;
}
.post-content h3 {
  font-family: var(--serif-display);
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  font-weight: 600;
}
.post-content p { margin-bottom: 1.5rem; color: var(--ink-soft); }
.post-content ul, .post-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}
.post-content li { margin-bottom: 0.5rem; }
.post-content a {
  color: var(--pencil);
  text-decoration: underline;
  text-decoration-color: rgba(33, 93, 140, 0.3);
  text-underline-offset: 0.15em;
}
.post-content a:hover { text-decoration-color: var(--pencil); }
.post-content blockquote {
  border-left: 2px solid var(--pencil);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
}
.post-content strong { color: var(--ink); font-weight: 600; }

.post-footer-rule {
  margin: 4rem 0 2rem;
  border: 0;
  height: 1px;
  background: var(--rule);
}
.post-footer-cta {
  font-size: 0.95rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- Newsletter & Guides Lead Capture ---------- */

/* Article Footer CTA Box */
.article-cta-box {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  margin: 3.5rem 0 2rem;
  text-align: left;
}
.article-cta-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pencil);
  margin-bottom: 0.6rem;
  display: block;
}
.article-cta-title {
  font-family: var(--serif-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.article-cta-desc {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

/* Homepage "Writing on Writing" Callout */
.featured-guides-callout {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
  text-align: center;
}
.featured-guides-callout h3 {
  font-family: var(--serif-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.featured-guides-callout p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
.featured-guides-callout p strong {
  color: var(--ink);
  font-weight: 600;
}

/* Dedicated Landing Page (/guides/) */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3.5rem;
}
.guide-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(2rem, 5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}
.guide-card h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0.5rem 0 0.75rem;
}
.guide-card .guide-sub {
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.guide-card p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}
.guide-card form {
  margin-top: auto;
}

/* General signup forms */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.signup-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}
p.signup-disclaimer {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.4;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.signup-input {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.signup-input::placeholder {
  color: var(--ink-faint);
  opacity: 0.7;
}
.signup-input:focus {
  outline: none;
  border-color: var(--pencil);
  background: #fff;
}
.signup-btn, a.signup-btn, button.signup-btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.signup-btn:hover, a.signup-btn:hover, button.signup-btn:hover {
  background: var(--pencil);
  color: var(--paper);
}

@media (max-width: 768px) {
  .guides-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 480px) {
  .signup-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .signup-btn {
    width: 100%;
  }
}

/* Thank You Page */
.thank-you-container {
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  max-width: 580px;
  margin: 0 auto;
}
.thank-you-container h1 {
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.thank-you-container p {
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ==========================================================
   VOICE DEMO
   The signature element: one brief in, one voice out.
   ========================================================== */
.vd {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---- The rail: graphite, because it's working machinery ---- */
.vd-rail {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--pencil-soft);
}
/* Desktop: the rail stretches to the stage's height and the tabs divide
   the space evenly, so the selector column and the card share one rule line.
   (.vd-rail .vd-tab beats the later plain .vd-tab rule on specificity.) */
@media (min-width: 861px) {
  .vd-rail .vd-tab { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
}
.vd-tab {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--pencil-soft);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.vd-tab:hover {
  background: rgba(33, 93, 140, 0.05);
  color: var(--ink);
}
.vd-tab.is-active {
  border-left-color: var(--pencil);
  color: var(--ink);
  background: rgba(33, 93, 140, 0.06);
}
.vd-tab-name {
  display: block;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
}
.vd-tab-kind {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil-line);
  margin-top: 0.15rem;
}
.vd-tab.is-active .vd-tab-kind { color: var(--pencil); }

/* ---- The stage: a page on the desk ---- */
.vd-stage {
  position: relative;
}
/* With JS on, panels stack in a single grid cell, so the stage is always
   as tall as the tallest panel — switching voices never shifts the page. */
.vd-stage.is-live { display: grid; }
.vd-stage.is-live .vd-panel { grid-area: 1 / 1; }
.vd-stage.is-live .vd-panel[hidden] { display: block; visibility: hidden; }
.vd-panel {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* proof-sheet tint: this is the working draft, not the finished page */
  background: var(--pencil-wash);
  /* faint paper tooth, baked faint so no extra layers or opacity needed */
  background-image: url('/img/paper-texture-faint.jpg');
  background-blend-mode: multiply;
  border: 1px solid var(--pencil-soft);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.vd-panel[hidden] { display: none; }

/* The dog-ear: on hover the top-right corner folds down, like a page
   marked for later. One pseudo-element, a gradient that is the paper
   behind the card (top-right triangle), a hair of shadow, then the
   underside of the page (bottom-left triangle). */
.vd-panel::after {
  content: "";
  position: absolute;
  /* -1px so the fold covers the card's 1px border ring too — otherwise the
     outline keeps drawing the corner the fold is supposed to have removed */
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  background: linear-gradient(225deg,
    var(--paper) 0%,
    var(--paper) 46%,
    rgba(20, 26, 33, 0.16) 50%,
    #CCDFEC 54%,
    #CCDFEC 100%);
  transition: width 0.18s ease-out, height 0.18s ease-out;
  z-index: 3;
  pointer-events: none;
}
.vd-panel:hover::after,
.vd-panel:focus-within::after {
  width: 1.75rem;
  height: 1.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .vd-panel::after { transition: none; }
}

.vd-brief {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.6;
  /* --pencil-line is too light against the proof tint for 12px type */
  color: var(--pencil-dark);
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--pencil-soft);
}
.vd-brief-key {
  color: var(--pencil);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.7rem;
}

.vd-text {
  position: relative;
  flex: 1 1 auto;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.75;
  max-width: 40em;
}
.vd-text p { margin: 0 0 0.85rem; }
.vd-text p:last-child { margin-bottom: 0; }
/* Two layers: the ghost always holds the full text so the panel's height
   never changes mid-typing; the live layer is what gets typed into. */
.vd-ghost { visibility: hidden; }
.vd-live { position: absolute; inset: 0; }

/* Typing cursor */
.vd-text.is-typing .vd-live p:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.06em;
  background: var(--pencil);
  vertical-align: -0.16em;
  animation: vd-blink 0.9s step-end infinite;
}
@keyframes vd-blink { 50% { opacity: 0; } }

/* ---- The blank byline: the signature motif ---- */
.vd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--pencil-soft);
  flex-shrink: 0;
}
.vd-byline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vd-blank {
  display: inline-block;
  width: 9rem;
  max-width: 38vw;
  border-bottom: 1px solid var(--ink-faint);
}
.vd-more {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pencil);
}
.vd-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 860px) {
  .vd { grid-template-columns: 1fr; align-items: start; }
  .vd-rail {
    flex-direction: row;
    overflow-x: auto;
    border-top: none;
    border-bottom: 1px solid var(--pencil-soft);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vd-rail::-webkit-scrollbar { display: none; }
  .vd-tab {
    flex: 0 0 auto;
    border-bottom: none;
    border-left: none;
    border-top: 2px solid transparent;
    padding: 0.6rem 1rem 0.75rem 0;
    margin-right: 1.35rem;
  }
  .vd-tab.is-active {
    border-left-color: transparent;
    border-top-color: var(--pencil);
    background: none;
  }
  .vd-tab-name { font-size: 0.95rem; white-space: nowrap; }
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--rule);
}
.faq-list { margin-top: 2.5rem; }
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 0;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.35;
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--pencil); }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--pencil);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  color: var(--ink-soft);
  max-width: 60ch;
  padding-bottom: 1.5rem;
  margin: 0;
}

/* ==========================================================
   MOBILE BOOKING DOCK
   ========================================================== */
.dock { display: none; }

@media (max-width: 820px) {
  .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 26, 33, 0.97);
    border-top: 1px solid rgba(242, 241, 236, 0.12);
  }
  .dock-note {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
    color: rgba(242, 241, 236, 0.62);
  }
  .dock-btn {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--paper);
    color: var(--ink);
    padding: 0.7rem 1.1rem;
  }
  .dock-btn:hover, .dock-btn:focus { background: var(--pencil); color: var(--paper); }

  body { padding-bottom: 4.5rem; }
  .nav-open .dock { display: none; }
}