/* site.css — design-system core for lovelongtoenails.com
 *
 * Phase 2 visual redesign scaffold. CSS custom properties drive the
 * dark-theme colour palette; downstream tasks (T8–T13) extend the
 * sections marked below with per-archetype and per-class rules.
 *
 * Delimiter comments are intentionally verbose so three-way merges
 * between parallel worktrees (T8, T9, T10, T11, T13) resolve cleanly.
 */

/* ============================================================
   === Tokens ===
   ============================================================ */
:root {
  /* ── Candlelight palette (Phase 3 T1) ────────────────────────
     Warm low-light boudoir theme. Replaces the neutral-cool dark
     of Phase 2. See DESIGN_AUDIT.md § C for role notes. */
  --ink:           #15110f;   /* page background, warm near-black */
  --ink-raised:    #1f1916;   /* cards / surfaces */
  --ink-sunken:    #0c0907;   /* modal / scrim / header / footer */
  --parchment:     #f4ecdf;   /* primary text on dark; light-theme bg */
  --parchment-dim: #c9bda8;   /* muted text on dark */
  --oxblood:       #7a1d24;   /* deep brand red */
  --carmine:       #b8313b;   /* mid-red, CTA / hover */
  --rouge:         #e57b80;   /* warm pink, accent-soft */
  --gilt:          #c9a25a;   /* tarnished gold — links, rules */
  --velvet:        #3a1a2a;   /* purple-burgundy — visited links */
  --border:        #3a2e26;   /* hairline rules, warm brown */

  /* ── Link / accent roles (recoloured to candlelight) ──────── */
  --accent:        var(--carmine);
  --accent-soft:   var(--rouge);
  --link:          var(--accent);
  --link-visited:  var(--velvet);

  /* ── Backward-compat aliases (Phase 2 names → Phase 3 tokens)
     Keep these so any selector elsewhere in the file (or any 96-page
     dependency) that still references --bg / --surface / --text /
     --text-muted continues to resolve identically. */
  --bg:            var(--ink);
  --surface:       var(--ink-raised);
  --text:          var(--parchment);
  --text-muted:    var(--parchment-dim);

  /* ── Typography tokens (Phase 3 T3) ──────────────────────── */
  --font-display:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-script:   'Pacifico', cursive;

  /* Fluid type scale — clamp() so mobile downshifts gracefully */
  --t-display:     clamp(2.5rem, 6vw, 4.5rem);
  --t-h1:          clamp(2rem,   4vw, 3rem);
  --t-h2:          clamp(1.5rem, 3vw, 2.25rem);
  --t-h3:          1.5rem;
  --t-body:        1.0625rem;
  --t-small:       0.875rem;
  --t-micro:       0.75rem;

  /* Spacing scale (rem) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;

  /* Layout */
  --container-max: 1100px;

  /* ── Breakpoints (renamed for clarity; pixel values unchanged) */
  --bp-phone:       640px;
  --bp-tablet:      768px;
  --bp-desktop:    1024px;
  --bp-wide:       1280px;
  /* Backward-compat aliases */
  --break-sm:      var(--bp-phone);
  --break-md:      var(--bp-tablet);
  --break-lg:      var(--bp-desktop);
}

/* ============================================================
   === Reset / normalize ===
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Prevent iOS text-size inflation on orientation change */
  -webkit-text-size-adjust: 100%;
  /* Smooth scroll for anchor navigation */
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   === Base ===
   ============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  /* Prevent orphaned headings from running to window edge */
  text-wrap: balance;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a:focus-visible {
  color: var(--accent-soft);
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default list indentation — downstream tasks style as needed */
ul, ol {
  padding-inline-start: var(--s-5);
}

/* ============================================================
   === Images ===
   ============================================================ */
img {
  max-width: 100%;
  height: auto;
  /* Prevent layout shift while loading */
  display: block;
}

/* ============================================================
   === Container ===
   ============================================================ */
.container,
body > * {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   === T8 body-classes (theme-dark, archetype-X) ===
   ============================================================ */
body.theme-dark,
body.theme-candlelight {
  /* Phase 3 T1: theme-dark kept as alias of theme-candlelight so the
     96 pages carrying `class="theme-dark archetype-X"` get the new
     warm palette without any markup edits. Tokens already point at
     the candlelight values via the alias chain in :root. */
  background: var(--ink);
  color: var(--parchment);
}
body.theme-dark a,
body.theme-candlelight a { color: var(--link); }
body.theme-dark a:visited,
body.theme-candlelight a:visited { color: var(--link-visited); }
body.archetype-splash,
body.archetype-hub,
body.archetype-model,
body.archetype-gallery,
body.archetype-story {
  /* per-archetype rules added in T13 */
}

/* ============================================================
   === T9 font-extraction classes (f-*, c-*, s-*) ===
   ============================================================ */
/* font-face buckets — Phase 3 T3: now driven by font tokens */
.f-sans { font-family: var(--font-body); }
.f-serif { font-family: var(--font-display); }
.f-script { font-family: var(--font-script); }
.f-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Display modifier: promotes Cormorant to its actual display use
   (italic, display-scale, tight letter-spacing). Compose as
   `<h1 class="f-serif display">…</h1>`. */
.f-serif.display,
.f-serif--display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* sizes */
.s-xs { font-size: 0.75em; }
.s-sm { font-size: 0.875em; }
.s-lg { font-size: 1.125em; }
.s-xl { font-size: 1.25em; }
.s-2xl { font-size: 1.5em; }
.s-3xl { font-size: 2em; }

/* colors — Phase 3 T2: legacy Netscape-palette hexes folded into
   brand tokens. Class names preserved (96 pages reference them);
   only the emitted colour value changed. Red-adjacent classes
   already mapped to --accent are left alone. */
.c-000000 { color: var(--bg); }                   /* bg token */
.c-000099 { color: var(--gilt); }                 /* blue → gilt */
.c-006600 { color: var(--parchment-dim); }        /* green → parchment-dim */
.c-00CC00 { color: var(--parchment-dim); }        /* green */
.c-00FFFF { color: var(--parchment-dim); }        /* cyan */
.c-3366FF { color: var(--gilt); }                 /* blue */
.c-33CC00 { color: var(--parchment-dim); }        /* green */
.c-33CCFF { color: var(--gilt); }                 /* cyan-blue */
.c-660000 { color: var(--accent); }               /* dark red */
.c-663366 { color: var(--velvet); }               /* purple → velvet */
.c-666600 { color: var(--gilt); }                 /* olive → gilt */
.c-66FF99 { color: var(--parchment-dim); }        /* green */
.c-808000 { color: var(--gilt); }                 /* olive → gilt */
.c-990000 { color: var(--accent); }               /* dark red */
.c-993366 { color: var(--velvet); }               /* mauve → velvet */
.c-999900 { color: var(--gilt); }                 /* olive */
.c-99FF99 { color: var(--parchment-dim); }        /* mint */
.c-C0C0C0 { color: var(--parchment-dim); }        /* silver */
.c-C8BFC6 { color: var(--parchment-dim); }        /* dusty mauve */
.c-CC0000 { color: var(--accent); }               /* legacy red */
.c-CC33CC { color: var(--rouge); }                /* magenta → rouge */
.c-CC6600 { color: var(--gilt); }                 /* orange → gilt */
.c-CC66CC { color: var(--rouge); }                /* magenta */
.c-CCCCCC { color: var(--parchment-dim); }        /* grey */
.c-CCFFFF { color: var(--parchment-dim); }        /* pale cyan */
.c-EE7875 { color: var(--accent-soft); }          /* salmon → rouge */
.c-F8F7C7 { color: var(--gilt); }                 /* cream-yellow → gilt */
.c-FF0000 { color: var(--accent); }               /* legacy red */
.c-FF0080 { color: var(--rouge); }                /* pink */
.c-FF00FF { color: var(--rouge); }                /* magenta */
.c-FF6666 { color: var(--accent-soft); }          /* salmon-rouge */
.c-FF9900 { color: var(--gilt); }                 /* orange → gilt */
.c-FFCC00 { color: var(--gilt); }                 /* gold → gilt */
.c-FFCC33 { color: var(--gilt); }                 /* gold */
.c-FFCC99 { color: var(--gilt); }                 /* peach → gilt */
.c-FFCCCC { color: var(--accent-soft); }          /* pale pink */
.c-FFCCEE { color: var(--rouge); }                /* pink */
.c-FFCCFF { color: var(--rouge); }                /* lavender-pink → rouge */
.c-FFFF00 { color: var(--gilt); }                 /* yellow → gilt */
.c-FFFFFF { color: var(--text); }                 /* text token */

/* ============================================================
   === T10 centering helpers ===
   ============================================================ */
/* center utility — replaces legacy <center> element */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Grid children of .center must stretch — flex column align-items:center
   otherwise collapses the grid to its min-content width (visual regression
   surfaced by post-T15 spot-check on THUMBNAIL.HTML and xbabydoll.html). */
.center > .grid,
.center > .hub-grid {
  width: 100%;
  align-self: stretch;
}
/* Preserve legacy block centering for block children (tables, images) */
.center > table,
.center > img,
.center > div.center {
  margin-inline: auto;
}

/* ============================================================
   === T11 table/grid layouts ===
   ============================================================ */
/* T11a: legacy table baseline (data tables only — layout tables converted by T11b) */
table { border-collapse: collapse; width: 100%; }
td, th { padding: var(--s-2); text-align: left; vertical-align: top; }

/* T11b: semantic grid/flex replacements for former table layouts */
.grid {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

/* Archetype 1: thumbnail gallery (100x100 images, many cells) */
.grid-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.grid-thumbs > a,
.grid-thumbs > img {
  display: block;
}

/* Archetype 2: model-page gallery (larger images, fewer cells) */
.grid-gallery {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Archetype 3: hub navigation (links/images, centred, flexible) */
.hub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  align-items: center;
  margin: var(--s-4) 0;
}

/* ============================================================
   === T13 per-archetype layout ===
   ============================================================ */
/* ----------------------------------------------------------------
   Splash — age-gate hero (index.html)
   Single centred column; disclaimer textarea + entry links.
   ---------------------------------------------------------------- */
body.archetype-splash {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
/* Splash <p> elements may contain inline image rows whose intrinsic
   width exceeds the viewport on mobile (e.g. index.html's silverdragon +
   dragonlady1 + golden trio). Constrain to viewport. */
body.archetype-splash p {
  max-width: 100%;
  overflow-x: hidden;
}
body.archetype-splash p img {
  max-width: 100%;
  height: auto;
}

body.archetype-splash textarea {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: var(--s-4) auto;
  padding: var(--s-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
}

body.archetype-splash img {
  margin-block: var(--s-3);
}

body.archetype-splash a {
  /* Entry links get extra breathing room */
  display: inline-block;
  margin: var(--s-2) var(--s-2);
}

/* ----------------------------------------------------------------
   Hub — navigation-heavy link grid (j1.html, index1.html, etc.)
   Wide container; centred headings; hub-grid handles card layout.
   ---------------------------------------------------------------- */
body.archetype-hub {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--s-4) clamp(1rem, 4vw, 2rem);
}

body.archetype-hub h1,
body.archetype-hub h2 {
  text-align: center;
  margin-block: var(--s-5) var(--s-3);
}

body.archetype-hub p {
  text-align: center;
  color: var(--text-muted);
  margin-block: var(--s-2);
}

/* ----------------------------------------------------------------
   Model — banner + image grid (69 pages, default archetype)
   Standard container; first .center block is the banner area.
   ---------------------------------------------------------------- */
body.archetype-model {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--s-4) clamp(1rem, 4vw, 2rem);
}

body.archetype-model > .center:first-of-type {
  /* Banner / title block — extra bottom margin before the grid */
  margin-bottom: var(--s-5);
}

body.archetype-model h1,
body.archetype-model h2 {
  text-align: center;
  margin-block: var(--s-4) var(--s-3);
}

/* ----------------------------------------------------------------
   Gallery — dense thumbnail-only grid
   (feet2, feet6, feeta, hands1, sexyfeet, sexyfeetworld, solfan, cellphone)
   Narrower gap and smaller minmax than model pages.
   ---------------------------------------------------------------- */
body.archetype-gallery {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--s-3) clamp(0.5rem, 2vw, 1rem);
}

body.archetype-gallery .grid-thumbs {
  /* Tighter cells for pure-thumbnail grids */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--s-1);
}

body.archetype-gallery h1,
body.archetype-gallery h2 {
  text-align: center;
  margin-block: var(--s-3) var(--s-2);
  font-size: 1.25rem;
}

/* ----------------------------------------------------------------
   Story — long-form prose
   (yulstories1-3a, gabriella2, longnail2)
   Measure-limited column; generous line-height; dialogue colouring.
   ---------------------------------------------------------------- */
body.archetype-story {
  max-width: 65ch;
  margin-inline: auto;
  padding: var(--s-5) clamp(1rem, 4vw, 2rem);
  font-size: 1.0625rem;
  line-height: 1.7;
}

body.archetype-story p {
  margin-block: var(--s-3);
}

body.archetype-story img {
  display: block;
  margin: var(--s-4) auto;
  max-width: 100%;
}

body.archetype-story h1,
body.archetype-story h2,
body.archetype-story h3 {
  text-align: center;
  margin-block: var(--s-5) var(--s-3);
}

/* Dialogue colour remapping — legacy alternation:
   narrator text (white → token text), subject speech (red → accent).
   Overrides T9 global colours with story-scoped intent. */
body.archetype-story .c-FFFFFF { color: var(--text); }
body.archetype-story .c-CC0000,
body.archetype-story .c-990000,
body.archetype-story .c-FF0000 { color: var(--accent); }

/* ============================================================
   === Phase 3 T4 — .teaser card module ===
   Reusable card for "preview of members" content. Used on hub
   pages (j1.html, index1.html) to bundle each model's portrait,
   country, specialty, and CTA into one object instead of a
   <br>-separated stream. See DESIGN_AUDIT.md § C "Public teaser
   module" for the canonical markup.
   ============================================================ */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin: var(--s-5) 0;
}

.teaser {
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}

.teaser:hover,
.teaser:focus-within {
  border-color: var(--carmine);
}

.teaser__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-sunken);
}

.teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .teaser:hover .teaser__media img,
  .teaser:focus-within .teaser__media img {
    transform: scale(1.02);
  }
}

.teaser__badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  background: var(--carmine);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  border-radius: 2px;
}

.teaser__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
}

.teaser__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-h3);
  margin: 0;
  color: var(--parchment);
  line-height: 1.2;
}

.teaser__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--parchment-dim);
}

.teaser__country {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gilt);
}

.teaser__sep {
  color: var(--border);
  user-select: none;
}

.teaser__rating {
  font-style: italic;
  color: var(--rouge);
}

.teaser__specialty {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--parchment-dim);
  line-height: 1.5;
}

.teaser__cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carmine);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 180ms ease;
}

.teaser__cta:hover,
.teaser__cta:focus-visible {
  color: var(--gilt);
}

/* ============================================================
   === Phase 3 T5 — .site-header / .site-footer ===
   Sticky semantic chrome added to every page. Header carries the
   Pacifico wordmark and a 3-link nav; below --bp-tablet the nav
   collapses into a CSS-only <details> hamburger. Footer is three
   stacked centred blocks (copyright / tagline / contact).
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: 0 clamp(1rem, 4vw, 2rem);
  background: var(--ink-sunken);
  border-bottom: 1px solid var(--border);
  /* Escape the body > * container constraint */
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.site-header__wordmark {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--parchment);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.site-header__wordmark:hover,
.site-header__wordmark:focus-visible {
  color: var(--gilt);
}

.site-nav { display: contents; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color 180ms ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--gilt);
}

/* Mobile hamburger — CSS-only <details>/<summary> */
.site-nav__toggle { display: none; }

@media (max-width: 767px) {
  .site-header { flex-wrap: wrap; }
  .site-nav__list { display: none; }
  .site-nav__toggle {
    display: block;
    position: relative;
  }
  .site-nav__toggle > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    font-family: var(--font-body);
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--parchment);
    border: 1px solid var(--border);
    border-radius: 2px;
    user-select: none;
  }
  .site-nav__toggle > summary::-webkit-details-marker { display: none; }
  .site-nav__toggle > summary::after {
    content: '☰';
    margin-left: var(--s-2);
  }
  .site-nav__toggle[open] > summary::after { content: '✕'; }
  .site-nav__toggle[open] .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: calc(100% + var(--s-1));
    right: 0;
    min-width: 12rem;
    padding: var(--s-2) 0;
    background: var(--ink-sunken);
    border: 1px solid var(--border);
    border-radius: 2px;
  }
  .site-nav__toggle[open] .site-nav__list a {
    display: block;
    padding: var(--s-2) var(--s-3);
  }
  .site-nav__toggle[open] .site-nav__list a:hover {
    background: var(--ink-raised);
  }
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) clamp(1rem, 4vw, 2rem);
  background: var(--ink-sunken);
  color: var(--parchment-dim);
  font-family: var(--font-body);
  font-size: var(--t-small);
  text-align: center;
  border-top: 1px solid var(--border);
  /* Escape the body > * container constraint */
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.site-footer__copyright,
.site-footer__tagline,
.site-footer__contact {
  margin: 0;
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--parchment);
  font-size: var(--t-body);
}

.site-footer__contact a {
  color: var(--gilt);
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--carmine);
}

/* ============================================================
   === Phase 3 T6 — .tile figure module ===
   Normalized 3:4 portrait gallery tile. <figcaption> hidden by
   default; revealed on :hover / :focus-within with a slide-up
   over an --ink-sunken/0.85 scrim. Hairline → --carmine on hover.
   ============================================================ */
.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-sunken);
  transition: border-color 180ms ease;
}

.tile > a,
.tile > img {
  display: block;
}

.tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 320ms ease;
}

.tile:hover,
.tile:focus-within {
  border-color: var(--carmine);
}

@media (prefers-reduced-motion: no-preference) {
  .tile:hover img,
  .tile:focus-within img {
    transform: scale(1.02);
  }
}

.tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-2) var(--s-3);
  background: rgba(12, 9, 7, 0.85); /* --ink-sunken / 0.85 */
  color: var(--gilt);
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  pointer-events: none;
}

.tile:hover figcaption,
.tile:focus-within figcaption {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tile figcaption {
    transform: none;
  }
}

/* ============================================================
   === Phase 3 T7 — .hero block ===
   Full-bleed photographic plate with duotone treatment, bottom
   gradient mask, and overlaid Cormorant-italic display headline
   plus Inter-caps eyebrow. Escapes the `body > * { max-width }`
   container constraint via the 100vw / margin-left trick.
   ============================================================ */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: 0 var(--s-5);
  padding: 0;
  max-width: none;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  min-height: clamp(60vh, 70vh, 720px);
  display: flex;
  align-items: flex-end;
}

.hero__media,
.hero > picture,
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__media img,
.hero > picture img,
.hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Duotone — warm ink → rouge. Sepia neutralises original colour,
     then the after-element tints toward --rouge via mix-blend-mode. */
  filter: sepia(0.65) saturate(1.15) contrast(1.05) brightness(0.85);
}

/* Duotone overlay — tints highlights toward --rouge */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rouge);
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
}

/* Bottom-up gradient mask — fades plate into page background */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--ink), transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-6) clamp(1rem, 4vw, 2rem) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gilt);
}

.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--parchment);
  text-wrap: balance;
  max-width: 18ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* Button system (used by hero + age-gate + teaser standalone CTAs) */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms ease;
  border: 1px solid transparent;
  line-height: 1;
}

.btn--primary {
  background: var(--carmine);
  color: var(--parchment);
  border-color: var(--carmine);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--parchment);
}
.btn--primary:visited { color: var(--parchment); }

.btn--ghost {
  background: transparent;
  color: var(--carmine);
  border-color: var(--carmine);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--carmine);
  color: var(--parchment);
}
.btn--ghost:visited { color: var(--carmine); }

/* ============================================================
   Wave 3 patch — wrappers introduced by T11/T12 page redesigns
   ============================================================ */

/* Escape hatch for teasers whose image is a wide / text-baked
   banner that would be sliced by the default object-fit: cover.
   Use sparingly: only for legacy banner graphics whose embedded
   text or aspect ratio means the full image must be visible. */
.teaser--banner .teaser__media {
  background: var(--ink-sunken);
}
.teaser--banner .teaser__media img {
  object-fit: contain;
  padding: var(--s-3);
}

.splash {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-block-end: var(--s-7);
}

.hub-section-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  text-align: center;
  color: var(--parchment);
  margin: var(--s-6) 0 var(--s-4);
  letter-spacing: 0.01em;
}

.hub-intro {
  max-width: 65ch;
  margin: var(--s-4) auto;
  padding: 0 var(--s-3);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--parchment-dim);
  text-align: center;
}
.hub-intro p { margin-block: var(--s-3); }
.hub-intro em { color: var(--parchment); font-style: italic; }

.age-gate {
  max-width: 65ch;
  margin: var(--s-5) auto;
  padding: var(--s-4);
  border: 1px solid var(--border);
  background: var(--ink-raised);
  border-radius: 2px;
}
.age-gate > summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gilt);
  list-style: none;
  padding: var(--s-1) 0;
}
.age-gate > summary::-webkit-details-marker { display: none; }
.age-gate > summary::before { content: "▸ "; color: var(--carmine); }
.age-gate[open] > summary::before { content: "▾ "; }
.age-gate__body {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--parchment-dim);
}

/* ============================================================
 * Canonical <head> additions for Phase 3 (Love Long Toenails)
 * The HTML implementer copy-pastes this into every page's <head>.
 * ============================================================
 *
 *   <link rel="stylesheet" href="/site.css">  (already present)
 *   <meta name="theme-color" content="#15110f">
 *   <meta property="og:site_name" content="Love Long Toenails">
 *   <meta property="og:type" content="website">
 *   <meta property="og:title" content="{page title}">
 *   <meta property="og:description" content="{page-specific or fallback}">
 *   <meta property="og:image" content="/og/default.jpg">
 *   <meta property="og:image:width" content="1200">
 *   <meta property="og:image:height" content="630">
 *   <meta name="twitter:card" content="summary_large_image">
 *   <meta name="rating" content="adult">
 *
 *   Splash page (/index.html) overrides og:image to /og/splash.jpg.
 *   robots meta is OMITTED — site allows SEO indexing.
 * ============================================================ */