/* Field-notes stylesheet — the printed notebook shell and the pages migrated to
   it. Loaded by _LayoutPaper with tokens.css; the legacy site.css is never
   loaded alongside it. docs/design/DESIGN_SYSTEM.md is the normative spec and
   docs/design/prototypes/*.dc.html are the reference renders. */

/* ---------------------------------------------------------------- base --- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--surface-page);
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--surface-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #2E2822;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

[id], section, h2, h3 { scroll-margin-top: 104px; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); }
img, video, svg { max-width: 100%; }
::selection { background: rgba(200, 90, 50, .35); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The terracotta full stop that closes every heading. */
.pp-dot { color: var(--accent); }

@keyframes om-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes om-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes om-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Cross-fade between pages instead of a white flash. Native to the browser:
   no framework, no spinner, and nothing to wait for — the page was already
   fast, this only stops the seam from showing. Browsers without it navigate
   exactly as before. The nav capsule is named so it stays put across the
   transition rather than fading with the rest. */
@view-transition { navigation: auto; }
.paper-nav { view-transition-name: paper-nav; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------- helpers --- */
.pp-gutter { padding-inline: var(--gutter); }
.pp-rhythm { margin-top: var(--rhythm-editorial); }

.pp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-stamp);
  font-size: var(--label-emph);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.pp-section-title {
  font-weight: var(--weight-display-bold);
  font-size: var(--text-section);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-section);
  margin: 16px 0 0;
  color: var(--text-section-heading);
}

/* Mono meta line prefixed by a short olive rule. */
.pp-meta {
  display: inline-flex;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .12em;
  color: var(--accent-secondary);
  white-space: nowrap;
}
.pp-meta::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent-secondary);
  opacity: .7;
}

/* Paper surfaces. --sheet sets the tone, the grain is always the same print. */
.pp-sheet {
  background-color: var(--sheet, var(--surface-card));
  background-image: var(--grain-dots), var(--grain-wash);
  background-size: var(--grain-dots-size), var(--grain-wash-size);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-soft);
}
.pp-sheet--ink {
  background-image: var(--grain-dots-ink), var(--grain-wash-ink);
}

/* A coloured sheet peeking out from behind a card. Never two on one card. */
.pp-backsheet {
  position: absolute;
  background: var(--accent-secondary-soft);
  border: 1px solid rgba(74, 62, 61, .3);
  border-radius: var(--radius-curl-sm);
  pointer-events: none;
}

/* ------------------------------------------------------------- buttons --- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.pp-btn:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }

.pp-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 16px 32px;
  font-size: 16px;
  font-weight: var(--weight-body-strong);
  transition: background var(--dur-fast) ease;
}
.pp-btn--primary:hover { background: var(--charcoal); color: var(--text-on-accent); }

.pp-btn--secondary {
  background: rgba(247, 241, 232, .94);
  color: #171412;
  border: 1.5px solid rgba(23, 20, 18, .22);
  padding: 14.5px 30.5px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-display-bold);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pp-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

/* The reduced primary used to close a page. */
.pp-btn--compact {
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 14px 26px;
  font-size: 14px;
  font-weight: var(--weight-body-strong);
  transition: background var(--dur-fast) ease;
}
.pp-btn--compact:hover { background: var(--charcoal); color: var(--text-on-accent); }

.pp-btn--ink {
  background: var(--charcoal);
  color: var(--text-on-accent);
  padding: 16px 32px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-display-bold);
  box-shadow: 0 8px 20px rgba(23, 20, 18, .15);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pp-btn--ink:hover { background: var(--accent); color: var(--text-on-accent); }

/* Mono link with a hairline underline — "VIEW ALL WORK →". */
.pp-link {
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: .1em;
  color: var(--text-nav);
  border-bottom: 1px solid rgba(74, 62, 61, .4);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.pp-link:hover { color: var(--accent); }

/* One arrow convention: → walks right, ↗ walks up and right. */
.pp-arrow { display: inline-block; transition: transform var(--dur-fast) ease; }
[data-link-row]:hover .pp-arrow,
[data-link-row]:focus-visible .pp-arrow { transform: translateX(3px); }
[data-link-row]:hover .pp-arrow--out,
[data-link-row]:focus-visible .pp-arrow--out { transform: translate(3px, -3px); }

/* ---------------------------------------------------------- stack tag --- */
.pp-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  font-weight: var(--weight-body-strong);
  line-height: 1;
  letter-spacing: var(--ls-tag);
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-stamp);
  border: 1.5px dashed rgba(var(--tag-rgb), .62);
  color: rgb(var(--tag-rgb));
  background-color: rgba(var(--tag-rgb), .1);
  background-image:
    repeating-linear-gradient(var(--tag-angle), rgba(var(--tag-rgb), .2) 0 1.4px, transparent 1.4px 4.8px),
    repeating-linear-gradient(calc(var(--tag-angle) - 96deg), rgba(var(--tag-rgb), .1) 0 1.2px, transparent 1.2px 6.6px);
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------- nav ----- */
.paper-nav {
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(12px, 3vw, 18px);
  pointer-events: none;
}

.paper-nav__bar {
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  width: 100%;
  max-width: var(--content-max);
  height: 70px;
  padding: 0 12px 0 26px;
  background-color: rgba(241, 224, 191, .9);
  background-image: var(--grain-nav);
  background-size: var(--grain-dots-size);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav-rest);
  transition: background-color .3s ease-out, box-shadow .3s ease-out, height .3s ease-out;
}
.paper-nav__bar[data-scrolled] {
  height: 60px;
  background-color: rgba(241, 224, 191, .97);
  box-shadow: var(--shadow-nav-scrolled);
}

/* Wordmark: two margin marks, then the name. Never the other way round. */
.paper-wordmark {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: 25px;
}
.paper-wordmark__marks {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-right: 9px;
}
.paper-wordmark__marks i { display: block; background: var(--accent); }
.paper-wordmark__marks i:first-child { width: 2.5px; height: .58em; }
.paper-wordmark__marks i:last-child { width: 1.5px; height: .44em; transform: translateY(-.1em); }
.paper-wordmark__name {
  font-family: var(--font-brand);
  font-weight: var(--weight-body-strong);
  letter-spacing: -.01em;
  color: var(--ink-800);
  line-height: 1;
}

.paper-nav__right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-left: auto;
}

.paper-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-nav);
}

.paper-nav__link {
  position: relative;
  text-transform: uppercase;
  color: var(--text-nav);
  padding: 4px 2px;
  transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.paper-nav__link:hover { color: #1F1812; box-shadow: 0 9px 0 -7px var(--accent); }

/* Active page: rule — diamond — rule, 8px under the label. */
.paper-nav__link.is-active { color: #1F1812; }
.paper-nav__link.is-active::after,
.paper-nav__link.is-active::before {
  content: "";
  position: absolute;
  bottom: -8px;
  pointer-events: none;
}
.paper-nav__link.is-active::after {
  left: 0; right: 0;
  height: 1px;
  background:
    linear-gradient(var(--accent), var(--accent)) left center / calc(50% - 6px) 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center / calc(50% - 6px) 1px no-repeat;
}
.paper-nav__link.is-active::before {
  left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  margin-bottom: -1.5px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* Language pill. A details/summary menu so it works with JavaScript off. */
.paper-lang { position: relative; flex: none; }
.paper-lang__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-sheet-warm);
  border: 1px solid rgba(74, 52, 37, .35);
  border-radius: var(--radius-pill);
  padding: 6px 12px 6px 7px;
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: .08em;
  color: var(--ink-800);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) ease;
}
.paper-lang__summary::-webkit-details-marker { display: none; }
.paper-lang__summary:hover { border-color: rgba(74, 52, 37, .65); }
.paper-lang__flag {
  width: 16px; height: 16px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex: none;
}
.paper-lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: var(--surface-card);
  background-image: var(--grain-dots);
  background-size: var(--grain-dots-size);
  border: 1px solid rgba(74, 52, 37, .3);
  box-shadow: 0 12px 26px rgba(55, 41, 29, .13);
}
.paper-lang__option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .15em;
  color: var(--text-nav);
}
.paper-lang__option:hover { color: var(--accent); background: rgba(200, 90, 50, .08); }
.paper-lang__option[aria-current="true"] { color: var(--accent); }

.paper-nav__cta {
  background: var(--paper-sheet-warm);
  color: var(--ink-800);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-nav-cta);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: var(--weight-display-bold);
  white-space: nowrap;
  flex: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.paper-nav__cta:hover { background: #4A3425; color: var(--paper-sheet-warm); }

.paper-nav__toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  background: var(--paper-sheet-warm);
  border: 1px solid rgba(74, 52, 37, .35);
  border-radius: var(--radius-pill);
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-label);
  color: var(--ink-800);
  cursor: pointer;
  flex: none;
}
.paper-nav__toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 15px;
}
.paper-nav__toggle-bars i { display: block; height: 1.5px; background: rgba(121, 81, 60, .75); }
.paper-nav__toggle-bars i:first-child { background: var(--accent); }

.paper-nav__drawer {
  pointer-events: auto;
  width: 100%;
  max-width: var(--content-max);
  margin-top: 9px;
  padding: 14px 20px 18px;
  background-color: rgba(241, 224, 191, .98);
  background-image: var(--grain-nav);
  background-size: var(--grain-dots-size);
  border: 1px solid var(--border-hair);
  border-radius: 24px;
  box-shadow: 0 10px 26px rgba(74, 52, 37, .16), inset 0 0 0 4px rgba(252, 246, 234, .35);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paper-nav__drawer a {
  display: flex;
  text-transform: uppercase;
  align-items: center;
  min-height: 46px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--weight-body-md);
  letter-spacing: .15em;
  color: var(--text-nav);
  border-bottom: 1px dashed rgba(74, 52, 37, .24);
}
.paper-nav__drawer .paper-nav__drawer-cta {
  justify-content: center;
  min-height: 48px;
  margin-top: 14px;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-button);
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-body-strong);
  letter-spacing: normal;
}
.paper-nav__drawer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .15em;
}
.paper-nav__drawer-langs a { min-height: 0; border-bottom: 0; }

@media (max-width: 879px) {
  .paper-nav__right { display: none; }
  .paper-nav__toggle { display: flex; }
}
@media (min-width: 880px) {
  .paper-nav__drawer { display: none; }
}

/* ------------------------------------------------------------- footer --- */
.paper-footer { position: relative; }

/* Horizon: two rules meeting a rising sun between olive hills. */
.paper-horizon {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: clamp(30px, 3.4vw, 52px) var(--gutter) 0;
  opacity: .5;
}
.paper-horizon i {
  flex: 1;
  height: 1px;
  background: var(--ink-400);
  display: block;
}
.paper-horizon svg { flex: none; display: block; }

.paper-contact {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
}
.paper-contact__lead { flex: 1 1 260px; min-width: 0; }
.paper-contact__heading {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}
.paper-contact__heading h2 {
  font-weight: var(--weight-display-bold);
  font-size: var(--text-footer-heading);
  letter-spacing: var(--ls-display);
  line-height: 1.02;
  margin: 14px 0 0;
  color: var(--text-section-heading);
  white-space: nowrap;
}
.paper-contact__card-wrap {
  position: relative;
  flex: 0 1 540px;
  min-width: 0;
  margin-top: -10px;
  margin-right: clamp(0px, 5vw, 76px);
}
.paper-contact__backsheet {
  inset: 12px -12px -12px 12px;
  transform: rotate(.7deg);
  opacity: .6;
}
.paper-contact__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
}
.paper-contact__card h3 {
  font-weight: var(--weight-display-bold);
  font-size: var(--text-h3);
  letter-spacing: var(--ls-section);
  line-height: 1.18;
  max-width: 26ch;
  color: var(--text-heading);
}
.paper-contact__card p {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: var(--lh-body);
  max-width: 46ch;
  color: var(--text-body);
}
.paper-contact__card .pp-btn { margin-top: 12px; }

.paper-footer__rule {
  margin: clamp(64px, 5vw, 80px) var(--gutter) 0;
  height: 1px;
  background: rgba(74, 52, 37, .3);
}

.paper-footer__bar {
  margin: clamp(14px, 1.6vw, 20px) var(--gutter) clamp(24px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(16px, 2.2vw, 26px);
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-nav);
}
.paper-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(14px, 1.8vw, 22px);
}
.paper-footer__nav a {
  color: var(--text-nav);
  text-transform: uppercase;
  padding: 4px 2px;
  transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.paper-footer__nav a:hover { color: #1F1812; box-shadow: 0 9px 0 -7px var(--accent); }
.paper-footer__spacer { flex: 1; min-width: 20px; }
.paper-footer__top {
  color: var(--text-nav);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-hair);
  padding-bottom: 3px;
  transition: color var(--dur-fast) ease;
}
.paper-footer__top:hover { color: var(--accent); }

/* Closing register mark. Home only, and never repeated between sections. */
.paper-edge { height: 4px; background: var(--accent); }

/* =========================================================== home page === */
.home-hero { position: relative; overflow: hidden; }
.home-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--hero-pad-top) var(--gutter) 0;
}
.home-hero__copy h1 {
  font-weight: var(--weight-display);
  font-size: clamp(40px, min(5.2vw, 8.8svh), 72px);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  max-width: 19ch;
  color: var(--text-heading);
  text-shadow: var(--halo-cream);
}
.home-hero__sub {
  font-size: var(--text-hero-sub);
  line-height: var(--lh-body);
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--text-heading);
  font-weight: var(--weight-body-md);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(238, 223, 199, .9), 0 0 14px rgba(238, 223, 199, .95), 0 0 28px rgba(238, 223, 199, .85);
}
.home-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* The artwork rises behind the copy; this is the only composition offset. */
.home-skyline {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: var(--hero-skyline-pull);
}
.home-skyline img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -10%;
  pointer-events: none;
}

.home-stack-intro { padding: clamp(32px, 3.2vw, 48px) var(--gutter) 0; }
.home-stack {
  margin: 0 var(--gutter);
  padding: 36px 0 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 1099px) { .home-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .home-stack { grid-template-columns: 1fr; } }

.stack-card {
  background-color: var(--card-tone);
  background-image: var(--grain-dots), var(--grain-wash);
  background-size: var(--grain-dots-size), var(--grain-wash-size);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-base) ease;
  padding: 28px 20px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #171412;
}
.stack-card:hover { box-shadow: var(--shadow-hover); }

.stack-card__medallion {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid rgba(74, 62, 61, .4);
  box-shadow: inset 0 0 0 6px rgba(74, 62, 61, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s;
}
.stack-card:hover .stack-card__medallion {
  transform: rotate(-8deg) translateY(-6px) scale(1.07);
  filter: drop-shadow(0 16px 16px rgba(23, 20, 18, .28));
}
.stack-card__medallion img { display: block; filter: sepia(.12) saturate(.9); }

.stack-card h3 {
  font-weight: var(--weight-display-bold);
  font-size: 24px;
  letter-spacing: var(--ls-section);
  line-height: 1.15;
  margin: 16px 0 0;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack-card__lead {
  font-size: 14.5px;
  line-height: var(--lh-card);
  color: var(--text-body);
  margin: 6px 0 0;
  text-align: center;
  max-width: 26ch;
  min-height: 68px;
}

.stack-card__panel {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid rgba(74, 62, 61, .32);
  border-radius: var(--radius-sheet);
  padding: 24px 14px 12px;
  position: relative;
  margin-top: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.stack-card__panel-label {
  position: absolute;
  text-transform: uppercase;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-body-strong);
  letter-spacing: .13em;
  background: var(--card-ink);
  color: var(--text-on-accent);
  border-radius: var(--radius-pill);
  padding: 4px 13px;
  white-space: nowrap;
}
.stack-card__flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}
.stack-card__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.stack-card__node span,
.stack-card__grid span {
  font-size: 10.5px;
  font-weight: var(--weight-display-bold);
  text-align: center;
  line-height: 1.25;
  color: #2E2822;
}
.stack-card__link {
  height: 28px;
  display: flex;
  align-items: center;
  color: var(--card-ink);
  font-size: 14px;
  font-weight: var(--weight-body-strong);
  flex: none;
}
.stack-card__rows { margin-top: 16px; }
.stack-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px dashed rgba(74, 62, 61, .28);
  font-size: 13px;
  font-weight: var(--weight-display-bold);
}
.stack-card__row img { display: block; filter: sepia(.12) saturate(.9); }
.stack-card__chip {
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-display-bold);
  color: var(--card-ink);
  flex: none;
}
.stack-card__chip--solid {
  border-radius: 5px;
  background: var(--card-ink);
  color: var(--text-on-accent);
  font-size: 9.5px;
}
.stack-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: clamp(16px, 4vh, 34px);
  column-gap: 8px;
  padding: 4px 0;
}
.stack-card__grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.stack-card__terminal {
  width: 44px; height: 32px;
  border-radius: 7px;
  background: #33291C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-display-bold);
  color: #F0E3C8;
}
.stack-card__ornament { position: absolute; pointer-events: none; }

/* --- featured work ------------------------------------------------------- */
.home-work {
  position: relative;
  margin: 64px 0 0;
  padding: 0 var(--gutter);
}
.home-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.home-work__head .pp-link { margin-bottom: 6px; }
.home-work__split {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 40px;
}
.home-work__visual { flex: 57 1 440px; min-width: 0; }
.home-work__frame-wrap { position: relative; }
.home-work__backsheet {
  inset: 14px -14px -14px 14px;
  border-radius: 14px 14px 40px 14px;
  transform: rotate(.8deg);
  box-shadow: var(--shadow-soft);
}
.home-work__frame {
  display: block;
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sheet);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.home-work__frame:hover,
.home-work__frame:focus-visible { transform: var(--lift-card); box-shadow: var(--shadow-hover); }
.home-work__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(74, 62, 61, .18);
}
.home-work__dots { display: flex; gap: 5px; flex: none; }
.home-work__dots i { width: 6px; height: 6px; border-radius: 50%; }
.home-work__dots i:nth-child(1) { background: rgba(23, 20, 18, .22); }
.home-work__dots i:nth-child(2) { background: rgba(23, 20, 18, .16); }
.home-work__dots i:nth-child(3) { background: rgba(23, 20, 18, .11); }
.home-work__url {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .1em;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The recording frames the product card edge to edge at 1024x498. cover, never
   contain: contain would letterbox and put back the dead space the close-up
   capture exists to remove. */
.home-work__frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 498;
  object-fit: cover;
  background-color: #08090b;
  pointer-events: none;
}
/* The ornament travels with the artwork: in flow, never absolute. */
.home-work__hills {
  display: block;
  width: clamp(170px, 19vw, 290px);
  height: auto;
  margin: 26px 0 0;
  pointer-events: none;
  opacity: .45;
}
.home-work__editorial {
  flex: 43 1 330px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-work__editorial h3 {
  font-weight: var(--weight-display-bold);
  font-size: var(--text-project-title);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-hero);
  color: var(--text-heading);
}
.home-work__summary {
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  max-width: var(--measure-excerpt);
  margin: 16px 0 0;
  color: var(--text-body);
}
.home-work__context {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  max-width: 48ch;
  margin: 12px 0 0;
  color: var(--text-body);
}
.home-work__highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.home-work__highlight { display: flex; gap: 13px; align-items: flex-start; }
.home-work__highlight::before {
  content: "";
  flex: none;
  width: 16px; height: 1px;
  background: var(--accent);
  margin-top: 11px;
}
.home-work__highlight p {
  font-size: 14.5px;
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: var(--measure-excerpt);
}
.home-work__editorial .pp-meta { margin-top: 22px; }
.home-work__editorial .pp-btn { margin-top: 26px; }

/* --- writing ------------------------------------------------------------- */
.home-writing { position: relative; }
.home-writing__dotfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 6px 6px, rgba(121, 81, 60, .14) 1.4px, transparent 1.8px),
    radial-gradient(circle at 20px 22px, rgba(121, 81, 60, .1) 1px, transparent 1.4px);
  background-size: 34px 34px, 46px 42px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 12%, transparent 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 12%, transparent 88%, #000 100%);
  opacity: .35;
}
.home-writing__crown {
  position: absolute;
  right: clamp(4px, 2.4vw, 36px);
  top: 10px;
  width: clamp(240px, 28vw, 350px);
  height: auto;
  pointer-events: none;
}
.home-writing__intro {
  position: relative;
  padding: 32px var(--gutter) 0;
}
.home-writing__deck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.home-writing__deck p {
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  max-width: var(--measure-body);
  color: var(--text-body);
}
/* The languages line is wider than a phone; it folds instead of dragging the
   whole page sideways. */
@media (max-width: 479px) {
  .home-writing__deck .pp-meta { white-space: normal; }
}

.home-writing__body {
  margin: 40px var(--gutter) 0;
  position: relative;
}
.home-writing__blob {
  position: absolute;
  left: -3%;
  bottom: 24px;
  width: 50%;
  min-width: 300px;
  height: auto;
  pointer-events: none;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 62%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 22%);
  mask-composite: intersect;
}
.home-writing__grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: stretch;
}
.home-writing__lead { position: relative; flex: 58 1 340px; min-width: 0; display: flex; }
.home-writing__aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 42 1 300px;
  min-width: 0;
  position: relative;
}

/* Editorial spine in the gutter between the two columns. */
.home-writing__spine {
  position: absolute;
  left: -15px; top: 6px; bottom: 6px;
  width: 1px;
  border-left: 1px dashed rgba(121, 81, 60, .35);
  pointer-events: none;
}
.home-writing__spine-star { position: absolute; left: -21px; top: 16%; opacity: .5; pointer-events: none; }
.home-writing__spine-dot {
  position: absolute;
  left: -17px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
  pointer-events: none;
}
@media (max-width: 819px) {
  .home-writing__spine,
  .home-writing__spine-star,
  .home-writing__spine-dot { display: none; }
}

.post-sheet {
  display: block;
  position: relative;
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
  box-sizing: border-box;
}
.post-sheet:hover,
.post-sheet:focus-visible { transform: var(--lift-card); box-shadow: var(--shadow-hover); }

.post-sheet--lead {
  background-color: var(--surface-card);
  background-image: var(--grain-dots-ink), var(--grain-wash-ink), linear-gradient(rgba(74, 62, 61, .03) 1px, transparent 1px);
  background-size: var(--grain-dots-size), var(--grain-wash-size), 100% 30px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: flex-start;
  min-height: 100%;
  width: 100%;
  min-width: 0;
}
.post-sheet--lead > * { position: relative; z-index: 1; }
.post-sheet__art {
  position: absolute;
  right: 8px; bottom: 64px;
  width: min(36%, 200px);
  height: auto;
  max-height: 46%;
  pointer-events: none;
  opacity: .12;
  z-index: 0;
}
.post-sheet__tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-sheet--lead h3 {
  font-weight: var(--weight-display-bold);
  font-size: var(--text-project-title);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-hero);
  margin: 18px 0 0;
  color: var(--text-heading);
  text-wrap: balance;
}
.post-sheet--lead p {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--text-body);
}
.post-sheet__footer {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 32px;
}
.post-sheet__date {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  letter-spacing: .08em;
  color: var(--text-body);
  white-space: nowrap;
}
.post-sheet__langs {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .12em;
  color: var(--accent-secondary);
  white-space: nowrap;
}
.post-sheet__cta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--label-base);
  font-weight: var(--weight-body-strong);
  letter-spacing: .1em;
  color: var(--accent);
  margin-left: auto;
  white-space: nowrap;
  position: relative;
  top: -3px;
}

.post-sheet__slot { position: relative; flex: 1; display: flex; }
.post-sheet--aside {
  background-color: var(--sheet, var(--surface-card));
  background-image: var(--grain-dots-ink), var(--grain-wash-ink);
  background-size: var(--grain-dots-size), var(--grain-wash-size);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
  flex: 1;
  width: 100%;
}
.post-sheet--aside h3 {
  font-weight: var(--weight-display-bold);
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 21px 0 0;
  color: var(--text-heading);
  text-wrap: balance;
}
.post-sheet--aside p {
  font-size: 14px;
  line-height: var(--lh-body);
  margin: 10px 0 0;
  color: var(--text-body);
}
.post-sheet__footer--aside {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 0;
}
.post-sheet__footer--aside .post-sheet__cta { font-weight: var(--weight-body-md); top: 0; }

.home-writing__all { margin: 32px var(--gutter) 0; }

.home-writing__empty {
  margin: 40px var(--gutter) 0;
  padding: clamp(26px, 3vw, 38px);
  max-width: 56ch;
}
.home-writing__empty p { margin-top: 10px; color: var(--text-body); }

/* --- stack card variants -------------------------------------------------- */
.stack-card--backend { --card-tone: var(--card-backend); --card-ink: var(--card-backend-ink); }
.stack-card--cloud { --card-tone: var(--card-cloud); --card-ink: var(--card-cloud-ink); border-color: rgba(74, 62, 61, .38); }
.stack-card--frontend { --card-tone: var(--card-frontend); --card-ink: var(--card-frontend-ink); }
.stack-card--tooling { --card-tone: var(--card-tooling); --card-ink: var(--card-tooling-ink); border-color: rgba(74, 62, 61, .4); }

.stack-card__ornament--ring {
  right: -44px; top: -44px;
  width: 140px; height: 140px;
  border: 1.5px dashed rgba(95, 75, 139, .4);
  border-radius: 50%;
}
.stack-card__ornament--star { left: 18px; top: 18px; opacity: .35; }
.stack-card__ornament--hatch {
  right: -8px; top: -8px;
  width: 92px; height: 92px;
  background: repeating-linear-gradient(45deg, rgba(192, 90, 46, .28) 0 3px, transparent 3px 9px);
  -webkit-mask-image: radial-gradient(circle at top right, #000 35%, transparent 74%);
  mask-image: radial-gradient(circle at top right, #000 35%, transparent 74%);
}
.stack-card__ornament--dots {
  right: 16px; top: 16px;
  width: 110px; height: 86px;
  background-image: radial-gradient(circle, rgba(70, 112, 141, .38) 1.3px, transparent 1.5px);
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(215deg, #000, transparent 85%);
  mask-image: linear-gradient(215deg, #000, transparent 85%);
}
.stack-card__ornament--waves { left: 20px; bottom: 22px; opacity: .4; }
.stack-card__ornament--branch { right: 14px; bottom: 12px; opacity: .3; }

.stack-card__panel--cloud { padding: 26px 14px 20px; justify-content: space-evenly; }
.stack-card__panel--tooling { padding: 26px 18px 18px; justify-content: center; margin-top: 22px; }
.stack-card__link--tight { height: 26px; }

.stack-card__medallion-pair { display: flex; align-items: center; gap: 6px; }

.stack-card__fork { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.stack-card__fork span:first-child { width: 1px; height: 14px; border-left: 1.5px dashed rgba(192, 90, 46, .6); flex: none; }
.stack-card__fork span:last-child { width: 72%; height: 1px; border-top: 1.5px dashed rgba(192, 90, 46, .6); }

.stack-card__leaves { display: flex; gap: 6px; width: 100%; padding-bottom: 6px; }
.stack-card__leaf { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.stack-card__leaf-stem { width: 1px; height: 10px; border-left: 1.5px dashed rgba(192, 90, 46, .6); flex: none; }
.stack-card__leaf > div { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 4px; }

.stack-card__closer { display: flex; align-items: center; gap: 10px; width: 60%; margin: 16px auto 2px; }
.stack-card__closer span { height: 1px; flex: 1; background: rgba(192, 90, 46, .45); }
.stack-card__closer i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--card-ink); flex: none; }

.stack-card__browser { display: flex; align-items: center; justify-content: center; gap: 10px; }
.stack-card__browser-mock {
  flex: 1;
  min-width: 0;
  max-width: 150px;
  background: #FFFDF8;
  border: 1px solid rgba(74, 62, 61, .3);
  border-radius: 9px;
  overflow: hidden;
}
.stack-card__browser-bar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid rgba(23, 20, 18, .1); }
.stack-card__browser-bar i { width: 5px; height: 5px; border-radius: 50%; }
.stack-card__browser-bar i:nth-child(1) { background: #C97B6B; }
.stack-card__browser-bar i:nth-child(2) { background: #D9B26A; }
.stack-card__browser-bar i:nth-child(3) { background: #8CA678; }
.stack-card__browser-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; padding: 9px; }
.stack-card__browser-grid i { border-radius: 5px; }
.stack-card__browser-grid i:nth-child(1) { height: 26px; background: #EBC9C4; }
.stack-card__browser-grid i:nth-child(2) { height: 26px; background: #C3D6E2; }
.stack-card__browser-grid i:nth-child(3) { height: 20px; background: #D6D0E3; }
.stack-card__browser-grid i:nth-child(4) { height: 20px; background: #EAD2B4; }
.stack-card__browser-arrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  color: var(--card-ink);
  font-size: 15px;
  font-weight: var(--weight-body-strong);
}
.stack-card__browser-api {
  flex: none;
  width: 56px; height: 56px;
  border: 1.5px dashed rgba(70, 112, 141, .65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-body-strong);
  letter-spacing: .06em;
  color: #2E2822;
}

/* --- writing paper stack -------------------------------------------------- */
.home-writing__lead-sheet {
  inset: 8px -8px -8px 8px;
  border-radius: var(--radius-curl-sm);
  transform: rotate(.7deg);
  box-shadow: var(--shadow-soft);
}
.home-writing__lead-sheet-pink {
  inset: 4px -14px -3px 2px;
  background: #EBD5D0;
  border-color: rgba(74, 62, 61, .28);
  border-radius: 14px 24px 14px 14px;
  transform: rotate(-.4deg);
}
.home-writing__lead-tab {
  right: -10px; top: 44px;
  width: 18px; height: 38px;
  background: var(--pink-300);
  border-color: rgba(74, 62, 61, .28);
  border-left: none;
  border-radius: 0 12px 12px 0;
}
.home-writing__lead-arc { position: absolute; right: -14px; bottom: -12px; width: 56px; height: 56px; pointer-events: none; }
.home-writing__lead-branch { position: absolute; left: -36px; bottom: -28px; width: 150px; height: auto; pointer-events: none; }
.home-writing__aside-sheet-blue {
  inset: 12px -12px -12px 30px;
  background: var(--blue-300);
  border-radius: 14px 14px 14px 36px;
  transform: rotate(-.9deg);
}
.home-writing__aside-sheet-pink {
  inset: 16px 28px -12px -12px;
  background: var(--pink-300);
  border-radius: 36px 14px 14px 14px;
  transform: rotate(1deg);
}
.post-sheet--warm { --sheet: var(--paper-sheet-warm); }

/* =========================================================== work page === */
.work-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(112px, 10vw, 140px) var(--gutter) 0;
}

.work-intro { text-align: center; }
.work-intro h1 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--text-heading);
}
.work-intro p {
  margin: 16px auto 0;
  font-size: 17px;
  line-height: var(--lh-body);
  color: #4A3F35;
  max-width: 60ch;
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.work-chip {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: var(--ls-label);
  padding: 7px 16px;
  border-radius: var(--radius-stamp);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-hair);
  color: #6B5B4C;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.work-chip:hover { color: var(--accent); border-color: var(--accent); }
.work-chip.is-active {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--text-on-accent);
}

/* --- featured pair -------------------------------------------------------- */
.work-featured { margin-top: clamp(38px, 4.2vw, 58px); }
.work-featured__head { display: flex; align-items: center; gap: 16px; }
.work-featured__head i { flex: 1; height: 1px; background: rgba(74, 52, 37, .3); display: block; }

.work-tape {
  flex: none;
  background: rgba(203, 178, 138, .92);
  border: 1px solid rgba(70, 54, 42, .3);
  padding: 7px 20px;
  transform: rotate(-1.6deg);
  box-shadow: inset 0 1px 0 rgba(252, 246, 234, .55);
}
.work-tape span {
  font-family: var(--font-stamp);
  font-size: 14px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #4A3020;
  white-space: nowrap;
}

.work-featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3vw, 40px);
  margin-top: clamp(22px, 2.6vw, 32px);
  align-items: stretch;
}
@media (min-width: 880px) {
  .work-featured__grid { grid-template-columns: 1.9fr 1fr; }
  /* One card left standing takes the space its own weight deserves: the
     flagship fills the row, the support card stays a column. */
  .work-featured__grid[data-only="flagship"] { grid-template-columns: 1fr; }
  .work-featured__grid[data-only="support"] { grid-template-columns: minmax(0, 540px); }
}

/* Status stamps. Three tones, one anatomy. */
.work-stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-weight: var(--weight-body-strong);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-stamp i { width: 8px; height: 8px; border-radius: 50%; display: block; box-sizing: border-box; }
.work-stamp--live { color: var(--accent-ink); }
.work-stamp--live i { background: var(--accent); box-shadow: 0 0 0 4px rgba(200, 90, 50, .16); }
.work-stamp--dev { color: var(--olive-600); }
.work-stamp--dev i { background: transparent; border: 2px solid var(--accent-secondary); }
.work-stamp--muted {
  font-family: var(--font-stamp);
  font-weight: var(--weight-body);
  font-size: var(--label-fine);
  letter-spacing: .24em;
  color: var(--ink-400);
  opacity: .68;
  flex: none;
}

.work-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.work-tags--tight { gap: 7px; }
.work-tags--row { gap: 8px; margin-top: 16px; }

/* The flagship carries its shadow on the outer element: clip-path on the sheet
   would crop a box-shadow, so the lift is a drop-shadow filter instead. */
.work-flagship {
  position: relative;
  filter: drop-shadow(10px 13px 1px rgba(102, 112, 75, .42)) drop-shadow(0 3px 6px rgba(55, 41, 29, .08));
  transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.work-flagship:hover,
.work-flagship:focus-within {
  transform: translateY(-3px);
  filter: drop-shadow(13px 17px 2px rgba(102, 112, 75, .48)) drop-shadow(0 6px 12px rgba(55, 41, 29, .1));
}
.work-flagship__sheet {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(74, 62, 61, .075) 27px 28px),
    var(--grain-dots-ink);
  background-size: auto, var(--grain-dots-size);
  padding: clamp(28px, 3vw, 42px) clamp(22px, 2.8vw, 40px) clamp(28px, 3vw, 40px);
  clip-path: polygon(0% 1.6%, 9% 0.5%, 19% 2%, 29% 0.6%, 39% 2.2%, 50% 0.5%, 61% 2.1%, 71% 0.5%, 81% 2.1%, 91% 0.6%, 100% 1.9%, 98.6% 12%, 99.6% 24%, 98.3% 36%, 99.5% 48%, 98.4% 60%, 99.6% 72%, 98.3% 84%, 99.5% 100%, 91% 98.4%, 81% 99.6%, 71% 98.2%, 61% 99.5%, 50% 98.3%, 39% 99.6%, 29% 98.2%, 19% 99.5%, 9% 98.3%, 0% 99.6%, 1.4% 84%, 0.4% 72%, 1.6% 60%, 0.5% 48%, 1.7% 36%, 0.4% 24%, 1.4% 12%);
}
.work-flagship__sheet h2 {
  margin: 8px 0 0;
  font-weight: var(--weight-display-bold);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--text-heading);
}
.work-flagship__sheet > p {
  margin: 12px 0 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 54ch;
}
.work-flagship__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 2.4vw, 34px);
  margin-top: 18px;
}
.work-linkrow {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}
.work-linkrow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: var(--weight-body-strong);
  font-size: var(--label-base);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.work-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: clamp(20px, 2.2vw, 28px);
  background: var(--paper-sheet-warm);
  border: 1px solid rgba(74, 62, 61, .34);
  border-radius: 3px;
  overflow: hidden;
}
.work-frame__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(74, 62, 61, .22);
}
.work-frame__dots { display: flex; gap: 5px; }
.work-frame__dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.work-frame__dots i:nth-child(1) { background: rgba(23, 20, 18, .22); }
.work-frame__dots i:nth-child(2) { background: rgba(23, 20, 18, .16); }
.work-frame__dots i:nth-child(3) { background: rgba(23, 20, 18, .11); }
.work-frame__host {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .08em;
  color: var(--text-body);
}
.work-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 498;
  object-fit: cover;
  background-color: #08090b;
}

/* The work demo runs twenty seconds and plays once, on demand — so it needs a
   control, and the control has to be reachable without a pointer. */
.work-frame { position: relative; }
.work-frame__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(16, 14, 12, .62);
  color: var(--cream-100);
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
  backdrop-filter: blur(6px);
}
.work-frame:hover .work-frame__toggle,
.work-frame__toggle:focus-visible { opacity: 1; }

.work-tape-strip {
  position: absolute;
  height: 28px;
  background: rgba(214, 193, 158, .62);
  border: 1px solid rgba(70, 54, 42, .12);
  pointer-events: none;
}
.work-tape-strip--left {
  top: -13px;
  left: clamp(24px, 6vw, 72px);
  width: clamp(70px, 9vw, 104px);
  transform: rotate(-6deg);
}
.work-tape-strip--right {
  top: -11px;
  right: clamp(24px, 6vw, 72px);
  width: clamp(62px, 8vw, 92px);
  height: 26px;
  background: rgba(214, 193, 158, .55);
  transform: rotate(5deg);
}

.work-support {
  position: relative;
  align-self: start;
  margin-bottom: 16px;
  transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.work-support:hover,
.work-support:focus-within { transform: translateY(-3px); }
.work-support__sheet {
  position: absolute;
  inset: 12px -11px -11px 12px;
  background: var(--accent-secondary-soft);
  border: 1px solid rgba(74, 62, 61, .26);
  opacity: .45;
  pointer-events: none;
}
.work-support__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-sheet-light);
  background-image: var(--grain-dots-ink);
  background-size: var(--grain-dots-size);
  border: 1px solid var(--border-hair);
  box-shadow: 0 10px 26px rgba(55, 41, 29, .06), inset 0 0 0 4px rgba(252, 246, 234, .5);
  padding: clamp(26px, 2.8vw, 34px) clamp(20px, 2.2vw, 30px) clamp(28px, 2.8vw, 34px);
}
.work-support__card h2 {
  margin: 10px 0 0;
  font-weight: var(--weight-display-bold);
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.04;
  letter-spacing: -.026em;
  color: var(--text-heading);
}
.work-support__card p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-body);
}
.work-support__footer { display: flex; flex-direction: column; margin-top: clamp(20px, 2.2vw, 26px); }
.work-support__footer .work-stamp--muted { margin-top: 18px; }
.work-rule { margin: 14px 0; border-top: 1px dashed rgba(74, 62, 61, .4); }
.work-support__footer .work-rule { margin: 0 0 16px; }

/* --- build log ------------------------------------------------------------ */
.work-log { margin-top: clamp(44px, 4.8vw, 68px); }
.work-log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(74, 52, 37, .3);
}
.work-log__head h2 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}
.work-log__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(24px, 2.6vw, 34px);
}

.build-row { position: relative; transition: transform var(--dur-fast) ease; }
.build-row:hover,
.build-row:focus-within { transform: translateY(-3px); }
.build-row__sheet {
  position: absolute;
  inset: 11px -10px -10px 11px;
  background: var(--accent-secondary-soft);
  border: 1px solid rgba(74, 62, 61, .24);
  border-radius: 12px 12px 28px 12px;
  transform: rotate(.35deg);
  opacity: .42;
  pointer-events: none;
}
.build-row__card {
  position: relative;
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  background-color: var(--surface-card);
  background-image: var(--grain-nav);
  background-size: var(--grain-dots-size);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(55, 41, 29, .05), 0 10px 24px rgba(55, 41, 29, .045);
  padding: 26px clamp(22px, 2.6vw, 34px) 24px;
}
.build-row__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 11px; display: block; }
.build-row__body { flex: 1; min-width: 0; }
.build-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px clamp(12px, 1.6vw, 20px);
}
.build-row__title h3 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(23px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--text-heading);
}
.paper-wordmark--inline { font-size: inherit; }
.build-row__leader {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(74, 62, 61, .4);
  transform: translateY(-4px);
  display: block;
}
.build-row__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}
.build-row__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: var(--weight-body-strong);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.build-row__body > p {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 74ch;
}

.work-empty {
  margin: 26px 0 0;
  font-family: var(--font-stamp);
  font-size: var(--text-body-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --- pager ---------------------------------------------------------------- */
.work-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px clamp(12px, 1.8vw, 22px);
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 20px;
  border-top: 1px solid rgba(74, 52, 37, .3);
}
.work-pager__label {
  font-family: var(--font-stamp);
  font-size: var(--label-emph);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.work-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-family: var(--font-stamp);
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.work-pager button:hover { color: var(--accent); }
.work-pager__arrow { font-size: 18.5px; padding: 0 2px; color: var(--text-nav); }
.work-pager__arrow[aria-disabled="true"] { color: #9A8A76; opacity: .45; cursor: default; }
.work-pager__page { font-size: var(--label-emph); letter-spacing: .1em; padding: 0 2px; color: var(--text-body); }
.work-pager__page[aria-current="page"] {
  width: 46px;
  height: 40px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  transform: rotate(-2deg);
}

/* --- closing CTA ---------------------------------------------------------- */
.work-cta { margin-top: clamp(26px, 3vw, 42px); }
.work-cta__ornament { display: flex; align-items: flex-end; gap: 14px; opacity: .5; }
.work-cta__ornament i { flex: 1; height: 1px; background: var(--ink-400); display: block; }
.work-cta__ornament svg { flex: none; display: block; }
.work-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(14px, 1.6vw, 20px);
}
.work-cta__row h2 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(27px, 3.1vw, 43px);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  max-width: 22ch;
  color: var(--text-heading);
}
.work-cta__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: clamp(0px, 2vw, 26px);
}
.pp-btn--secondary-tight {
  border-color: rgba(23, 20, 18, .15);
  padding: 13.5px 28px;
  font-size: 14.5px;
}

/* ========================================================== about page === */
.about-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(118px, 11vw, 140px) var(--gutter) 0;
}

/* --- intro + portrait ----------------------------------------------------- */
.about-intro {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(30px, 4.2vw, 68px);
}

/* Bookmark tab, bled into the page gutter so it reads as a tab on the sheet. */
.about-intro__tab {
  position: absolute;
  left: calc(-1 * var(--gutter));
  top: 40px;
  width: clamp(12px, 2.2vw, 26px);
  height: 66px;
  background: var(--accent);
  border-radius: 0 13px 15px 0;
  transform: rotate(-1.1deg);
  opacity: .85;
  pointer-events: none;
}

.about-intro__copy {
  position: relative;
  z-index: 1;
  flex: 1.5 1 440px;
  min-width: 0;
  max-width: 640px;
}
.about-intro__copy h1 {
  font-weight: var(--weight-display);
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  margin: 20px 0 0;
  color: var(--ink-900);
}
.about-intro__lead {
  font-size: clamp(17px, 1.7vw, 18.5px);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  max-width: 50ch;
  margin: 26px 0 0;
  color: #3A322A;
}
.about-intro__lead strong {
  font-weight: var(--weight-display-bold);
  color: var(--ink-900);
}
/* The two paragraphs measure 50ch and 58ch on purpose — the ragged edge is the
   point, not a typo. */
.about-intro__body {
  font-size: 16px;
  font-weight: var(--weight-body);
  line-height: 1.62;
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--ink-500);
}

.about-intro__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(18px, 2.4vw, 30px);
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--weight-body-md);
  letter-spacing: .03em;
}
.about-intro__ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #79695C;
}
.about-intro__ext:hover { color: var(--accent); }
.about-intro__work {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: clamp(2px, 1vw, 14px);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(200, 90, 50, .4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.about-intro__work:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }
/* The prototype pushes these two rings out to 4px; the global ring is 3px. */
.about-intro__ext:focus-visible,
.about-intro__work:focus-visible { outline-offset: 4px; border-radius: 2px; }

.about-portrait {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 322px;
  margin-left: auto;
}
.about-portrait__stack { position: relative; }
.about-portrait__sheet {
  inset: 14px -13px -13px 14px;
  border: 1px solid rgba(74, 62, 61, .26);
  border-radius: 14px 14px 14px 34px;
  transform: rotate(-1.2deg);
  opacity: .5;
}
.about-portrait__sprig { position: absolute; top: -19px; left: -15px; opacity: .85; }

/* Cream mat around the print; the bottom-left corner is the curled one. */
.about-portrait__frame {
  position: relative;
  background-color: var(--surface-card);
  background-image: var(--grain-dots-ink), var(--grain-wash-ink);
  background-size: var(--grain-dots-size), var(--grain-wash-size);
  border: 1px solid var(--border-card);
  border-radius: 14px 14px 14px 38px;
  box-shadow: 0 2px 0 rgba(55, 41, 29, .05), 0 8px 20px rgba(55, 41, 29, .04);
  padding: 12px;
  transform: rotate(-1.2deg);
}
.about-portrait__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
}
.about-portrait__tape {
  position: absolute;
  top: -11px;
  right: 24px;
  width: 74px;
  height: 22px;
  background: rgba(214, 193, 158, .62);
  border-left: 1px solid rgba(70, 54, 42, .14);
  border-right: 1px solid rgba(70, 54, 42, .14);
  transform: rotate(-3.4deg);
  pointer-events: none;
}
.about-portrait__caption {
  position: relative;
  margin: -14px 0 0 -12px;
  max-width: 212px;
  background: #DFE3E2;
  border: 1px solid rgba(74, 62, 61, .26);
  border-radius: 3px;
  padding: 7px 11px;
  box-shadow: 0 1px 0 rgba(55, 41, 29, .04);
  transform: rotate(-1deg);
  font-family: var(--font-mono);
  font-weight: var(--weight-body-md);
  font-size: var(--label-fine);
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-800);
}
.about-portrait__caption-stack {
  font-weight: var(--weight-body-md);
  font-size: 10px;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--ink-500);
}

/* --- how I tend to work --------------------------------------------------- */
.about-work { margin-top: clamp(62px, 6.8vw, 100px); }
.about-work__title {
  font-weight: var(--weight-display-bold);
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: var(--ls-display);
  line-height: 1.04;
  color: var(--ink-700);
}
.about-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 38px) clamp(34px, 4.5vw, 76px);
  margin-top: clamp(24px, 2.6vw, 34px);
  align-items: start;
}
.about-work__item { min-width: 0; align-self: stretch; }
/* The diagrams bottom-align across a row, so the item body is a full-height
   column and the drawing takes the slack. */
.about-work__item-body { display: flex; flex-direction: column; height: 100%; }
.about-work__head { display: flex; align-items: flex-start; gap: 14px; }
.about-work__text { min-width: 0; }
.about-work__num {
  font-family: var(--font-display);
  font-weight: var(--weight-body-strong);
  font-size: clamp(30px, 2.9vw, 38px);
  line-height: 1;
  letter-spacing: -.03em;
  flex: none;
}
.about-work__item:nth-child(1) .about-work__num { color: rgba(63, 89, 102, .34); }
.about-work__item:nth-child(2) .about-work__num { color: rgba(78, 86, 57, .34); }
.about-work__item:nth-child(3) .about-work__num { color: rgba(168, 74, 40, .34); }
.about-work__item:nth-child(4) .about-work__num { color: rgba(121, 81, 60, .34); }
.about-work__text h3 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink-900);
}
.about-work__text p {
  margin: 7px 0 0;
  font-size: 14.5px;
  font-weight: var(--weight-body);
  line-height: var(--lh-card);
  color: var(--ink-500);
}
.about-work__diagram { display: block; margin-top: auto; padding-top: 20px; opacity: .5; }

/* Two columns: the second row is ruled off. One column: everything after the
   first item is. */
.about-work__item:nth-child(n + 3) {
  border-top: 1px solid rgba(74, 52, 37, .16);
  padding-top: clamp(22px, 2.4vw, 30px);
}

/* --- on my desk ----------------------------------------------------------- */
.about-desk { margin-top: clamp(62px, 6.8vw, 100px); }
.about-desk__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(34px, 4.4vw, 72px);
  margin-top: clamp(28px, 3.2vw, 40px);
}
.about-desk__case { flex: 1.3 1 420px; min-width: 0; }
.about-desk__lift { position: relative; }
.about-desk__backsheet {
  inset: 14px -13px -13px 14px;
  border: 1px solid rgba(74, 62, 61, .26);
  border-radius: 14px 14px 38px 14px;
  transform: rotate(.7deg);
  opacity: .55;
}
.about-desk__face {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sheet);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.about-desk__lift:hover .about-desk__face,
.about-desk__lift:focus-within .about-desk__face {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.about-desk__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(74, 62, 61, .22);
}
.about-desk__dots { display: flex; gap: 6px; }
.about-desk__dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.about-desk__dots i:nth-child(1) { background: rgba(23, 20, 18, .22); }
.about-desk__dots i:nth-child(2) { background: rgba(23, 20, 18, .16); }
.about-desk__dots i:nth-child(3) { background: rgba(23, 20, 18, .11); }
.about-desk__url {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .1em;
  color: #79695C;
}
.about-desk__shot { display: block; width: 100%; height: auto; }
.about-desk__caption {
  border-top: 1px solid rgba(74, 62, 61, .22);
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 28px) clamp(18px, 1.9vw, 24px);
}
.about-desk__status {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.about-desk__caption h3 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(23px, 2.2vw, 29px);
  letter-spacing: var(--ls-section);
  line-height: 1.1;
  margin: 9px 0 0;
  color: var(--ink-900);
}
.about-desk__body {
  font-size: 15.5px;
  line-height: var(--lh-card);
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--ink-500);
}
.about-desk__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 14px;
}
.about-desk__link:hover { color: var(--accent-ink); }
.about-desk__link:focus-visible { outline-offset: 4px; border-radius: 2px; }

/* --- latest writing note -------------------------------------------------- */
.about-note {
  flex: 1 1 330px;
  min-width: 0;
  max-width: 444px;
  margin-top: clamp(0px, 2vw, 26px);
}
.about-note__label {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #7E4239;
  margin: 0 0 5px;
}

/* Torn ruled note. The clip-path eats any box-shadow, so the paper lift is a
   drop-shadow filter and the hover is transform only. */
.about-note__card {
  display: block;
  position: relative;
  background-color: var(--surface-card);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(74, 62, 61, .085) 27px 28px),
    var(--grain-dots-ink);
  background-size: auto, var(--grain-dots-size);
  filter: drop-shadow(8px 11px 1px rgba(102, 112, 75, .4)) drop-shadow(0 3px 6px rgba(55, 41, 29, .07));
  padding: 28px 26px;
  transition: transform var(--dur-base) ease;
  clip-path: polygon(0.00% 1.62%, 11.11% 0.44%, 22.22% 2.10%, 33.33% 0.68%, 44.44% 2.31%, 55.56% 0.51%, 66.67% 1.94%, 77.78% 0.39%, 88.89% 2.22%, 100.00% 0.83%, 98.30% 8.33%, 99.55% 16.67%, 97.95% 25.00%, 99.30% 33.33%, 98.10% 41.67%, 99.60% 50.00%, 97.90% 58.33%, 99.35% 66.67%, 98.25% 75.00%, 99.55% 83.33%, 97.95% 91.67%, 99.40% 100.00%, 88.89% 98.10%, 77.78% 99.55%, 66.67% 97.85%, 55.56% 99.40%, 44.44% 98.05%, 33.33% 99.60%, 22.22% 97.90%, 11.11% 99.35%, 0.00% 98.20%, 1.85% 91.67%, 0.45% 83.33%, 2.05% 75.00%, 0.60% 66.67%, 1.95% 58.33%, 0.40% 50.00%, 2.15% 41.67%, 0.55% 33.33%, 1.80% 25.00%, 0.45% 16.67%, 2.10% 8.33%);
}
.about-note__card:hover,
.about-note__card:focus-visible { transform: translateY(-2px); }
.about-note__card:focus-visible { outline-offset: 4px; }
.about-note__branch {
  position: absolute;
  right: -6px;
  bottom: 34px;
  width: 104px;
  height: auto;
  pointer-events: none;
  opacity: .1;
}
/* Everything sits on the 28px rule so the copy lands on the printed lines. */
.about-note__chiprow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 28px;
}
.about-note__chip {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-label);
  color: var(--accent-ink);
  background: rgba(200, 90, 50, .1);
  border: 1px solid rgba(200, 90, 50, .4);
  border-radius: 4px;
  padding: 3px 8px;
}
.about-note__title {
  position: relative;
  font-weight: var(--weight-display-bold);
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: var(--ls-section);
  line-height: 28px;
  margin: 28px 0 0;
  color: var(--ink-900);
  text-wrap: balance;
}
.about-note__excerpt {
  position: relative;
  font-size: var(--text-body-sm);
  line-height: 28px;
  margin: 28px 0 0;
  color: var(--ink-500);
}
.about-note__meta {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  line-height: 28px;
}
.about-note__date {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  letter-spacing: .08em;
  color: var(--ink-500);
  white-space: nowrap;
}
.about-note__cta {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  white-space: nowrap;
}

/* --- quote ---------------------------------------------------------------- */
.about-quote {
  display: flex;
  justify-content: center;
  margin-top: clamp(46px, 5vw, 64px);
}
.about-quote__card {
  position: relative;
  width: min(510px, 100%);
  filter: drop-shadow(9px 12px 1px rgba(102, 112, 75, .42)) drop-shadow(0 3px 6px rgba(55, 41, 29, .08));
  transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.about-quote__card:hover {
  transform: translateY(-2px);
  filter: drop-shadow(12px 16px 2px rgba(102, 112, 75, .48)) drop-shadow(0 6px 12px rgba(55, 41, 29, .1));
}
.about-quote__face {
  position: relative;
  background-color: var(--surface-card);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(74, 62, 61, .09) 27px 28px),
    var(--grain-dots-ink);
  background-size: auto, var(--grain-dots-size);
  padding: 63px clamp(26px, 3.6vw, 46px) 56px;
  clip-path: polygon(0% 3.4%, 9% 1.4%, 19% 3%, 29% 1.2%, 39% 2.8%, 50% 1.2%, 61% 2.9%, 71% 1.3%, 81% 3%, 91% 1.4%, 100% 3.2%, 100% 96.6%, 90% 98.6%, 80% 97%, 69% 98.8%, 58% 97.2%, 47% 98.8%, 36% 97.2%, 25% 98.7%, 14% 97.2%, 0% 98.8%);
}
.about-quote__branch {
  position: absolute;
  left: clamp(-18px, -1vw, -6px);
  bottom: clamp(10px, 2vw, 20px);
  width: clamp(52px, 7.4vw, 84px);
  height: auto;
  pointer-events: none;
  opacity: .34;
  transform: scaleX(-1);
}
.about-quote__quote { position: relative; text-align: center; }
.about-quote__quote p {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 28px;
  letter-spacing: var(--ls-section);
  color: var(--ink-900);
  text-wrap: balance;
}
.about-quote__accent { color: var(--accent-ink); }
.about-quote__quote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: #79695C;
  line-height: 28px;
  margin-top: 28px;
}
.about-quote__tape {
  position: absolute;
  background: rgba(214, 193, 158, .62);
  border: 1px solid rgba(70, 54, 42, .12);
  pointer-events: none;
}
.about-quote__tape--left {
  top: -12px;
  left: clamp(18px, 5vw, 54px);
  width: clamp(64px, 9vw, 96px);
  height: 26px;
  transform: rotate(-6deg);
}
.about-quote__tape--right {
  top: -10px;
  right: clamp(18px, 5vw, 54px);
  width: clamp(58px, 8vw, 86px);
  height: 24px;
  background: rgba(214, 193, 158, .55);
  transform: rotate(5deg);
}

/* --- a few facts ---------------------------------------------------------- */
.about-facts { margin-top: clamp(40px, 4.4vw, 60px); }
.about-facts__title {
  font-weight: var(--weight-body-strong);
  font-size: clamp(32px, 3.8vw, 48px);
  letter-spacing: -.028em;
  line-height: 1.02;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  color: var(--ink-700);
}
.about-facts__body { position: relative; }
.about-facts__cols { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 60px); }
.about-facts__focus { flex: 1 1 380px; min-width: 0; }
.about-facts__lists { flex: 1 1 440px; min-width: 0; }

.about-facts__label {
  font-family: var(--font-mono);
  font-size: var(--label-base);
  font-weight: var(--weight-body-md);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.about-facts__label--warm { margin: 0 0 16px; color: var(--terracotta-700); }
.about-facts__label--olive { margin: 0 0 14px; color: #4E5639; }
.about-facts__label--spaced { margin-top: 26px; }
.about-facts__label--tools { margin-bottom: 18px; }

.about-facts__statement {
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(18px, 1.95vw, 23px);
  line-height: 1.36;
  letter-spacing: -.012em;
  max-width: 21ch;
  color: var(--ink-800);
}
.about-facts__flourish { display: flex; align-items: center; gap: 8px; margin-top: -1px; }
.about-facts__flourish span { height: 1px; width: 64px; background: rgba(121, 81, 60, .4); }

/* Leader-dot rows: term, dotted rule, right-aligned value. */
.about-facts__row {
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
}
.about-facts__row--edu { margin-bottom: 10px; }
.about-facts__row--lang { margin-bottom: 9px; }
.about-facts__row--last { margin-bottom: 0; }
.about-facts__term { font-size: var(--text-body-md); color: #33291F; }
.about-facts__term--edu {
  font-family: var(--font-display);
  font-weight: var(--weight-body-md);
  font-size: 17.5px;
  letter-spacing: -.012em;
  color: var(--ink-800);
}
.about-facts__leader {
  min-width: 18px;
  height: 0;
  border-bottom: 1px dotted rgba(121, 81, 60, .27);
  transform: translateY(-3px);
}
.about-facts__value {
  font-family: var(--font-mono);
  color: var(--ink-500);
  white-space: nowrap;
  text-align: right;
}
.about-facts__value--edu { font-size: var(--label-base); letter-spacing: .05em; }
.about-facts__value--lang {
  font-size: var(--label-fine);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.about-facts__divider {
  position: relative;
  height: 1px;
  background: rgba(74, 52, 37, .18);
  margin: clamp(28px, 3.2vw, 38px) 0 clamp(22px, 2.4vw, 28px);
}
.about-facts__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-page);
  padding: 0 5px;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: var(--label-base);
  color: var(--accent);
}

.about-tools__list { display: flex; flex-direction: column; gap: 20px; }
.about-tools__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.about-tools__row + .about-tools__row {
  padding-top: 20px;
  border-top: 1px dashed rgba(121, 81, 60, .2);
}
.about-tools__label {
  flex: 0 0 132px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  font-weight: var(--weight-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.about-tools__index { opacity: .85; }
.about-tools__index--warm { color: var(--accent); }
.about-tools__index--olive { color: var(--accent-secondary); }
.about-tools__tick { width: 12px; height: 1px; opacity: .7; flex: none; }
.about-tools__tick--warm { background: var(--accent); }
.about-tools__tick--olive { background: var(--accent-secondary); }
.about-tools__value {
  flex: 1 1 260px;
  font-size: var(--text-body-md);
  font-weight: var(--weight-body);
  line-height: 1.4;
  color: #33291F;
}
.about-tools__sep { color: rgba(38, 33, 28, .3); padding: 0 1px; }

/* --- closing -------------------------------------------------------------- */
.about-closing { margin-top: clamp(28px, 3vw, 42px); }
.about-closing__ornament { display: flex; align-items: flex-end; gap: 14px; opacity: .5; }
.about-closing__ornament i { flex: 1; height: 1px; background: var(--ink-400); display: block; }
.about-closing__ornament svg { flex: none; display: block; }
.about-closing__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 4vw, 58px);
}
.about-closing__row h2 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: var(--ls-display);
  line-height: 1.06;
  max-width: 23ch;
  color: var(--ink-900);
  text-wrap: balance;
}
.about-closing__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* --- about responsive ----------------------------------------------------- */
@media (max-width: 819px) {
  .about-facts__plus { display: none; }
}

@media (max-width: 759px) {
  .about-work__grid { grid-template-columns: minmax(0, 1fr); }
  .about-work__item:nth-child(n + 2) {
    border-top: 1px solid rgba(74, 52, 37, .16);
    padding-top: clamp(22px, 2.4vw, 30px);
  }
}

/* ======================================================== contact page === */
/* Two prototype-only surfaces: the form card prints a shade warmer than the
   sheet token and the fields a shade lighter. Neither exists in tokens.css, so
   they stay local to this page instead of pretending to be system colours. */
.contact-page {
  --contact-sheet: #F7F0E2;
  --contact-field: #FDF8EC;
  --contact-quiet: #8A7A6B;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(30px, 4vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(112px, 10vw, 134px) var(--gutter) clamp(10px, 1.4vw, 20px);
}

.contact-lead {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-lead h1 {
  margin: 18px 0 0;
  font-weight: var(--weight-display-bold);
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  max-width: 14ch;
  text-wrap: balance;
  color: var(--text-heading);
}
.contact-lead__intro {
  margin: 20px 0 0;
  font-size: 17.5px;
  line-height: 1.62;
  max-width: var(--measure-excerpt);
  color: var(--text-body);
}

/* --- the paper card ------------------------------------------------------- */
.contact-card-wrap {
  position: relative;
  flex: 1.7 1 566px;
  min-width: 0;
}
.contact-card__backsheet {
  inset: 10px -10px -10px 10px;
  transform: rotate(.6deg);
  opacity: .55;
}

/* The torn strip overhangs the card's top edge, so it paints above it. */
.contact-card__torn {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 12px;
  right: 12px;
  height: 9px;
  background: var(--contact-sheet);
  border-top: 1px solid rgba(70, 54, 42, .24);
  pointer-events: none;
  clip-path: polygon(0% 34%, 8% 22%, 16% 40%, 25% 26%, 34% 42%, 43% 28%, 52% 44%, 61% 26%, 70% 40%, 79% 24%, 88% 38%, 96% 26%, 100% 36%, 100% 100%, 0% 100%);
}

.contact-card {
  position: relative;
  z-index: 1;
  background-color: var(--contact-sheet);
  background-image: var(--grain-dots-ink), var(--grain-wash-ink);
  background-size: var(--grain-dots-size), var(--grain-wash-size);
  border: 1px solid rgba(70, 54, 42, .28);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .55),
    0 4px 0 rgba(55, 41, 29, .06),
    0 14px 32px rgba(55, 41, 29, .07);
  padding: clamp(22px, 2.4vw, 32px);
}
.contact-card > h2 {
  margin: 0 0 20px;
  font-weight: var(--weight-display-bold);
  font-size: var(--text-h3);
  letter-spacing: var(--ls-section);
  line-height: 1.18;
  color: var(--text-heading);
}

/* --- sent panel ---------------------------------------------------------- */
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0 4px;
}
.contact-success__label {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-secondary);
}
.contact-success p {
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  max-width: var(--measure-excerpt);
  color: var(--text-body);
}
.contact-success__again {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 4px 2px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--weight-body-md);
  letter-spacing: .03em;
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-color: rgba(200, 90, 50, .35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.contact-success__again:hover { color: var(--accent); }
.contact-success__again:focus-visible { outline-offset: 4px; }

/* --- error summary ------------------------------------------------------- */
/* Hidden until the server puts something in it: the ModelOnly summary earns
   its class from the tag helper, the field count renders only when it is set. */
.contact-summary {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(168, 74, 40, .45);
  border-radius: var(--radius-note);
  background: rgba(200, 90, 50, .07);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-ink);
}
.contact-summary.validation-summary-errors,
.contact-summary--fields { display: flex; }
.contact-summary ul { margin: 0; padding: 0; list-style: none; }
.contact-summary li + li { margin-top: 4px; }

.contact-fallback {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: .04em;
  color: var(--accent-ink);
}
.contact-fallback a { text-decoration: underline; text-underline-offset: 3px; }

/* --- fields -------------------------------------------------------------- */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
}
.contact-row + .contact-row { margin-top: 16px; }

.contact-field {
  flex: 1 1 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.contact-field--message { margin-top: 16px; }

.contact-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-display-bold);
  letter-spacing: -.005em;
  color: var(--ink-700);
}
/* The shared strings are lower-case for the legacy form; the printed label
   opens in sentence case in every locale without a second set of keys. */
.contact-label > span::first-letter { text-transform: uppercase; }
.contact-label small {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  font-weight: var(--weight-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--contact-quiet);
}

.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  background-color: var(--contact-field);
  border: 1px solid rgba(74, 62, 61, .26);
  border-radius: 6px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--ink-800);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 90, 50, .22);
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: var(--contact-quiet); opacity: 1; }

.contact-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2351463C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Ruled paper: the rules start 15px down so they sit under the 28px baseline. */
.contact-textarea {
  min-height: 190px;
  resize: vertical;
  line-height: 28px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(74, 62, 61, .13) 27px, rgba(74, 62, 61, .13) 28px);
  background-position: 0 15px;
}

/* The tag helpers stamp these classes; the page only supplies the ink. */
.contact-card .input-validation-error { border-color: var(--accent-ink); }
.contact-error {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: .04em;
  color: var(--accent-ink);
}
.contact-error.field-validation-error { display: block; }

.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- submit -------------------------------------------------------------- */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 26px;
}

/* The only button in the system that presses down: it loses 2px of its stacked
   shadow on hover instead of changing to charcoal. */
.contact-submit {
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 10px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: var(--weight-body-strong);
  letter-spacing: .005em;
  box-shadow:
    0 3px 0 rgba(122, 52, 26, .42),
    0 9px 20px rgba(55, 41, 29, .14),
    inset 0 0 0 1px rgba(255, 249, 241, .22);
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.contact-submit:hover {
  background: #B44C28;
  color: var(--text-on-accent);
  box-shadow:
    0 1px 0 rgba(122, 52, 26, .42),
    0 5px 12px rgba(55, 41, 29, .12),
    inset 0 0 0 1px rgba(255, 249, 241, .22);
  transform: translateY(2px);
}
.contact-submit:disabled {
  opacity: .65;
  cursor: default;
  transform: none;
}

.contact-note {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: .06em;
  color: var(--contact-quiet);
}

/* --- folk scrap ---------------------------------------------------------- */
.contact-scrap {
  position: absolute;
  z-index: 3;
  top: -22px;
  right: 26px;
  width: 54px;
  height: 86px;
  opacity: .95;
  transform: rotate(7deg);
  pointer-events: none;
}
.contact-scrap i {
  position: absolute;
  display: block;
  top: 26px;
  left: 8px;
  width: 36px;
  height: 13px;
  background: rgba(214, 193, 158, .7);
  border: 1px solid rgba(70, 54, 42, .14);
  transform: rotate(-22deg);
}
.contact-scrap svg { position: absolute; inset: 0; }

/* ========================================================== error page === */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72svh;
  padding: clamp(120px, 12vw, 160px) var(--gutter) clamp(48px, 6vw, 80px);
}

.error-note {
  position: relative;
  width: min(620px, 100%);
}

.error-note__ghost {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--font-display);
  font-weight: var(--weight-body-strong);
  font-size: clamp(200px, 24vw, 340px);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink-400);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

/* Torn ruled sheet. clip-path would crop a box-shadow, so the lift is a
   drop-shadow filter; the horizontal padding clamps to keep the measure
   readable once the punch gutter and the sheet edge meet. */
.error-sheet {
  position: relative;
  z-index: 1;
  background-color: var(--surface-card);
  background-image: var(--ruled-lines), var(--grain-dots);
  background-size: auto, var(--grain-dots-size);
  filter: var(--shadow-note);
  clip-path: polygon(1% 1.4%, 28% 0.3%, 61% 1.2%, 99% 0.5%, 98.4% 8%, 99.4% 17%, 98.5% 26%, 99.3% 35%, 98.4% 44%, 99.4% 53%, 98.5% 62%, 99.3% 71%, 98.4% 80%, 99.3% 89%, 98.6% 98.8%, 66% 99.6%, 33% 98.7%, 1.2% 99.4%, 1.8% 90%, 0.6% 81%, 1.6% 72%, 0.5% 63%, 1.7% 54%, 0.6% 45%, 1.6% 36%, 0.5% 27%, 1.7% 18%, 0.6% 9%);
  transform: rotate(-1.4deg);
  padding: 38px clamp(20px, 5vw, 44px) 44px clamp(38px, 9vw, 66px);
}

.error-sheet__punches {
  position: absolute;
  left: 22px;
  top: 12%;
  bottom: 12%;
  width: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
/* The page cream shows through the hole; the second shadow is the paper lip. */
.error-sheet__punches i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-page);
  box-shadow: inset 0 1.5px 2px rgba(55, 41, 29, .28), 0 1px 0 rgba(251, 244, 230, .9);
}

.error-stamp {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 34px;
}
.error-stamp i {
  flex: none;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.error-stamp span {
  font-family: var(--font-stamp);
  font-size: var(--label-emph);
  line-height: 1;
  letter-spacing: .2em;
  color: var(--ink-400);
}

.error-fieldnote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 3px 8px;
  border: 1px dashed rgba(200, 90, 50, .55);
  border-radius: 6px;
  font-family: var(--font-stamp);
  font-size: var(--label-fine);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  opacity: .9;
  transform: rotate(2deg);
}

.error-note h1 {
  margin: 14px 0 0;
  font-weight: var(--weight-display-bold);
  font-size: var(--text-project-title);
  line-height: 1.18;
  color: var(--text-heading);
  text-wrap: balance;
}
.error-note__body {
  margin: 12px 0 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  max-width: var(--measure-body);
  color: var(--text-body);
}
.error-note__hand {
  margin: 10px 0 0;
  font-family: var(--font-hand);
  font-size: var(--text-body-sm);
  color: var(--text-hand);
  transform: rotate(-1.2deg);
}

.error-note__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

/* =========================================================== blog index === */
.blog-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(118px, 11vw, 140px) var(--gutter) 0;
}

/* --- masthead and hero ---------------------------------------------------- */
.blog-hero { position: relative; text-align: center; }

.blog-masthead {
  padding: 0 2px clamp(7px, .9vw, 10px);
  border-bottom: 1px solid rgba(74, 52, 37, .4);
  font-family: var(--font-stamp);
  font-size: var(--label-fine);
  letter-spacing: var(--ls-masthead);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.blog-hero__title {
  position: relative;
  margin: clamp(24px, 2.6vw, 34px) auto 0;
  max-width: min(100%, 860px);
}
.blog-hero__title h1 {
  margin: 0 auto;
  font-weight: var(--weight-display-bold);
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: var(--lh-hero);
  letter-spacing: -.028em;
  color: var(--text-heading);
  text-wrap: balance;
}
/* Two pencil strokes under the title, not an underline: they overflow the box
   on purpose, so the box must not clip them. */
.blog-hero__squiggle {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: min(80%, 560px);
  height: 16px;
  overflow: visible;
  pointer-events: none;
}

.blog-deck {
  max-width: var(--measure-excerpt);
  margin: clamp(24px, 2.5vw, 32px) auto 0;
  font-size: clamp(16px, 1.55vw, 17.5px);
  font-weight: var(--weight-body-md);
  line-height: var(--lh-body);
  color: #4A3F35;
  text-wrap: balance;
}

.blog-rss-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(14px, 1.6vw, 18px);
}
.blog-rss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--weight-body-md);
  letter-spacing: .03em;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(200, 90, 50, .4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.blog-rss:hover { color: var(--accent-ink); }

/* --- filter bar ----------------------------------------------------------- */
.blog-stream { margin-top: clamp(26px, 2.8vw, 36px); }

.blog-filter { position: relative; display: flex; justify-content: center; }

/* One row, always. It scrolls sideways rather than wrapping or collapsing into
   a menu, and the padding leaves room for the chip's hover lift. */
.blog-filter__scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 13px;
  max-width: 100%;
  padding: 6px 2px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.blog-filter__scroll::-webkit-scrollbar { display: none; }

/* The scrollbar is hidden, so on widths where the row overflows the last chip
   fades out instead of being cut clean — a torn edge that says there is more. */
@media (max-width: 839px) {
  .blog-filter__scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
}

.blog-filter__label {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: -6px;
  font-family: var(--font-stamp);
  font-size: var(--label-emph);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-500);
  opacity: .8;
}
.blog-filter__label i { display: block; width: 16px; height: 1px; background: rgba(121, 81, 60, .45); }

.blog-chip {
  flex: none;
  padding: 7px 5px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  font-family: var(--font-stamp);
  font-size: 14.5px;
  font-weight: var(--weight-body);
  letter-spacing: .155em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-500);
  cursor: pointer;
  transition: transform var(--dur-fast) cubic-bezier(.2, .9, .25, 1),
              color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              background var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
.blog-chip:hover { color: var(--accent); border-bottom-color: rgba(200, 90, 50, .55); transform: translateY(-3px); }
.blog-chip:active { transform: translateY(0); }
.blog-chip.is-active {
  padding: 7px 13px;
  background: var(--accent);
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius-stamp);
  color: var(--text-on-accent);
  box-shadow: 0 1.5px 0 rgba(121, 60, 35, .25);
}
/* The selected chip already inverts; terracotta on terracotta would erase it. */
.blog-chip.is-active:hover { color: var(--text-on-accent); border-color: var(--accent-ink); }

/* The MORE trigger opens a menu instead of filtering, so it does not lift. */
.blog-chip--more { margin-left: -6px; }
.blog-chip--more:hover { transform: none; }
.blog-chip--more.is-tag { color: var(--accent); border-bottom-color: rgba(200, 90, 50, .55); }

/* --- MORE popover --------------------------------------------------------- */
.blog-more {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: min(430px, calc(100vw - 32px));
  padding: 16px 18px 18px;
  text-align: left;
  background-color: var(--paper-sheet);
  background-image: var(--grain-dots);
  background-size: var(--grain-dots-size);
  border: 1px solid var(--border-hair);
  box-shadow: 0 12px 26px rgba(55, 41, 29, .13);
  /* No radius: this is a slip of paper pinned to the bar, not a rounded menu. */
}
.blog-more__title {
  margin: 0 0 12px;
  font-family: var(--font-stamp);
  font-size: var(--label-fine);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.blog-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px 18px;
}
.blog-more__tag {
  justify-self: start;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-stamp);
  font-size: var(--label-fine);
  letter-spacing: .15em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-500);
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}
.blog-more__tag:hover,
.blog-more__tag[aria-pressed="true"] { color: var(--accent); }
.blog-more__tag:focus-visible { outline-offset: 2px; }

/* --- archive grid --------------------------------------------------------- */
.blog-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 32px);
  margin-top: clamp(4px, .6vw, 8px);
}

.blog-month {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px clamp(18px, 2.4vw, 32px);
  padding: clamp(24px, 2.8vw, 36px) 0 12px;
  margin: clamp(26px, 3vw, 40px) 0 4px;
  border-top: 1px dashed rgba(74, 52, 37, .3);
  border-bottom: 1px solid var(--border-rule);
}
/* The header that opens the visible archive sits tighter under the filter bar. */
.blog-month.is-first { margin-top: clamp(6px, 1vw, 12px); }

.blog-month__ghost {
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body-strong);
  font-size: clamp(78px, 8vw, 116px);
  line-height: .74;
  letter-spacing: -.05em;
  color: var(--ink-400);
  opacity: .04;
  pointer-events: none;
  user-select: none;
}
.blog-month__label {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-weight: var(--weight-body-md);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3F4630;
}
.blog-month__name,
.blog-month__year { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.12; }
.blog-month__year { color: var(--ink-400); opacity: .75; }

/* --- note card ------------------------------------------------------------ */
.blog-note {
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 100%;
  transform: var(--note-tilt);
}
.blog-note__face {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: clamp(310px, 40vw, 372px);
  height: 100%;
  padding: 34px clamp(22px, 3vw, 38px);
  background-color: var(--paper-sheet);
  background-image: var(--ruled-lines-blog), var(--grain-dots);
  background-size: auto, var(--grain-dots-size);
  /* clip-path crops a box-shadow, so the torn sheet casts a drop-shadow. */
  filter: drop-shadow(8px 11px 1px rgba(102, 112, 75, .4)) drop-shadow(0 3px 6px rgba(55, 41, 29, .07));
  clip-path: var(--note-clip);
  transition: transform var(--dur-base) ease;
}
/* The lift rides on top of the wrapper's tilt, so hovering never straightens
   the sheet. */
.blog-note__face:hover { transform: translateY(-6px); }
.blog-note__face:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
/* The torn clip-path crops the face's own outline away entirely, so where the
   browser can express it the ring moves out to the wrapper, which is never
   clipped. Without :has() the cropped ring is still better than none. */
@supports selector(:has(*)) {
  .blog-note__face:focus-visible { outline: none; }
  .blog-note:has(.blog-note__face:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: 4px;
  }
}

/* The 34px rhythm inside the card is the pitch of its own ruled lines. */
.blog-note__head { display: flex; align-items: center; gap: 11px; height: 34px; }
.blog-note__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--note-dot); }
.blog-note__stamp { margin-left: auto; transform: rotate(-2.4deg); }

.blog-note__title {
  margin: 34px 0 0;
  font-weight: var(--weight-display-bold);
  font-size: 25px;
  line-height: 34px;
  letter-spacing: -.016em;
  color: var(--text-heading);
}
.blog-note__excerpt {
  margin: 34px 0 0;
  font-size: var(--text-body-md);
  line-height: 34px;
  color: var(--ink-500);
}
.blog-note__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: auto 0 0;
  padding-top: 34px;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  line-height: 34px;
  letter-spacing: .06em;
  color: var(--ink-500);
}
.blog-note__meta { opacity: .85; }
.blog-note__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--label-fine);
  font-weight: var(--weight-body-md);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

/* Tilt and dot follow the card's place in the archive — deterministic, so the
   same post always prints the same sheet. */
.blog-note--v0 { --note-tilt: rotate(-.14deg); --note-dot: var(--accent); }
.blog-note--v1 { --note-tilt: rotate(.1deg);   --note-dot: #5E7C8A; }
.blog-note--v2 { --note-tilt: rotate(-.08deg); --note-dot: #D99468; }
.blog-note--v3 { --note-tilt: rotate(.13deg);  --note-dot: var(--olive-500); }

/* --- pager ---------------------------------------------------------------- */
.blog-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(14px, 2vw, 26px);
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid rgba(74, 52, 37, .3);
}
.blog-pager__label {
  font-family: var(--font-stamp);
  font-size: var(--label-emph);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.blog-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-family: var(--font-stamp);
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.blog-pager button:hover { color: var(--accent); }
.blog-pager__arrow { font-size: 18.5px; padding: 0 2px; color: var(--text-nav); }
.blog-pager__arrow[aria-disabled="true"] { color: #9A8A76; opacity: .45; cursor: default; }
.blog-pager__page { font-size: var(--label-emph); letter-spacing: .1em; padding: 0 2px; color: var(--ink-500); }
.blog-pager__page[aria-current="page"] {
  width: 46px;
  height: 40px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  transform: rotate(-2deg);
}

.blog-empty {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-family: var(--font-stamp);
  font-size: var(--text-body-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --- closing CTA ---------------------------------------------------------- */
.blog-cta { margin-top: clamp(10px, 1.4vw, 18px); }
.blog-cta__ornament { display: flex; align-items: flex-end; gap: 14px; opacity: .5; }
.blog-cta__ornament i { flex: 1; height: 1px; background: var(--ink-400); display: block; }
.blog-cta__ornament svg { flex: none; display: block; }
.blog-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(10px, 1.4vw, 21px);
}
.blog-cta__row h2 {
  max-width: 24ch;
  font-weight: var(--weight-display-bold);
  font-size: clamp(27px, 3.1vw, 43px);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
  text-wrap: balance;
}
.blog-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  margin-right: clamp(0px, 2vw, 26px);
}

/* --- torn sheet outlines -------------------------------------------------- */
/* Fourteen outlines generated once by the prototype's seeded LCG and frozen
   here. A card picks one by its position in the archive, never at random. */
.blog-note--p0 { --note-clip: polygon(0.00% 0.71%, 12.50% 1.64%, 25.00% 2.04%, 37.50% 0.25%, 50.00% 1.30%, 62.50% 1.12%, 75.00% 0.77%, 87.50% 1.93%, 100.00% 0.60%, 98.95% 8.33%, 98.81% 16.67%, 99.56% 25.00%, 98.53% 33.33%, 99.40% 41.67%, 98.39% 50.00%, 99.22% 58.33%, 99.32% 66.67%, 98.89% 75.00%, 98.93% 83.33%, 99.49% 91.67%, 98.33% 100.00%, 87.50% 98.08%, 75.00% 97.94%, 62.50% 98.26%, 50.00% 99.54%, 37.50% 99.69%, 25.00% 99.33%, 12.50% 99.55%, 0.00% 99.38%, 0.35% 91.67%, 1.07% 83.33%, 0.74% 75.00%, 1.78% 66.67%, 1.74% 58.33%, 0.83% 50.00%, 1.56% 41.67%, 1.51% 33.33%, 1.78% 25.00%, 0.87% 16.67%, 1.60% 8.33%); }
.blog-note--p1 { --note-clip: polygon(0.00% 1.09%, 12.50% 1.89%, 25.00% 1.57%, 37.50% 0.48%, 50.00% 2.01%, 62.50% 1.15%, 75.00% 1.72%, 87.50% 1.81%, 100.00% 0.70%, 98.91% 7.69%, 99.17% 15.38%, 98.87% 23.08%, 98.34% 30.77%, 99.39% 38.46%, 98.65% 46.15%, 98.65% 53.85%, 98.57% 61.54%, 98.25% 69.23%, 99.37% 76.92%, 99.43% 84.62%, 98.99% 92.31%, 98.56% 100.00%, 87.50% 98.55%, 75.00% 98.81%, 62.50% 99.41%, 50.00% 98.82%, 37.50% 98.91%, 25.00% 98.63%, 12.50% 98.95%, 0.00% 98.86%, 0.25% 92.31%, 0.78% 84.62%, 1.47% 76.92%, 0.57% 69.23%, 1.16% 61.54%, 0.68% 53.85%, 1.20% 46.15%, 0.65% 38.46%, 0.37% 30.77%, 1.54% 23.08%, 1.39% 15.38%, 1.14% 7.69%); }
.blog-note--p2 { --note-clip: polygon(0.00% 1.46%, 12.50% 0.28%, 25.00% 1.10%, 37.50% 0.70%, 50.00% 0.86%, 62.50% 1.18%, 75.00% 0.82%, 87.50% 1.69%, 100.00% 0.80%, 98.87% 9.09%, 99.54% 18.18%, 99.73% 27.27%, 99.71% 36.36%, 99.38% 45.45%, 98.92% 54.55%, 99.62% 63.64%, 99.36% 72.73%, 99.15% 81.82%, 98.26% 90.91%, 99.36% 100.00%, 87.50% 99.63%, 75.00% 98.57%, 62.50% 99.16%, 50.00% 99.36%, 37.50% 99.28%, 25.00% 97.96%, 12.50% 98.49%, 0.00% 99.57%, 1.29% 90.91%, 1.64% 81.82%, 0.98% 72.73%, 0.81% 63.64%, 1.17% 54.55%, 0.96% 45.45%, 1.48% 36.36%, 1.34% 27.27%, 0.89% 18.18%, 1.07% 9.09%); }
.blog-note--p3 { --note-clip: polygon(0.00% 1.84%, 12.50% 0.53%, 25.00% 0.63%, 37.50% 0.93%, 50.00% 1.57%, 62.50% 1.20%, 75.00% 1.78%, 87.50% 1.57%, 100.00% 0.90%, 98.83% 8.33%, 98.36% 16.67%, 99.04% 25.00%, 99.52% 33.33%, 99.36% 41.67%, 99.19% 50.00%, 99.05% 58.33%, 98.60% 66.67%, 98.51% 75.00%, 98.70% 83.33%, 99.30% 91.67%, 98.76% 100.00%, 87.50% 98.82%, 75.00% 97.91%, 62.50% 98.07%, 50.00% 99.15%, 37.50% 98.94%, 25.00% 98.07%, 12.50% 98.65%, 0.00% 98.08%, 0.73% 91.67%, 1.71% 83.33%, 0.84% 75.00%, 0.87% 66.67%, 1.35% 58.33%, 0.26% 50.00%, 0.46% 41.67%, 0.58% 33.33%, 1.49% 25.00%, 0.93% 16.67%, 1.44% 8.33%); }
.blog-note--p4 { --note-clip: polygon(0.00% 0.37%, 11.11% 0.77%, 22.22% 2.01%, 33.33% 1.16%, 44.44% 0.43%, 55.56% 1.23%, 66.67% 0.88%, 77.78% 1.45%, 88.89% 1.00%, 100.00% 1.40%, 98.72% 7.69%, 98.36% 15.38%, 99.34% 23.08%, 99.35% 30.77%, 99.45% 38.46%, 98.47% 46.15%, 99.40% 53.85%, 99.41% 61.54%, 99.13% 69.23%, 99.23% 76.92%, 99.43% 84.62%, 99.18% 92.31%, 98.72% 100.00%, 88.89% 98.62%, 77.78% 99.02%, 66.67% 98.07%, 55.56% 99.50%, 44.44% 99.58%, 33.33% 99.50%, 22.22% 98.42%, 11.11% 98.98%, 0.00% 99.00%, 0.56% 92.31%, 1.74% 84.62%, 0.58% 76.92%, 1.12% 69.23%, 0.27% 61.54%, 0.36% 53.85%, 0.43% 46.15%, 1.39% 38.46%, 1.47% 30.77%, 1.77% 23.08%, 0.32% 15.38%, 0.89% 7.69%); }
.blog-note--p5 { --note-clip: polygon(0.00% 0.75%, 11.11% 1.02%, 22.22% 1.54%, 33.33% 1.38%, 44.44% 1.14%, 55.56% 1.26%, 66.67% 1.83%, 77.78% 1.33%, 88.89% 1.10%, 100.00% 1.46%, 99.09% 7.14%, 99.22% 14.29%, 99.16% 21.43%, 99.34% 28.57%, 99.72% 35.71%, 99.45% 42.86%, 98.64% 50.00%, 98.76% 57.14%, 99.57% 64.29%, 99.17% 71.43%, 98.54% 78.57%, 99.38% 85.71%, 99.22% 92.86%, 99.26% 100.00%, 88.89% 98.89%, 77.78% 99.06%, 66.67% 99.08%, 55.56% 98.67%, 44.44% 99.06%, 33.33% 99.50%, 22.22% 98.11%, 11.11% 98.96%, 0.00% 99.74%, 0.57% 92.86%, 0.90% 85.71%, 1.79% 78.57%, 1.51% 71.43%, 0.78% 64.29%, 1.48% 57.14%, 1.34% 50.00%, 0.46% 42.86%, 0.94% 35.71%, 1.16% 28.57%, 0.80% 21.43%, 0.97% 14.29%, 1.21% 7.14%); }
.blog-note--p6 { --note-clip: polygon(0.00% 1.13%, 11.11% 1.26%, 22.22% 1.07%, 33.33% 1.61%, 44.44% 1.84%, 55.56% 1.29%, 66.67% 0.94%, 77.78% 1.21%, 88.89% 1.20%, 100.00% 1.51%, 99.45% 9.09%, 98.53% 18.18%, 98.97% 27.27%, 99.32% 36.36%, 98.43% 45.45%, 98.87% 54.55%, 99.43% 63.64%, 99.67% 72.73%, 98.46% 81.82%, 99.10% 90.91%, 99.20% 100.00%, 88.89% 99.56%, 77.78% 99.73%, 66.67% 99.72%, 55.56% 98.76%, 44.44% 98.19%, 33.33% 98.66%, 22.22% 99.60%, 11.11% 98.63%, 0.00% 98.73%, 0.80% 90.91%, 0.95% 81.82%, 1.51% 72.73%, 0.96% 63.64%, 1.23% 54.55%, 0.90% 45.45%, 1.20% 36.36%, 1.20% 27.27%, 0.98% 18.18%, 1.28% 9.09%); }
.blog-note--p7 { --note-clip: polygon(0.00% 1.51%, 10.00% 1.51%, 20.00% 0.60%, 30.00% 1.84%, 40.00% 0.70%, 50.00% 1.32%, 60.00% 1.89%, 70.00% 1.08%, 80.00% 1.29%, 90.00% 1.56%, 100.00% 2.02%, 99.39% 8.33%, 98.79% 16.67%, 99.31% 25.00%, 98.70% 33.33%, 98.30% 41.67%, 98.67% 50.00%, 99.02% 58.33%, 98.89% 66.67%, 99.04% 75.00%, 98.31% 83.33%, 98.24% 91.67%, 98.69% 100.00%, 90.00% 98.42%, 80.00% 98.63%, 70.00% 99.17%, 60.00% 98.25%, 50.00% 98.68%, 40.00% 98.20%, 30.00% 97.97%, 20.00% 98.22%, 10.00% 98.88%, 0.00% 98.61%, 1.35% 91.67%, 1.55% 83.33%, 1.57% 75.00%, 0.89% 66.67%, 1.62% 58.33%, 0.48% 50.00%, 1.23% 41.67%, 1.54% 33.33%, 0.85% 25.00%, 1.28% 16.67%, 0.62% 8.33%); }
.blog-note--p8 { --note-clip: polygon(0.00% 1.89%, 10.00% 1.75%, 20.00% 1.99%, 30.00% 2.06%, 40.00% 1.41%, 50.00% 1.35%, 60.00% 0.99%, 70.00% 0.96%, 80.00% 1.39%, 90.00% 1.61%, 100.00% 1.58%, 98.70% 7.69%, 98.60% 15.38%, 99.30% 23.08%, 98.97% 30.77%, 99.27% 38.46%, 99.47% 46.15%, 98.38% 53.85%, 99.33% 61.54%, 98.97% 69.23%, 98.98% 76.92%, 98.45% 84.62%, 99.20% 92.31%, 99.10% 100.00%, 90.00% 98.50%, 80.00% 98.31%, 70.00% 99.68%, 60.00% 99.62%, 50.00% 99.61%, 40.00% 99.05%, 30.00% 99.20%, 20.00% 98.84%, 10.00% 98.97%, 0.00% 97.98%, 0.33% 92.31%, 0.68% 84.62%, 0.58% 76.92%, 0.49% 69.23%, 1.53% 61.54%, 1.18% 53.85%, 0.54% 46.15%, 1.57% 38.46%, 0.56% 30.77%, 0.53% 23.08%, 1.40% 15.38%, 0.34% 7.69%); }
.blog-note--p9 { --note-clip: polygon(0.00% 0.42%, 10.00% 2.00%, 20.00% 1.52%, 30.00% 0.44%, 40.00% 0.27%, 50.00% 1.37%, 60.00% 1.95%, 70.00% 0.84%, 80.00% 1.49%, 90.00% 1.66%, 100.00% 1.15%, 99.57% 7.14%, 98.42% 14.29%, 99.29% 21.43%, 99.23% 28.57%, 98.70% 35.71%, 98.71% 42.86%, 99.28% 50.00%, 98.22% 57.14%, 98.91% 64.29%, 99.64% 71.43%, 98.66% 78.57%, 99.71% 85.71%, 99.56% 92.86%, 98.59% 100.00%, 90.00% 99.29%, 80.00% 99.26%, 70.00% 98.70%, 60.00% 99.18%, 50.00% 98.29%, 40.00% 98.33%, 30.00% 98.80%, 20.00% 99.33%, 10.00% 99.37%, 0.00% 99.27%, 1.35% 92.86%, 0.27% 85.71%, 0.91% 78.57%, 1.04% 71.43%, 1.13% 64.29%, 1.08% 57.14%, 0.75% 50.00%, 1.39% 42.86%, 0.44% 35.71%, 1.03% 28.57%, 1.08% 21.43%, 0.60% 14.29%, 1.70% 7.14%); }
.blog-note--p10 { --note-clip: polygon(0.00% 0.80%, 10.00% 0.40%, 20.00% 1.05%, 30.00% 0.66%, 40.00% 0.97%, 50.00% 1.40%, 60.00% 1.05%, 70.00% 0.72%, 80.00% 1.59%, 90.00% 1.71%, 100.00% 0.71%, 98.88% 8.33%, 98.23% 16.67%, 99.27% 25.00%, 99.50% 33.33%, 99.67% 41.67%, 99.50% 50.00%, 98.64% 58.33%, 98.66% 66.67%, 98.85% 75.00%, 98.75% 83.33%, 98.86% 91.67%, 98.66% 100.00%, 90.00% 98.22%, 80.00% 98.24%, 70.00% 98.42%, 60.00% 98.84%, 50.00% 99.64%, 40.00% 98.75%, 30.00% 99.37%, 20.00% 99.30%, 10.00% 98.76%, 0.00% 99.70%, 0.96% 91.67%, 0.98% 83.33%, 0.46% 75.00%, 1.51% 66.67%, 1.33% 58.33%, 0.54% 50.00%, 1.08% 41.67%, 1.62% 33.33%, 1.47% 25.00%, 0.68% 16.67%, 0.35% 8.33%); }
.blog-note--p11 { --note-clip: polygon(0.00% 1.17%, 9.09% 0.64%, 18.18% 0.58%, 27.27% 0.89%, 36.36% 1.68%, 45.45% 1.43%, 54.55% 2.00%, 63.64% 0.60%, 72.73% 1.69%, 81.82% 1.76%, 90.91% 0.27%, 100.00% 0.26%, 99.60% 7.69%, 99.26% 15.38%, 98.22% 23.08%, 99.09% 30.77%, 98.75% 38.46%, 99.54% 46.15%, 99.09% 53.85%, 98.78% 61.54%, 99.41% 69.23%, 99.07% 76.92%, 99.17% 84.62%, 98.93% 92.31%, 98.37% 100.00%, 90.91% 99.41%, 81.82% 98.42%, 72.73% 98.72%, 63.64% 98.31%, 54.55% 98.61%, 45.45% 98.43%, 36.36% 98.72%, 27.27% 98.21%, 18.18% 98.44%, 9.09% 98.49%, 0.00% 98.70%, 1.20% 92.31%, 1.75% 84.62%, 1.59% 76.92%, 1.03% 69.23%, 0.62% 61.54%, 0.65% 53.85%, 1.51% 46.15%, 0.25% 38.46%, 0.28% 30.77%, 1.01% 23.08%, 1.55% 15.38%, 1.76% 7.69%); }
.blog-note--p12 { --note-clip: polygon(0.00% 1.55%, 9.09% 0.89%, 18.18% 1.96%, 27.27% 1.12%, 36.36% 0.54%, 45.45% 1.46%, 54.55% 1.10%, 63.64% 0.48%, 72.73% 1.79%, 81.82% 1.81%, 90.91% 1.69%, 100.00% 1.08%, 99.41% 7.14%, 99.25% 14.29%, 98.48% 21.43%, 98.52% 28.57%, 99.54% 35.71%, 98.89% 42.86%, 99.53% 50.00%, 98.72% 57.14%, 98.53% 64.29%, 99.28% 71.43%, 99.68% 78.57%, 99.40% 85.71%, 98.27% 92.86%, 98.74% 100.00%, 90.91% 98.00%, 81.82% 99.65%, 72.73% 99.73%, 63.64% 99.69%, 54.55% 99.41%, 45.45% 98.68%, 36.36% 98.57%, 27.27% 97.98%, 18.18% 98.11%, 9.09% 97.91%, 0.00% 98.99%, 0.62% 92.86%, 1.09% 85.71%, 0.97% 78.57%, 1.16% 71.43%, 1.37% 64.29%, 0.79% 57.14%, 1.71% 50.00%, 1.46% 42.86%, 1.75% 35.71%, 1.25% 28.57%, 1.79% 21.43%, 0.88% 14.29%, 0.76% 7.14%); }
.blog-note--p13 { --note-clip: polygon(0.00% 1.93%, 9.09% 1.13%, 18.18% 1.49%, 27.27% 1.34%, 36.36% 1.24%, 45.45% 1.49%, 54.55% 2.06%, 63.64% 0.36%, 72.73% 1.89%, 81.82% 1.86%, 90.91% 1.25%, 100.00% 1.90%, 99.23% 9.09%, 99.24% 18.18%, 98.75% 27.27%, 99.49% 36.36%, 98.78% 45.45%, 98.25% 54.55%, 98.42% 63.64%, 98.65% 72.73%, 99.19% 81.82%, 99.48% 90.91%, 98.64% 100.00%, 90.91% 98.03%, 81.82% 99.70%, 72.73% 99.52%, 63.64% 99.44%, 54.55% 98.74%, 45.45% 99.30%, 36.36% 98.93%, 27.27% 98.54%, 18.18% 98.64%, 9.09% 98.93%, 0.00% 99.37%, 0.40% 90.91%, 0.91% 81.82%, 0.58% 72.73%, 1.04% 63.64%, 0.59% 54.55%, 0.92% 45.45%, 1.70% 36.36%, 0.55% 27.27%, 1.63% 18.18%, 1.62% 9.09%); }

/* ======================================================== article page === */
/* Pages/Blog/Post.cshtml — the single note, read end to end. Everything under
   .article-body is a descendant selector because the markup is Markdig output
   and carries no classes of its own. */

.article-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(118px, 11vw, 140px) var(--gutter) 0;
}

/* The bar sits above the nav capsule (z-index 60) because it reports on the
   page behind it. Its width transition is neutralised by the global
   reduced-motion rule; the reading position still updates, since that is
   information, not movement. */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: 0;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
  transition: width .1s linear;
}

/* --- masthead ------------------------------------------------------------- */
.article-head { position: relative; }

/* Double rule: the outer box carries the heavy pair, the inner the hairlines. */
.article-rule {
  border-top: 2px solid rgba(58, 42, 30, .75);
  border-bottom: 1px solid rgba(58, 42, 30, .55);
  padding: 3px 0;
}
.article-rule__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 4px;
  border-top: 1px solid rgba(58, 42, 30, .4);
  border-bottom: 1px solid rgba(58, 42, 30, .3);
  font-family: var(--font-stamp);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.article-rule__back { white-space: nowrap; }
.article-rule__back:focus-visible { color: var(--accent); outline-offset: 3px; }
.article-rule__date { white-space: nowrap; }

.article-title {
  position: relative;
  text-align: center;
  padding: clamp(20px, 2.6vw, 32px) 0 clamp(20px, 2.4vw, 28px);
}
.article-title__stamp {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
/* The prototype tilts the header stamp; the seal itself stays the shared one. */
.article-title__stamp .pp-tag { transform: rotate(-2.4deg); }

.article-title h1 {
  margin: 0 auto;
  font-weight: var(--weight-display-bold);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.026em;
  color: var(--ink-900);
  max-width: 18ch;
  text-wrap: balance;
}
.article-title__deck {
  margin: 18px auto 0;
  font-size: clamp(16.5px, 1.7vw, 18px);
  font-weight: var(--weight-body-md);
  line-height: var(--lh-body);
  color: #4A3F35;
  max-width: 44ch;
  text-wrap: balance;
}
.article-title__meta {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--label-base);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.article-chip {
  display: inline-block;
  margin: 0 3px;
  padding: 2px 8px;
  font-size: 13.5px;
  font-weight: var(--weight-body-strong);
  letter-spacing: .12em;
  color: var(--ink-500);
  background: #EBE6DA;
  border: 1px solid #C8C2B4;
  border-radius: 3px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.article-chip:hover {
  background: var(--accent);
  color: var(--cream-100);
  border-color: var(--accent-ink);
}
.article-chip:active { transform: translateY(1px); }
.article-chip:focus-visible { outline-offset: 2px; }

/* Rule — star — rule, closing the masthead. */
.article-star {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .6;
}
.article-star i {
  flex: 1;
  height: 1px;
  background: var(--ink-400);
  display: block;
}
.article-star svg { flex: none; display: block; }

/* --- measure -------------------------------------------------------------- */
.article-measure {
  max-width: 660px;
  margin: clamp(34px, 4vw, 52px) auto 0;
}

/* --- table of contents ---------------------------------------------------- */
.article-toc {
  margin: 0 0 clamp(26px, 3vw, 34px);
  padding: 17px 22px 19px;
  border: 1px dashed var(--border-hair);
  border-radius: var(--radius-note);
  background: rgba(251, 244, 230, .55);
}
.article-toc__title {
  margin: 0;
  font-family: var(--font-stamp);
  font-size: var(--label-fine);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
}
.article-toc__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: article-toc;
}
.article-toc__item {
  display: flex;
  gap: 12px;
  font-size: var(--text-body-sm);
  line-height: 1.5;
}
.article-toc__item + .article-toc__item { margin-top: 7px; }
.article-toc__item::before {
  counter-increment: article-toc;
  content: counter(article-toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.article-toc__item--3 { padding-left: 22px; }
.article-toc__item a { color: var(--ink-600); }

/* --- body typography ------------------------------------------------------ */
/* Paragraph top margins are set by what precedes them, so the rhythm survives
   whatever order the Markdown happens to use. */
.article-body > p {
  margin: 18px 0 0;
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: #3A3129;
  text-wrap: pretty;
}
.article-body > p:first-child {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body-md);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.article-body > p:first-child + p { margin-top: 22px; }
.article-body > h2 + p { margin-top: 16px; }
.article-body > figure + p,
.article-body > pre + p,
.article-body > .article-code + p { margin-top: 26px; }
.article-body > ul + p,
.article-body > ol + p,
.article-body > table + p { margin-top: 22px; }

.article-body > h2 {
  margin: clamp(42px, 4vw, 52px) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: clamp(25px, 2.6vw, 30px);
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--ink-900);
}
/* A blockquote already supplies the gap, so the heading after it adds none. */
.article-body > blockquote + h2 { margin-top: 0; }

.article-body > h3 {
  margin: clamp(30px, 3vw, 38px) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: var(--text-h3);
  letter-spacing: -.016em;
  line-height: 1.18;
  color: var(--ink-900);
}
.article-body > h3 + p { margin-top: 14px; }

.article-body blockquote {
  margin: clamp(38px, 3.6vw, 46px) 0;
  padding: 4px 0 4px clamp(16px, 2.5vw, 24px);
  border-left: 3px solid var(--accent);
}
.article-body blockquote > p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body-md);
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.35;
  letter-spacing: -.014em;
  color: var(--ink-900);
  max-width: 30ch;
  text-wrap: pretty;
}
.article-body blockquote > p + p { margin-top: 14px; }

.article-body ul,
.article-body ol {
  margin: 18px 0 0;
  padding-left: 22px;
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: #3A3129;
}
.article-body > h2 + ul,
.article-body > h2 + ol { margin-top: 16px; }
.article-body li + li { margin-top: 8px; }
.article-body li > ul,
.article-body li > ol { margin-top: 8px; }
.article-body ul { list-style: none; }
/* A pencil dash instead of a bullet, on the same ink as every other marker. */
.article-body ul > li { position: relative; }
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: .78em;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}
.article-body ol { list-style: decimal; }
.article-body ol > li::marker {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 15.5px;
  background: rgba(200, 90, 50, .09);
  border: 1px solid rgba(200, 90, 50, .28);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--accent-ink);
}

.article-body a {
  color: var(--ink-600);
  border-bottom: 1px solid rgba(74, 52, 37, .32);
  padding-bottom: 1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.article-body a:hover {
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
}
.article-body a:focus-visible { color: var(--accent); }
.article-body a code { color: inherit; }

.article-body hr {
  margin: clamp(34px, 3.6vw, 44px) 0;
  border: 0;
  border-top: 1px solid var(--border-rule);
}

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-stamp);
}

/* Wide tables scroll inside themselves; the page never scrolls sideways. */
.article-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 26px 0 0;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.55;
  color: #3A3129;
}
.article-body th,
.article-body td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-rule);
  text-align: left;
  vertical-align: top;
}
.article-body thead th {
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
  border-bottom-color: var(--border-strong);
}
.article-body tbody tr:last-child td { border-bottom: 0; }

/* --- code block ----------------------------------------------------------- */
/* paper.js wraps every <pre> in .article-code and prints the language bar with
   the COPY button. Without JavaScript the <pre> stands on its own, which is
   why it carries the shadow and the full radius by default. */
.article-body pre {
  position: relative;
  margin: 26px 0 0;
  padding:
    clamp(18px, 3vw, 26px)
    clamp(14px, 2.4vw, 22px)
    clamp(18px, 3vw, 26px)
    clamp(18px, 3vw, 26px);
  background: #23211E;
  border: 1px solid #3A3530;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .15);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3A3530 #23211E;
  font-family: var(--font-mono);
  font-size: 15.5px;
  line-height: 1.7;
  color: #E8DFD2;
  tab-size: 4;
}
.article-body pre code {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.article-code {
  position: relative;
  margin: 26px 0 0;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .15);
}
.article-code > pre {
  margin: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: none;
}
.article-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 16px 5px;
  background: #2B2824;
  border: 1px solid #3A3530;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.article-code__name {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9C9184;
}
.article-code__copy {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  min-height: 32px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: var(--weight-body-strong);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E08A5E;
  transition: color var(--dur-fast) ease;
}
.article-code__copy:hover { color: var(--cream-100); }
.article-code__copy:active { transform: translateY(1px); }
.article-code__copy:focus-visible { outline-offset: 2px; }

/* Prism palette. Four inks only: keyword, string, comment and everything else.
   Anything the grammar tokenises beyond those falls back to the default ink
   rather than inventing a colour. No Prism theme is shipped, so the reset below
   only stops the highlighted <code> from picking up the inline-code chip: the
   <pre> above owns the surface, the padding and the scroll. Prism also stamps
   language-* on the <pre>, which is why the reset never names that element. */
.article-body code[class*="language-"] {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-shadow: none;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  hyphens: none;
}
.article-body .token {
  color: #E8DFD2;
  background: none;
  font-style: normal;
  font-weight: inherit;
}
.article-body .token.keyword,
.article-body .token.builtin,
.article-body .token.preprocessor,
.article-body .token.atrule {
  color: #DE8B62;
}
.article-body .token.string,
.article-body .token.interpolation-string,
.article-body .token.char,
.article-body .token.regex,
.article-body .token.attr-value {
  color: #C9CFA4;
}
/* An interpolation hole is still part of the literal, so it keeps its ink. */
.article-body .token.interpolation-string .token { color: #C9CFA4; }
.article-body .token.comment,
.article-body .token.prolog,
.article-body .token.doctype,
.article-body .token.cdata {
  color: #8C8171;
}

/* --- colophon ------------------------------------------------------------- */
.article-colophon {
  margin-top: clamp(34px, 3.6vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--border-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}
.article-colophon__sign {
  margin: 0;
  width: fit-content;
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--terracotta-700);
  transform: rotate(-1.6deg);
}
.article-colophon__langs {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-secondary);
}
.article-colophon__stamp {
  font-family: var(--font-mono);
  font-weight: var(--weight-body-strong);
  font-size: var(--label-base);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: transparent;
  border: 1.5px dashed rgba(200, 90, 50, .55);
  border-radius: var(--radius-note);
  padding: 9px 16px;
  transform: rotate(-1deg);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.article-colophon__stamp:hover {
  background: var(--accent);
  color: var(--cream-100);
}

/* --- adjacent notes ------------------------------------------------------- */
.article-adjacent {
  max-width: 860px;
  margin: clamp(44px, 5vw, 64px) auto 0;
}
.article-adjacent__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  opacity: .6;
}
.article-adjacent__head i {
  flex: 1;
  height: 1px;
  background: var(--ink-400);
  display: block;
}
.article-adjacent__head span {
  font-family: var(--font-stamp);
  font-size: 13.5px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.article-adjacent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px clamp(20px, 2.6vw, 30px);
}

/* Torn sheets: the clip-path crops a box-shadow, so the lift is a drop-shadow
   filter. Unlike the writing cards, the hover keeps the resting rotation. */
.article-adjacent__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 168px;
  padding: 24px 28px 22px;
  background-color: var(--paper-sheet);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(74, 62, 61, .062) 29px 30px),
    radial-gradient(circle, rgba(74, 62, 61, .028) 1px, transparent 1.4px);
  background-size: auto, 7px 7px;
  filter: drop-shadow(0 3px 0 rgba(55, 41, 29, .05)) drop-shadow(0 12px 22px rgba(55, 41, 29, .08));
  transition: transform var(--dur-base) ease;
}
.article-adjacent__card:focus-visible { outline-offset: 4px; }

.article-adjacent__card--prev {
  transform: rotate(-.3deg);
  clip-path: polygon(1% 1.6%, 30% 0.4%, 64% 1.8%, 99.2% 0.6%, 98.4% 26%, 99.4% 52%, 98.5% 76%, 99.2% 97.6%, 62% 99.4%, 30% 98.2%, 1% 99.2%, 1.8% 74%, 0.6% 50%, 1.7% 26%);
}
.article-adjacent__card--prev:hover { transform: translateY(-5px) rotate(-.3deg); }
.article-adjacent__card--prev:active { transform: translateY(-2px) rotate(-.3deg); }

.article-adjacent__card--next {
  transform: rotate(.25deg);
  clip-path: polygon(0.6% 0.6%, 34% 1.8%, 68% 0.4%, 99.4% 1.4%, 98.5% 24%, 99.3% 50%, 98.4% 74%, 99.4% 99%, 64% 98.2%, 32% 99.4%, 0.8% 98.4%, 1.6% 76%, 0.5% 52%, 1.6% 28%);
}
.article-adjacent__card--next:hover { transform: translateY(-5px) rotate(.25deg); }
.article-adjacent__card--next:active { transform: translateY(-2px) rotate(.25deg); }

.article-adjacent__label {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-family: var(--font-stamp);
  font-size: 13.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.article-adjacent__arrow { color: var(--accent); }
.article-adjacent__spacer { margin-left: auto; }
.article-adjacent__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 20px;
  line-height: 29px;
  letter-spacing: -.016em;
  color: var(--ink-900);
  text-wrap: pretty;
}
.article-adjacent__meta {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .08em;
  color: #4A3F35;
}
.article-adjacent__card--next .article-adjacent__title,
.article-adjacent__card--next .article-adjacent__meta { text-align: right; }

/* --- related notes -------------------------------------------------------- */
.article-related {
  max-width: 860px;
  margin: clamp(38px, 4.2vw, 54px) auto 0;
}
.article-related__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.article-related__list li + li { border-top: 1px solid var(--border-rule); }
.article-related__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
}
.article-related__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink-900);
  text-wrap: pretty;
}
.article-related__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--label-fine);
  letter-spacing: .08em;
  color: var(--ink-500);
  white-space: nowrap;
}
.article-related__list a:hover .article-related__title,
.article-related__list a:hover .article-related__meta { color: var(--accent); }

/* --- closing CTA ---------------------------------------------------------- */
.article-cta { margin-top: clamp(30px, 3.4vw, 48px); }
.article-cta__ornament {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  opacity: .5;
}
.article-cta__ornament i {
  flex: 1;
  height: 1px;
  background: var(--ink-400);
  display: block;
}
.article-cta__ornament svg { flex: none; display: block; }
.article-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(10px, 1.4vw, 21px);
}
.article-cta__row h2 {
  font-weight: var(--weight-display-bold);
  font-size: clamp(25px, 2.8vw, 38px);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  max-width: 24ch;
  color: var(--ink-900);
  text-wrap: balance;
}
.article-cta__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: clamp(0px, 2vw, 26px);
}
.article-cta__buttons .pp-btn {
  min-width: 196px;
  min-height: 56px;
  justify-content: center;
}

/* --- article responsive --------------------------------------------------- */
@media (max-width: 559px) {
  .article-adjacent__card { padding: 20px 20px 18px; }
  .article-related__list a { flex-wrap: wrap; gap: 6px 14px; }
  .article-related__meta { margin-left: 0; }
}