/* ===========================================================================
   Download — /about/ standalone page. "THE SPREAD": an open architectural-
   magazine double page. Full-bleed paper with no frame borders; a center-fold
   overlay (soft crease shadow flanked by gloss bands) rides over text and
   video alike so the whole page reads as one opened spread. The composition
   is a centered column pair (max-width --spread) hugging the fold — tight
   gutter, no drift to the viewport edges. Chapters carry enormous outline
   numerals cropped at the page edges; body prose is justified ("squared")
   like set type; videos are small captioned figures set inside the columns.
   Full-width hairlines dip and fade into the crease (see FOLDED RULES) so
   they read as printed on the curved paper, not drawn over it. Ends with
   the same robot closer as the
   main page (markup wrapped in .pages.blocks so pages.css chrome applies;
   fold overlay is absolute inside <main>, so it stops before the closer).
   Spacing system: one scale — --sp-1 (tight) → --sp-4 (section) — used
   everywhere, so the vertical rhythm stays consistent. Mobile (<50em):
   single column, fold hidden, everything in flow.
   =========================================================================== */
:root {
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #38393d;
  --ink-body: #3a3a38;
  --ink-soft: #6b6b69;
  --ink-faint: #b4b4ae;
  --hair: rgba(56, 57, 61, 0.13);
  --rule: rgba(56, 57, 61, 0.9);
  --paper: #f4f3ef;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* the spread: overall composition width, outer text inset, and the
     clearance each page-half keeps from the center crease */
  --spread: 68rem;
  --edge: clamp(1.4rem, 4vw, 3rem);
  --crease-gap: clamp(1.6rem, 2.8vw, 2.6rem);
  /* left margin that aligns loose elements with the centered spread */
  --spread-inset: max(var(--edge), calc(50% - var(--spread) / 2 + var(--edge)));

  /* one vertical spacing scale for the whole page */
  --sp-1: clamp(0.9rem, 1.6vw, 1.3rem);
  --sp-2: clamp(1.5rem, 2.8vw, 2.2rem);
  --sp-3: clamp(2.2rem, 4.5vh, 3.2rem);
  --sp-4: clamp(3rem, 7vh, 4.6rem);

  /* ONE width for every portrait figure on the page — no ad-hoc sizes */
  --fig-w: min(14rem, 44vw);

  --fs-label: 0.72rem;
  --fs-body: clamp(1.02rem, 0.98rem + 0.28vw, 1.16rem);
  --fs-lead: clamp(1.22rem, 1.06rem + 0.72vw, 1.6rem);
  --fs-statement: clamp(1.45rem, 1.18rem + 1.15vw, 2.05rem);
  --fs-head: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-display: clamp(2.7rem, 1.4rem + 6.2vw, 7.2rem);
  --fs-stat: clamp(2.7rem, 5.8vw, 5.6rem);  /* sized so "10M+" always fits its
                                               quarter-column INSIDE the spread */
  --fs-giant: clamp(9rem, 30vw, 30rem);

  --lead-tight: 1;
  --lead-snug: 1.14;
  --lead-read: 1.55;
}

/* Phones read cramped at the 1.4rem floor — a slightly deeper outer margin
   keeps the justified columns off the screen edges (owner note: mobile felt
   "too stretched to the edges"). Desktop keeps the measured 4vw. */
@media (max-width: 50em) {
  :root {
    --edge: clamp(1.7rem, 6vw, 3rem);
  }
}

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

/* Lenis smooth scroll (same base styles as the home page) */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body.about-page {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: url(../img/noise.png);
  background-size: 150px;
  background-repeat: repeat;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Quality floor: visible, on-brand keyboard focus. */
.about-page a:focus-visible,
.about-page button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Keep the shared top bar permanently visible; flag the current item. */
.about-page .topbar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.about-page .topbar__nav a[aria-current="page"] {
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   THE FOLD — full-height center crease with gloss, absolute inside <main>
   (not fixed) so it covers the whole spread but ends before the closer.
   Horizontal-only gradient, so absolute reads identically to fixed while
   scrolling. Gone below 50em and under prefers-reduced-transparency.
   --------------------------------------------------------------------------- */
.ab {
  position: relative;
}
.ab-fold {
  display: none;
}
@media (min-width: 50em) {
  .ab-fold {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0.32) 44%,
      rgba(255, 255, 255, 0.05) 48.4%,
      rgba(56, 57, 61, 0.07) 49.55%,
      rgba(56, 57, 61, 0.16) 50%,
      rgba(56, 57, 61, 0.07) 50.45%,
      rgba(255, 255, 255, 0.05) 51.6%,
      rgba(255, 255, 255, 0.32) 56%,
      rgba(255, 255, 255, 0) 66%
    );
  }
}
@media (prefers-reduced-transparency: reduce) {
  .ab-fold { display: none; }
}

/* ---------------------------------------------------------------------------
   Shared primitives
   --------------------------------------------------------------------------- */

/* the two page-halves — a centered pair hugging the crease */
.ab-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: var(--spread);
  margin-inline: auto;
}
@media (min-width: 50em) {
  .ab-spread {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .ab-pg--l { padding-left: var(--edge); padding-right: var(--crease-gap); }
  .ab-pg--r { padding-left: var(--crease-gap); padding-right: var(--edge); }
}
@media (max-width: 49.98em) {
  .ab-pg { padding-inline: var(--edge); }
}

/* mono voice for every label, caption, number tag */
.ab-kicker,
.ab-dateline,
.ab-ch__tag,
.ab-fig figcaption,
.ab-stat__label,
.ab-pull__note {
  font-family: var(--font-mono);
}

/* figures — flat print photography: square corners, no box, mono caption */
.ab-fig {
  margin: 0;
}
.ab-fig video,
.ab-fig img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
  background: rgba(56, 57, 61, 0.06);
}
/* videos get fixed aspect boxes so lazy-loading never shifts the layout
   (a late height change also left the footer's scroll triggers stale) */
.ab-fig video {
  aspect-ratio: 9 / 16;          /* portrait plates by default */
  object-fit: cover;
}
/* plate captions: hairline rule between plate and caption — the classic
   architectural-figure detail, identical on every figure */
.ab-fig figcaption {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* prose — justified and squared, like set type. NO auto-hyphenation: the
   browser was breaking words with hyphens ("agen-cies"), which fights the
   brand's no-hyphens voice rule. */
.ab-prose p {
  font-size: var(--fs-body);
  line-height: var(--lead-read);
  color: var(--ink-body);
  max-width: 30rem;
  text-align: justify;
  -webkit-hyphens: none;
  hyphens: none;
}
.ab-prose p + p {
  margin-top: 1.1em;
}
/* drop cap opens the story — the origin body copy ONLY, never the coda */
.ab-ch--origin .ab-spread:not(.ab-said) .ab-prose p:first-child::first-letter {
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  font-weight: 600;
  color: var(--ink);
}

/* standfirst */
.ab-lead {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 24ch;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   CHAPTERS — giant outline numeral cropped at the page edge + mono tag
   --------------------------------------------------------------------------- */
.ab-ch {
  position: relative;
  overflow: hidden;             /* crops the giant numeral at the edges */
  padding-block: var(--sp-4);
}
.ab-ch > * {
  position: relative;
  z-index: 1;
}
.ab-ch__no {
  position: absolute;
  z-index: 0;
  top: clamp(-1.2rem, -1.5vw, -0.6rem);
  line-height: 0.78;
  font-size: var(--fs-giant);
  font-weight: 700;
  letter-spacing: -0.06em;
  user-select: none;
  /* architectural drawing: outlined, not filled */
  color: rgba(56, 57, 61, 0.055);
}
@supports (-webkit-text-stroke: 1px black) {
  .ab-ch__no {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(56, 57, 61, 0.22);
  }
}
.ab-ch__no--l { left: -0.045em; }
.ab-ch__no--r { right: -0.045em; }

.ab-ch__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.ab-ch__tag::after {
  content: "";
  width: clamp(3rem, 6vw, 5rem);
  height: 1px;
  background: var(--rule);
  align-self: center;
}
/* tags align with the centered spread, not the viewport edge */
.ab-ch .ab-ch__tag { margin-left: var(--spread-inset); }
.ab-ch--today .ab-ch__tag {
  margin-left: 0;
  margin-right: var(--spread-inset);
  float: right;
  flex-direction: row-reverse;
}
.ab-ch--today .ab-ch__tag + * { clear: both; }

/* ---------------------------------------------------------------------------
   MASTHEAD — dateline rail, headline across the fold, deck, opening figure
   --------------------------------------------------------------------------- */
.ab-mast {
  padding-top: clamp(4.5rem, 11vh, 7rem);
  padding-bottom: var(--sp-3);
  text-align: center;
}
.ab-mast__rail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: calc(var(--spread) - 2 * var(--edge));
  margin-inline: auto;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--rule);   /* the masthead rule */
}
/* Phones: the rail is full-bleed there (the spread cap never bites) and its
   tracked mono strings were CLIPPED at both screen edges — inset it like the
   rest of the page and let the dateline wrap instead of overflowing. */
@media (max-width: 50em) {
  .ab-mast__rail {
    padding-inline: var(--edge);
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .ab-dateline { white-space: normal; }
}
.ab-kicker {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.ab-dateline {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ab-mast__title {
  margin: var(--sp-2) auto 0;
  max-width: calc(var(--spread) - 2 * var(--edge));
  padding-inline: var(--edge);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* Desktop: the headline is sized to span EXACTLY the same width as the
   content columns — one line, flush to both text margins, like a wordmark.
   25 glyphs at this face+tracking ≈ 11.55em of line length (measured). */
@media (min-width: 50em) {
  .ab-mast__title {
    padding-inline: 0;
    text-align: left;
    white-space: nowrap;
    font-size: min(calc((100vw - 2 * var(--edge)) / 11.55), calc((var(--spread) - 2 * var(--edge)) / 11.55));
  }
}
.ab-mast__deck {
  margin: var(--sp-1) auto 0;
  max-width: calc(var(--spread) - 2 * var(--edge));
  padding-inline: var(--edge);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: var(--lead-snug);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
@media (min-width: 50em) {
  .ab-mast__deck { padding-inline: 0; text-align: left; }
}
/* Phones: the centred deck used to break as a long line + "a week." orphan on
   tight leading — unbalanced next to the title above it. Balanced wrap + a
   measure cap split it into two even lines, and the leading opens up so the
   standfirst breathes like the headline does. */
@media (max-width: 49.98em) {
  .ab-mast__deck {
    margin-top: clamp(1rem, 3vw, 1.4rem);
    max-width: 26ch;
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* ---------------------------------------------------------------------------
   01 · ORIGIN
   --------------------------------------------------------------------------- */
.ab-origin__lead {
  margin-bottom: var(--sp-2);
}
/* the founders plate fills its column — both edges on the grid */
.ab-fig--founders {
  margin-top: var(--sp-2);
  width: 100%;
}
/* plates that fill their column edge to edge — landscape crop so justified
   margins hold without towering portrait heights */
.ab-fig--wide { width: 100%; }
.ab-fig--wide video { aspect-ratio: 4 / 3; }
.ab-fig--v1 {
  margin-top: var(--sp-2);
}

/* "The first one said yes." + coda — a tight ruled text band across the
   spread: quote on the left page, the Wilkinson line answering vertically
   centered on the right. No plates; dense and quiet. */
.ab-said {
  margin-top: var(--sp-3);
  padding-block: var(--sp-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--hair);
  align-items: center;
}
.ab-pull {
  margin: 0;
  border: 0;
  text-align: left;
}
/* the short rule introduces the quote — same mark as the chapter tags */
.ab-pull::before {
  content: "";
  display: block;
  width: clamp(2.6rem, 5vw, 4rem);
  height: 1px;
  background: var(--rule);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.ab-pull p {
  font-size: var(--fs-head);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 13ch;              /* breaks as "The first one / said yes." */
}
.ab-pull__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ab-said__coda p { max-width: 26rem; }

/* ---------------------------------------------------------------------------
   02 · TODAY — the numbers ARE the layout
   --------------------------------------------------------------------------- */
.ab-today__open { align-items: center; }
/* the "today" line — the chapter's whole voice, set LARGE so the text block
   stands the same height as the plate beside it: no blank air on the page */
.ab-today__line {
  font-size: clamp(1.45rem, 1.05rem + 1.75vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

/* the numbers strip — four equal columns on the SAME margins as the text
   spread, every numeral centered over its centered label, all sitting on
   matching hairlines. The crease falls exactly in the center gutter. */
.ab-stats {
  max-width: var(--spread);
  margin: var(--sp-3) auto 0;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
@media (min-width: 50em) {
  .ab-stats { grid-template-columns: repeat(4, 1fr); }
}
.ab-stat {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-1);
  text-align: center;
}
.ab-stat__fig {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.ab-stat__label {
  display: block;
  margin: 0.85rem auto 0;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 16ch;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   03 · QUESTIONS — Q on the left page, A on the right, index-row rules.
   Copy is mirrored by FAQPage JSON-LD in the head; keep them in sync.
   --------------------------------------------------------------------------- */
.ab-faq {
  max-width: var(--spread);
  margin-inline: auto;
}
.ab-faq__row {
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
}
.ab-faq__row:last-child {
  border-bottom: 1px solid var(--hair);
}
.ab-faq__q {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 18ch;
}
@media (max-width: 49.98em) {
  .ab-faq__a { margin-top: 0.7rem; }
}

/* ---------------------------------------------------------------------------
   APPENDIX — the quiet doorway to /journal/. A single hairline row at the
   foot of chapter 03: spinning CD (the homepage's disc, carried through),
   mono tag, one line, arrow. Deliberately understated.
   --------------------------------------------------------------------------- */
.ab-appendix {
  max-width: var(--spread);
  margin: var(--sp-4) auto 0;
  padding: var(--sp-1) var(--edge);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  text-decoration: none;
  color: var(--ink);
}
.ab-appendix__cd {
  width: clamp(34px, 4vw, 44px);
  height: auto;
  animation: ab-spin 16s linear infinite;
  flex: none;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-appendix__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: none;
}
.ab-appendix__line {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: opacity 0.25s ease;
}
.ab-appendix__arrow {
  margin-left: auto;
  font-size: 1.1rem;
  transition: transform 0.3s var(--ease);
}
.ab-appendix:hover .ab-appendix__line { opacity: 0.65; }
.ab-appendix:hover .ab-appendix__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ab-appendix__cd { animation: none; } }
@media (max-width: 40em) {
  /* Phones: recomposed as ONE cohesive tappable card — an iOS-style list row.
     The spinning disc anchors the left rail spanning both text rows, the mono
     tag caps the balanced two-line title, and the arrow sits in a circled
     chip on the right (the same mark as the deck controls and the accordion
     chevrons). The full hairline round-rect replaces the bare top/bottom
     rules, so it reads as a button, not a stray ruled band; balanced wrapping
     kills the "growth" orphan line. */
  .ab-appendix {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "cd tag arrow"
      "cd line arrow";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
    margin-inline: var(--edge);
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(56, 57, 61, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.35);
  }
  .ab-appendix:active { background: rgba(255, 255, 255, 0.6); }
  .ab-appendix__cd { grid-area: cd; width: 46px; }
  .ab-appendix__tag { grid-area: tag; align-self: end; }
  .ab-appendix__arrow {
    grid-area: arrow;
    margin-left: 0;
    justify-self: end;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(56, 57, 61, 0.3);
    border-radius: 50%;
    font-size: 1rem;
  }
  .ab-appendix__line {
    grid-area: line;
    align-self: start;
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* ---------------------------------------------------------------------------
   CLOSER — the main page's robot end-card, byte-for-byte the same markup,
   styled by pages.css via the .pages.blocks wrapper. Only page-specific bit:
   breathing room above so it doesn't sit flush on the wide clip.
   --------------------------------------------------------------------------- */
.ab-closer .sec--closer {
  padding-top: var(--sp-4);
}

/* ---------------------------------------------------------------------------
   Load reveal — quiet, masthead only
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ab-mast > * {
    opacity: 0;
    transform: translateY(14px);
    animation: abIn 0.85s var(--ease) forwards;
  }
  .ab-mast__rail { animation-delay: 0.04s; }
  .ab-mast__title { animation-delay: 0.14s; }
  .ab-mast__deck { animation-delay: 0.26s; }
}
@keyframes abIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   FOLDED RULES — every hairline that runs the full spread would otherwise
   cross the crease dead straight, which flattens the magazine illusion. On
   desktop those borders go transparent (widths kept, so layout is identical)
   and a pseudo-element redraws each line in three layers: two flat 1px
   gradients for the straight runs, and a 12rem SVG centered on the crease
   where the line CURVES — a smooth 4.5px sag into the gutter, its stroke
   thinning slightly as it turns away from the light, with a soft blurred
   shading hugging the dip (the crevice). The .ab-fold gloss/shadow overlay
   sits above (z-index 6) and completes the valley. Column-local rules
   (figcaptions, stats, chapter tags) never touch the crease and stay
   plain borders.
   --------------------------------------------------------------------------- */
@media (min-width: 50em) {
  .ab-mast__rail,
  .ab-said,
  .ab-faq__row,
  .ab-appendix {
    position: relative;
    border-color: transparent;
  }

  .ab-mast__rail::after,
  .ab-said::before,
  .ab-said::after,
  .ab-faq__row::before,
  .ab-faq__row:last-child::after,
  .ab-appendix::before,
  .ab-appendix::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: none;
    --fold-rule: var(--rule);
    /* the curved center: line at y=.5 sags to y=5 across the middle 4rem,
       stroke fading to ~half ink at the bottom of the valley; the wider
       blurred stroke above it is the crevice shading */
    --fold-dip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='8' viewBox='0 0 192 8'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='rgb(56,57,61)' stop-opacity='.9'/><stop offset='.32' stop-color='rgb(56,57,61)' stop-opacity='.9'/><stop offset='.5' stop-color='rgb(56,57,61)' stop-opacity='.48'/><stop offset='.68' stop-color='rgb(56,57,61)' stop-opacity='.9'/><stop offset='1' stop-color='rgb(56,57,61)' stop-opacity='.9'/></linearGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='0'><stop offset='.27' stop-color='rgb(56,57,61)' stop-opacity='0'/><stop offset='.5' stop-color='rgb(56,57,61)' stop-opacity='.26'/><stop offset='.73' stop-color='rgb(56,57,61)' stop-opacity='0'/></linearGradient><filter id='b' x='-0.05' y='-4' width='1.1' height='9'><feGaussianBlur stdDeviation='.8'/></filter></defs><path d='M0 .5 L64 .5 C80 .5 88 5 96 5 C104 5 112 .5 128 .5 L192 .5' fill='none' stroke='url(%23s)' stroke-width='2.4' filter='url(%23b)' transform='translate(0 -0.6)'/><path d='M0 .5 L64 .5 C80 .5 88 5 96 5 C104 5 112 .5 128 .5 L192 .5' fill='none' stroke='url(%23g)' stroke-width='1'/></svg>");
    background:
      var(--fold-dip) top center / 12rem 8px no-repeat,
      linear-gradient(var(--fold-rule), var(--fold-rule)) top left /
        calc(50% - 6rem + 0.5px) 1px no-repeat,
      linear-gradient(var(--fold-rule), var(--fold-rule)) top right /
        calc(50% - 6rem + 0.5px) 1px no-repeat;
  }

  /* top rules sit where the old border-top drew */
  .ab-said::before,
  .ab-faq__row::before,
  .ab-appendix::before {
    top: 0;
  }
  /* bottom rules line up with the old border-bottom (dip overhangs below) */
  .ab-mast__rail::after,
  .ab-said::after,
  .ab-faq__row:last-child::after,
  .ab-appendix::after {
    bottom: -7px;
  }
  /* the faint closing rules keep their lighter ink, whisper of shading */
  .ab-said::after,
  .ab-faq__row:last-child::after,
  .ab-appendix::after {
    --fold-rule: var(--hair);
    --fold-dip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='8' viewBox='0 0 192 8'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='rgb(56,57,61)' stop-opacity='.13'/><stop offset='.32' stop-color='rgb(56,57,61)' stop-opacity='.13'/><stop offset='.5' stop-color='rgb(56,57,61)' stop-opacity='.07'/><stop offset='.68' stop-color='rgb(56,57,61)' stop-opacity='.13'/><stop offset='1' stop-color='rgb(56,57,61)' stop-opacity='.13'/></linearGradient><linearGradient id='s' x1='0' y1='0' x2='1' y2='0'><stop offset='.27' stop-color='rgb(56,57,61)' stop-opacity='0'/><stop offset='.5' stop-color='rgb(56,57,61)' stop-opacity='.08'/><stop offset='.73' stop-color='rgb(56,57,61)' stop-opacity='0'/></linearGradient><filter id='b' x='-0.05' y='-4' width='1.1' height='9'><feGaussianBlur stdDeviation='.8'/></filter></defs><path d='M0 .5 L64 .5 C80 .5 88 5 96 5 C104 5 112 .5 128 .5 L192 .5' fill='none' stroke='url(%23s)' stroke-width='2.4' filter='url(%23b)' transform='translate(0 -0.6)'/><path d='M0 .5 L64 .5 C80 .5 88 5 96 5 C104 5 112 .5 128 .5 L192 .5' fill='none' stroke='url(%23g)' stroke-width='1'/></svg>");
  }
}