/* ==================================================================
   reneehetherington.com
   Single stylesheet. Vanilla CSS, no build step, no framework.

   Brand      PANTONE 199 C ≈ #D50032 — accent only: links, rules,
              small emphasis. Never a large fill.
   Type       Serif headings and pull quote, sans body (SPEC-001).
   Layout     Everything is centred. Two containers only:
              .wrap   — 1100px, full-width sections
              .prose  — 68ch, body copy
              Both margin-inline:auto with symmetric padding.
   ================================================================== */

/* ---- Tokens ---------------------------------------------------- */
:root{
  /* Colour — all pairs verified WCAG AA against --paper */
  --accent:#D50032;          /* 5.29:1 on paper */
  --accent-dark:#a80028;     /* 7.60:1 */
  --ink:#16181a;             /* 17.36:1 */
  --ink-soft:#3d4247;        /*  9.90:1 */
  --muted:#5f666b;           /*  5.48:1 — darkened from #6b7176 (4.82) for margin */
  --line:#dcd8d1;
  --line-soft:#ebe8e2;
  --paper:#fdfcfa;
  --panel:#ffffff;
  --panel-tint:#f8f6f2;

  /* Type — modular scale, ratio 1.25, fluid between 20rem and 90rem */
  --f--2:clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --f--1:clamp(0.82rem, 0.79rem + 0.12vw, 0.90rem);
  --f-0 :clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --f-1 :clamp(1.16rem, 1.09rem + 0.34vw, 1.36rem);
  --f-2 :clamp(1.35rem, 1.22rem + 0.64vw, 1.70rem);
  --f-3 :clamp(1.57rem, 1.34rem + 1.10vw, 2.13rem);
  --f-4 :clamp(1.82rem, 1.44rem + 1.85vw, 2.66rem);
  --f-5 :clamp(2.12rem, 1.50rem + 3.00vw, 3.32rem);

  /* Spacing — 4px base, geometric */
  --s-1:0.25rem;  --s-2:0.5rem;   --s-3:0.75rem;  --s-4:1rem;
  --s-5:1.5rem;   --s-6:2rem;     --s-7:3rem;     --s-8:4rem;
  --s-9:6rem;

  /* Rhythm */
  --lh-body:1.65;
  --lh-tight:1.15;

  /* Containers */
  --wide:1100px;
  --measure:68ch;
  --pad:clamp(1.25rem, 5vw, 2.5rem);
  --section:clamp(2.75rem, 7vw, 5rem);

  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,
        "Nimbus Sans","DejaVu Sans",sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,
         "P052","Times New Roman","Nimbus Roman",Times,serif;
}

/* ---- Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--f-0)/var(--lh-body) var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:var(--lh-tight);
  letter-spacing:-0.012em;margin:0 0 var(--s-3);color:var(--ink);text-wrap:balance}
h1{font-size:var(--f-5)}
h2{font-size:var(--f-3)}
h3{font-size:var(--f-1)}
h4{font-size:var(--f-0)}

p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent-dark)}
strong,b{font-weight:700}
ul,ol{padding-left:1.2em;margin:0 0 var(--s-4)}
li{margin-bottom:var(--s-2)}
li:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}
blockquote{margin:0}

/* ---- Accessibility --------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:var(--s-3) var(--s-4);text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- Containers ------------------------------------------------
   THE FIX (D006 Part 2): every constrained block is centred.
   Previously .prose had max-width but no auto margin, so it sat
   flush-left inside the centred .wrap, leaving dead space at right. */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;
  padding-inline:var(--pad)}
.prose{max-width:var(--measure);margin-inline:auto}
.prose > * + *{margin-top:var(--s-4)}
main > section,
main > .wrap > section{padding-block:var(--section)}
section{margin:0}

/* ---- Sign-in / account, inline on the title row ---------------- */
/* Subordinate to the nav: small, muted, not a button */
.signin{font-size:var(--f--2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;font-weight:600;
  display:inline-block;padding:.35rem .15rem;white-space:nowrap}
.signin:hover{color:var(--accent);text-decoration:underline}

.account{position:relative}
.avatar{display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);color:#fff;border:0;cursor:pointer;padding:0;
  font:700 var(--f--2)/1 var(--sans);letter-spacing:.03em}
.avatar:hover{background:var(--accent-dark)}
.avatar:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.account.is-open .avatar{background:var(--accent-dark)}

.account-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:40;
  min-width:14rem;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;box-shadow:0 6px 20px rgba(0,0,0,.10);padding:.35rem 0}
.account-menu[hidden]{display:none}
.account-who{margin:0;padding:.5rem .9rem .6rem;border-bottom:1px solid var(--line-soft)}
.account-name{display:block;font-family:var(--serif);font-weight:600;
  font-size:var(--f--1);color:var(--ink);line-height:1.2}
.account-email{display:block;font-size:var(--f--2);color:var(--muted);
  word-break:break-all;margin-top:.1rem}
.account-menu a,
.account-menu button{display:block;width:100%;text-align:left;
  padding:.5rem .9rem;font:inherit;font-size:var(--f--1);
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.account-menu a:hover,.account-menu button:hover{background:var(--panel-tint);
  color:var(--accent)}
.account-menu a:focus-visible,.account-menu button:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;background:var(--panel-tint)}
.account-menu hr{margin:.35rem 0;border:0;border-top:1px solid var(--line-soft)}
.account-menu form{margin:0}

/* No JS? The menu is still reachable — the button falls back to a link target. */
@media(max-width:26rem){
  .account-menu{right:-.25rem;min-width:12.5rem}
}

/* ---- Header ---------------------------------------------------- */
.site-header{background:var(--panel);border-bottom:1px solid var(--line)}
/* Title and sign-in share row 1 so they centre against each other exactly;
   the tagline sits in row 2, directly beneath the title. Using grid rather
   than flex because flex would centre the account against the whole text
   block (title + tagline + rule), leaving it ~20px low. */
.lockup{display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:var(--s-5);
  padding-block:clamp(1.5rem,4vw,2.5rem) var(--s-5)}
.lockup .name{grid-column:1;grid-row:1;min-width:0;
  display:block;font-family:var(--serif);font-weight:600;
  font-size:var(--f-5);line-height:1.02;letter-spacing:-0.02em}
.lockup .name a{color:inherit;text-decoration:none}
.lockup .name a:hover{color:var(--accent)}
.lockup-account{grid-column:2;grid-row:1;justify-self:end;align-self:center;
  display:flex;align-items:center}
.lockup .tagline{grid-column:1;grid-row:2;display:block;margin-top:var(--s-2);
  font-size:var(--f--2);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.lockup .rule{grid-column:1;grid-row:3;width:2.75rem;height:2px;
  background:var(--accent);margin:var(--s-3) 0 0;border:0}

/* Too narrow for the title and the link to share a row: the account drops to
   its own line beneath the whole lockup, so the tagline stays directly under
   the title. It can never reach the nav, which is a separate block below. */
@media(max-width:30rem){
  .lockup{grid-template-columns:1fr;padding-bottom:var(--s-4)}
  .lockup-account{grid-column:1;grid-row:4;justify-self:start;
    margin-top:var(--s-4)}
}

.site-nav{border-top:1px solid var(--line-soft)}
.site-nav ul{display:flex;flex-wrap:wrap;justify-content:center;
  list-style:none;margin:0;padding:0;gap:0}
.site-nav li{margin:0}
.site-nav a{display:block;padding:var(--s-3) clamp(.55rem,2.4vw,1.15rem);
  font-size:var(--f--2);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);font-weight:700;
  border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- Home hero: the dominant element --------------------------- */
.hero{padding-block:clamp(2.5rem,8vw,5rem) clamp(2rem,5vw,3rem)}
.hero-inner{max-width:min(46rem, 100%);margin-inline:auto;text-align:center}
.hero p{font-family:var(--serif);font-size:var(--f-2);line-height:1.42;
  color:var(--ink);margin:0;text-wrap:pretty}
.hero strong{color:var(--accent);font-weight:600}

/* Pull quote as a designed element, not a stray blockquote */
.pullquote{max-width:44rem;margin:var(--s-7) auto;padding:var(--s-6) var(--s-5);
  text-align:center;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pullquote::before{content:"";position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);width:3.5rem;height:3px;background:var(--accent)}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:var(--f-2);
  line-height:1.4;color:var(--ink-soft);margin:0;text-wrap:balance}

/* ---- Common blocks --------------------------------------------- */
.eyebrow{font-size:var(--f--2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 var(--s-3)}
.lede{font-size:var(--f-1);line-height:1.5;color:var(--ink-soft);
  max-width:52ch;margin-inline:auto}
.section-head{max-width:var(--measure);margin-inline:auto;margin-bottom:var(--s-5);
  text-align:center}
.section-head h2{margin-bottom:var(--s-2)}
.section-head .rule{width:2.25rem;height:2px;background:var(--accent);
  border:0;margin:var(--s-4) auto 0}

/* ---- Buttons --------------------------------------------------- */
.btn{display:inline-block;padding:.7rem 1.4rem;background:var(--accent);color:#fff;
  text-decoration:none;font-size:var(--f--1);letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;border:1px solid var(--accent);cursor:pointer;border-radius:2px}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#fff}

/* ---- Books: cards, covers never stretched or cropped ----------- */
.book-list{display:grid;gap:var(--s-7);max-width:var(--wide);margin-inline:auto}
.book{display:grid;gap:var(--s-5);background:var(--panel);
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.25rem,4vw,2.5rem)}
@media(min-width:48rem){
  .book{grid-template-columns:minmax(10rem,14rem) 1fr;gap:var(--s-6);align-items:start}
}
.book-cover{margin:0}
.book-cover figure{margin:0}
/* object-fit:contain — never distort or crop a book jacket */
.book-cover img{width:100%;height:auto;object-fit:contain;
  border:1px solid var(--line-soft);background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.07)}
.book-body h2{margin-bottom:var(--s-1);font-size:var(--f-3)}
.book-body .subtitle{font-family:var(--serif);font-style:italic;font-size:var(--f-1);
  color:var(--ink-soft);margin:0 0 var(--s-2)}
.book-body .imprint{font-size:var(--f--2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 var(--s-5)}
.book-body .description{max-width:62ch}
.points{list-style:none;padding:0;margin:0 0 var(--s-5)}
.points li{position:relative;padding-left:1.15rem;color:var(--ink-soft);
  max-width:62ch}
.points li::before{content:"";position:absolute;left:0;top:.62em;
  width:.375rem;height:.375rem;background:var(--accent);border-radius:1px}
.reviews{margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--line-soft)}
.reviews blockquote{margin:0 0 var(--s-4);font-family:var(--serif);
  font-size:var(--f--1);line-height:1.55;color:var(--ink-soft);max-width:62ch;
  padding-left:var(--s-4);border-left:2px solid var(--line)}
.reviews blockquote:last-child{margin-bottom:0}
/* Review ATTRIBUTION only - the <cite> that is a direct child of the quote.
   Deliberately not `.reviews cite`: a <cite> naming a work nested inside the
   quotation must stay inline and italic, not become a block set in roman. */
.reviews blockquote > cite{display:block;margin-top:var(--s-2);font-style:normal;
  font-size:var(--f--2);letter-spacing:.05em;color:var(--muted)}
.book-actions{margin-top:var(--s-5)}

/* ---- Events ---------------------------------------------------- */
.event-block{max-width:var(--measure);margin-inline:auto}
.event-block + .event-block{margin-top:var(--s-8);padding-top:var(--s-7);
  border-top:1px solid var(--line)}
.event-list{list-style:none;padding:0;margin:0}
.event-list li{padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft)}
.event-list li:first-child{border-top:1px solid var(--line-soft)}
.event-date{display:block;font-size:var(--f--2);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:var(--s-2)}
.event-title{font-family:var(--serif);font-size:var(--f-1);font-weight:600;
  margin:0 0 var(--s-1);line-height:1.28}
.event-meta{font-size:var(--f--1);color:var(--muted);margin:0}
.event-desc{font-size:var(--f--1);color:var(--ink-soft);margin:var(--s-2) 0 0;
  max-width:62ch}
.tag{display:inline-block;font-size:var(--f--2);letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--line);padding:.1rem .5rem;
  color:var(--muted);margin-left:var(--s-2);vertical-align:.12em;
  font-weight:600;border-radius:2px}

/* ---- Empty states: intentional, not broken --------------------- */
.empty-state{max-width:38rem;margin-inline:auto;text-align:center;
  background:var(--panel-tint);border:1px solid var(--line-soft);border-radius:3px;
  padding:clamp(1.75rem,5vw,3rem)}
.empty-state .mark{display:block;width:2rem;height:2px;background:var(--accent);
  margin:0 auto var(--s-4)}
.empty-state h3{margin-bottom:var(--s-2);font-size:var(--f-1)}
.empty-state p{color:var(--muted);font-size:var(--f--1);margin:0;
  max-width:46ch;margin-inline:auto}

/* ---- Find Me --------------------------------------------------- */
.link-list{list-style:none;padding:0;margin:0;max-width:var(--measure);
  margin-inline:auto}
.link-list li{border-bottom:1px solid var(--line-soft)}
.link-list li:first-child{border-top:1px solid var(--line-soft)}
.link-list a{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);align-items:baseline;
  padding:var(--s-4) var(--s-2);text-decoration:none;color:var(--ink)}
.link-list a:hover{background:var(--panel);color:var(--accent)}
.link-list .label{font-family:var(--serif);font-size:var(--f-0);font-weight:600}
.link-list .host{font-size:var(--f--2);color:var(--muted);word-break:break-word}
.link-list .arrow{margin-left:auto;color:var(--accent)}

/* ---- Forms ----------------------------------------------------- */
.form-block{max-width:38rem;margin-inline:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;padding:clamp(1.25rem,4vw,2rem)}
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-size:var(--f--2);letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:var(--s-2)}
.field input,.field textarea{width:100%;padding:.65rem .75rem;font:inherit;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent);
  outline:2px solid var(--accent);outline-offset:1px}
.field .hint{font-size:var(--f--2);color:var(--muted);margin:var(--s-2) 0 0;
  text-transform:none;letter-spacing:0;font-weight:400}
.row-2{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:34rem){.row-2{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:var(--f--2);color:var(--muted);margin-top:var(--s-4);line-height:1.55}

.flash,.form-errors{max-width:38rem;margin:0 auto var(--s-5);
  padding:var(--s-3) var(--s-4);border-left:3px solid var(--accent);
  background:var(--panel);border-radius:2px}
.flash-ok{border-left-color:#1b7f3b;background:#f1f8f3}
.form-errors{background:#fdeef1}
.form-errors ul{margin:var(--s-2) 0 0;padding-left:1.1em;font-size:var(--f--1)}

/* ---- Newsletter ------------------------------------------------ */
.newsletter{background:var(--panel-tint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2.25rem,6vw,3.75rem);margin-top:var(--section)}
.newsletter h2{text-align:center;margin-bottom:var(--s-2)}
.newsletter .lede{text-align:center;margin-bottom:var(--s-5);max-width:46ch}

/* ---- Figures --------------------------------------------------- */
figure{margin:0 0 var(--s-5)}
figure img{width:100%}
figcaption{font-size:var(--f--2);color:var(--muted);margin-top:var(--s-2)}
.credit{font-size:var(--f--2);color:var(--muted);letter-spacing:.03em}

.feature-image{max-width:var(--wide);margin:0 auto var(--s-6)}
.feature-image img{border-radius:2px}

.about-portrait{max-width:18rem;margin:0 auto var(--s-5)}
@media(min-width:56rem){
  .about-portrait{float:right;margin:0 0 var(--s-5) var(--s-6);max-width:16rem;
    shape-outside:margin-box}
}

/* ---- Footer ---------------------------------------------------- */
.site-footer{background:var(--panel);border-top:1px solid var(--line);
  margin-top:var(--section);padding-block:clamp(2rem,5vw,3rem);
  font-size:var(--f--1);color:var(--muted)}
.site-footer p{margin:0 0 var(--s-2);max-width:var(--measure)}
.site-footer .thanks{font-size:var(--f--2);line-height:1.6;
  border-top:1px solid var(--line-soft);padding-top:var(--s-4);margin-top:var(--s-4)}
.site-footer a{color:var(--muted);text-decoration:underline}
.site-footer a:hover{color:var(--accent)}
/* ---- Print ----------------------------------------------------- */
@media print{
  .site-nav,.newsletter,.form-block,.lockup-account,.skip{display:none}
  body{background:#fff;color:#000}
  .book{border:0;padding:0}
}