/* ====== Victorian Correspondence — the Spaikz house bones, in the app's own room ====== */
/* Same skeleton as spaikz.com and spearfishreef.spaikz.com: the sticky nav, the
   kicker pills, the cards, reveal-on-scroll, a theme toggle that is applied
   before first paint. Everything else is taken out of the app rather than
   invented — the colours are src/index.css verbatim, the faces are the four the
   app loads, and the headline is an SVG generated by the app's own nib model.

   TWO TRANSLATIONS FROM THE SIBLING SITES, and both are the whole difference:

   The grid becomes SLANT LINES AT 55°. A square tech grid behind a copperplate
   page reads as a spreadsheet. Fifty-five degrees from the baseline is the one
   angle this entire app is built on, so the backdrop is the writing master's
   ruled sheet and not a wireframe.

   The neon glow becomes CANDLELIGHT FROM THE TOP LEFT. Same azimuth the app
   lights its paper from (225° in the filter, which is light falling from the
   upper left), so the page and the screenshots on it agree about where the
   candle is. A glow centred at the top would have the sheet lit from one side
   and the page from another, and the eye notices that without knowing why. */

:root {
  /* the room, after dark */
  --bg: #170d08;             /* --room-deep */
  --bg-soft: #241710;        /* --room */
  --panel: rgba(239, 227, 203, 0.045);
  --panel-brd: rgba(201, 162, 39, 0.22);   /* --rule, verbatim */
  --panel-brd-lit: rgba(201, 162, 39, 0.42);
  --text: #efe3cb;           /* --parchment */
  --muted: #b5a68b;          /* --parchment-faint */
  --brand: #c9a227;          /* --gilt */
  --brand-lit: #e3c874;      /* --gilt-leaf */
  --accent: #b04434;         /* --seal-lit */
  --on-brand: #241710;
  --glow: 0.9;
  --slant-ink: rgba(201, 162, 39, 0.05);
  --radius: 14px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Light is not "light mode". It is the sheet: the page becomes the paper the
   app writes on, in the app's own paper and ink colours. */
:root[data-theme="light"] {
  --bg: #f2e8d3;             /* --paper */
  --bg-soft: #ece0c6;        /* --paper-warm */
  --panel: rgba(36, 28, 20, 0.035);
  --panel-brd: rgba(111, 84, 16, 0.26);
  --panel-brd-lit: rgba(111, 84, 16, 0.5);
  --text: #241c14;           /* --ink */
  --muted: #6b5b42;          /* --ink-faded */
  --brand: #6f5410;          /* --gilt-deep: the gilt has to darken or it vanishes on cream */
  --brand-lit: #8c6c16;
  --accent: #8c2f22;         /* --seal */
  --on-brand: #f2e8d3;
  --glow: 0.35;
  --slant-ink: rgba(111, 84, 16, 0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: 1.06rem;
  color: var(--text);
  background: var(--bg);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Playfair Display', Didot, Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
.smallcaps {
  font-family: 'Cormorant SC', 'Playfair Display', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- the ruled sheet, and the candle ---------- */
.bg-slant {
  position: fixed; inset: 0; z-index: -2;
  background-image: repeating-linear-gradient(
    /* 35deg in CSS is 55° from the horizontal measured the writing master's
       way: CSS measures a gradient line from straight up, the copybook
       measures the stroke from the baseline, and 90 − 55 = 35. */
    35deg,
    var(--slant-ink) 0 1px,
    transparent 1px 58px
  );
  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 35%, transparent 100%);
}
.bg-glow {
  position: fixed; z-index: -1; top: -28%; left: 8%;
  width: 900px; height: 900px; max-width: 120vw;
  background:
    radial-gradient(circle at 34% 30%, rgba(227, 200, 116, .17), transparent 62%),
    radial-gradient(circle at 62% 46%, rgba(201, 162, 39, .10), transparent 58%),
    radial-gradient(circle at 46% 58%, rgba(176, 68, 52, .07), transparent 60%);
  filter: blur(34px);
  opacity: var(--glow);
  animation: guttering 18s var(--ease) infinite alternate;
}
/* A candle is not still. Small, slow and irregular — a big pulse would read as
   a lava lamp and this room does not have one. */
@keyframes guttering {
  from { transform: translateY(0) scale(1); opacity: var(--glow); }
  to   { transform: translateY(26px) scale(1.06); opacity: calc(var(--glow) * .82); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--panel-brd);
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand-mark-sm { width: 24px; height: 24px; border-radius: 6px; }
.brand-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.04rem; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); font-size: .96rem; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  color: var(--text) !important;
  border: 1px solid var(--panel-brd); background: var(--panel);
  padding: 7px 15px; border-radius: 999px;
}
.theme-toggle, .nav-toggle {
  background: var(--panel); border: 1px solid var(--panel-brd); color: var(--text);
  width: 37px; height: 37px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.theme-toggle svg { width: 17px; height: 17px; }
:root[data-theme="light"] .icon-moon, :root:not([data-theme="light"]) .icon-sun { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; }
.nav-toggle span { width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 12px 24px; border-radius: 10px;
  font-family: 'Cormorant SC', 'Playfair Display', Georgia, serif;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: 1rem; transition: transform .2s var(--ease), background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
.btn-primary:hover { background: var(--brand-lit); border-color: var(--brand-lit); }
.btn-ghost { border: 1px solid var(--panel-brd); background: var(--panel); color: var(--text); }
.btn-ghost:hover { border-color: var(--panel-brd-lit); }

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 34px;
  display: grid; grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center;
}
.eyebrow {
  display: inline-block; font-family: 'Cormorant SC', Georgia, serif;
  font-size: .86rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin: 0;
}

/* THE HEADLINE IS A PICTURE OF WRITING, and the h1 behind it is the text.
   A screen reader, a search engine and a browser with images off all get
   "Victorian Correspondence"; everybody else gets it in the hand. */
.hero h1 { margin: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wordmark {
  display: block; width: min(620px, 88vw); height: auto;
  /* The ink is iron gall, which is nearly black, so on the dark page it has to
     be lifted to the parchment the app writes with in reverse. A recolour
     rather than a second render: one file serves both themes and the strokes
     cannot drift apart between them. */
  filter: invert(1) sepia(.42) saturate(1.5) hue-rotate(4deg) brightness(1.12);
}
:root[data-theme="light"] .wordmark { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .wordmark { opacity: 0; animation: ink-in .4s var(--ease) .15s forwards; }
}
@keyframes ink-in { to { opacity: 1; } }

.lead { color: var(--muted); font-size: 1.16rem; max-width: 36rem; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- a screenshot, framed like the thing it is ---------- */
.plate { margin: 0; width: 100%; }
.plate img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--panel-brd);
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.45);
}
.plate figcaption {
  color: var(--muted); font-size: .92rem; margin-top: 12px; text-align: center;
}
.hero-plate { max-width: var(--maxw); margin: 0 auto; padding: 8px 24px 0; }

/* ---------- strip ---------- */
.strip {
  max-width: var(--maxw); margin: 40px auto 0; padding: 22px 24px 4px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px;
  border-top: 1px solid var(--panel-brd);
}
.strip span {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--panel-brd); background: var(--panel);
  padding: 5px 13px; border-radius: 999px;
}

/* ---------- sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 84px 24px; }
/* Full-bleed background, ordinary content column. An inner wrapper rather than
   max-width on the children: .section-head has its own cap and would centre
   itself against auto margins. */
.section-alt { background: var(--bg-soft); }
.section-inner { max-width: var(--maxw); margin: 0 auto; padding: 84px 24px; }
.section-head { max-width: 40rem; margin-bottom: 42px; }
.kicker {
  display: inline-block; font-family: 'Cormorant SC', Georgia, serif;
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  padding: 5px 13px; border: 1px solid var(--panel-brd); border-radius: 999px;
  background: var(--panel); margin-bottom: 18px;
}
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 14px; line-height: 1.16; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }

/* The ornament the app rules its panels with. */
.ornament-rule {
  display: flex; align-items: center; gap: 14px;
  color: var(--brand); margin: 46px 0; font-size: .9rem;
}
.ornament-rule::before, .ornament-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--panel-brd-lit), transparent);
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--panel); border: 1px solid var(--panel-brd);
  border-radius: var(--radius); padding: 24px;
  transition: transform .25s var(--ease), border-color .25s;
}
.card:hover { transform: translateY(-3px); border-color: var(--panel-brd-lit); }
.card h3 { font-size: 1.16rem; margin: 0 0 8px; }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }
.card p + p { margin-top: 10px; }
.card-num {
  display: block; font-family: 'Cormorant SC', Georgia, serif;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
/* The specimen column is short and the column of cards beside it is tall, so
   centring left the sheet marooned in the middle of an empty half-page. It
   rides down instead: start-aligned, and stuck under the nav while the three
   cards go past it, which is also what you would do with a real specimen —
   keep it in front of you while you read about the pen. */
.split-wide { grid-template-columns: .9fr 1.1fr; align-items: start; }
.split-wide .sheet { position: sticky; top: 92px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.ticks li { position: relative; padding-left: 28px; color: var(--muted); }
.ticks li strong { color: var(--text); font-weight: 600; }
.ticks li::before { content: '❦'; position: absolute; left: 0; top: -1px; color: var(--brand); font-size: .8rem; }

/* ---------- the specimen ---------- */
/* A sheet, because a specimen of a hand belongs on paper and the app's own
   paper is cream laid. The laid lines are the real thing: closely spaced wire
   lines, and chain lines an inch apart across them. */
.sheet {
  background: #f2e8d3;
  background-image:
    repeating-linear-gradient(0deg, rgba(195,174,132,.30) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(195,174,132,.42) 0 1px, transparent 1px 64px);
  border-radius: 4px;
  border: 1px solid rgba(111,84,16,.22);
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.38);
  padding: 30px 26px;
}
.sheet img { width: 100%; height: auto; display: block; }
.sheet-note {
  margin: 18px 0 0; color: #6b5b42; font-size: .86rem; text-align: right;
  font-family: 'Cormorant SC', Georgia, serif; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- the correspondents ---------- */
.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.person {
  border: 1px solid var(--panel-brd); background: var(--panel);
  border-radius: 10px; padding: 13px 14px;
}
.person strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 1rem; }
.person span { color: var(--muted); font-size: .86rem; }

/* ---------- plates in a row ---------- */
.plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }

/* ---------- contact ---------- */
/* Its own section already sits below one with 84px of bottom padding, and two
   full pads in a row read as the page having ended early. */
.section-tight { padding-top: 8px; }
.contact-card {
  background: var(--panel); border: 1px solid var(--panel-brd);
  border-radius: 20px; padding: 52px 40px; text-align: center;
}
.contact-card p { color: var(--muted); max-width: 36rem; margin: 0 auto 26px; }
.contact-alt { font-size: .94rem; margin-top: 22px !important; }
.contact-alt a { color: var(--brand); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--panel-brd); margin-top: 30px; }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-tag { color: var(--muted); font-size: .94rem; margin: 0; margin-right: auto; }
.footer-tag a { color: var(--brand); }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--muted); font-size: .94rem; }
.footer-links a:hover { color: var(--text); }
.copyright {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px 32px;
  color: var(--muted); font-size: .86rem;
}

/* ---------- prose pages ---------- */
.prose { max-width: 42rem; margin: 0 auto; padding: 56px 24px 76px; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin-bottom: 6px; }
.prose h2 { font-size: 1.28rem; margin: 38px 0 10px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose ul { padding-left: 20px; display: grid; gap: 9px; }
.prose a { color: var(--brand); }
.updated { font-size: .92rem; margin-top: 0; }
.back { display: inline-block; margin-bottom: 26px; color: var(--brand); font-size: .94rem; }
.lede { font-size: 1.1rem; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bg-glow { animation: none; }
  .wordmark { opacity: 1; animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .people { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cards, .cards-2, .split, .split-wide, .plates { grid-template-columns: 1fr; }
  /* Stacked, the specimen has nothing to stay beside, and a sticky element in
     a single column just sits on top of the text below it. */
  .split-wide .sheet { position: static; }
  .split { gap: 30px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--panel-brd); padding: 8px 24px 18px;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 0; }
  .nav-cta { text-align: center; margin-top: 8px; }
  .section, .section-inner { padding: 62px 24px; }
}
@media (max-width: 560px) {
  .people { grid-template-columns: repeat(2, 1fr); }
  /* Two words and two buttons on a 390px bar: the name has to give a little or
     it wraps and the header becomes two storeys tall. */
  .brand-name { font-size: .88rem; }
  .brand { gap: 8px; }
  .nav { gap: 10px; padding: 12px 16px; }
}