/* After Words — wordsafter.org
   Light by default, because the brand is warm paper and serif ink and nobody
   should land on charcoal by surprise. Dark is available and remembered, and
   it is warm too — near-black with brown in it, not the flat grey a default
   dark theme gives you. */

:root {
  --paper:   #F6F2EA;
  --paper-2: #EFE9DE;
  --surface: #FFFCF7;
  --ink:     #1F1B16;
  --muted:   #6E6555;
  --faint:   #958A78;
  --rule:    #E3DCCE;
  --gold:    #9E7627;
  --navy:    #2F3E6B;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --btn-bg:  #2F3E6B;
  --btn-ink: #FFFFFF;
  --btn-glow: rgba(47,62,107,.18);

  --shadow: 0 1px 2px rgba(31,27,22,.04), 0 8px 28px rgba(31,27,22,.06);
  --shadow-lg: 0 2px 4px rgba(31,27,22,.05), 0 20px 60px rgba(31,27,22,.10);
}

[data-theme="dark"] {
  --paper:   #14110E;
  --paper-2: #1B1713;
  --surface: #1E1A16;
  --ink:     #F4EFE6;
  --muted:   #A79D8C;
  --faint:   #857B6B;
  --rule:    #2E2822;
  --gold:    #D1A855;
  --navy:    #A9B7E8;

  --btn-bg:  #93A4DA;
  --btn-ink: #14110E;
  --btn-glow: rgba(147,164,218,.20);

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.34);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.34), 0 20px 60px rgba(0,0,0,.44);
}

/* Photographs are lit for paper; on a dark ground they glare. */
[data-theme="dark"] .hero-art img,
[data-theme="dark"] .split-art img,
[data-theme="dark"] .invite-art img { filter: brightness(.86) saturate(.96); }

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }

.eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 16px;
}

/* ── Chrome ──────────────────────────────────────────────────────────── */
.shell { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* Sticky, and only grows a hairline once the page has actually moved — a
   border at rest would cut the header off from the hero it belongs to. */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-nav.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 24px rgba(31,27,22,.05);
}
@supports not (backdrop-filter: blur(1px)) { .site-nav { background: var(--paper); } }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px; gap: 20px;
}
.nav .brand {
  font: 600 12px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.nav .links { display: flex; gap: 26px; align-items: center; }
.nav .links a {
  font: 500 14px/1 var(--sans); color: var(--muted); text-decoration: none;
}
.nav .links a:hover { color: var(--ink); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 64px; align-items: center; padding: 56px 0 96px;
}
.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.06;
  letter-spacing: -.015em; font-weight: 600; margin: 0 0 22px;
}
.hero .lede {
  font-size: 1.18rem; color: var(--muted); margin: 0 0 34px; max-width: 30em;
}
.hero-art {
  border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg);
  transform: rotate(1.4deg);
}
.hero-art img { width: 100%; height: auto; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none;
  padding: 16px 30px; border-radius: 999px;
  font: 600 16px/1 var(--sans);
  box-shadow: 0 1px 2px var(--btn-glow), 0 10px 24px var(--btn-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px var(--btn-glow), 0 16px 34px var(--btn-glow); }
.soon { font: 500 14px/1 var(--sans); color: var(--faint); }

/* ── Hero entrance ───────────────────────────────────────────────────── */
/* Applied by script, so a page without it simply starts in its final state. */
.js-intro .intro { opacity: 0; transform: translateY(18px); }
.js-intro .intro-art { opacity: 0; transform: translateY(22px) scale(.97) rotate(1.4deg); }
.js-intro.is-ready .intro,
.js-intro.is-ready .intro-art {
  opacity: 1; transform: none;
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1);
}
.js-intro.is-ready .hero-art { transition-delay: .1s; }
.js-intro.is-ready .intro:nth-of-type(1) { transition-delay: .04s; }
.js-intro.is-ready .intro:nth-of-type(2) { transition-delay: .12s; }
.js-intro.is-ready .intro:nth-of-type(3) { transition-delay: .20s; }
.js-intro.is-ready .intro:nth-of-type(4) { transition-delay: .28s; }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding: 84px 0; border-top: 1px solid var(--rule); }
.section-head { max-width: 34em; margin: 0 0 44px; }
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.15;
  letter-spacing: -.01em; font-weight: 600; margin: 0 0 12px;
}
.section-head p { color: var(--muted); margin: 0; font-size: 1.06rem; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); margin: 0; padding: 0; list-style: none; }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 20px; padding: 30px 28px; box-shadow: var(--shadow);
}
.card .num {
  font: 600 11px/1 var(--sans); letter-spacing: .18em; color: var(--gold);
  display: block; margin-bottom: 16px;
}
.card h3 { margin: 0 0 10px; font-size: 1.14rem; font-weight: 600; letter-spacing: -.005em; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; }
.card { transition: transform .3s cubic-bezier(.34,1.2,.5,1), box-shadow .3s ease; }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* ── Split feature ───────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-art { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.split ul { margin: 22px 0 0; padding: 0; list-style: none; }
.split li {
  padding: 16px 0; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 1.02rem;
}
.split li strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* ── Closing ─────────────────────────────────────────────────────────── */
.closing {
  text-align: center; padding: 96px 28px;
  background: var(--paper-2); border-radius: 28px; margin: 84px 0 0;
}
.closing h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 14px; font-weight: 600; letter-spacing: -.012em; }
.closing p { color: var(--muted); margin: 0 auto 30px; max-width: 34em; font-size: 1.08rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  padding: 46px 0 64px; margin-top: 72px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  justify-content: space-between; align-items: center;
  color: var(--faint); font: 400 14px/1.6 var(--sans);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ── Theme toggle ────────────────────────────────────────────────────── */
.theme-toggle {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--faint); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ── Language switch ─────────────────────────────────────────────────── */
/* ── Language picker ─────────────────────────────────────────────────── */
.lang { position: relative; }

.lang-trigger {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px 0 11px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  font: 600 12px/1 var(--sans); letter-spacing: .06em;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.lang-trigger:hover { border-color: var(--faint); }
.lang-trigger .globe { width: 14px; height: 14px; color: var(--muted); }
.lang-trigger .chev {
  width: 11px; height: 11px; color: var(--faint);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.lang[data-open="true"] .lang-trigger .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  min-width: 178px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  transform-origin: top right;
  opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.4,.5,1);
}
.lang[data-open="true"] .lang-menu { opacity: 1; transform: none; pointer-events: auto; }

.lang-menu button {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 11px; cursor: pointer;
  font: 400 15px/1.2 var(--serif); color: var(--ink); text-align: left;
  transition: background .14s ease;
}
.lang-menu button:hover { background: var(--paper-2); }
.lang-menu .code {
  font: 600 10px/1 var(--sans); letter-spacing: .1em; color: var(--faint);
  min-width: 20px;
}
.lang-menu .tick { width: 15px; height: 15px; margin-left: auto; color: var(--gold); opacity: 0; }
.lang-menu button[aria-selected="true"] .tick { opacity: 1; }
.lang-menu button[aria-selected="true"] .code { color: var(--gold); }

.lang-trigger:focus-visible,
.lang-menu button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.theme-toggle { width: 34px; height: 34px; }

/* ── Reveal ──────────────────────────────────────────────────────────── */
/* Hidden only once script has confirmed it can bring it back. Hiding by
   default in CSS means a page whose observer never runs — script blocked, a
   tab that never renders — is a page with nothing below the hero. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .js-intro .intro, .js-intro .intro-art { opacity: 1; transform: none; }
  .btn, .card, .lang-menu, .lang-trigger .chev { transition: none; }
  .card:hover { transform: none; }
}

/* ── Legal pages (privacy, terms) ────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 44px 28px 96px; }
.wrap h1 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.12; margin: 0 0 14px; font-weight: 600; letter-spacing: -.012em; }
.rule { width: 34px; height: 2px; background: var(--gold); border: 0; margin: 0 0 24px; }
.updated { color: var(--faint); font-size: .94rem; margin: 0 0 40px; }
.wrap h2 { font-size: 1.24rem; margin: 46px 0 12px; font-weight: 600; padding-top: 24px; border-top: 1px solid var(--rule); }
.wrap p, .wrap li { color: var(--ink); }
.wrap footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--faint); font: 400 14px/1.6 var(--sans); }
.wrap footer a { color: var(--muted); }

/* ── Invite ──────────────────────────────────────────────────────────── */
.invite { max-width: 620px; margin: 0 auto; padding: 72px 28px 96px; text-align: center; }
.invite-art { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); margin: 0 0 40px; }
.invite h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1.15; margin: 0 0 16px; font-weight: 600; letter-spacing: -.012em; }
.invite p { color: var(--muted); margin: 0 auto 24px; max-width: 34em; }
.invite .btn { margin: 8px 0 22px; }
.invite .note { font: 400 14px/1.7 var(--sans); color: var(--faint); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 60px; }
  .hero-art { transform: none; order: -1; max-width: 440px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-art { order: -1; max-width: 440px; }
  .section { padding: 66px 0; }
  .closing { padding: 72px 24px; margin-top: 64px; }
  .nav .links { gap: 16px; }
}

@media (max-width: 620px) {
  .shell { padding: 0 20px; }
  .nav { padding-top: 14px; padding-bottom: 14px; gap: 10px; }
  /* The two anchors go; the picker, the theme and the download stay, because
     those are the three things a phone visitor actually reaches for. */
  .nav .links a:not(.nav-cta) { display: none; }
  .nav .links { gap: 10px; }
  .nav .links .nav-cta {
    font: 600 13px/1 var(--sans); color: var(--ink);
    padding: 9px 14px; border: 1px solid var(--rule);
    border-radius: 999px; background: var(--surface);
  }

  .hero { padding: 24px 0 52px; gap: 32px; }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .hero .lede { font-size: 1.06rem; }
  .hero-art { max-width: none; border-radius: 20px; }

  .cta-row { gap: 12px; }
  .btn { width: 100%; justify-content: center; padding: 17px 24px; }
  .soon { width: 100%; text-align: center; }

  .section { padding: 54px 0; }
  .section-head { margin-bottom: 30px; }
  .grid { gap: 14px; }
  .card { padding: 24px 22px; border-radius: 18px; }

  .closing { padding: 60px 22px; border-radius: 22px; margin-top: 54px; }
  .closing .btn { width: auto; display: inline-flex; }

  .site-footer { padding: 34px 0 48px; margin-top: 54px; font-size: 13.5px; }
  .site-footer nav { gap: 16px; }

  .lang-menu { min-width: 168px; }
  .invite { padding: 48px 20px 72px; }
}

@media (max-width: 380px) {
  .nav .links .nav-cta { display: none; }
  .hero h1 { font-size: 1.95rem; }
}