/* ============================================================================
   Buried to Brilliant, design tokens and brand primitives.

   Taken from the cover: cream paper, deep navy ink, gold accent, with teal,
   olive and stone carrying the five pillars. Brush lettering for display,
   wide-tracked caps for eyebrows, handwriting for asides.

   Light is the default and is defined on bare :root, so no color is ever
   declared only inside a media query. Dark overrides the same names twice:
   once for the system preference, once for an explicit [data-theme] choice.
   ========================================================================= */

:root {
  /* -- Paper and ink --
     Cool off-white rather than warm cream, as of the 2026-10 redesign. The
     cream was the book's paper; the site is the company behind the book, and
     white with a cool grey rule reads as a publisher rather than a craft
     product. The gold survives, but as a hairline and an accent, never a wash. */
  --paper:        #ffffff;
  --paper-raised: #ffffff;
  --paper-sunk:   #f5f7fa;
  --ink:          #10243d;
  --ink-soft:     #51657d;
  --ink-faint:    #8c99a8;
  --rule:         #e4e7ec;
  --rule-strong:  #cfd5de;

  /* -- Pillars, straight off the cover -- */
  --gold:   #efb53c;
  --teal:   #2e7f8c;
  --navy:   #1e3350;
  --olive:  #9fb56a;
  --stone:  #a99c8d;

  --accent:      var(--gold);
  --accent-ink:  #8a6210;   /* gold dark enough to read as text on white */
  --accent-soft: #fdf4e0;
  --danger:      #b04228;
  --sealed:      #8c99a8;

  --shadow:    0 1px 2px rgba(16,36,61,.04), 0 10px 28px -16px rgba(16,36,61,.22);
  --shadow-lg: 0 2px 6px rgba(16,36,61,.06), 0 22px 48px -22px rgba(16,36,61,.28);

  /* -- Type --
     Fraunces carries the headings. The brush face that used to sit here is the
     cover's lettering, and at every heading size it read as a craft fair rather
     than a publisher. Caveat stays, but only for the tagline and margin notes,
     where a handwritten line earns its place. */
  --display: "Fraunces", Georgia, "Palatino Linotype", serif;
  --display-tracking: -.022em;
  --hand:    "Caveat", "Segoe Script", cursive;
  --sans:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:   "Lora", Georgia, "Palatino Linotype", serif;
  /* Codes and setup keys only: digits must be unambiguous and evenly spaced. */
  --mono:    ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --measure: 34rem;
  --radius:  6px;   /* was 10: softness reads consumer, 6 reads document */

  color-scheme: light;
}

/* Dark is a considerate variant, not the brand: navy becomes the paper and the
   cream becomes the ink, while gold/teal/olive stay recognisable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0d1724;
    --paper-raised: #142131;
    --paper-sunk:   #0a121d;
    --ink:          #eef2f6;
    --ink-soft:     #a9b9c9;
    --ink-faint:    #7b8a9b;
    --rule:         #1f2d3d;
    --rule-strong:  #33455a;

    --gold:   #f0b73e;
    --teal:   #4ea5b3;
    --navy:   #7d9cc0;
    --olive:  #b4c97f;
    --stone:  #bfb2a2;

    --accent:      var(--gold);
    --accent-ink:  #f0b73e;
    --accent-soft: #23303d;
    --danger:      #e0705a;
    --sealed:      #8b97a3;

    --shadow:    0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #0d1724;
  --paper-raised: #142131;
  --paper-sunk:   #0a121d;
  --ink:          #eef2f6;
  --ink-soft:     #a9b9c9;
  --ink-faint:    #7b8a9b;
  --rule:         #1f2d3d;
  --rule-strong:  #33455a;

  --gold:   #f0b73e;
  --teal:   #4ea5b3;
  --navy:   #7d9cc0;
  --olive:  #b4c97f;
  --stone:  #bfb2a2;

  --accent:      var(--gold);
  --accent-ink:  #f0b73e;
  --accent-soft: #23303d;
  --danger:      #e0705a;
  --sealed:      #8b97a3;

  --shadow:    0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* ---- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Fixed and inert so it never intercepts a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* ---- Brand type ------------------------------------------------------------ */

/* Sentence case, not caps. The brush face needed uppercase to hold a line;
   Fraunces does not, and setting a serif this size in capitals is the single
   most common way a book site ends up looking like a conference banner. */
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}
/* At display size the swash sits far enough below the baseline to land on the
   next line, so pull it in tight when it is inside the wordmark. */
.wordmark .swash {
  padding-bottom: .04em;
  background-size: 100% .16em;
}

/* Kept in the stylesheet, switched off in the redesign: the radiating sparks
   are the cover's brush vocabulary and look like clip art next to Fraunces.
   Delete the rule to bring them back. */
.rays { display: none; }
/* The gold "TO" from the cover. */
.wordmark em { font-style: normal; color: var(--accent-ink); }

.wordmark--sm {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: -.012em;
}

.hand {
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
}

.eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Short gold dashes either side, as on the cover's "A JOURNAL". */
.eyebrow--flanked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: var(--ink-soft);
}
.eyebrow--flanked::before,
.eyebrow--flanked::after {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.prose {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ---- Brush motifs ----------------------------------------------------------- */

/* Highlighter swipe: a wobbly filled block masked behind the label, so the
   color is set with background-color and any pillar can reuse it. */
.swipe {
  --swipe: var(--gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .3rem .95rem .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fffdf8;
  isolation: isolate;
}
.swipe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--swipe);
  -webkit-mask-image: var(--brush);
  mask-image: var(--brush);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2,10 C40,4 80,8 120,5 C150,3 180,8 198,6 L198,36 C160,41 120,35 80,38 C50,40 22,36 2,38 Z' fill='%23000'/%3E%3C/svg%3E");
}

.swipe--gold  { --swipe: var(--gold);  color: #2c2110; }
.swipe--teal  { --swipe: var(--teal);  color: #fffdf8; }
.swipe--navy  { --swipe: var(--navy);  color: #fffdf8; }
.swipe--olive { --swipe: var(--olive); color: #23300f; }
.swipe--stone { --swipe: var(--stone); color: #2b241c; }

:root[data-theme="dark"] .swipe--navy,
:root:not([data-theme="light"]) .swipe--navy { color: #101c2b; }

/* Hand-drawn gold underline, as under "TO" and "Higher Impact." */
.swash {
  padding-bottom: .28em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3,9 C28,3 52,11 76,6 C96,2 110,8 117,5' fill='none' stroke='%23efb53c' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% .42em;
}

/* The little radiating sparks beside "BRILLIANT". Lifted off the baseline with
   `position: relative` rather than vertical-align, which drops them onto the
   letters at display sizes. */
.rays {
  display: inline-block;
  position: relative;
  top: -.52em;
  margin-left: .12em;
  width: .42em;
  height: .42em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23efb53c' stroke-width='4.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M8,26 L3,33'/%3E%3Cpath d='M19,17 L17,5'/%3E%3Cpath d='M28,22 L36,15'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1.25rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .06s;
}
.btn:hover { border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-raised);
}
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #2c2110; }

.btn--quiet {
  background: transparent; border-color: transparent; color: var(--ink-soft);
  letter-spacing: .06em; text-transform: none; font-weight: 600; font-size: .85rem;
}
.btn--quiet:hover { background: var(--paper-sunk); border-color: var(--rule); }

.btn--danger { color: var(--danger); border-color: var(--rule-strong); background: transparent; }
.btn--danger:hover { border-color: var(--danger); }

.btn--full { width: 100%; }

.icon-btn {
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.icon-btn:hover { background: var(--paper-sunk); border-color: var(--rule); }

/* ---- Forms ------------------------------------------------------------------- */

.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .35rem; }
.field__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field__hint { font-size: .75rem; color: var(--ink-faint); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: .68rem .8rem;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-raised);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form__error {
  margin: 0;
  padding: .6rem .75rem;
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-sunk);
  color: var(--danger);
  font-size: .85rem;
}

/* ---- Card --------------------------------------------------------------------- */

.card {
  background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
}