/* ============================================================
   For the Record — fortherecordworkbooks.com
   Warm, reassuring brand site for Stellarus Press workbooks
   Type: Cormorant Garamond (display) + Montserrat (text)
   ============================================================ */

:root{
  --paper:      #f6f1e6;   /* sandy cream page */
  --paper-2:    #fcf9f1;   /* lighter card */
  --paper-3:    #efe6d4;   /* deeper band */
  --ink:        #2a3540;   /* warm slate-navy */
  --ink-soft:   #5b6470;
  --ink-mute:   #8d8676;
  --accent:     #9a6a3c;   /* warm bronze / gold ink */
  --accent-deep:#7a5230;
  --line:       #ddd1bb;   /* warm hairline */
  --line-soft:  #e7dcc7;
  --shadow-sm:  0 2px 10px rgba(43,35,22,.07);
  --shadow-md:  0 18px 44px rgba(43,35,22,.16);
  --shadow-lg:  0 30px 70px rgba(33,28,18,.26);
  --maxw: 1180px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color: inherit; }

/* paper grain — barely-there warmth */
body::before{
  content:""; position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(154,106,60,.06), transparent 60%),
    radial-gradient(100% 70% at -10% 110%, rgba(42,53,64,.05), transparent 55%);
}

/* ---------- shared ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
  font-family: var(--sans); font-weight:600; font-size:12px;
  letter-spacing:.32em; text-transform:uppercase; color: var(--accent);
  margin:0;
}
.serif{ font-family: var(--serif); }
h1,h2,h3{ font-family: var(--serif); font-weight:600; color:var(--ink); margin:0;
  line-height:1.03; letter-spacing:.005em; }
h2.section-title{ font-size: clamp(34px, 4.6vw, 56px); }
.lead{ font-size: clamp(18px,2vw,21px); line-height:1.7; color:var(--ink-soft); }
.muted{ color: var(--ink-soft); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family: var(--sans); font-weight:500; font-size:14px; letter-spacing:.04em;
  padding:14px 26px; border-radius:2px; text-decoration:none; border:1px solid transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s;
  white-space:nowrap;
}
.btn--primary{ background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background:#1f2933; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); }
.btn svg{ width:16px; height:16px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position: sticky; top:0; z-index:50;
  background: rgba(246,241,230,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-head.scrolled{ border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.01), var(--shadow-sm); }
.head-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:baseline; gap:12px; text-decoration:none; }
.brand-mark{ font-family: var(--serif); font-weight:600; font-size:25px; color:var(--ink); line-height:1; letter-spacing:.01em; }
.brand-sub{ font-family: var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color: var(--accent); }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-family:var(--sans); font-weight:500; font-size:14px; color:var(--ink-soft); text-decoration:none; letter-spacing:.02em; transition: color .18s; }
.nav a:hover{ color: var(--accent-deep); }
.nav .btn{ padding:11px 20px; }
.nav .btn--primary{ color: var(--paper); }        /* cream text on navy — beats `.nav a`, matches Buy on Amazon */
.nav .btn--primary:hover{ color: var(--paper); }
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap:54px; align-items:center;
  padding: clamp(56px,8vw,108px) 0 clamp(64px,9vw,116px); }
.hero-copy .eyebrow{ margin-bottom:24px; }
.hero h1{ font-size: clamp(46px, 6.2vw, 84px); letter-spacing:0; }
.hero h1 em{ font-style: italic; color: var(--accent-deep); }
.hero-copy .lead{ margin:26px 0 36px; max-width: 33ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-note{ margin-top:22px; font-size:13px; color:var(--ink-mute); letter-spacing:.01em; }

/* fanned covers */
.hero-art{ position:relative; height: 540px; display:flex; align-items:center; justify-content:center; }
.fan{ position:relative; width:300px; height:100%; }
.fan .bookcover{ position:absolute; width:262px; top:50%; left:50%; }
.fan .fan-l{ transform: translate(-86%,-52%) rotate(-9deg); z-index:1; filter: saturate(.97); }
.fan .fan-r{ transform: translate(-14%,-48%) rotate(9deg);  z-index:1; filter: saturate(.97); }
.fan .fan-c{ transform: translate(-50%,-50%) rotate(-1deg); z-index:3; }

/* ============================================================
   BOOK COVER COMPONENT
   ============================================================ */
.bookcover{
  position:relative; aspect-ratio: 85/110; border-radius:3px; overflow:hidden;
  background:#cfc7b4; box-shadow: var(--shadow-lg);
  isolation:isolate;
}
.bookcover::after{ /* page edge + inner light */
  content:""; position:absolute; inset:0; border-radius:3px; z-index:4; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 6px 0 14px rgba(255,255,255,.10), inset -10px 0 22px rgba(0,0,0,.16);
}
.bookcover img.art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bookcover .spine{ position:absolute; top:0; bottom:0; left:0; width:9px; z-index:3;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.04) 60%, rgba(255,255,255,.06)); }
.cv-plate{
  position:absolute; left:9%; right:9%; top:8.5%; z-index:2;
  background: rgba(249,245,237,.82); backdrop-filter: blur(3px);
  border:1px solid rgba(154,106,60,.20);
  box-shadow: 0 8px 22px rgba(28,30,34,.16);
  padding: 13% 8% 12%; text-align:center;
}
.cv-press{ font-family:var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-deep); }
.cv-title{ font-family:var(--serif); font-weight:600; font-size: clamp(20px, 3.4vw, 33px); line-height:.98; color:var(--ink); margin:7px 0 0; }
.cv-sub{ font-family:var(--serif); font-style:italic; font-size:.92rem; line-height:1.25; color:var(--ink-soft); margin-top:7px; }
.cv-ed{ font-family:var(--sans); font-weight:600; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-top:11px; }
.cv-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14% 9% 7%; text-align:center;
  background: linear-gradient(180deg, rgba(247,243,233,0) 0%, rgba(247,243,233,.55) 45%, rgba(247,243,233,.86) 100%); }
.cv-author{ font-family:var(--serif); font-size:.96rem; color:var(--ink); }
.cv-domain{ font-family:var(--sans); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin-top:4px; }
/* scale cover internals with the box */
.bookcover{ container-type: inline-size; }
@container (min-width: 0px){
  .cv-title{ font-size: 12.6cqw; }
  .cv-press{ font-size: 2.4cqw; }
  .cv-sub{ font-size: 3.7cqw; }
  .cv-ed{ font-size: 2.3cqw; }
  .cv-author{ font-size: 3.9cqw; }
  .cv-domain{ font-size: 2.1cqw; }
}

/* ============================================================
   PRODUCT LINES
   ============================================================ */
.lines{ padding: clamp(64px,9vw,120px) 0; }
.lines-head{ text-align:center; max-width:680px; margin:0 auto clamp(44px,6vw,72px); }
.lines-head .eyebrow{ margin-bottom:18px; }
.lines-head .lead{ margin-top:18px; }

.line-row{ display:grid; grid-template-columns: 360px 1fr; gap:clamp(36px,5vw,72px); align-items:center;
  padding: clamp(40px,5vw,60px) 0; }
.line-row + .line-row{ border-top:1px solid var(--line); }
.line-row.flip .line-art{ order:2; }
.line-art{ display:flex; justify-content:center; }
.line-art .bookcover{ width: 300px; transform: rotate(-1.5deg); transition: transform .4s ease; }
.line-row.flip .line-art .bookcover{ transform: rotate(1.5deg); }
.line-art .bookcover:hover{ transform: rotate(0) translateY(-6px); }

.line-body h3{ font-size: clamp(30px,3.6vw,44px); }
.line-kicker{ margin-bottom:14px; }
.line-body .lead{ margin:16px 0 22px; max-width: 52ch; }
.line-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px; max-width:54ch; }
.line-list li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-soft); line-height:1.5; }
.line-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%;
  background: var(--accent); box-shadow:0 0 0 3px rgba(154,106,60,.14); }
.line-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.line-actions .price{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-mute); }
.edition-pills{ display:flex; gap:9px; flex-wrap:wrap; margin-top:22px; }
.pill{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:40px; padding:5px 13px; background:var(--paper-2); }

/* ============================================================
   EDITIONS GALLERY
   ============================================================ */
.gallery{ background: var(--paper-3); padding: clamp(70px,9vw,124px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gallery-head{ text-align:center; max-width:720px; margin:0 auto clamp(48px,6vw,76px); }
.gallery-head .lead{ margin-top:18px; }
.art-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:26px; }
.artcard{ text-align:center; }
.art-frame{ position:relative; aspect-ratio:85/108; border-radius:2px; overflow:hidden;
  box-shadow: var(--shadow-md); background:#cfc7b4; transition: transform .4s ease, box-shadow .4s ease; }
.art-frame::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 60px rgba(0,0,0,.10); }
.art-frame img{ width:100%; height:100%; object-fit:cover; }
.artcard:hover .art-frame{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.art-name{ font-family:var(--serif); font-weight:600; font-size:21px; margin:18px 0 0; }
.art-meta{ font-family:var(--sans); font-size:11.5px; letter-spacing:.06em; color:var(--ink-mute); margin-top:5px; line-height:1.5; }
.art-meta em{ font-style:italic; }
.gallery-foot{ text-align:center; margin-top: clamp(40px,5vw,62px); }
.gallery-foot .lead{ max-width:60ch; margin:0 auto 26px; }

/* ============================================================
   PHILOSOPHY / QUOTE
   ============================================================ */
.ethos{ padding: clamp(76px,10vw,140px) 0; }
.ethos-inner{ max-width: 880px; margin:0 auto; text-align:center; }
.ethos blockquote{ margin:0; font-family:var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(28px,4vw,46px); line-height:1.18; color:var(--ink); letter-spacing:.005em; }
.ethos .rule{ width:54px; height:2px; background:var(--accent); margin:34px auto; }
.ethos p{ font-size: clamp(16px,1.8vw,19px); line-height:1.75; color:var(--ink-soft); max-width:60ch; margin:0 auto 18px; }
.ethos .reassure{ font-family:var(--serif); font-style:italic; font-size: clamp(19px,2.3vw,25px); color:var(--accent-deep); margin-top:30px; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{ background: var(--ink); color:#f0ebe0; padding: clamp(70px,9vw,118px) 0; position:relative; overflow:hidden; }
.news::before{ content:""; position:absolute; inset:0; opacity:.5;
  background: radial-gradient(80% 120% at 85% -20%, rgba(154,106,60,.5), transparent 55%),
             radial-gradient(70% 120% at 0% 120%, rgba(120,150,170,.28), transparent 55%); }
.news-inner{ position:relative; max-width:680px; margin:0 auto; text-align:center; }
.news .eyebrow{ color:#d8b78a; }
.news h2{ color:#f6f1e6; font-size: clamp(32px,4.4vw,52px); margin-top:16px; }
.news p{ color:#cdc6b8; font-size:17px; line-height:1.7; margin:18px auto 32px; max-width:48ch; }
.news-form{ display:flex; gap:10px; max-width:480px; margin:0 auto; }
.news-form input{ flex:1; font-family:var(--sans); font-size:15px; color:#f6f1e6;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:2px; padding:14px 18px; }
.news-form input::placeholder{ color:#9aa0a3; }
.news-form input:focus{ outline:none; border-color:#d8b78a; background:rgba(255,255,255,.10); }
.news-form .btn--primary{ background:#d8b78a; color:var(--ink); }
.news-form .btn--primary:hover{ background:#e7cca6; }
.news-mini{ margin-top:16px; font-size:12.5px; color:#9aa0a3; letter-spacing:.02em; }
.news-ok{ display:none; margin-top:18px; font-family:var(--serif); font-style:italic; font-size:21px; color:#e7cca6; }
.news-cta{ background:#d8b78a; color:var(--ink); margin-top:6px; }
.news-cta:hover{ background:#e7cca6; transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding: clamp(56px,7vw,86px) 0 38px; }
.foot-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.foot-brand .brand-mark{ font-size:27px; }
.foot-brand p{ margin:16px 0 0; font-size:14px; color:var(--ink-soft); max-width:34ch; line-height:1.7; }
.foot-col h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.foot-col a{ display:block; font-size:14.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:10px; transition:color .18s; }
.foot-col a:hover{ color:var(--accent-deep); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-top:26px; flex-wrap:wrap; }
.foot-bottom .legal{ font-size:12px; color:var(--ink-mute); max-width:60ch; line-height:1.65; }
.foot-bottom .copy{ font-size:12px; color:var(--ink-mute); white-space:nowrap; }
.foot-bottom .byline{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px){
  .hero-inner{ grid-template-columns:1fr; gap:30px; text-align:center; padding-top:48px; }
  .hero-copy .lead{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-art{ height:440px; order:-1; }
  .fan .bookcover{ width:228px; }
  .line-row{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .line-row.flip .line-art{ order:0; }
  .line-body .lead, .line-list{ margin-left:auto; margin-right:auto; }
  .line-list li{ text-align:left; }
  .line-actions{ justify-content:center; }
  .edition-pills{ justify-content:center; }
  .art-grid{ grid-template-columns: repeat(3,1fr); gap:20px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .wrap{ padding:0 22px; }
  .nav{ display:none; }
  .nav.open{ display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:18px;
    background:var(--paper); padding:24px 22px 28px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }
  .art-grid{ grid-template-columns: repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr; gap:30px; }
  .news-form{ flex-direction:column; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }