/* =========================================================
   Malin Österlöf — Author website
   Design tokens → base → layout → components → pages
   ========================================================= */

:root {
  color-scheme: light;

  /* Colour — drawn from the book cover and hero mock-up */
  --color-bg: #f6f6f4;
  --color-bg-dots: #d9dcdf;
  --color-surface: #ffffff;
  --color-ink: #1f2328;
  --color-muted: #555e69;
  --color-line: #e3e5e7;
  --color-teal: #1f8a86;
  --color-teal-deep: #146663;
  --color-teal-soft: #e6f2f1;
  --color-gold: #f2c94c;
  --color-slate: #5f7281;
  --color-slate-hover: #4c5e6c;
  --color-error: #b42318;
  --color-success: #146663;
  --color-focus: #146663;

  /* Type */
  --font-display: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --step-4: clamp(2.6rem, 1.6rem + 4vw, 4.5rem);

  --tracking-wide: 0.32em;

  /* Space (spacious, 8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-pill: 999px;
  --radius-md: 14px;
  --shadow-soft: 0 10px 30px -12px rgba(31, 35, 40, 0.18);
  --shadow-book: 18px 24px 40px -14px rgba(20, 40, 45, 0.45);

  --container: 72rem;
  --measure: 38rem;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 var(--space-2); }

a {
  color: var(--color-teal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-ink); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--color-ink);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.dotted {
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-bg-dots) 1.2px, transparent 1.3px);
  background-size: 64px 64px;
  background-position: 18px 18px;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--color-muted);
  max-width: var(--measure);
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--white { background: var(--color-surface); }

.prose { max-width: var(--measure); }
.prose p { color: #343a41; }
.prose h2 { margin-top: var(--space-5); }

.center { text-align: center; margin-inline: auto; }

/* ---------- Announcement bar ---------- */
.announcement {
  background: var(--color-teal-deep);
  color: #fff;
  text-align: center;
  font-size: var(--step--1);
  padding: 0.55rem 16px;
  letter-spacing: 0.02em;
}
.announcement a { color: #fff; font-weight: 500; }
.announcement a:hover { color: var(--color-gold); }

/* ---------- Header / navigation (sticky) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: 0 6px 20px -16px rgba(31, 35, 40, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-3);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1;
}
.wordmark:hover { color: var(--color-teal-deep); }

.nav-list {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: calc(0.9rem - 0.22em);
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after,
.nav-link.is-section::after { transform: scaleX(1); }
.nav-link[aria-current="page"],
.nav-link.is-section { color: var(--color-teal-deep); }

/* Phones: name on its own row, links in one row beneath it.
   The negative sticky offset lets the name scroll away so only
   the slim row of links stays pinned at the top. */
@media (max-width: 760px) {
  :root { --header-h: 48px; --wordmark-row: 52px; }
  .site-header { top: calc(-1 * var(--wordmark-row)); }
  .header-inner {
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }
  .wordmark {
    display: flex;
    align-items: center;
    height: var(--wordmark-row);
    font-size: 1.5rem;
  }
  .site-nav {
    width: 100%;
    border-top: 1px solid var(--color-line);
  }
  .nav-list { justify-content: space-between; gap: 0; }
  .nav-link {
    min-height: var(--header-h);
    padding: 0 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }
  .nav-list li:first-child .nav-link { padding-left: 0; }
  .nav-list li:last-child .nav-link { padding-right: 0; }
  .nav-link::after { left: 0.5rem; right: calc(0.5rem + 0.14em); bottom: 12px; }
  .nav-list li:first-child .nav-link::after { left: 0; }
  .nav-list li:last-child .nav-link::after { right: 0.14em; }
}

@media (max-width: 340px) {
  .nav-link { letter-spacing: 0.08em; font-size: 0.6875rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 56px;
  padding: 0 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-slate);
  color: #fff;
}
.btn--primary:hover { background: var(--color-slate-hover); color: #fff; }

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-muted);
  box-shadow: var(--shadow-soft);
}
.btn--ghost:hover { color: var(--color-ink); box-shadow: 0 14px 34px -14px rgba(31, 35, 40, 0.28); }

.btn--teal { background: var(--color-teal-deep); color: #fff; }
.btn--teal:hover { background: #0f4f4d; color: #fff; }

.btn--light { background: #fff; color: var(--color-teal-deep); }
.btn--light:hover { background: var(--color-gold); color: var(--color-ink); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.btn-stack .btn { width: min(100%, 26rem); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
}
.text-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Book cover ---------- */
/* 3D paperback: the flat cover is turned slightly so the cream page
   edges show on the right, with a soft shadow on the "floor".
   Paperback cues: square corners, cover flush with the pages (no
   overhanging boards), a slim page block and a flat, matte front.
   --depth-px is the book's thickness. */
.book {
  position: relative;
  width: min(100%, 360px);
  margin-inline: auto;
  perspective: 1300px;
  padding-right: 6%;
}
.book-3d {
  position: relative;
  aspect-ratio: 455 / 726;
  transform-style: preserve-3d;
  transform: rotateY(-28deg) rotateX(1.5deg);
  transform-origin: 40% 50%;
}
.book-3d img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(var(--depth-px, 18px));
}
/* Page block on the fore-edge: full height, flush with the cover,
   with a thin line of the back cover along its far edge */
.book-pages {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--depth-px, 18px);
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, transparent calc(100% - 1.5px), #1a7a76 calc(100% - 1.5px)),
    repeating-linear-gradient(90deg, rgba(110, 95, 75, 0.18) 0 1px, transparent 1px 2.5px),
    linear-gradient(90deg, #d2c7b3, #efe8dc 25%, #e8e0d1 80%, #cdc1ac);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
/* Contact shadow on the floor, down and to the right */
.book::after {
  content: "";
  position: absolute;
  left: 12%;
  right: -4%;
  bottom: -5%;
  height: 9%;
  background: radial-gradient(ellipse at 60% 40%, rgba(20, 40, 45, 0.45), rgba(20, 40, 45, 0.12) 55%, transparent 72%);
  filter: blur(6px);
  z-index: -1;
}
/* Hardcover variant (add "book--hardcover" next to "book" in the HTML),
   modelled on Media/3D_BookcoverStyle_Hardcover.jpg: seen straight on,
   the jacket darkens where it wraps round the board's right edge, and
   a large soft shadow falls down and to the right. The front stays
   flat, with no spine crease and no edges above or below the cover. */
.book--hardcover {
  perspective: none;
  padding: 0 3% 0 0;
}
.book--hardcover::after { display: none; }
.book--hardcover .book-3d {
  transform: none;
  transform-style: flat;
}
/* Sits exactly behind the cover and only carries the shadow */
.book--hardcover .book-pages {
  inset: 0;
  width: auto;
  z-index: 0;
  transform: none;
  border-radius: 1px 2px 2px 1px;
  background: none;
  box-shadow:
    3px 5px 8px rgba(20, 30, 30, 0.22),
    22px 30px 56px 0 rgba(20, 30, 30, 0.4);
}
/* The dust jacket (the cover image) */
.book--hardcover .book-3d img {
  z-index: 1;
  transform: none;
  border-radius: 1px 2px 2px 1px;
}
/* Jacket wrapping round the board's right edge */
.book--hardcover .book-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 1px 2px 2px 1px;
  background: linear-gradient(90deg, transparent 96.2%, rgba(0, 45, 42, 0.18) 98.2%, rgba(0, 40, 36, 0.42) 99.4%, rgba(0, 30, 28, 0.6));
  pointer-events: none;
}

/* Depth in pixels scales with the book's width */
.hero-media .book { --depth-px: 30px; }
.book-aside .book,
.book-tile .book { --depth-px: 26px; }
@media (max-width: 600px) {
  .book,
  .hero-media .book,
  .book-aside .book,
  .book-tile .book { --depth-px: 20px; }
}

/* ---------- Home: hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
}
.hero-text {
  padding: var(--space-6) 16px var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4);
}
.hero-text .lede { margin: 0 auto var(--space-5); text-align: center; }
.hero-media {
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 32px;
}
.hero-media .book { width: min(78vw, 400px); }

@media (min-width: 960px) {
  .hero { grid-template-columns: 54fr 46fr; min-height: calc(100dvh - var(--header-h) - 38px); }
  .hero-text { padding: var(--space-6) clamp(2rem, 5vw, 5rem); }
  .hero-media { padding: var(--space-6) var(--space-5); }
}

/* Separate the hero from the dotted section that follows it */
.hero + .section { border-top: 1px solid var(--color-line); }

/* Author portrait in an arched frame */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: min(100%, 380px);
  margin-inline: auto;
  border-radius: 200px 200px var(--radius-md) var(--radius-md);
  overflow: hidden;
  background: var(--color-teal-soft);
  box-shadow: var(--shadow-soft);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ---------- Themes / cards ---------- */
.section-head { max-width: 40rem; margin: 0 auto var(--space-5); text-align: center; }
.section-head .lede { margin-inline: auto; }

.cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-teal-soft);
  color: var(--color-teal-deep);
  margin-bottom: var(--space-3);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.6rem; margin-bottom: var(--space-1); }
.card p { color: var(--color-muted); margin: 0; }

/* ---------- Quote band ---------- */
.quote-band {
  background: var(--color-teal-deep);
  color: #fff;
  text-align: center;
}
.quote-band blockquote { margin: 0 auto; max-width: 46rem; }
.quote-band p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.quote-band cite {
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #cfe7e4;
}
.quote-mark { color: var(--color-gold); }

/* ---------- Updates CTA ---------- */
.cta-panel {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.cta-panel .lede { margin: 0 auto var(--space-4); }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  margin-bottom: var(--space-3);
}
.page-hero .lede { margin-inline: auto; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 1fr 1.5fr; gap: var(--space-6); align-items: start; }
  .about-grid .portrait { position: sticky; top: calc(var(--header-h) + 32px); }
}

.facts {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}
.facts li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: #343a41;
}
.facts svg { width: 22px; height: 22px; flex: none; color: var(--color-teal); margin-top: 0.25rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumb li + li::before { content: "/"; margin: 0 0.75em; color: #9aa3ab; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-teal-deep); text-decoration: underline; }

/* ---------- Books ---------- */
.book-tile {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  max-width: 56rem;
  margin-inline: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
.book-tile .book {
  width: min(100%, 300px);
  transition: transform var(--dur-base) var(--ease-out);
}
.book-tile:hover { background: var(--color-bg); color: inherit; }
.book-tile:hover .book { transform: translateY(-6px); }
.book-tile:hover .text-link svg { transform: translateX(4px); }
.book-tile h2 { font-size: var(--step-3); }
.book-tile p { color: var(--color-muted); max-width: var(--measure); }
.book-tile .text-link { color: var(--color-teal-deep); }
.book-tile-text { text-align: center; }
@media (min-width: 760px) {
  .book-tile { grid-template-columns: 300px 1fr; gap: var(--space-6); }
  .book-tile-text { text-align: left; }
}

.book-feature {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .book-feature { grid-template-columns: 0.9fr 1.3fr; gap: var(--space-6); }
  .book-feature .book-aside { position: sticky; top: calc(var(--header-h) + 32px); }
}
.book-aside .book { width: min(100%, 340px); }

.book-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--color-teal-deep);
  margin-bottom: var(--space-4);
}

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--color-line);
  font-size: var(--step--1);
}
.detail-list dt { color: var(--color-muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.detail-list dd { margin: 0; }

.buy-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.buy-links .btn { min-height: 48px; padding: 0 1.5rem; }

/* Review encouragement */
.review-band { background: var(--color-teal-soft); }
.review-panel {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.review-panel .lede { margin: 0 auto var(--space-2); }
.review-tip { color: var(--color-muted); font-size: var(--step--1); }
.review-links { justify-content: center; margin: var(--space-4) 0 var(--space-3); }
.review-links .btn svg { width: 16px; height: 16px; }
.stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.stars svg { width: 26px; height: 26px; fill: var(--color-gold); stroke: #d9a920; stroke-width: 1; }

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  gap: 0.75rem;
}
.check-list li { display: flex; gap: 0.85rem; color: #343a41; }
.check-list svg { width: 20px; height: 20px; flex: none; color: var(--color-teal); margin-top: 0.3rem; }

/* ---------- Contact form ---------- */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; gap: var(--space-6); }
}

.form-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-soft);
}

.field { margin-bottom: var(--space-3); }

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.field .req { color: var(--color-teal-deep); margin-left: 2px; }

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid #c9ced3;
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
.field input:hover,
.field textarea:hover { border-color: #9aa3ab; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-teal-deep);
  box-shadow: 0 0 0 3px rgba(31, 138, 134, 0.22);
}

.field-hint { font-size: var(--step--1); color: var(--color-muted); margin: 0.4rem 0 0; }

/* Country dropdown */
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 3rem 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid #c9ced3;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.select-wrap select:invalid,
.select-wrap select:has(option[value=""]:checked) { color: #6b737c; }
.select-wrap select:hover { border-color: #9aa3ab; }
.select-wrap select:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-teal-deep);
  box-shadow: 0 0 0 3px rgba(31, 138, 134, 0.22);
}
.select-wrap svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
.select-wrap option { color: var(--color-ink); }

/* Newsletter opt-in */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: var(--space-2);
  background: var(--color-teal-soft);
  border-radius: 10px;
}
.field--check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.15rem 0 0;
  accent-color: var(--color-teal-deep);
  cursor: pointer;
}
.field--check label {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.field--check .field-hint { display: block; font-weight: 400; margin-top: 0.2rem; }

.privacy-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--color-muted);
}
.privacy-note svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--color-teal-deep); }

.field-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  color: var(--color-error);
  margin: 0.45rem 0 0;
}
.field-error svg { width: 16px; height: 16px; flex: none; }
.field.is-invalid .field-error { display: flex; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: var(--color-error); background: #fff; }

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.form-note { font-size: var(--step--1); color: var(--color-muted); margin: 0; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}
.is-loading .spinner { display: inline-block; }
.is-loading .btn-icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  display: none;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: 10px;
  margin-bottom: var(--space-3);
}
.form-status svg { width: 22px; height: 22px; flex: none; margin-top: 0.15rem; }
.form-status p { margin: 0; }
.form-status.is-error { display: flex; background: #fdecea; color: var(--color-error); }

.form-success { text-align: center; padding: var(--space-4) 0; }
.form-success .success-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-teal-soft);
  color: var(--color-success);
  display: grid; place-items: center;
}
.form-success .success-icon svg { width: 30px; height: 30px; }
.contact-aside h2 { font-size: var(--step-2); }
.contact-aside .prose p { color: var(--color-muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: #c9ced3;
  padding: var(--space-6) 0 var(--space-4);
  font-size: var(--step--1);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}
.site-footer .wordmark { color: #fff; font-size: 1.75rem; }
.site-footer .wordmark:hover { color: var(--color-gold); }
.footer-tag { margin: 0.75rem 0 0; color: #aab2ba; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem;
  color: #e6e9ec; text-decoration: none; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.75rem;
}
.footer-nav a:hover { color: var(--color-gold); }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid #343a41;
  color: #9aa3ab;
}
.footer-bottom a { color: #e6e9ec; }
.footer-bottom a:hover { color: var(--color-gold); }

.center-block { margin-inline: auto; }

/* ---------- Small phones ---------- */
@media (max-width: 600px) {
  .section { padding-block: var(--space-6); }
  .section--tight { padding-block: var(--space-5); }
  .page-hero { padding: var(--space-6) 0 var(--space-5); }

  .announcement { font-size: 0.8125rem; line-height: 1.5; }
  .announcement a { white-space: nowrap; }

  .btn {
    padding: 0 1.5rem;
    gap: 0.75rem;
    letter-spacing: 0.2em;
    max-width: 100%;
    text-align: center;
  }

  .hero-text { padding: var(--space-5) 16px; }
  .hero-text .lede { margin-bottom: var(--space-4); }
  .hero-media { padding: var(--space-5) 16px; }
  .hero-media .book { width: min(64vw, 260px); }

  .portrait { width: min(62vw, 240px); }

  .card { padding: var(--space-3); }
  .cta-panel { padding: var(--space-5) var(--space-3); }

  .footer-nav ul { margin-left: -0.75rem; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}