/* ============================================================
   nena & goga — shared base stylesheet
   Design language v2 — Direction A "Almanac", lowercase, on paper.
   Type: Sorts Mill Goudy (display) · EB Garamond (body) · accent = swappable
   ============================================================ */

:root {
  --paper:   #F1E7D3;  /* raw wool cream */
  --paper-2: #E8DAC0;  /* parchment card */
  --paper-3: #DECBAA;  /* deeper mat */
  --ink:     #2E2116;  /* dark ink (text) */
  --bark:    #6E573F;  /* muted brown, secondary */
  --indigo:  #2C4A70;  /* deep indigo — the hero blue */
  --ember:   #AC4E38;  /* terracotta / dusty red */
  --sage:    #6E7149;  /* new grass green */
  --wheat:   #D49A2C;  /* marigold gold */
  --line:    rgba(46,33,22,.18);
  --shadow:  rgba(46,33,22,.16);

  --measure: 34rem;

  /* The accent voice (captions, little asides): Tangerine — a light Austen-era
     quill hand. It's delicate, so it's set at weight 700 and used at larger sizes.
     (Load Tangerine in each page <head>.) */
  --accent-font: "Tangerine", cursive;
  --accent-style: normal;
  --accent-weight: 700;
}

/* Dark ("candlelit") mode is DEFERRED per goga — everything on paper for now.
   Preserved behind an explicit <html data-theme="dark">. To restore automatic
   dark mode later, re-add the @media (prefers-color-scheme: dark) block. */
:root[data-theme="dark"] {
  --paper:#241A12; --paper-2:#2F2318; --paper-3:#3A2C1E;
  --ink:#F0E5D2; --bark:#CBB491; --indigo:#7A9BCB; --ember:#D06A4E; --sage:#9BA06A; --wheat:#E0B04A;
  --line: rgba(240,229,210,.16); --shadow: rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --paper:#F1E7D3; --paper-2:#E8DAC0; --paper-3:#DECBAA;
  --ink:#2E2116; --bark:#6E573F; --indigo:#2C4A70; --ember:#AC4E38; --sage:#6E7149; --wheat:#D49A2C;
  --line: rgba(46,33,22,.18); --shadow: rgba(46,33,22,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(rgba(110,87,63,.045) 1px, transparent 1px),
    radial-gradient(rgba(110,87,63,.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 2px;
}

/* ---- type roles (all lowercase aesthetic) ---- */
.display { font-family: "Sorts Mill Goudy", Georgia, serif; line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
.label   { font-family: "EB Garamond", serif; text-transform: lowercase; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--bark); }
.hand    { font-family: var(--accent-font); font-style: var(--accent-style); font-weight: var(--accent-weight, 400); color: var(--bark); }

p { max-width: var(--measure); }
a { color: var(--ink); }

/* ---- buttons ---- */
.btn {
  font-family: "EB Garamond", serif; font-weight: 500;
  text-transform: lowercase; letter-spacing: 0.06em; font-size: 1rem;
  padding: 11px 22px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 9px;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  text-decoration: none;
}
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--wheat); outline-offset: 3px; }
.btn-ember { background: var(--ember); color: #F6ECD8; box-shadow: 0 2px 0 rgba(46,33,22,.22), 0 8px 20px -12px var(--shadow); }
.btn-ember:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(46,33,22,.24), 0 12px 26px -12px var(--shadow); }
.btn-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink); color: var(--paper); }

a.textlink { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--indigo); font-style: italic; padding-bottom: 1px; }
a.textlink:hover { color: var(--ember); border-color: var(--ember); }

/* ---- site chrome ---- */
.topbar { display:flex; justify-content:space-between; align-items:baseline; max-width: 900px; margin: 0 auto; padding: 24px 28px; }
.topbar .brand { font-family:"Sorts Mill Goudy", serif; font-size: 1.35rem; text-decoration:none; color: var(--ink); }
.topbar .brand em { font-style: italic; color: var(--ember); }
.topbar nav { display:flex; gap: 22px; }
.topbar nav a { font-family:"EB Garamond", serif; text-transform:lowercase; letter-spacing:.1em; font-size:.9rem; color: var(--bark); text-decoration:none; }
.topbar nav a:hover { color: var(--ember); }

.ink-svg .ink-fill { fill: var(--ink); }
.ink-svg .ink-stroke { stroke: var(--ink); fill: none; }

/* ---- form controls (shared) ---- */
.field { margin-bottom: 22px; }
.field > label, .field-label { display: block; font-family: "EB Garamond", serif; color: var(--bark); margin-bottom: 8px; letter-spacing: .01em; }
.input, textarea.input, select.input {
  width: 100%; background: var(--paper-2); border: 1px solid var(--line);
  border-bottom: 1.5px solid var(--bark); border-radius: 4px 4px 0 0;
  padding: 12px 14px; font-family: "EB Garamond", serif; font-size: 1.05rem; color: var(--ink);
}
.input::placeholder { color: color-mix(in srgb, var(--bark) 60%, transparent); }
.input:focus { outline: none; border-bottom-color: var(--ember); background: color-mix(in srgb, var(--paper-2) 82%, var(--wheat)); }
textarea.input { min-height: 92px; resize: vertical; line-height: 1.5; }

/* choice pills (radio/checkbox styled as tappable pills) */
.pills { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--bark);
  font-family: "EB Garamond", serif; font-size: .98rem; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pill input:hover + span { border-color: var(--bark); }
.pill input:checked + span { background: var(--sage); color: #F6ECD8; border-color: var(--sage); }
.pill.no input:checked + span { background: var(--bark); border-color: var(--bark); }
.pill input:focus-visible + span { outline: 2px solid var(--wheat); outline-offset: 2px; }

/* checkbox row */
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--ember); flex: none; }
.check .ct { font-family: "EB Garamond", serif; color: var(--ink); }
.check .ct small { display: block; color: var(--bark); font-size: .92rem; margin-top: 2px; }