/* ============================================================
   tokens.css — Premiere Closet Finds design tokens (light + dark)
   Type DNA: Fraunces (display) + Figtree (body) — the same
   editorial pairing as the Premiere Closet app. Font files are
   NOT fetched at build/preview time; stacks fall back to system
   faces until the deployment phase self-hosts the font files.
   ============================================================ */

:root {
  /* Palette — warm paper neutrals + deep plum accent */
  --color-paper:        #faf6ee;
  --color-paper-raised: #fffdf7;
  --color-paper-deep:   #f1e9db;
  --color-ink:          #221d16;
  --color-ink-soft:     #5c5346;
  --color-ink-faint:    #8a7f6f;
  --color-plum:         #4a2c5a;
  --color-plum-deep:    #382143;
  --color-plum-wash:    #eee6f1;
  --color-line:         #e3dac9;
  --color-focus-ring:   #382143;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout & measure */
  --measure: 68ch;
  --wrap-max: 76rem;

  /* Spacing scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  /* Rules & radii */
  --rule: 1px solid var(--color-line);
  --radius: 3px;

  /* Motion */
  --motion-speed: 160ms;
}

/* Dark mode — one token set, per FINDS-PLAN §4 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:        #191512;
    --color-paper-raised: #211c15;
    --color-paper-deep:   #120f0b;
    --color-ink:          #f1e9db;
    --color-ink-soft:     #c9bfac;
    --color-ink-faint:    #8f8471;
    --color-plum:         #c9a9d8;
    --color-plum-deep:    #e4d2ee;
    --color-plum-wash:    #2b1f31;
    --color-line:         #3a3226;
    --color-focus-ring:   #e4d2ee;
  }
}

/* ============================================================
   site.css — Premiere Closet Finds layout & components
   Token-driven only (see tokens.css). Mobile-first; magazine-
   like: generous measure, oversized display headlines, thin
   rules, generous whitespace, no app chrome.
   ============================================================ */

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-paper);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.7rem); letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2rem);    letter-spacing: -0.01em;  margin: 0 0 var(--s-2); }
h3 { font-size: 1.22rem; margin: 0 0 var(--s-1); }

p { margin: 0 0 var(--s-3); }
ul, ol { margin: 0 0 var(--s-3); padding-left: 1.35rem; }
li { margin-bottom: var(--s-1); }
li > ul, li > ol { margin-top: var(--s-1); margin-bottom: var(--s-1); }

a { color: var(--color-plum); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-plum-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--s-3);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 10;
  padding: var(--s-1) var(--s-2);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius);
  transition: top var(--motion-speed) ease;
}
.skip-link:focus { top: var(--s-2); }

/* ---------- Header ---------- */
.site-header {
  border-bottom: var(--rule);
  background: var(--color-paper-raised);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}
.lockup {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.lockup-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.lockup-name em { font-style: italic; color: var(--color-plum); }
.lockup-sub {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.site-nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* 44px touch target */
  padding: 0 var(--s-1);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* ---------- Main ---------- */
.site-main { padding: var(--s-5) 0 var(--s-6); }

.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-plum);
  margin: 0 0 var(--s-2);
}

.lede, .dek {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* ---------- Home ---------- */
.hero { max-width: var(--measure); margin-bottom: var(--s-6); }
.hero h1 { margin-top: 0; }
.cta-row { margin-top: var(--s-4); }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;               /* 44px touch target */
  padding: 0.7rem 1.4rem;
  background: var(--color-plum);
  color: var(--color-paper);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.btn:hover { background: var(--color-plum-deep); color: var(--color-paper); }

.home-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  border-top: var(--rule);
  padding-top: var(--s-4);
}
@media (min-width: 720px) {
  .home-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
.home-col h2 { font-size: 1.6rem; }

/* ---------- Style Notes index ---------- */
.note-list-head { max-width: var(--measure); margin-bottom: var(--s-4); }

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule);
}
.note-list li {
  border-bottom: var(--rule);
  padding: var(--s-4) 0;
}
.note-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-plum);
  font-size: 1.1rem;
  margin-right: var(--s-2);
}
.note-list h2 { margin: 0 0 var(--s-1); }
.note-list h2 a { text-decoration: none; color: var(--color-ink); }
.note-list h2 a:hover { color: var(--color-plum); text-decoration: underline; }
.note-summary { color: var(--color-ink-soft); max-width: var(--measure); margin: 0; }
.note-meta {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: var(--s-2) 0 0;
}

/* ---------- Article ---------- */
.article { max-width: var(--measure); }
.article h1 { margin-top: 0; }
.meta-line {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--s-3);
}

.prose { margin-top: var(--s-4); }
.prose p { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--rule); }
.prose h3 { margin-top: var(--s-4); }
.prose blockquote {
  margin: var(--s-3) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--color-plum);
  color: var(--color-ink-soft);
  font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-paper-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

.back-link { margin-top: var(--s-5); }
/* ---------- Editorial hero image (per-article, owner-owned art) ----------
   Sits directly beneath the heading/dek block and above the prose. The <img>
   carries real width/height from the file's own header bytes, so the box is
   reserved before the bytes arrive (no layout shift) and the image is never
   stretched. Mobile-first: full width of the article measure, height auto,
   mild rounding, caption in the site's muted ink. */
.hero-figure {
  margin: var(--s-4) 0 var(--s-3);
  max-width: 100%;
}
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}
.hero-caption {
  margin: var(--s-1) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-ink-faint);
  max-width: var(--measure);
}
.hero-caption code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  word-break: break-word;
}
/* Dev-only placeholder that holds the hero slot when the owner's art is not
   yet on disk. Deliberately plain and self-labelling: it must never read as
   final art. */
.hero-figure--placeholder .hero-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  aspect-ratio: var(--hero-ratio, 16 / 9);
  padding: var(--s-3);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-deep);
  text-align: center;
}
.hero-placeholder-badge,
.hero-placeholder-line,
.hero-placeholder-path,
.hero-placeholder-alt {
  margin: 0;
}
.hero-placeholder-badge {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-plum);
}
.hero-placeholder-line {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  color: var(--color-ink);
}
.hero-placeholder-path,
.hero-placeholder-alt {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}
.hero-placeholder-path code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}
/* Narrow screens: keep the placeholder occupying EXACTLY the box the final
   image will occupy (the declared ratio). Only the required wording and the
   dev-only badge stay; the delivery path / alt-text notes are desktop review
   details and would otherwise push the box past its reserved height. */
@media (max-width: 560px) {
  .hero-placeholder-path,
  .hero-placeholder-alt { display: none; }
}

/* ---------- Static pages (privacy, editorial standards) ---------- */
.static-page { max-width: var(--measure); }
.static-page h2 { margin-top: var(--s-4); }
.static-page ul, .static-page ol { max-width: var(--measure); }

/* ---------- Shopping links (affiliate layer, flag on only) ---------- */
.shop-links {
  margin-top: var(--s-5);
  border: var(--rule);
  border-left: 3px solid var(--color-plum);
  padding: var(--s-3);
  background: var(--color-paper-raised);
  max-width: var(--measure);
}
.shop-links h3 { margin-top: 0; }
/* ---------- "Premiere Closet Find" product cards (find-cards layer, flag on only) ---------- */
.find-card {
  margin: var(--s-4) 0;
  border: var(--rule);
  border-left: 3px solid var(--color-plum);
  padding: var(--s-3);
  background: var(--color-paper-raised);
  max-width: var(--measure);
}
.find-card > h3 {
  margin: 0 0 var(--s-1);
  padding: 0;
  border: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-plum);
}
.find-card-name { margin: 0 0 var(--s-1); font-weight: 600; }
.find-card-note { margin: 0 0 var(--s-2); color: var(--color-ink-soft); }
.find-card-link { margin: 0; }
.shop-links a { word-break: break-word; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--rule);
  background: var(--color-paper-raised);
  padding: var(--s-4) 0 var(--s-5);
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.footer-inner { display: flex; flex-direction: column; gap: var(--s-2); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* 44px touch target */
  text-decoration: none;
  font-weight: 600;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-note { margin: 0; color: var(--color-ink-faint); font-size: 0.82rem; }
.disclosure { margin: 0; color: var(--color-ink-soft); font-weight: 600; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}