/* ============================================================================
   sinfoniettahelene.com — public/reading.css
   ============================================================================

   What this is
     The shared stylesheet for the reading pages: /program-note/ and the
     pages under /notes/. index.html keeps its own inline styles and does
     not load this file.

   Why it is a file and not inline
     index.html is self-contained because it is the page every visitor hits
     first and it must paint without a second round trip. The reading pages
     are one click deeper, always arrived at from a page that has already
     warmed the connection, and there are more than one of them — so they
     share a cached stylesheet rather than carrying three copies of the
     same 200 lines.

   What is in here
     The palette and base type, copied from index.html so the two match;
     a long-form prose measure; and the Equipoise signup card, whose rules
     are the same overrides index.html carries and for the same reasons
     (the embed's own stylesheet is authored for a light card).

   If the palette changes, it changes in both places.
   ============================================================================ */

/* Palette — hall theme, ink title. Kept identical to index.html. */
:root{
  --accent:        #9f6a61;
  --accent-deep:   #7c3a35;
  --accent-deeper: #652f2b;
  --accent-text:   #a5746b;
  --bg:            #141210;
  --btn-ink:       #f6f1e8;
  --error:         #ef5f78;
  --faint:         #8a8271;
  --field:         #1c1310;
  --hairline:      #2d2920;
  --ink:           #ece6d9;
  --muted:         #a59d8c;
  --title-ink:     #ece6d9;
  --warm-border:   #4e3129;
  --warm-card:     #271a17;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Newsreader',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

main{
  max-width:660px;
  margin:0 auto;
  padding:clamp(28px,5vh,56px) 24px 96px;
}

/* ---------- Return link ---------- */
/* Small, quiet, and at the top of every reading page: the front page is the
   work, this is the writing about it, and the way back should never be a
   hunt. Repeated at the foot of the page so a reader who has come all the
   way down does not have to scroll back up. */
.back{
  display:inline-block;
  margin:0 0 clamp(44px,8vh,76px);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}

.back:hover{color:var(--ink);}

/* ---------- Page head ---------- */
.page-head{margin:0 0 clamp(40px,7vh,64px);}

.kicker{
  margin:0 0 clamp(14px,2vh,20px);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-text);
}

/* Same typewriter face and monospace fallback stack as the front page's h1,
   so the title lays out on the same lines before and after john-doe lands. */
.page-head h1{
  margin:0;
  font-family:'john-doe','Courier New',Courier,monospace;
  font-weight:400;
  color:var(--title-ink);
  font-size:clamp(1.9rem,5.2vw,2.9rem);
  line-height:1.12;
  letter-spacing:.01em;
  text-wrap:balance;
}

.page-head .dateline{
  margin:clamp(16px,2.5vh,22px) 0 0;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

.head-rule{
  width:44px;height:2px;
  background:var(--accent);
  margin:clamp(24px,4vh,34px) 0 0;
}

/* ---------- Prose ---------- */
.prose p{
  margin:0 0 1.5em;
  font-size:1.06rem;
  line-height:1.8;
  color:var(--ink);
  text-wrap:pretty;
}

.prose p:last-child{margin-bottom:0;}

/* Section headings inside a reading page: italic, the same voice the
   movement titles use on the front page. */
.prose h2{
  margin:clamp(54px,9vh,88px) 0 clamp(22px,3.5vh,30px);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.35rem,3.2vw,1.75rem);
  line-height:1.2;
  color:var(--ink);
}

.prose h2:first-child{margin-top:0;}

/* The lead-in on each movement paragraph. Garnet rather than bold: the page
   has one accent and this is what it is for. */
.prose strong{
  font-weight:400;
  font-style:italic;
  color:var(--accent-text);
}

.prose em{font-style:italic;}

.prose a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--warm-border);
}

.prose a:hover{text-decoration-color:var(--accent);}

.signature{
  margin-top:2em !important;
  font-style:italic;
  color:var(--muted);
}

/* A short standfirst set apart from the body, for the one-line framing that
   sits under a heading. */
.lede{
  font-size:1.16rem !important;
  line-height:1.65 !important;
  font-style:italic;
  color:var(--muted) !important;
}

/* ---------- Footnote block ---------- */
/* Credits and the composer line: the same footnote treatment the front page
   gives its credits, so the two pages agree about what is small. */
.footnote{
  margin-top:clamp(64px,11vh,112px);
  padding-top:24px;
  border-top:1px solid var(--hairline);
}

.footnote p{
  margin:0;
  font-size:.82rem;
  line-height:1.9;
  color:var(--faint);
  letter-spacing:.01em;
}

.footnote p + p{margin-top:1.1em;}

.footnote a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Newsletter ---------- */
/* The one job every page on this site shares. A reader who has just come
   through a thousand words of program note is the likeliest subscriber the
   site will ever see, so the card belongs here as much as on the front page.
   Markup and overrides are index.html's, unchanged. */
.signup{
  width:100%;max-width:480px;
  margin:clamp(76px,13vh,132px) auto 0;
  background:var(--warm-card);
  border:1px solid var(--warm-border);
  padding:clamp(30px,5vw,42px);
  text-align:center;
}

.signup-line{
  margin:0 0 .2em;
  font-style:italic;
  font-size:1.14rem;
  line-height:1.6;
  color:var(--ink);
  text-wrap:pretty;
}

.equipoise-embed{margin-top:24px;}

.equipoise-fallback-btn{
  display:inline-block;
  padding:14px 28px;
  font-family:'Newsreader',Georgia,serif;
  font-size:.94rem;
  letter-spacing:.03em;
  color:var(--btn-ink);
  background:var(--accent-deep);
  border:0;
  text-decoration:none;
  cursor:pointer;
}

.equipoise-fallback-btn:hover{background:var(--accent-deeper);}

/* --- Equipoise enhanced form ------------------------------------------
   The embed script replaces the fallback button with a real form and injects
   its own stylesheet into <head> at runtime, authored for a light card. These
   selectors are one class deeper than the injected ones so they win on
   specificity rather than on load order, which an async script does not
   guarantee. Same rules as index.html. */
.signup .equipoise-form-container[data-eq-signup] .equipoise-heading,
.signup .equipoise-form-container[data-eq-signup] .equipoise-subheading{
  display:none;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-form{
  background:transparent;
  color:var(--ink);
  text-align:left;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-field{margin:0;}

.signup .equipoise-form-container[data-eq-signup] .equipoise-label{
  display:block;
  margin:0 0 .5rem;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-input{
  width:100%;
  padding:12px 14px;
  background:var(--field);
  border:1px solid var(--accent);
  border-radius:0;
  color:var(--ink);
  font-family:'Newsreader',Georgia,serif;
  font-size:1rem;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-input::placeholder{
  color:var(--faint);
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-submit{
  width:100%;
  margin-top:18px;
  padding:14px 28px;
  background:var(--accent-deep);
  color:var(--btn-ink);
  border:0;
  border-radius:0;
  font-family:'Newsreader',Georgia,serif;
  font-size:.94rem;
  letter-spacing:.03em;
  cursor:pointer;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-submit:hover{
  background:var(--accent-deeper);
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-error{
  margin:.75rem 0 0;
  font-size:.82rem;
  color:var(--error);
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-success{
  background:transparent;
  border-radius:0;
  padding:0;
}

.signup .equipoise-form-container[data-eq-signup] .equipoise-success__message{
  font-style:italic;
  font-size:1.06rem;
  line-height:1.6;
  color:var(--ink);
  text-align:center;
}

.signup-credit{
  margin:18px 0 0;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.signup-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Foot ---------- */
.page-foot{
  margin-top:clamp(64px,11vh,104px);
  text-align:center;
}

.page-foot a{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}

.page-foot a:hover{color:var(--ink);}

/* Visible keyboard focus. */
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}