/* ===============================================================
   suzannealderson.com — the one stylesheet for the whole site.
   Change something here and every page follows.

   Contents
   1.  Colours, fonts and spacing
   2.  Base
   3.  Layout helpers
   4.  Announcement strip
   5.  Header, logo and menu
   6.  Typography
   7.  Buttons and links
   8.  Playful marks: thread, stamp, spine, stripes, swipe
   9.  Placeholders
   10. Hero
   11. Scrolling word band
   12. Introduction
   13. The four areas
   14. The book
   15. Newsletter
   16. Contact
   17. Footer
   =============================================================== */

/* --- 1. Colours, fonts and spacing ---------------------------- */

:root {
  /* Suzanne's palette */
  --linen: #f4f0e8;
  --plaster: #d6cbc2;
  --khaki: #6b6b41;        /* blocks, rules, stripes, accents */
  --khaki-deep: #5c5c36;   /* the same colour, deepened, where text sits on it */
  --khaki-text: #4e4e2e;   /* deeper again, for words set on plaster */
  --mulberry: #642038;      /* the same burgundy. One burgundy on the site, not two */
  --mulberry-deep: #4e192c;      /* the burgundy, darkened, for button hover */
  --charcoal: #222222;
  --orange: #f28c28;
  --orange-deep: #d97710;
  --peach: #f0b393;        /* second accent: colour blocks, swipes, the stamp */
  --peach-deep: #9c5424;   /* the same colour, deepened, where peach must be read */
  --wine: #642038;         /* the burgundy: the name mark, bold blocks, accents */

  /* Working shades drawn from the palette */
  --card: #fffdfa;
  --ink-soft: #55504a;
  /* Decorative only. At 12px this is 3.95:1 on linen and 2.82:1 on
     plaster, so it fails the readability guidelines for anything a
     person actually has to read. Small labels use --ink-soft instead. */
  --ink-faint: #7c766e;
  --rule: rgba(34, 34, 34, 0.12);

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mark: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Caveat", "Segoe Script", cursive;
  --wonk: "SOFT" 60, "WONK" 1;

  /* Spacing and shape */
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius: 22px;
  --radius-sm: 14px;
  --measure: 36rem;
}

/* --- 2. Base -------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.28vw + 1rem, 1.1875rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: rgba(242, 140, 40, 0.3); }

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: var(--card);
  color: var(--charcoal);
  padding: 0.6rem 1rem;
  border-radius: 999px;
}

[hidden] { display: none !important; }

/* --- 3. Layout helpers ---------------------------------------- */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4.5vw, 3.25rem);
  padding-right: clamp(1.25rem, 4.5vw, 3.25rem);
}

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

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Coloured blocks, with linen breathing space left around them. */
.block {
  border-radius: var(--radius);
  padding: clamp(2.25rem, 5vw, 4rem);
}
.block-plaster { background: var(--plaster); }
.block-khaki { background: var(--khaki-deep); color: var(--linen); }
.block-mulberry { background: var(--mulberry); color: var(--linen); }
.block-peach { background: var(--peach); color: var(--charcoal); }

.on-dark { color: var(--linen); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--linen); }
.on-dark .quiet { color: rgba(244, 240, 232, 0.78); }

/* --- 4. Announcement strip ------------------------------------ */

.announce {
  background: var(--mulberry);
  color: var(--linen);
  padding-top: env(safe-area-inset-top, 0px);
  font-size: 0.9375rem;
}

.announce-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.7rem clamp(1.25rem, 4.5vw, 3.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.announce p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; justify-content: center; }

.announce a {
  color: var(--linen);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.announce a:hover { color: var(--orange); }

.announce-close {
  position: absolute;
  right: clamp(0.75rem, 3vw, 2rem);
  background: none;
  border: 0;
  color: rgba(244, 240, 232, 0.75);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  border-radius: 999px;
}
.announce-close:hover { color: var(--linen); }
.announce-inner { position: relative; }

/* --- 5. Header, logo and menu --------------------------------- */

/* A band of colour running the full width behind the name mark, like the
   printed strip at the top of a letterhead. Plaster is used rather than
   peach because the wine burgundy of the mark reads at 4.9:1 on plaster
   and only 4.3:1 on peach. */
.site-header {
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--header-band, var(--plaster));
}

/* On the homepage the name mark is the page's main heading. The wrapper
   carries no styling of its own, so nothing moves on the page. */
.site-title { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The name mark: "Suzanne" bold, "Alderson" italic, with the thread
   drawn beneath it. Deliberately a different typeface from the
   headlines, so it reads as a mark rather than as more text. */
.logo {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}

.wordmark-name {
  display: block;
  font-family: var(--mark);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--wine);
  white-space: nowrap;
}
.wordmark-name b { font-weight: 700; }
.wordmark-name i { font-style: italic; }

.wordmark-thread {
  display: block;
  width: 100%;
  height: 15px;
  margin-top: 0.18em;
  overflow: visible;
}

.logo:hover .wordmark-name { color: var(--mulberry); }

@media (max-width: 26rem) {
  .wordmark-name { font-size: 1.55rem; }
  .wordmark-thread { height: 12px; }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-toggle-bars i { display: block; width: 15px; height: 1.5px; background: var(--charcoal); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 1.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--charcoal); border-bottom-color: var(--orange); }

/* The page you are on is marked with a small piece of the thread rather
   than a straight rule — the same line as the name mark, in miniature.
   At this size it reads as a family resemblance, not a tiny copy. */
.site-nav a[aria-current="page"] {
  color: var(--charcoal);
  border-bottom-color: transparent;
  padding-bottom: 9px;
  background-repeat: no-repeat;
  background-position: center bottom 1px;
  background-size: 100% 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 9' fill='none'%3E%3Cpath d='M1 5.5C7 2 12 8 19 4.8S32 1.6 40 5.4S53 7.4 59 3.2' stroke='%23F28C28' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 52rem) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }
  .site-nav.is-open { grid-template-rows: 1fr; }
  .site-nav ul {
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }
  .site-nav.is-open ul { padding: 0.75rem 0 0.25rem; }
  .site-nav li { border-bottom: 1px solid var(--rule); }
  .site-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 0;
    font-size: 0.875rem;
  }
}

/* --- 6. Typography -------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1875rem, 0.7vw + 1.05rem, 1.4375rem);
  line-height: 1.6;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.on-dark .eyebrow { color: rgba(244, 240, 232, 0.72); }
/* An eyebrow is sometimes a real heading, so it has to shrug off the
   headline styles while still looking like an eyebrow. */
h2.eyebrow, h3.eyebrow { line-height: inherit; font-variation-settings: normal; }

/* Present for screen readers, invisible on the page. Used for the note on
   links that open in a new tab. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.quiet { color: var(--ink-soft); }
.script-note { font-family: var(--script); font-size: 1.35rem; color: var(--mulberry); }

/* --- 7. Buttons and links ------------------------------------- */

a { color: var(--mulberry); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-orange { background: var(--orange); border-color: var(--orange); color: var(--charcoal); }
.btn-orange:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

.btn-mulberry { background: var(--mulberry); border-color: var(--mulberry); color: var(--linen); }
.btn-mulberry:hover { background: var(--mulberry-deep); border-color: var(--mulberry-deep); }

.btn-outline { border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline:hover { background: var(--charcoal); color: var(--linen); }

.btn-light { background: var(--linen); border-color: var(--linen); color: var(--charcoal); }
.btn-light:hover { background: var(--orange); border-color: var(--orange); }

/* Handwritten link with a small drawn arrow. */
.hand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--script);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mulberry);
  text-decoration: none;
  line-height: 1;
}
.hand-link svg { width: 30px; height: 12px; overflow: visible; transition: transform 0.2s ease; }
.hand-link:hover { color: var(--orange-deep); }
.hand-link:hover svg { transform: translateX(5px); }
.on-dark .hand-link { color: var(--linen); }
.on-dark .hand-link:hover { color: var(--orange); }

/* --- 8. Playful marks ----------------------------------------- */

/* The thread: a thin drawn line that runs off the edge of the page
   and picks up again further down. */
.thread {
  position: relative;
  height: clamp(48px, 7vw, 86px);
  overflow: hidden;
  pointer-events: none;
}
.thread svg {
  position: absolute;
  top: 0;
  left: -8%;
  width: 124%;
  height: 100%;
}
.thread-flip svg { transform: scaleX(-1); }

/* The stitch. A third drawn line, and deliberately not the thread: where
   the thread is one continuous, irregular movement, this is broken and
   even — a mending stitch rather than a life. It is used once, at the
   point where the page turns from thinking to offering. */
.stitch {
  position: relative;
  height: clamp(34px, 4.5vw, 54px);
  overflow: hidden;
  pointer-events: none;
}
.stitch svg {
  position: absolute;
  top: 0;
  left: -8%;
  width: 124%;
  height: 100%;
}

/* The rotating stamp. */
.stamp { width: clamp(104px, 12vw, 136px); height: clamp(104px, 12vw, 136px); flex: none; }
.stamp svg { width: 100%; height: 100%; animation: stamp-spin 26s linear infinite; }
.stamp text {
  font-family: var(--sans);
  font-size: 10.2px;
  font-weight: 600;
  letter-spacing: 0.235em;
  text-transform: uppercase;
  fill: var(--peach-deep);
}
@keyframes stamp-spin { to { transform: rotate(360deg); } }

/* The strip beside an image, like the spine of a book. Burgundy rather
   than orange, because it sits on the peach stripes behind Never Let Go
   and orange next to peach disappears. */
.spine { display: flex; align-items: stretch; }
.spine-strip {
  width: clamp(14px, 2vw, 22px);
  background: var(--wine);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  flex: none;
}
.spine-body { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow: hidden; }

/* Key words picked out in colour, or with a highlighter swipe. */
.pick { color: var(--mulberry); }
.on-dark .pick { color: var(--orange); }
.swipe {
  background-image: linear-gradient(
    transparent 14%,
    rgba(242, 140, 40, 0.45) 14%,
    rgba(242, 140, 40, 0.45) 92%,
    transparent 92%
  );
  padding: 0 0.1em;
}
.swipe-peach {
  background-image: linear-gradient(
    transparent 14%,
    rgba(240, 179, 147, 0.85) 14%,
    rgba(240, 179, 147, 0.85) 92%,
    transparent 92%
  );
}

/* The striped backdrop. Drawn as one repeating tile, --stripe wide, so
   its position can be lined up exactly with the card that sits on top.
   --stripe-colour swaps the band colour without touching the maths. */
.stripes {
  --stripe: 5rem;
  background-image: linear-gradient(
    90deg,
    var(--stripe-colour, var(--khaki)) 0 50%,
    var(--linen) 50% 100%
  );
  background-size: var(--stripe) 100%;
  background-repeat: repeat;
}
@media (max-width: 48.99rem) {
  /* Narrower bands on a phone, so the pattern still reads as stripes. */
  .stripes { --stripe: 3rem; }
}

/* Grid children must be allowed to shrink, or a wide image can push
   the whole page sideways on a phone. */
.hero-grid > *,
.intro-grid > *,
.area-inner > *,
.book-inner > *,
.contact-inner > * { min-width: 0; }

/* --- 9. Placeholders ------------------------------------------ */
/* Anything still waiting on Suzanne's words is tinted so it is easy
   to spot. Remove the class when the real words go in. */

.placeholder {
  background: rgba(242, 140, 40, 0.13);
  box-shadow: 0 0 0 0.25rem rgba(242, 140, 40, 0.13);
  border-radius: 3px;
}
.on-dark .placeholder,
.announce .placeholder {
  background: rgba(244, 240, 232, 0.16);
  box-shadow: 0 0 0 0.25rem rgba(244, 240, 232, 0.16);
}

/* A block of draft writing waiting on Suzanne's words: a small note,
   then the draft itself marked with a line down the side. */
.ph {
  border-left: 3px solid rgba(242, 140, 40, 0.55);
  padding-left: clamp(0.9rem, 2vw, 1.35rem);
}
.on-dark .ph { border-left-color: var(--orange); }

.ph-note {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #8a4a00;
  background: rgba(242, 140, 40, 0.16);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  margin: 0 0 0.7rem;
}
.on-dark .ph-note { color: var(--linen); background: rgba(244, 240, 232, 0.2); }
.announce .ph-note {
  margin: 0;
  color: var(--linen);
  background: rgba(244, 240, 232, 0.14);
  font-weight: 500;
}

/* A labelled frame standing in for a photograph. */
.ph-img {
  background: var(--plaster);
  border: 2px dashed rgba(34, 34, 34, 0.22);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--script);
  font-size: 1.25rem;
  line-height: 1.35;
}
.ph-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.block-plaster .ph-img {
  background: rgba(255, 253, 250, 0.6);
  border-color: rgba(34, 34, 34, 0.25);
}
.block-khaki .ph-img,
.block-mulberry .ph-img {
  background: rgba(244, 240, 232, 0.14);
  border-color: rgba(244, 240, 232, 0.45);
  color: var(--linen);
}
.block-peach .ph-img {
  background: rgba(255, 253, 250, 0.5);
  border-color: rgba(34, 34, 34, 0.25);
}
.block-peach .eyebrow { color: rgba(34, 34, 34, 0.62); }
.block-peach .ph-note { background: rgba(255, 253, 250, 0.72); color: #7a3a10; }
.block-peach .ph { border-left-color: var(--mulberry); }
.block-peach .facts li::before { background: var(--mulberry); }

/* --- 10. Hero ------------------------------------------------- */

.hero { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }

.hero-grid { display: grid; gap: 0; }

.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin: 0;
}
.hero-media .ph-img { aspect-ratio: 4 / 3; border-radius: var(--radius); min-height: 220px; }

/* The photograph fills its frame and is cropped, rather than squashed.
   object-position decides which part of the picture survives the crop:
   on a phone Suzanne sits centred, on a laptop she is pushed right so
   the text card never covers her face. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

.hero-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 24px 60px -30px rgba(34, 34, 34, 0.45);
}

.hero-card h1 {
  font-size: clamp(1.55rem, 2.72vw, 2.3rem);
  line-height: 1.06;
  margin-bottom: 0.8rem;
}
.hero-card .btn { margin-top: 0.6rem; }

@media (max-width: 55.99rem) {
  .hero-card { margin: -3rem 0.75rem 0; position: relative; z-index: 2; }
}

/* The name is said once, in the header. The card over the photograph holds
   a tagline in small type instead, with room for a sentence rather than
   three words, so the line can grow without the box having to change. */
.hero-card-name {
  text-align: center;
  min-width: min(100%, 16rem);
  max-width: min(100%, 26rem);
  padding: clamp(0.9rem, 1.8vw, 1.2rem) clamp(1.1rem, 2.4vw, 1.6rem);
}
.hero-card .hero-tagline {
  font-family: var(--mark);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.004em;
  text-transform: none;
  color: var(--ink-soft);
  margin: 0;
}

/* The second half of the pill line. It runs on as part of the sentence on a
   laptop, and drops to its own line on a phone, where the whole thing would
   otherwise break in an awkward place. The break point is the vertical bar in
   heroTagline in _data/site.json. */
.pill-line { display: inline; }
@media (max-width: 30rem) {
  .pill-line { display: block; }
}

/* One column, the same width all the way down the top of the page, so the
   photograph, the name and the writing share a left edge. */
.column { max-width: 40rem; margin-inline: auto; }

/* The photograph and the name card stack, with the card pulled up over the
   foot of the picture, at every screen size. The card used to sit beside the
   picture on a laptop, which left the top of the page leaning left while the
   writing underneath sat centred. */
.hero-stacked .hero-media { aspect-ratio: 4 / 3; }
.hero-stacked .hero-card {
  margin: -3.25rem 0 0;
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
}

/* The box over the photograph and the writing below it are one thought,
   so the gap between them is tighter than the gap between two separate
   sections. */
.hero-stacked { padding-bottom: clamp(0.5rem, 1.2vw, 1rem); }
.hero + .section-tight { padding-top: clamp(0.75rem, 1.6vw, 1.25rem); }
.intro-words .lede { margin-bottom: 1.1rem; }

@media (min-width: 56rem) {
  .hero-grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .hero-media { grid-column: 5 / -1; grid-row: 1; aspect-ratio: auto; height: 34rem; }
  .hero-media .ph-img { aspect-ratio: auto; height: 100%; min-height: 0; }
  .hero-media img { object-position: 22% 22%; }
  .hero-card { grid-column: 1 / 7; grid-row: 1; z-index: 2; }

  .hero-stacked .hero-grid { grid-template-columns: 1fr; align-items: stretch; }
  .hero-stacked .hero-media { grid-column: 1; grid-row: 1; height: auto; aspect-ratio: 4 / 3; }
  .hero-stacked .hero-card { grid-column: 1; grid-row: 2; }
}

/* --- 11. Scrolling word band ---------------------------------- */

.marquee {
  background: var(--plaster);
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  border-block: 1px solid rgba(34, 34, 34, 0.08);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex: none;
  padding-right: 0;
}

.marquee-item {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  color: var(--khaki-text);
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  white-space: nowrap;
}
.marquee-dot { color: var(--orange); font-size: clamp(1rem, 2vw, 1.4rem); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* --- 12. Introduction ----------------------------------------- */

.intro-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

@media (min-width: 52rem) {
  .intro-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}

.intro-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* --- 13. The four areas --------------------------------------- */

.areas { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

.area-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .area-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Image on the right by default, on the left for alternate rows,
     so the page turns like a book as you scroll. */
  .area-flip .area-text { grid-column: 2; grid-row: 1; }
  .area-flip .area-media { grid-column: 1; grid-row: 1; }
}

.area-media .ph-img { aspect-ratio: 4 / 3; }
.area-text h3 { margin-bottom: 0.75rem; }
.area-text .hand-link { margin-top: 0.4rem; }
.area-course {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.on-dark .area-course { border-top-color: rgba(244, 240, 232, 0.28); }

/* --- 14. The book --------------------------------------------- */

/* The striped band runs the full width of the screen, with the linen
   card sitting on top of it, so the stripes read as a backdrop rather
   than a border.

   The card is sized to a whole number of stripes and a half — 8.5 or
   12.5 — and the pattern is nudged sideways to match, so a khaki band
   finishes exactly where the card starts and another begins exactly
   where it ends. No stripe is ever left half-covered. On a phone the
   card runs edge to edge instead, so there are no side stripes to cut.
   If you change the card width, keep it to a multiple of 5rem plus
   2.5rem, or the alignment will drift. */
.stripes-peach { --stripe-colour: var(--peach); }
.stripes-mulberry { --stripe-colour: var(--mulberry); }

/* Any full-width striped band. The card on top is sized to a whole
   number of stripes and a half, and the pattern is nudged sideways to
   match, so a band finishes exactly where the card starts. */
.stripe-band { padding-block: clamp(2.75rem, 7vw, 5rem); }
.stripe-band.stripes { background-position-x: calc(50% - (var(--stripe) / 4)); }

@media (max-width: 48.99rem) {
  .stripe-band > .wrap { padding-inline: 0; }
  .band-card { border-radius: 0; }
}
@media (min-width: 49rem) { .band-card { width: 42.5rem; } }   /* 8.5 stripes */
@media (min-width: 69rem) { .band-card { width: 62.5rem; } }   /* 12.5 stripes */

.band-card {
  background: var(--linen);
  border-radius: var(--radius);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.band-card.block-plaster { background: var(--plaster); }

.book-band { padding-block: clamp(2.75rem, 7vw, 5rem); }
.book-band.stripes { background-position-x: calc(50% - (var(--stripe) / 4)); }

@media (max-width: 48.99rem) {
  .book-band > .wrap { padding-inline: 0; }
  .book-inner { border-radius: 0; }
}
@media (min-width: 49rem) {
  .book-inner { width: 42.5rem; }   /* 8.5 stripes */
}
@media (min-width: 69rem) {
  .book-inner { width: 62.5rem; }   /* 12.5 stripes */
}

.book-inner {
  background: var(--linen);
  border-radius: var(--radius);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .book-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.book-cover { max-width: 22rem; }
.book-cover .ph-img { aspect-ratio: 2 / 3; border-radius: 0; height: 100%; }

/* The book photograph, with the orange spine strip down its left edge. */
.book-photo { width: 100%; }
.book-photo .spine-body { aspect-ratio: 5 / 4; }
.book-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 34%;
}

/* --- 15. Newsletter ------------------------------------------- */

.closing {
  border-radius: var(--radius);
  overflow: hidden;
}
.closing .block { border-radius: 0; }

.newsletter-inner { max-width: 44rem; }

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.signup-form label {
  flex-basis: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(244, 240, 232, 0.85);
}

.signup-form input[type="email"] {
  flex: 1 1 17rem;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.95rem 1.4rem;
  color: var(--charcoal);
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 999px;
  min-width: 0;
}
.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--orange);
}

.form-note {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  color: rgba(244, 240, 232, 0.8);
}
.form-note a { color: var(--linen); text-decoration-color: var(--orange); }

/* --- 16. Contact ---------------------------------------------- */

.contact-inner { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 52rem) {
  .contact-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .contact-actions { justify-self: end; text-align: right; }
}

/* The footer sits directly under the closing card, so it needs less
   space above it than a normal section would. */
/* The footer sits closer to the last block than a full section gap, so the
   page ends rather than trailing off. */
.closing + .site-footer,
.site-footer { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* --- 17. Footer ----------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
@media (min-width: 46rem) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-logo { margin: 0 0 0.35rem; line-height: 1; }
.footer-logo .wordmark-name { font-size: 1.5rem; }
.footer-tagline { color: var(--ink-soft); margin: 0; }

.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-nav a, .footer-contact a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--mulberry); }
.footer-contact p { margin: 0 0 0.5rem; }

/* The other places the book can be found. Quiet, under the main button,
   so it reads as helpful rather than as four more things to click. */
.book-elsewhere {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The privacy page: headings and paragraphs, nothing clever. */
.legal h2 {
  font-size: clamp(1.15rem, 1.1vw + 0.95rem, 1.4rem);
  margin: 2.25rem 0 0.6rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 0.9rem; }

.footer-social { margin-top: 0.15rem; }
.footer-social span { color: var(--ink-faint); }

.footer-fine { color: var(--ink-soft); font-size: 0.8125rem; margin: 0; }

/* --- Anchored sections ---------------------------------------- */
/* When a menu link jumps to a section, leave a little air above it. */
[id] { scroll-margin-top: 2rem; }

/* --- Gentler for anyone who prefers less movement ------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; }
  .marquee-group:last-child { display: none; }
  .marquee-group .marquee-item:last-child { display: none; }
}

/* Small spacing details */
.intro-credit { margin-top: 1.5rem; }
.book-imprint { margin-bottom: 1.5rem; }
.hero-card .ph { margin-bottom: 1.5rem; }
.area-text .ph { margin-bottom: 1.25rem; }
.newsletter-inner .ph { margin-bottom: 0.5rem; }

/* ===============================================================
   Style guide page (/style-guide/). Reference only — nothing here
   affects the rest of the site.
   =============================================================== */

.sg-swatches {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-bottom: 2rem;
}
.sg-swatch span {
  display: block;
  height: 5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-bottom: 0.6rem;
}
.sg-swatch b { display: block; font-size: 0.95rem; }
.sg-swatch code { font-size: 0.8125rem; color: var(--ink-soft); }
.sg-swatch em { display: block; font-size: 0.8125rem; color: var(--ink-faint); font-style: normal; }

.sg-note {
  background: var(--card);
  border-left: 3px solid var(--peach);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.25rem 1.5rem;
  max-width: 46rem;
}
.sg-note p { font-size: 0.9375rem; }

.sg-type { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .sg-type { grid-template-columns: repeat(3, 1fr); } }
.sg-specimen {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin: 0;
}
.sg-specimen-small { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

.sg-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.sg-marks { display: grid; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 46rem) { .sg-marks { grid-template-columns: repeat(2, 1fr); } }
.sg-mark figcaption {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: 0.75rem;
}
.sg-mark-center { display: flex; flex-direction: column; align-items: flex-start; }
.sg-spine { height: 9rem; }
.sg-spine .ph-img { height: 100%; }
.sg-stripes { height: 7rem; border-radius: var(--radius-sm); }

/* ===============================================================
   Inner pages (Writing, Speaking, Courses, Mentoring, About,
   Contact). They use the same blocks as the homepage; this is just
   the heading area at the top of each one.
   =============================================================== */

.page-head { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); margin-bottom: 1.25rem; }
.page-head .lede { max-width: 34rem; }
.page-head .wordmark-thread { height: 18px; max-width: 16rem; margin: 1.75rem 0 0; }

/* A simple stack of cards — course listings, speaking topics. */
.cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 46rem) { .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 0.75rem; }
.card .btn { margin-top: 1.25rem; }
.block-plaster .card,
.block-peach .card { background: rgba(255, 253, 250, 0.72); border-color: rgba(34, 34, 34, 0.12); }

/* A short list of facts — how mentoring works, what to send. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.facts li { padding-left: 1.6rem; position: relative; }
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.on-dark .facts li::before { background: var(--linen); }

/* The 404 page. */
.lost { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.lost .wordmark-thread { max-width: 18rem; margin: 2rem auto; height: 20px; }
.lost .btn { margin-top: 0.5rem; }

/* Two buttons side by side in the hero. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }

/* The hero lede sits a little tighter than the leads elsewhere, because the
   headline above it is a long question and both buttons must stay in view. */
.hero-card .lede { font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.2rem); line-height: 1.55; }

/* "What I noticed" — longer lines than a normal list, so they breathe. */
.noticed li { font-size: 1.0625em; line-height: 1.6; }
.noticed li + li { margin-top: 0.35rem; }

/* The short course list inside the Courses block. */
.short-courses { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(34, 34, 34, 0.15); }
.short-courses h4 { margin-bottom: 0.4rem; }
.short-courses .facts { margin-top: 0.9rem; }

/* The turn in the argument. One line on the homepage gets this, and only
   one: "There is no roadmap for adversity". It uses type already in the
   system, set larger and given room, rather than any new device. */
.chain-turn {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
  margin-block: clamp(2.25rem, 5vw, 3.5rem) 1.25rem;
}

/* Each link in the chain. The lead phrase carries the weight. */
.chain p { max-width: var(--measure); }
.chain p + p { margin-top: 1.35rem; }
.chain .lead-in { font-weight: 700; }


/* A reading column centred inside a colour block. Without this, a text-only
   block leaves half of itself empty and reads as unfinished rather than
   spacious. Blocks whose column sits above full-width cards keep the column
   on the left, so the two line up. */
.measure-centre { margin-inline: auto; }

/* A placeholder note and its draft sit as one unit, with air after it. */
.measure > .ph,
.band-card .ph { margin-bottom: 1.35rem; }


/* The subject, set as a reading column with a small image beside it. The
   picture sits on the left on a laptop, so the eye meets it before the
   argument. On a phone the heading still comes first, because a placeholder
   frame above the title reads as a missing image rather than a design. */
.subject-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.subject-grid > * { min-width: 0; }
@media (min-width: 56rem) {
  .subject-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
  .subject-grid > :first-child { grid-column: 2; grid-row: 1; }
  .subject-media { grid-column: 1; grid-row: 1; }
}
.subject-media { margin: 0; max-width: 20rem; }
.subject-media .ph-img { aspect-ratio: 4 / 5; }

/* A wide card of running text, set in two columns below a hairline, so a
   long passage reads like a page rather than a paragraph that will not end.
   One column on a phone, where two would be four words wide. */
.card-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.card-columns > :first-child { margin-top: 0; }
@media (min-width: 56rem) {
  .card-columns { column-count: 2; column-gap: clamp(2.25rem, 4vw, 3.5rem); }
  /* Paragraphs flow between the columns so the two sides end level. Only the
     placeholder block is kept whole, because a note split down the middle
     reads as a fault rather than a note. */
  .card-columns > .ph { break-inside: avoid; }
}

/* The chain, broken into numbered parts so five long passages do not
   read as one wall of text. */
.chain-part { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.chain-part + .chain-part { border-top: 1px solid var(--rule); }
/* The summary version on the homepage, where each part is one sentence
   rather than three. Tighter, because the full argument lives at /ideas/. */
.chain-short .chain-part { padding-block: clamp(1.1rem, 2.2vw, 1.6rem); }
.chain-short .chain-part h3 { margin-bottom: 0.5rem; }
.chain-num {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.chain-part h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 0.75rem; }
.chain-part p { margin-bottom: 1rem; }
.chain-part p:last-child { margin-bottom: 0; }

/* Part two gets the weight of the page. */
.chain-part-turn h3 {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  max-width: 20ch;
  margin-bottom: 1rem;
}