/* ==========================================================================
   Township Tales — War in Peace
   Theme: near-black ground, aged gold, Georgia for reading and condensed
          uppercase Arial for anything that behaves like a label.
   ==========================================================================

   Lifted from the single-file version of the site, pulled out into one
   stylesheet so the order pages, the legal pages and the order book all share
   it. Change a value in :root and the whole site follows, admin included.
   ========================================================================== */

:root {
  /* Ground */
  --bg-void:    #0d0d0d;
  --bg-deep:    #111111;
  --bg-slate:   #161616;
  --bg-raised:  #1f1f1f;
  --line:       #2e2e2e;
  --line-soft:  #242424;

  /* Ink */
  --ink:        #d6d0c4;   /* body copy */
  --ink-bright: #f0ece4;   /* headings */
  --ink-dim:    #a09880;   /* meta, captions */

  /* Accents */
  --gold:       #c9a14a;
  --gold-lt:    #e0b96a;
  --red:        #8b1a1a;

  /* Type */
  --font-body:    Georgia, 'Times New Roman', serif;
  --font-display: 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif;

  /* Metrics */
  --wrap:        900px;
  --wrap-wide:   1120px;
  --wrap-narrow: 680px;
  --rule:        1px solid var(--line);

  /* Native widgets — the country dropdown's option list, scrollbars, spin
     buttons — take their colours from this, not from our rules. Without it the
     country list renders black-on-white inside a black page. */
  color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-lt); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  color: var(--ink-bright);
  font-weight: normal;
  line-height: 1.18;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.2em; }

em { font-style: italic; }

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3rem, 8vw, 5rem); }
.section--alt { background: var(--bg-deep); border-block: var(--rule); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .8rem;
}

.divider { width: 60px; height: 3px; background: var(--gold); margin: 20px 0 28px; }
.divider--center { margin-inline: auto; }

.lede { font-size: 1.1rem; }
.muted { color: var(--ink-dim); }
.note { color: var(--ink-dim); font-size: .9rem; }

.center { text-align: center; }

/* ------------------------------------------------------------- header -- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13, 13, 13, .95);
  border-bottom: var(--rule);
  padding: 14px 0;
  backdrop-filter: blur(6px);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
}

.brand {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.brand:hover { color: var(--gold-lt); }

.nav { display: flex; align-items: center; gap: 1.4rem; }

.nav a {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.nav a:hover { color: var(--ink-bright); }
.nav a[aria-current="page"] { color: var(--gold); }

/* The site is fixed-header, so every in-page anchor needs room above it or the
   heading lands underneath the bar. */
[id] { scroll-margin-top: 90px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--bg-void);
  padding: .6rem 1rem; font-family: var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; font-size: .78rem;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--bg-void); }

/* --------------------------------------------------------------- hero -- */

.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 90px;
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: -40px;
  background: url('/assets/img/background.jpg') center center / cover no-repeat;
  filter: blur(4px);
  transform: scale(1.08);
  will-change: transform;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(13, 13, 13, .82) 40%, rgba(26, 16, 7, .75) 100%);
  z-index: 1;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.hero__title { font-style: italic; margin-bottom: 8px; }

.hero__byline {
  font-family: var(--font-display);
  font-size: .92rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 22px;
}

.hero__hook {
  font-size: 1.14rem;
  font-style: italic;
  color: var(--ink-bright);
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin-bottom: 30px;
  max-width: 46ch;
}

.cover-frame {
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------ buttons -- */

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 13px 28px;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.btn--primary { background: var(--gold); color: var(--bg-void); }
.btn--primary:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--bg-void); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: rgba(201, 161, 74, .12); color: var(--gold-lt); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}
.btn--primary:disabled:hover { background: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------- prose -- */

.pull-quote {
  font-size: 1.35rem;
  font-style: italic;
  color: var(--gold-lt);
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
}

/* ------------------------------------------------------------ themes -- */

.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.theme-card {
  background: var(--bg-slate);
  border: var(--rule);
  padding: 26px 22px;
}
.theme-card .icon { font-size: 26px; color: var(--gold); display: block; margin-bottom: 12px; }
.theme-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.theme-card p { font-size: .94rem; color: var(--ink-dim); margin: 0; }

/* ------------------------------------------------------------ author -- */

.author-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
}

.author-grid img { border: 1px solid var(--line); }

/* The Afrikaans edition, above the order form. The author panel the other way
   round: cover on the right, as in the hero. */
.edition-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 44px;
  align-items: center;
}

/* The frame carries the border, as in the hero; the picture just fits it. */
.edition-grid img { display: block; max-width: 100%; height: auto; }

.author-rank {
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.2rem;
}

/* -------------------------------------------------------------- forms -- */

.form-stack { display: grid; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field label .req { color: var(--gold); }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--bg-void);
  border: 1px solid var(--line);
  color: var(--ink-bright);
  font-family: var(--font-body);
  font-size: .98rem;
  padding: 11px 13px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.form-note { font-size: .84rem; color: var(--ink-dim); margin: 0; }

/* Hidden from people, irresistible to bots. Not `display:none`: some bots skip
   those. Off-screen and out of the tab order instead. */
.honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form-msg {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--bg-slate);
  font-size: .94rem;
  margin-bottom: 1.2rem;
}
.form-msg[hidden] { display: none; }
.form-msg--success { border-left: 3px solid #6fae82; }
.form-msg--error   { border-left: 3px solid #b4534f; color: var(--ink-bright); }

/* -------------------------------------------------------------- order -- */

.order {
  background: var(--bg-deep);
  border-block: var(--rule);
}

.order__head { max-width: 62ch; }

.order__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  margin-top: 34px;
}

.order__fieldset { border: 0; margin: 0 0 28px; padding: 0; }

.order__legend {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0;
  margin-bottom: 14px;
}

.order__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.order__delivery[hidden] { display: none; }

.qty-field { max-width: 150px; }

/* Edition cards ------------------------------------------------------- */

.format-grid { display: grid; gap: 12px; }

.format { display: block; cursor: pointer; }

/* Visually hidden but still focusable and still a radio, so the keyboard and
   screen readers get a real radio group. */
.format__input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}

.format__card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  background: var(--bg-slate);
  border: 1px solid var(--line);
  padding: 16px 18px;
  transition: border-color .18s ease;
}

.format:hover .format__card { border-color: var(--gold); }
.format__input:checked + .format__card { border-color: var(--gold); background: var(--bg-raised); }
.format__input:focus-visible + .format__card { outline: 2px solid var(--gold-lt); outline-offset: 2px; }

/* An edition that cannot go to the chosen country. Still shown, still says
   why — removing it would leave someone hunting for the hardcover they came
   for and concluding the site is broken.

   Dimmed rather than hidden, and not so far that the price becomes unreadable:
   on a coming-soon card the price is the useful part. */
.format__input:disabled + .format__card { opacity: .6; }
.format__input:disabled + .format__card .format__meta { color: var(--gold); }
.format:has(.format__input:disabled) { cursor: not-allowed; }

/* Only on a card that is actually waiting on something. `data-soon` is set by
   order.js against the chosen country, so the badge appears when it applies
   and not before — a hardcover card in South Africa carries no badge. */
.format__soon { display: none; }

.format[data-soon] .format__soon {
  display: inline-block;
  margin-left: .6rem;
  padding: .1rem .5rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* The price is still true, it is just not orderable yet. Struck through would
   claim it had changed; this only softens it. */
.format[data-soon] .format__price { color: var(--ink-dim); }

.format__name {
  font-family: var(--font-display);
  font-size: .92rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-bright);
}
.format__price { color: var(--gold-lt); font-size: 1.15rem; text-align: right; }
.format__approx { color: var(--ink-dim); font-size: .8rem; text-align: right; grid-column: 2; }
.format__approx:empty { display: none; }
.format__meta { color: var(--ink-dim); font-size: .86rem; grid-column: 1 / -1; }

/* Summary ------------------------------------------------------------- */

.order-summary {
  background: var(--bg-slate);
  border: var(--rule);
  border-top: 3px solid var(--gold);
  padding: 24px 22px;
  position: sticky;
  top: 90px;
}

.order-summary h3 {
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.order-lines { list-style: none; margin: 0 0 16px; padding: 0; }

.order-lines li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}
.order-lines .k { color: var(--ink-dim); }
.order-lines .v { color: var(--ink); text-align: right; }

.order-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
}
.order-total .k {
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.order-total .v { font-size: 1.6rem; color: var(--gold-lt); }
.order-total .v.note { color: var(--ink-dim); font-size: 1.2rem; }

.order-approx { text-align: right; color: var(--ink-dim); font-size: .88rem; margin: 0 0 .6rem; }
.order-approx[hidden] { display: none; }

.fx-note { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; margin: 0 0 1rem; }
.fx-note[hidden] { display: none; }

.order-summary .btn { width: 100%; text-align: center; }

.pay-note { font-size: .8rem; color: var(--ink-dim); margin: 1rem 0 0; line-height: 1.55; }
.pay-note strong { color: var(--gold); font-weight: normal; }

.delivery-eta {
  grid-column: 1 / -1;
  background: var(--bg-raised);
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  font-size: .9rem;
  color: var(--ink-dim);
  margin: 0;
}
.delivery-eta[hidden] { display: none; }
.delivery-eta strong { color: var(--ink); font-weight: normal; }
.delivery-eta a { text-decoration: underline; }

.order-notice {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--bg-raised);
  border-left: 3px solid var(--gold);
  padding: 13px 16px;
  font-size: .92rem;
  margin-bottom: 1.6rem;
}
.order-notice[hidden] { display: none; }

.order-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--gold-lt);
  font-size: 1.1rem;
}

/* ------------------------------------------------------------ footer -- */

.site-footer {
  background: var(--bg-deep);
  border-top: var(--rule);
  padding: 44px 0 36px;
  text-align: center;
  font-size: .88rem;
  color: var(--ink-dim);
}

.site-footer .brand { display: inline-block; margin-bottom: .4rem; }

.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem;
  margin: 1.4rem 0;
}

.footer-nav a {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim);
}
.footer-nav a:hover { color: var(--gold); }

.site-footer .fineprint { max-width: 70ch; margin-inline: auto; font-size: .8rem; line-height: 1.6; }

/* ------------------------------------------------------- page headers -- */

.page-head {
  padding-top: calc(90px + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: var(--rule);
}

/* -------------------------------------------------------------- legal -- */

.legal { font-size: 1rem; }
.legal h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.8rem; color: var(--gold-lt); }
.legal ul, .legal ol { padding-left: 1.2rem; margin-bottom: 1.2em; }
.legal li { margin-bottom: .5em; }

/* Anything still needing real details before this goes live. Loud on purpose:
   a placeholder that blends in is a placeholder that gets published. */
.legal .placeholder {
  border-left: 3px solid var(--gold);
  background: var(--bg-slate);
  padding: .8rem 1rem;
  font-style: italic;
  color: var(--gold-lt);
  margin-bottom: 1.2em;
}

.table-scroll { overflow-x: auto; margin: 1.2rem 0 1.6rem; }

.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding: .6rem .7rem;
}
.legal-table td { border-bottom: 1px solid var(--line-soft); padding: .7rem; vertical-align: top; }

/* --------------------------------------------------------- cookie bar -- */

.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--bg-slate);
  border-top: 2px solid var(--gold);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.cookie-bar.is-open { transform: none; }

.cookie-bar__inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: 1.1rem 24px;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}

.cookie-bar__text { margin: 0; font-size: .9rem; max-width: 74ch; color: var(--ink); }
.cookie-bar__text a { text-decoration: underline; }

.cookie-bar__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.cookie-bar__actions .btn { padding: 10px 22px; }

/* --------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__inner .cover-frame { max-width: 260px; }
  .author-grid { grid-template-columns: 1fr; gap: 28px; }
  .author-grid img { max-width: 240px; }
  .edition-grid { grid-template-columns: 1fr; gap: 28px; }
  .edition-grid .cover-frame { max-width: 240px; }
  .order__layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav { gap: .9rem; }
  .nav a { font-size: .68rem; letter-spacing: .12em; }
  .order__fields { grid-template-columns: 1fr; }
  .field--wide { grid-column: 1; }
  .cookie-bar__inner { flex-direction: column; align-items: stretch; }
  .cookie-bar__actions .btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero__bg { transform: scale(1.08) !important; }
}