/* ==========================================================================
   Sebastian Howarth — The PanTerran Saga
   Theme: slate / graphite dark ground, muted pastel blues.
          Orange survives only on the site title and the current nav item.
   ========================================================================== */

:root {
  /* Ground */
  --bg-void:      #0e1116;
  --bg-deep:      #141922;
  --bg-slate:     #1b212c;
  --bg-raised:    #232b38;
  --line:         #2e3745;
  --line-soft:    #262e3a;

  /* Ink */
  --ink:          #c9d4e2;  /* muted pastel blue-grey, body copy */
  --ink-bright:   #e4ecf6;  /* headings */
  --ink-dim:      #8d9bad;  /* meta, captions */

  /* Accents */
  --blue:         #8fb8dd;  /* muted pastel blue */
  --blue-deep:    #6d97bd;
  /* Orange is reserved for the site title and the main nav's current-page
     marker. Nothing else should reference it. */
  --orange:       #e8a87c;  /* muted pastel orange */
  --orange-deep:  #d18f5f;

  /* Highlight accent — everything that was previously orange. Kept as its own
     semantic name so the highlight colour can change without touching rules. */
  --accent:       #a9d2f2;  /* light blue */
  --accent-deep:  #8cbde6;

  /* Type */
  --font-display: "Eurostile", "Bahnschrift", "DIN Alternate",
                  "Franklin Gothic Medium", "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Metrics */
  --wrap:         1120px;
  --wrap-narrow:  720px;
  --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. */
  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.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-bright);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.2em; }

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

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

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

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

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink);
}

.muted { color: var(--ink-dim); }

/* Editorial note marking placeholder copy */
.note {
  border-left: 2px solid var(--accent-deep);
  padding: .1rem 0 .1rem 1rem;
  color: var(--ink-dim);
  font-style: italic;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 17, 22, .88);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-bright);
  white-space: nowrap;
}
.brand:hover { color: var(--ink-bright); }
.brand span { color: var(--orange); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}

.nav a {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] {
  color: var(--ink-bright);
  border-bottom-color: var(--orange);
}

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

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--rule);
  background:
    radial-gradient(90ch 60ch at 78% 12%, rgba(143, 184, 221, .13), transparent 62%),
    radial-gradient(70ch 50ch at 12% 88%, rgba(169, 210, 242, .10), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-void));
}

/* Faint scan-grid, purely decorative */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 74px 74px;
  opacity: .32;
  pointer-events: none;
  mask-image: radial-gradient(120ch 70ch at 50% 40%, #000 20%, transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.hero__series {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}

.hero__title {
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.hero__rule {
  width: 82px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 1.4rem 0 1.6rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  padding: .4rem 1rem;
  margin-bottom: 1.8rem;
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------- countdown -- */

.countdown {
  margin: 0 0 1.9rem;
  padding: 1.2rem 1.4rem;
  background: rgba(20, 25, 34, .72);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  max-width: 27rem;
}

.countdown[hidden] { display: none; }

.countdown__label {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 .8rem;
}

.countdown__clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.countdown__clock[hidden] { display: none; }

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem .2rem;
  background: var(--bg-void);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}

.countdown__n {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1;
  color: var(--accent);
  /* Tabular figures, so the seconds do not shove the layout sideways twice a
     second as digit widths change. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.countdown__u {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* The release date, under the clock. Deliberately the largest thing in the
   box after the digits themselves -- somebody who reads nothing else should
   leave knowing when the book lands. */
.countdown__release {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--accent);
  text-align: center;
}

.countdown__date {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--ink-dim);
  text-align: center;
}

/* -------------------------------------------------------- book cover -- */

.cover-frame {
  position: relative;
  max-width: 340px;
  margin-inline: auto;
}

.cover-frame img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(143, 184, 221, .08);
}

.cover-frame figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
}

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

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

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85rem 1.7rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  cursor: pointer;
}

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

.btn--ghost {
  background: transparent;
  color: var(--blue);
}
.btn--ghost:hover {
  border-color: var(--blue);
  background: rgba(143, 184, 221, .08);
  color: var(--blue);
}

/* --------------------------------------------------------------- book -- */

.book-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.meta-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.4rem 0 0;
  border-top: var(--rule);
  display: grid;
  gap: .7rem;
}

.meta-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  font-size: .92rem;
}

.meta-list dt,
.meta-list .k {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: .18rem;
}

.meta-list .v { color: var(--ink); }

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

.author-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.portrait img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.portrait figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--ink-dim);
}

/* ----------------------------------------------------------- newsletter -- */

.signup {
  background: var(--bg-slate);
  border: var(--rule);
  border-radius: 4px;
  padding: clamp(1.8rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}

.signup::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue-deep), var(--accent));
}

.signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

.field {
  flex: 1 1 260px;
  min-width: 0;
}

label {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .5rem;
}

/* Typed inputs are listed rather than styled with a bare `input` so that
   checkboxes and radios keep their native look. The pre-order form added tel,
   number and search to the set. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-bright);
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .85rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input::placeholder,
textarea::placeholder { color: #64717f; }

/* Chrome paints an autofilled field with its own near-white background, which
   on a dark ground reads as a broken input. It refuses a plain background
   colour, so the fill is faked with a very large inset shadow, and the endless
   transition stops it repainting on focus. Matters most on the pre-order form,
   where a browser will offer to fill in name, email and address. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-bright);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-void) inset;
          box-shadow: 0 0 0 1000px var(--bg-void) inset;
  caret-color: var(--ink-bright);
  transition: background-color 100000s ease-in-out 0s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(143, 184, 221, .14);
}

textarea { resize: vertical; min-height: 170px; }

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

/* ---------------------------------------------------------- form page -- */

.form-stack {
  display: grid;
  gap: 1.3rem;
  margin-top: 2rem;
}

/* ------------------------------------------------- form result messages -- */

.form-msg {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .95rem;
  border: 1px solid;
  border-radius: 2px;
  padding: .9rem 1rem;
  margin-bottom: 1.4rem;
}

/* Beats the display:flex above so the `hidden` attribute still works. */
.form-msg[hidden] { display: none; }

.form-msg svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.form-msg--success {
  color: #a9d8c4;
  background: rgba(120, 190, 160, .10);
  border-color: rgba(120, 190, 160, .40);
}

.form-msg--error {
  color: #f0b4a4;
  background: rgba(201, 112, 95, .12);
  border-color: rgba(201, 112, 95, .45);
}

/* Something needing attention that is not a failure — work waiting to be done
   rather than something that went wrong. Amber, so it does not read as an
   error in the order book. */
.form-msg--warn {
  color: #e8c9a0;
  background: rgba(210, 160, 90, .12);
  border-color: rgba(210, 160, 90, .45);
}

.form-msg--warn code {
  background: rgba(0, 0, 0, .25);
  padding: .1em .4em;
  border-radius: 3px;
  font-size: .92em;
}

/* Turnstile. The widget is an iframe of Cloudflare's own making and cannot be
   restyled from here, so this only reserves room for it and keeps it from
   pushing the send button around while it loads. min-height is its rendered
   height: without it the button jumps down the moment the widget appears. */
.turnstile {
  margin: .2rem 0 .4rem;
  min-height: 65px;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------- panels -- */

.panel {
  background: var(--bg-slate);
  border: var(--rule);
  border-radius: 4px;
  padding: 1.6rem 1.7rem;
}

.panel h3 {
  color: var(--blue);
  margin-bottom: .5rem;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------- socials -- */

.social-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.6rem;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
  background: var(--bg-slate);
  transition: border-color .18s ease, color .18s ease,
              background .18s ease, transform .18s ease;
}
.social:hover {
  color: var(--accent);
  border-color: var(--accent-deep);
  background: var(--bg-raised);
  transform: translateY(-2px);
}
.social svg { width: 20px; height: 20px; fill: currentColor; }

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

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

.site-footer {
  border-top: var(--rule);
  background: var(--bg-deep);
  padding-block: 2.6rem;
  font-size: .88rem;
  color: var(--ink-dim);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

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

/* ---------------------------------------------------------- page head -- */

.page-head {
  border-bottom: var(--rule);
  background:
    radial-gradient(70ch 40ch at 20% 0%, rgba(143, 184, 221, .12), transparent 65%),
    var(--bg-deep);
  padding-block: clamp(3rem, 7vw, 4.6rem);
}

/* ------------------------------------------------------------ a11y -- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg-void);
  padding: .7rem 1.2rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--bg-void); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

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

@media (max-width: 900px) {
  .hero__inner,
  .book-grid,
  .author-grid {
    grid-template-columns: 1fr;
  }
  .hero__inner { padding-block: 3.2rem; }
  .cover-frame { max-width: 260px; }
  .portrait { max-width: 240px; }
}

@media (max-width: 620px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding-block: .9rem;
  }
  .site-header { position: static; }
  .nav { flex-wrap: wrap; gap: 1.1rem; }
  .meta-list li { grid-template-columns: 1fr; gap: .1rem; }
  .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ==========================================================================
   Brevo form
   Overrides for the embedded subscription form. Loaded after Brevo's
   sib-styles.css, so plain rules win on load order; the #sib-container prefix
   adds ID specificity where their selectors are more specific than ours.
   Their markup keeps its original ids and class names — main.js depends on
   them — so restyling happens entirely here rather than in the HTML.

   #np-sib-container / #np-sib-form are the copy of the form inside the
   newsletter popup. They are named apart because ids must be unique and
   Brevo's script claims the originals, but they need the same styling — hence
   the :is() pairs. Keep :is(): its specificity is that of its most specific
   argument, so these still carry the ID weight the overrides depend on.
   ========================================================================== */

/* Strip the stock white card back to nothing; .signup is already the panel. */
.sib-form,
.sib-form-container,
:is(#sib-container, #np-sib-container) {
  background: transparent;
  max-width: none;
  padding: 0;
  border: 0;
  text-align: left;
}

.signup .sib-form { margin-top: 1.6rem; }

:is(#sib-form, #np-sib-form) { padding: 0; }

:is(#sib-container, #np-sib-container) .sib-form-block { padding: 0; }

:is(#sib-container, #np-sib-container) .form__entry { margin: 0; }

/* ---- field ---- */

:is(#sib-container, #np-sib-container) .entry__label {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .5rem;
}

/* Brevo appends the required marker from data-required="*" */
:is(#sib-container, #np-sib-container) .entry__label[data-required]::after {
  content: "";
}

/* Brevo puts the white card and border on this wrapper, not on .input.
   Neutralise it and carry the width constraint here, so the input has nothing
   left to sit short of. */
:is(#sib-container, #np-sib-container) .entry__field {
  display: block;
  max-width: 420px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

:is(#sib-container, #np-sib-container) .input {
  width: 100%;
  max-width: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-bright);
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .85rem 1rem;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

:is(#sib-container, #np-sib-container) .input::placeholder { color: #64717f; opacity: 1; }

:is(#sib-container, #np-sib-container) .input:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(143, 184, 221, .14);
}

/* Brevo flags a failed field with this class */
:is(#sib-container, #np-sib-container) .input.entry__field--error,
:is(#sib-container, #np-sib-container) .entry__field--error .input {
  border-color: #c9705f;
}

:is(#sib-container, #np-sib-container) .entry__specification {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

:is(#sib-container, #np-sib-container) .entry__error {
  font-family: var(--font-body);
  font-size: .86rem;
  color: #e8a08c;
  background: rgba(201, 112, 95, .10);
  border: 1px solid rgba(201, 112, 95, .38);
  border-radius: 2px;
  padding: .55rem .8rem;
  margin-top: .7rem;
  max-width: 420px;
}

/* ---- submit ---- */

:is(#sib-container, #np-sib-container) .sib-form-block--submit { margin-top: 1.4rem; }

:is(#sib-container, #np-sib-container) .sib-form-block__button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bg-void);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: .85rem 1.7rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

:is(#sib-container, #np-sib-container) .sib-form-block__button:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--bg-void);
}

:is(#sib-container, #np-sib-container) .sib-form-block__button .icon { fill: currentColor; }

/* Invisible reCAPTCHA renders nothing inline; the badge floats separately. */
:is(#sib-container, #np-sib-container) .g-recaptcha { margin: 0; }

/* ---- result panels ----
   Keep :where() — zero specificity is what lets Brevo's script reveal these.
   Colour only below; never set `display` at normal specificity. */

:where(.sib-form-message-panel) { display: none; }

:where(.sib-form-message-panel .sib-notification__icon) {
  width: 20px;
  height: 20px;
}

.sib-form-message-panel {
  font-family: var(--font-body);
  font-size: .95rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  padding: .9rem 1rem;
  margin-bottom: 1.2rem;
  max-width: 480px;
  text-align: left;
}

.sib-form-message-panel--error {
  color: #f0b4a4;
  background: rgba(201, 112, 95, .12);
  border-color: rgba(201, 112, 95, .45);
}

.sib-form-message-panel--success {
  color: #a9d8c4;
  background: rgba(120, 190, 160, .10);
  border-color: rgba(120, 190, 160, .40);
}

.sib-form-message-panel .sib-icon { fill: currentColor; }

.sib-form-message-panel__text {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  color: inherit;
}

@media (max-width: 620px) {
  :is(#sib-container, #np-sib-container) .sib-form-block__button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Pre-order
   The checkout block at the top of the home page. Everything here is driven by
   assets/js/preorder.js — the format cards, the running total and the PayFast
   hand-off. Colours stay on --accent; orange remains reserved for the site
   title and the current nav item.
   ========================================================================== */

.preorder {
  position: relative;
  overflow: hidden;
  border-bottom: var(--rule);
  background:
    radial-gradient(80ch 50ch at 85% 0%, rgba(169, 210, 242, .12), transparent 62%),
    var(--bg-deep);
  padding-block: clamp(2.8rem, 7vw, 4.6rem);
}

/* Top hairline, brighter than a normal section border — this is the one block
   on the page that is asking for money, so it gets to announce itself. */
.preorder::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue-deep) 45%, transparent);
}

.preorder__head { max-width: 68ch; }
.preorder__head h2 { margin-bottom: .6rem; }

.preorder__layout {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.4rem;
}

/* --------------------------------------------------------- format cards -- */

fieldset.preorder__fieldset {
  border: 0;
  margin: 0 0 2rem;
  padding: 0;
  min-width: 0;          /* fieldsets refuse to shrink in a grid without this */
}

.preorder__legend {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0;
  margin-bottom: .9rem;
}

.format-grid {
  display: grid;
  /* 260px is chosen so the four editions settle into 2x2 beside the summary
     rather than 3-and-an-orphan. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
}

/* .format is a <label>, so the global label rule reaches into it and would set
   every word inside the card uppercase, letter-spaced and 0.74rem. The card
   sets its own type, so those three are handed back first. */
.format {
  display: block;
  cursor: pointer;
  margin-bottom: 0;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Kept in the layout and focusable — only painted out of sight. display:none
   would drop it from the tab order and from the radio group's arrow keys. */
.format__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.format__card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  background: var(--bg-slate);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.format:hover .format__card { border-color: var(--blue-deep); }

.format__input:checked + .format__card {
  border-color: var(--accent);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.format__input:focus-visible + .format__card {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.format__name {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.format__price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: .02em;
}

.format__meta {
  font-size: .84rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ------------------------------------------------------------- details -- */

.preorder__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}

.field--wide { grid-column: 1 / -1; }

/* The newsletter opt-in. A checkbox beside wrapping text, aligned to the first
   line rather than centred, so a two-line label does not push the box down. */
.field--check { margin-top: .2rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: .18rem 0 0;      /* nudged down to sit on the first line's baseline */
  accent-color: var(--accent, currentColor);
  cursor: pointer;
}

.check span { flex: 1 1 auto; }

/* Revealed by preorder.js only for formats that have to be posted to someone. */
.preorder__delivery[hidden] { display: none; }

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

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

.order-summary {
  position: sticky;
  top: 5.5rem;
  background: var(--bg-slate);
  border: var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.6rem;
}

.order-summary h3 {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.1rem;
}

.order-lines {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-size: .92rem;
}

.order-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.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;
  font-family: var(--font-display);
  margin-bottom: 1.3rem;
}

.order-total .k {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.order-total .v {
  font-size: 1.6rem;
  color: var(--accent);
}

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

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

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

.pay-note strong { color: var(--blue); font-weight: 600; }

/* --------------------------------------------- local-currency estimate -- */

/* Deliberately quieter than the rand figures beside them: these are a
   courtesy conversion, not the amount being charged. */
.format__approx {
  font-size: .82rem;
  color: var(--ink-dim);
  letter-spacing: .01em;
}
.format__approx:empty { display: none; }

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

.fx-note {
  margin: 0 0 1.2rem;
  padding-left: .9rem;
  border-left: 2px solid var(--accent-deep);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.fx-note[hidden] { display: none; }

/* ------------------------------------------------- delivery expectation -- */

/* Sits directly under the country select and answers "when will it come, and
   will it be signed" the moment a country is picked. Quiet by default; it is
   reassurance, not an alert. */
.delivery-eta {
  grid-column: 1 / -1;
  margin: -.4rem 0 0;
  padding: .85rem 1.1rem;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
  border-radius: 2px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.delivery-eta[hidden] { display: none; }
.delivery-eta strong { color: var(--ink); font-weight: 600; }
.delivery-eta a { text-decoration: underline; }

/* The country select drives the delivery quote, so it gets the same weight as
   a text field rather than the browser's default control. */
.preorder select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: right 1.15rem center, right .8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* The banner shown while the merchant keys or the prices are still
   placeholders. preorder.js reveals it and disables the pay button. */
.preorder__notice {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: rgba(169, 210, 242, .08);
  border: 1px solid var(--accent-deep);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: .9rem;
  color: var(--ink);
}

.preorder__notice[hidden] { display: none; }
.preorder__notice svg { width: 18px; height: 18px; flex: none; margin-top: .22rem; fill: var(--accent); }

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

/* The reference echoed back on /preorder/thank-you/ and /preorder/cancelled/. */
.order-ref {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: var(--accent);
  word-break: break-all;
}

@media (max-width: 900px) {
  .preorder__layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

/* ==========================================================================
   Cookie notice, and the legal pages it links to
   ========================================================================== */

/* A notice pinned to the bottom, not a modal. Nothing that sets a third-party
   cookie loads until a choice is made, so there is no reason to hold the page
   hostage until someone clicks. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--bg-deep);
  border-top: 1px solid var(--accent-deep);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
  transform: translateY(105%);
  transition: transform .3s ease;
}

.cookie-bar.is-open { transform: none; }

.cookie-bar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  justify-content: space-between;
}

.cookie-bar__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 68ch;
  flex: 1 1 30ch;
}

.cookie-bar__text a { text-decoration: underline; }

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  flex: 0 0 auto;
}

.cookie-bar__actions .btn { padding: .7rem 1.4rem; }

@media (max-width: 620px) {
  .cookie-bar__inner { padding: .9rem 1.1rem; }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* Stands in for the newsletter form while its scripts are not allowed. */
.cookie-gate {
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
  border-radius: 3px;
}

.cookie-gate[hidden] { display: none; }
.cookie-gate p { font-size: .9rem; color: var(--ink-dim); margin-bottom: 1rem; }
.cookie-gate a { text-decoration: underline; }

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

.legal { font-size: 1rem; }

.legal h2 {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: var(--rule);
  font-size: 1.35rem;
}

.legal h3 {
  margin-top: 1.8rem;
  color: var(--blue);
}

.legal ul, .legal ol { padding-left: 1.2rem; margin-bottom: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal p, .legal li { color: var(--ink); }

/* Long documents are easier to hold onto when the first line of each block
   is anchored to something. */
.legal > .note { margin-bottom: 1.6rem; }

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

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 34rem;
}

.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 .8rem .6rem 0;
  white-space: nowrap;
}

.legal-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: .75rem .8rem .75rem 0;
  vertical-align: top;
  line-height: 1.55;
}

.legal-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--accent);
}

/* ==========================================================================
   The download page
   ==========================================================================
   Reached from an email, by someone who has paid and wants their book. It
   should be one clear list and nothing else competing for attention.
   ========================================================================== */

.download-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.download-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: var(--bg-slate);
  border: var(--rule);
  border-radius: 4px;
}

.download-list__name {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  /* Filenames run long and a chapter title should wrap rather than push the
     download button off a phone screen. */
  min-width: 0;
  flex: 1 1 14rem;
  overflow-wrap: anywhere;
}

.download-list__item .btn {
  flex: 0 0 auto;
}