/* =========================================================
   With Love, Mostly — v2
   Palette, type, and ornament per redesign spec.
   No framework. No build step.
   ========================================================= */

/* ---------- @font-face (real files where we have them) ---------- */
@font-face {
  font-family: "Allegarde";
  src: url("/assets/fonts/allegarde-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GirlFromNowhere";
  src: url("/assets/fonts/girlfromnowhere-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GirlFromNowhere";
  src: url("/assets/fonts/girlfromnowhere-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Belmonte Ballpoint";
  src: url("/assets/fonts/belmonte-ballpoint-print.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Belmonte Ballpoint";
  src: url("/assets/fonts/belmonte-ballpoint-cursive.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Kept as a very-last-resort fallback for older browsers loading a
   cold cache — the real files above always win when present. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Caveat:wght@400;500&display=swap');

/* ---------- tokens ---------- */
:root {
  /* Palette per spec */
  --black:        #000000;
  --forest:       #1F2A07;   /* dark green — primary anchor */
  --forest-tint:  #2E3E12;   /* one step lighter, for hovers */
  --pistachio:    #7D8827;   /* muted pistachio */
  --burgundy:     #70341C;   /* burgundy / rust orange */
  --brown:        #3C2015;   /* dark brown */
  --butter:       #FEFFBF;   /* soft butter yellow */
  --beige:        #E2CFA7;   /* beige */
  --pink:         #E2D5DB;   /* baby pink — Substack ONLY */
  --white:        #FBF6EC;   /* warm white — page background */
  --rule:         #C9B58A;   /* hairline rule (derived from beige) */

  /* Type hierarchy per Tetz:
     - Allegarde is the display face. Headings and subheadings only.
       There is no true italic file; italic renders as browser-synth
       slant, which she has approved.
     - GirlFromNowhere is body. Regular + Italic files loaded.
     - Belmonte Ballpoint is the handwritten face, used for highlights
       and asides. Print = "regular", Cursive = "italic". */
  --serif-display: "Allegarde", "EB Garamond", Georgia, "Times New Roman", serif;
  --body:          "GirlFromNowhere", "EB Garamond", Georgia, "Helvetica Neue", Arial, sans-serif;
  --sans:          "GirlFromNowhere", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hand:          "Belmonte Ballpoint", "Caveat", "Bradley Hand", "Snell Roundhand", cursive;

  /* Legacy aliases kept so existing rules that reference these tokens
     continue to work. --serif now points at the body face; --serif-italic
     is body italic (GirlFromNowhere Italic). */
  --serif:         var(--body);
  --serif-italic:  var(--body);

  /* Rhythm */
  --measure: 34rem;
  --measure-wide: 44rem;
  --pad: clamp(1.25rem, 3vw, 2rem);
  --shell: 72rem;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--brown);
  background: var(--white);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Subtle paper grain — inline SVG data URI, layered under everything.
     Kept low-opacity so it reads as texture, not noise. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

a {
  color: var(--burgundy);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color .2s var(--ease);
}
a:hover { color: var(--brown); }

/* ---------- shell ---------- */
.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.prose {
  max-width: var(--measure);
  margin: 3rem auto;
}
.prose.wide { max-width: var(--measure-wide); }

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--serif-display);
  color: var(--forest);
  line-height: 1.12;
  margin: 0 0 .6rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.3rem);
}
h1.italic, h2.italic, h3.italic {
  font-family: var(--serif-display);
  font-style: italic;
}
h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-top: 2.4rem;
}
h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.15rem;
  margin-top: 1.7rem;
}

p { margin: 0 0 1.05rem; }
em, i { font-family: var(--serif-italic); font-style: italic; }
strong, b { font-weight: 600; color: var(--forest); }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .8;
  margin: 0 0 .8rem;
}
.pull {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--forest);
  font-size: 1.35rem;
  line-height: 1.4;
  border-left: 2px solid var(--burgundy);
  padding-left: 1rem;
  margin: 1.6rem 0;
}

/* Drop cap — requires explicit .dropcap class (avoids double caps
   when an eyebrow or heading precedes the first paragraph). Color
   flips based on data-cap-mode on any ancestor: dark on light by
   default, butter on dark. */
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--burgundy);
  font-size: 4.2rem;
  line-height: .82;
  float: left;
  padding: .35rem .55rem 0 0;
}
[data-cap-mode="light"] .dropcap::first-letter {
  color: var(--butter);
}

/* ---------- masthead / nav ---------- */
.masthead {
  padding: 2.4rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  position: relative;
}
.wordmark {
  display: inline-block;
  color: var(--forest);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.55rem, 3.2vw, 2rem);
  letter-spacing: .01em;
  background: none;
}
.wordmark:hover { color: var(--forest-tint); }
.wordmark .amp { color: var(--burgundy); }
.tagline {
  margin: .3rem 0 0;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .7;
}
.nav {
  margin: 1.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  justify-content: center;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nav a {
  color: var(--forest);
  background: none;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
}
.nav a[aria-current="page"] {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}
.nav a:hover {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

/* ---------- section dividers (lace + inline SVG flourish) ---------- */
.divider {
  display: block;
  margin: 3.5rem auto;
  max-width: 60rem;
  text-align: center;
}
.divider--lace {
  height: 44px;
  background: url("/assets/alice/lace-border.png") center/auto 100% repeat-x;
  opacity: .8;
  filter: hue-rotate(-4deg);
}
.divider--flourish {
  color: var(--burgundy);
  font-family: var(--serif-display);
  font-style: italic;
  opacity: .85;
}
.divider--flourish svg {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  height: auto;
}

/* ---------- buttons ---------- */
.button {
  display: inline-block;
  padding: .8rem 1.4rem;
  background: var(--forest);
  color: var(--white);
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: 2px;
  background-image: none;
  border: 1px solid var(--forest);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.button:hover { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.button.ghost {
  background: transparent;
  color: var(--forest);
}
.button.ghost:hover { background: var(--forest); color: var(--white); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: baseline;
  margin: 2rem 0;
}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero {
  padding: 4rem 0 3rem;
  position: relative;
  text-align: center;
}
.hero .site-title {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--forest);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .95;
  margin: 0;
  letter-spacing: -0.01em;
}
.hero .site-title .amp { color: var(--burgundy); font-style: italic; }
.hero .sub {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: .8;
}

.hero-photos {
  position: relative;
  margin: 3.5rem auto 0;
  max-width: 60rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  min-height: 34rem;
}
.hero-photos::before {
  content: "";
  position: absolute;
  inset: -2rem;
  background: url("/assets/alice/bg-damask.jpg") center/cover no-repeat;
  opacity: .18;
  z-index: 0;
  border-radius: 4px;
  filter: contrast(.95);
}
.hero-photos .frame {
  position: relative;
  z-index: 1;
  background: var(--white);
  padding: .55rem;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 0 rgba(112,52,28,.05), 0 10px 26px -14px rgba(31,42,7,.35);
  transition: transform .3s var(--ease);
}
.hero-photos .frame:hover { transform: translateY(-3px); }
.hero-photos .frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.hero-photos .p1 { grid-column: 1 / span 5; grid-row: 1; transform: translateY(1.8rem) rotate(-2deg); }
.hero-photos .p2 { grid-column: 5 / span 5; grid-row: 1; transform: translateY(-1rem) rotate(1.5deg); z-index: 2; }
.hero-photos .p3 { grid-column: 9 / span 4; grid-row: 1; transform: translateY(2.6rem) rotate(-1deg); }
@media (max-width: 720px) {
  .hero-photos { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .hero-photos .p1, .hero-photos .p2, .hero-photos .p3 {
    grid-column: 1; grid-row: auto; transform: none;
  }
}

/* ============================================================
   HOME — statement section
   ============================================================ */
.statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 60rem;
  margin: 4rem auto;
}
.statement .copy p { font-size: 1.1rem; line-height: 1.55; }
.statement .copy p:first-of-type { font-family: var(--serif-display); font-style: italic; font-size: 1.25rem; color: var(--forest); }
.statement .photo-bw img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  border: 1px solid var(--rule);
  padding: .5rem;
  background: var(--white);
}
.statement .panel {
  grid-column: 1 / -1;
  background: var(--beige);
  padding: 2rem 2.4rem;
  margin-top: 1rem;
  border-radius: 3px;
  position: relative;
}
.statement .panel .quote {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--forest);
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
  max-width: 42rem;
}
.statement .panel .attribution {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown);
}
.statement .panel a { color: var(--burgundy); }
@media (max-width: 720px) {
  .statement { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME — philosophy section (ghost text + drop cap)
   ============================================================ */
.philosophy {
  position: relative;
  padding: 5rem 0 4rem;
  margin: 4rem 0;
  color: var(--white);
  background: var(--forest);
  overflow: hidden;
}
.philosophy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/alice/bg-leaves.jpg") center/cover;
  opacity: .18;
  mix-blend-mode: screen;
  pointer-events: none;
}
.philosophy .ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.philosophy .ghost span {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(6rem, 16vw, 14rem);
  line-height: .9;
  color: var(--butter);
  opacity: .07;
  white-space: nowrap;
  letter-spacing: -.02em;
  user-select: none;
}
.philosophy .inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--pad);
  color: var(--white);
}
.philosophy h2 {
  color: var(--butter);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: 0;
}
.philosophy p { color: var(--white); font-size: 1.08rem; }
.philosophy .dropcap::first-letter {
  color: var(--butter);
  font-size: 4.4rem;
}

/* ============================================================
   HOME — topics accordion (rotated vertical tabs)
   ============================================================ */
.topics {
  max-width: 62rem;
  margin: 5rem auto 4rem;
}
.topics h2 {
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  margin-bottom: .4rem;
}
.topics .lede {
  text-align: center;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .75;
  margin: 0 0 2.5rem;
}
.topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.topic-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--forest);
  color: var(--white);
  border: 1px solid var(--forest);
  text-decoration: none;
  background-image: none;
  transition: transform .3s var(--ease);
}
.topic-card:hover { transform: translateY(-4px); color: var(--white); }
.topic-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 30%;
  padding: 1rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.topic-card .label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 1rem .8rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--butter);
  background: linear-gradient(90deg, rgba(31,42,7,.85) 0%, rgba(31,42,7,0) 100%);
  z-index: 1;
}
@media (max-width: 900px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .topics-grid { grid-template-columns: 1fr; } .topic-card { aspect-ratio: 2 / 1; } }

/* ============================================================
   HOME — Instagram strip
   ============================================================ */
.ig-strip {
  max-width: var(--shell);
  margin: 4rem auto;
  text-align: center;
}
.ig-strip .eyebrow { margin-bottom: .3rem; }
.ig-strip h2 {
  font-family: var(--serif-display);
  font-style: italic;
  margin: 0 0 1.5rem;
}
.ig-strip .handle {
  display: inline-block;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 2rem;
}
.ig-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
}
.ig-tile {
  aspect-ratio: 1;
  background: var(--beige);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: .8;
  padding: .6rem;
  text-align: center;
}
@media (max-width: 720px) { .ig-row { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Subscribe (home email signup with rabbit + also archive blocks)
   ============================================================ */
.subscribe {
  max-width: 60rem;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--pink); /* Substack section — pink allowed here */
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: center;
}
.subscribe .rabbit {
  text-align: center;
}
.subscribe .rabbit img {
  max-height: 320px;
  width: auto;
  margin: 0 auto;
}
.subscribe .copy .eyebrow { color: var(--burgundy); }
.subscribe h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--forest);
  margin: 0 0 .4rem;
}
.subscribe p { color: var(--brown); margin: 0 0 1rem; font-size: .98rem; }
.subscribe iframe {
  width: 100%;
  max-width: 480px;
  height: 320px;
  border: 1px solid var(--rule) !important;
  background: var(--white);
  display: block;
}
@media (max-width: 720px) {
  .subscribe { grid-template-columns: 1fr; }
  .subscribe .rabbit img { max-height: 200px; }
}

/* Compact subscribe block used on the Notes archive page */
.subscribe.compact {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 1.6rem;
}
.subscribe.compact .rabbit { display: none; }
.subscribe.compact iframe { margin: 0 auto; }

/* ============================================================
   NOTES — archive layout + filter
   ============================================================ */
.archive-intro {
  max-width: var(--measure);
  margin: 3rem auto 1rem;
}
.filter-bar {
  max-width: var(--shell);
  margin: 2.5rem auto 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
}
.filter-bar button {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--rule);
  padding: .55rem 1rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-bar button:hover { border-color: var(--forest); }
.filter-bar button[aria-pressed="true"] {
  background: var(--forest);
  color: var(--butter);
  border-color: var(--forest);
}

.post {
  max-width: var(--measure-wide);
  margin: 0 auto;
}
.post .date {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .75;
}
.post .dek {
  margin-top: .5rem;
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--brown);
  opacity: .85;
  font-size: 1.05rem;
}
.post .topic-tag {
  display: inline-block;
  margin-top: .8rem;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--burgundy);
  padding: .25rem .55rem;
  border: 1px solid var(--burgundy);
  border-radius: 2px;
}
.post h3.subhead {
  font-family: var(--sans);
  font-style: normal;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-top: 2rem;
}
.post h3.subhead-serif {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin-top: 2rem;
}
.post.hidden { display: none; }

/* ============================================================
   Currently list + Session details (re-themed, layout unchanged)
   ============================================================ */
.currently dl {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.2rem 1.6rem;
  align-items: baseline;
}
.currently dt {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .8;
}
.currently dd { margin: 0; font-family: var(--serif); }
@media (max-width: 540px) {
  .currently dl { grid-template-columns: 1fr; gap: .3rem 0; }
  .currently dd { margin-bottom: 1rem; }
}
.stamp {
  font-family: var(--hand);
  color: var(--burgundy);
  font-size: 1.7rem;
  transform: rotate(-4deg);
  display: inline-block;
  margin: 0 0 .5rem;
}

.details {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 2rem 0;
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.2rem 2rem;
}
.details dt {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .8;
  margin-bottom: .25rem;
}
.details dd { margin: 0; font-family: var(--serif); }

/* ============================================================
   Colophon — swatches (no hex on public page) + type spec cards
   ============================================================ */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  list-style: none;
  padding: 0;
}
.swatch {
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--white);
}
.swatch .chip { height: 4.5rem; }
.swatch .meta {
  padding: .7rem .8rem .8rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--brown);
}
.swatch .meta b {
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--forest);
  font-size: .68rem;
  margin-bottom: .2rem;
}
.swatch .meta em {
  font-family: var(--serif-italic);
  font-style: italic;
  opacity: .8;
  color: var(--brown);
}

.typespec {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0;
}
.typespec:last-child { border-bottom: 1px solid var(--rule); }
.typespec .role {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .8;
  margin-bottom: .5rem;
}
.typespec .sample-serif { font-family: var(--serif-display); font-style: italic; font-size: 1.9rem; color: var(--forest); margin: 0; }
.typespec .sample-sans  { font-family: var(--sans);  font-size: 1.15rem; letter-spacing: .04em; color: var(--brown); margin: 0; }
.typespec .sample-hand  { font-family: var(--hand);  font-size: 2rem; color: var(--burgundy); margin: 0; }
.typespec .note {
  font-size: .98rem;
  color: var(--brown);
  opacity: .85;
  margin: .5rem 0 0;
  max-width: 40rem;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  margin-top: 5rem;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: .85;
}
.footer a { color: var(--forest); }
.footer .flourish {
  font-family: var(--hand);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--burgundy);
  opacity: .9;
  margin-bottom: .8rem;
  display: block;
}

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