/* ==========================================================================
   Belinda Bolliger — design tokens
   Source of truth for the Framer build. Every value here maps to a Framer
   colour style, text style or spacing token.
   ========================================================================== */

:root {
  /* --- Colour: neutrals ---------------------------------------------------
     Re-cut around the orange accent. The template's originals were warm on
     paper but measured green — cream at hue 40, muted at 53, ink at 60 — and
     a green-cast neutral behind a 27deg orange reads as a mistake rather than
     a contrast. Every neutral here is pulled onto the accent's own side of
     the wheel, hue 18-38, so the page looks lit by the orange rather than
     merely containing it. Every warm token sits on the accent's own hue,
     29.5deg, so a change of accent is a single rotation of the whole ramp
     rather than a re-pick; sun and coral hold a deliberate offset either side
     of it, and sky and leaf stay off the warm axis on purpose.
     Lighter as well as warmer: paper / cream / shell step 98 / 94 / 90 in
     lightness against the originals' 99 / 93 / 87. The chroma is deliberately
     restrained — a first pass at hue 34 and 88% saturation read as orange
     juice rather than as paper, so the ramp was pulled back to 67% and up a
     step in lightness. Warm enough to belong to the accent, pale enough to
     disappear behind the type.
     -------------------------------------------------------------------- */
  --paper:  #FFFBF7;   /* lightest ground, alternating sections */
  --cream:  #FAF0E6;   /* default page ground */
  --shell:  #F5E6D8;   /* card fills, book-card footers */
  --rule:   #DEC5AD;   /* hairlines, borders */
  --muted:  #6F6255;   /* body copy, metadata — 5.3:1 on cream */
  --ink:    #241C15;   /* headlines, primary text — 14.9:1 on cream */

  /* --- Colour: emphasis --------------------------------------------------
     One emphasis colour: eyebrows, primary buttons, link marks. Kept
     site-wide rather than spent on one page.

     Two values, because one orange cannot do both jobs on a light ground.
     --accent is the brand colour as specified. Against cream it measures
     2.32:1 — fine behind a button or under a 2px rule, where only shape has
     to read, and short of the 4.5:1 that WCAG AA asks of body-sized text.
     --accent-deep is the same hue (29.5deg) darkened until it clears that bar
     on every light ground — 5.10:1 on cream, 4.70:1 on the shell used for
     card fills — and it is what the accent-coloured *words* are set in.
     Rule of thumb: --accent for fills and marks, --accent-deep for anything
     that has to be read.
     -------------------------------------------------------------------- */
  --accent:      #FE7D00;
  --accent-deep: #A35000;

  /* --- Colour: section grounds -------------------------------------------
     The real structural device is not the accent — it is the full-bleed
     coloured section that breaks the run of neutrals. Each page gets one.

     These were muted naturals: olive, slate and forest, three low-saturation
     tones that sat quietly under an oxblood accent and went muddy under an
     orange one. They are now four saturated mid-tones plus one dark anchor.
     Saturated, but not dark: lightness 69-83%, so all four take ink text and
     the page reads as sunlit rather than as a run of dark blocks.

     Sun is the palest of the four on purpose. On Home it lands directly under
     the rust memoir teaser, and at the 75% lightness and 89% saturation it
     started at, the two warms — only 11deg apart in hue — read as two
     statement colours slammed together rather than as a dark block resolving
     into a light one. Pulled to 83% it sits 7.4:1 off the rust, which is the
     step the ground it replaced made against the brown it replaced.

     Three of the four sit within 55deg of the accent — gold at 39, coral at
     17, and rust at 27 — so they read as the same light at different times
     of day. Sky at 198 is the one cool tone, opposite the accent, and it is
     what stops a page of warm tints going monotone; leaf at 80 bridges the
     two. Espresso is the single dark block the composition needs to sit on.
     It is deliberately NOT the accent darkened — that was tried, and a fully
     saturated orange at 22% lightness stops being orange and reads as mud,
     with nothing cool anywhere on the page to measure the gold band against.
     A warm brown-black steps back instead and lets the accent carry all the
     colour, which is the job a dark block on this site actually has.
     -------------------------------------------------------------------- */
  --sun:    #F8DDAF;   /* Home            — takes ink text, 12.7:1 */
  --coral:  #F5BAA2;   /* About           — takes ink text,  9.9:1 */
  --sky:    #8FC4DA;   /* Editorial       — takes ink text,  8.8:1 */
  --leaf:   #BAD28C;   /* Representation  — takes ink text, 10.1:1 */
  --espresso: #2E1B10; /* Memoir          — takes paper text, 15.9:1 */

  /* Set per page on <body data-ground>. */
  --ground: var(--sun);
  --on-ground: var(--ink);

  /* --- Type -------------------------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid scale. Ratio ~1.33 at desktop, compressing on small screens so
     display type stays large without overflowing. */
  --t-meta:    clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --t-body:    clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --t-lead:    clamp(1.19rem, 1.09rem + 0.48vw, 1.50rem);
  --t-h3:      clamp(1.44rem, 1.27rem + 0.85vw, 2.00rem);
  --t-h2:      clamp(1.90rem, 1.45rem + 2.20vw, 3.10rem);
  --t-display: clamp(2.60rem, 1.60rem + 4.80vw, 5.60rem);

  /* Fraunces variable axes. SOFT rounds the terminals, WONK swaps in the
     wonky single-storey g and cursive-ish forms. Both dialled up slightly:
     this is the mechanism for "friendly rather than formal". */
  --wonk-display: "opsz" 144, "SOFT" 60, "WONK" 1;
  --wonk-text:    "opsz" 24,  "SOFT" 40, "WONK" 0;

  /* --- Space ------------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(5rem, 3rem + 9vw, 9rem);   /* section rhythm */
  --s-8: clamp(3rem, 13.4vw, 12rem);      /* heading -> shelf */

  --measure: 62ch;        /* body line length, under 80 per type convention */
  --page-max: 1180px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 320ms;
}

/* Page ground switching — one attribute here, one variant in Framer. */
body[data-ground="coral"]  { --ground: var(--coral); --on-ground: var(--ink); }
body[data-ground="sky"]    { --ground: var(--sky);   --on-ground: var(--ink); }
body[data-ground="leaf"]   { --ground: var(--leaf);  --on-ground: var(--ink); }
body[data-ground="espresso"]   { --ground: var(--espresso);  --on-ground: var(--paper); }

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: var(--wonk-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3);
  font-variation-settings: var(--wonk-text);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

img, svg { max-width: 100%; }

p { margin: 0 0 var(--s-2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

.meta {
  font-size: var(--t-meta);
  color: var(--muted);
  line-height: 1.4;
}

/* Eyebrow: sentence case, not tracked-out caps. It earns its place only when
   it names something the heading does not. */
.eyebrow {
  font-size: var(--t-meta);
  color: var(--muted);
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 2px;
  background: var(--accent);
  flex: none;
}

a { color: inherit; }

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

/* ==========================================================================
   Layout
   ========================================================================== */

.page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
/* Every section owns its full padding. An earlier rule zeroed the top padding
   on consecutive sections — correct when they all shared the cream ground,
   wrong once each section carries its own background colour. */
.section { padding-block: var(--s-7); }
.section--tinted { background: var(--paper); }

/* Full-bleed coloured section — the template's core structural move. */
.section--ground {
  background: var(--ground);
  color: var(--on-ground);
}
.section--ground .lead,
.section--ground .meta,
.section--ground .eyebrow { color: inherit; opacity: 0.82; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

/* Fixed 48px box with a 14px label. Height is set rather than derived from
   padding so every button on the site is the same size whatever its ground or
   type scale, and inline-flex centres the label in it. Horizontal padding is
   in px for the same reason — an em value would drift with the label size. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); }

/* White label, by explicit request. Note the measurement: paper on #FE7D00 is
   2.52:1, well under the 4.5:1 WCAG AA asks of a button label, and under the
   3:1 floor for large text too — this orange is light enough that nothing
   white sits comfortably on it. Ink on the same fill is 6.60:1.
   Two ways back to compliance if it is ever wanted: keep the white label and
   drop the fill to --accent-deep (#A35000, 5.54:1 with paper), or keep the
   bright fill and take the ink label. */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Text link: the underline is the accent, thickening on hover. No arrow. */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease);
}
.link:hover { background-size: 100% 8px; }

/* ==========================================================================
   The shelf — book grid
   --------------------------------------------------------------------------
   Covers keep their true proportions and sit on a shared baseline, the way
   books do on a shelf. Picture books are wide, junior fiction is tall; a
   uniform card grid would flatten that difference.
   Framer equivalent: CMS grid, image fit = "fit", stack align = bottom.
   ========================================================================== */

.shelf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* stepped up in the media queries below */
  gap: var(--s-3) var(--s-3);
  align-items: end;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}

/* Each card occupies three shared rows — cover, title, credit — so covers all
   sit on one baseline and every title starts on the same line, regardless of
   how many lines the title or credit runs to. Without this, `align-items:end`
   aligns the bottom of the *card*, and a three-line credit shoves its cover
   upward. */
@supports (grid-template-rows: subgrid) {
  /* Two shared rows: cover, then the text block. The cover hangs from the
     bottom of row 1 so every cover shares a baseline, and the text block
     starts at the top of row 2 so every title begins on the same line.
     Title and credit live inside one wrapper, so the credit sits directly
     under its own title instead of being forced onto a shared line — which
     left a hole beneath every single-line title. */
  .shelf { grid-template-rows: auto auto; }
  .shelf .book {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .shelf .book__cover { align-self: end; }
  .shelf .book__text  { align-self: start; }
  /* The row gap alone now sets the cover-to-title distance. */
  .shelf .book__title { margin-top: 0; }
}

.sec-head + .shelf { margin-top: var(--s-8); }

.book { display: block; text-decoration: none; }

.book__cover {
  display: block;
  width: 100%;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule), 0 12px 24px -18px rgba(37, 36, 33, 0.5);
  transition: transform var(--dur) var(--ease);
}
.book:hover .book__cover { transform: translateY(-2px); }

.book__title {
  font-family: var(--display);
  font-variation-settings: var(--wonk-text);
  font-size: var(--t-body);
  line-height: 1.25;
  margin: var(--s-2) 0 0.15em;
}
.book__meta { font-size: var(--t-meta); color: var(--muted); }

/* ==========================================================================
   Author card
   ========================================================================== */

.authors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-5) var(--s-4);
}

.author__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--rule);
  /* Arch — a reading-nook window rather than a blob or a rounded rectangle. */
  border-radius: 50% 50% 4px 4px / 32% 32% 4px 4px;
  object-fit: cover;
}

.author__name {
  font-family: var(--display);
  font-variation-settings: var(--wonk-text);
  font-size: var(--t-h3);
  margin: var(--s-3) 0 0.2em;
}
.author__note {
  font-size: var(--t-meta);
  color: var(--muted);
  margin: 0 0 var(--s-2);
}
.author__bio { font-size: var(--t-body); color: var(--muted); max-width: 34ch; }

/* ==========================================================================
   Quote
   ========================================================================== */

/* The quote is a held beat between the closing block and the footer, so it
   is given section rhythm rather than the tighter block spacing it had. */
.quote { text-align: center; padding-block: var(--s-7); }
.quote blockquote {
  font-family: var(--display);
  font-variation-settings: var(--wonk-display);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
.quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--body);
  font-size: var(--t-meta);
  font-style: normal;
  color: var(--muted);
}

/* ==========================================================================
   Placeholder — content the client has not supplied yet.
   Must stay conspicuous. Nothing invented ships as if it were real.
   ========================================================================== */

.placeholder {
  border: 1.5px dashed #CFB194;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 9px,
    rgba(201, 168, 126, 0.15) 9px, rgba(201, 168, 126, 0.15) 18px);
  color: #6F6255;
  padding: var(--s-3);
  font-size: var(--t-meta);
  line-height: 1.5;
}
.placeholder__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.35em;
}

/* ==========================================================================
   Motion — one orchestrated hero load, plus the shelf. Nothing else.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rise { animation: rise 620ms var(--ease) both; }
.rise:nth-child(2) { animation-delay: 90ms; }
.rise:nth-child(3) { animation-delay: 180ms; }
.rise:nth-child(4) { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Empty portrait — an unfilled arch must still read as a gap, not a design. */
.author__portrait--empty {
  border: 1.5px dashed #CFB194;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 9px,
    rgba(201, 168, 126, 0.15) 9px, rgba(201, 168, 126, 0.15) 18px);
  display: grid;
  place-items: center;
  padding: var(--s-2);
  color: #6F6255;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* On a coloured ground the eyebrow rule takes the text colour — the accent on
   coral or rust is close to invisible. */
.section--ground .eyebrow::before,
[data-on-ground] .eyebrow::before { background: currentColor; opacity: 0.6; }

/* ==========================================================================
   Ground utilities — a section wears one colour. Framer equivalent: set the
   section's background fill and its text colour override.
   ========================================================================== */
.g-cream  { background: var(--cream); color: var(--ink); }
/* Half a step deeper than cream. Quiet enough to sit under a pull quote,
   distinct enough to break two cream sections apart and to give the dark
   footer something to land against. */
.g-shell  { background: var(--shell); color: var(--ink); }
.g-paper  { background: var(--paper); color: var(--ink); }
.g-sun    { background: var(--sun);   color: var(--ink); }
.g-coral  { background: var(--coral); color: var(--ink); }
.g-sky    { background: var(--sky);   color: var(--ink); }
.g-leaf   { background: var(--leaf);  color: var(--ink); }
.g-espresso   { background: var(--espresso);  color: var(--paper); }

/* Supporting text on a coloured ground steps down from that ground's own text
   colour instead of reaching for --muted. --muted is mixed against the cream
   neutrals; on a saturated ground it is both muddy and too weak — 3.1:1 on
   sky, under the 4.5:1 it needs. Inheriting at 0.78 keeps the hue of the
   ground in the type and still measures 5.6:1 at the worst case.
   This used to apply only to the three dark grounds. Every coloured ground
   needs it now that four of the five are light. */
.g-sun .meta,   .g-coral .meta, .g-sky .meta, .g-leaf .meta, .g-espresso .meta,
.g-sun .lead,   .g-coral .lead, .g-sky .lead, .g-leaf .lead, .g-espresso .lead,
.g-sun .eyebrow,.g-coral .eyebrow,.g-sky .eyebrow,.g-leaf .eyebrow,.g-espresso .eyebrow {
  color: inherit; opacity: 0.78;
}
.g-sun .eyebrow::before,  .g-coral .eyebrow::before, .g-sky .eyebrow::before,
.g-leaf .eyebrow::before, .g-espresso .eyebrow::before { background: currentColor; opacity: 0.55; }

/* Buttons on a coloured ground.
   The outline button borrows the ground's text colour. The primary button
   cannot keep its accent fill here: orange on gold is 1.4:1 and the button
   stops being a shape. It inverts to ink instead, which is the strongest
   thing available on all four light grounds and reads as the same button. */
.g-sun .btn,  .g-coral .btn, .g-sky .btn,
.g-leaf .btn, .g-espresso .btn { border-color: currentColor; color: inherit; }
.g-sun .btn:hover,  .g-coral .btn:hover, .g-sky .btn:hover,
.g-leaf .btn:hover, .g-espresso .btn:hover {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
}
.g-sun .btn--primary,  .g-coral .btn--primary, .g-sky .btn--primary,
.g-leaf .btn--primary {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.g-espresso .btn--primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Shelf column count is explicit rather than auto-fill: five across at
   desktop is a deliberate composition, not whatever happens to fit. */
@media (min-width: 640px)  { .shelf { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .shelf { grid-template-columns: repeat(5, 1fr); } }