/* ============================================================
   Ceone Fenn — author site, visual design system (concept)
   Brand/Creative · 2026-06-14
   "A reader's writer." Literary, warm, earthy, grounded — a
   counselor's calm. Palette bridges her two books: 1925 prairie
   wheat + Northwoods lake. Serif for reading, sans for UI.
   ============================================================ */

:root{
  /* ---- ground + ink ---- */
  --paper:#FAF9F7;          /* warm off-white page */
  --paper-deep:#F2EEE7;     /* tints, panels, alt sections */
  --card:#FFFFFF;
  --ink:#2B2622;            /* warm near-black — body */
  --ink-soft:#5A524A;       /* secondary text */
  --ink-faint:#857B70;      /* meta / captions (lightest on paper) */
  --line:#E4DDD3;           /* hairline rules, borders */

  /* ---- the two-landscape accents ---- */
  --wheat:#8B5E3C;          /* PRIMARY — prairie/wheat-bark brown (links, CTAs) */
  --wheat-deep:#6D4A2F;     /* hover */
  --wheat-pale:#EFE3D4;     /* fills, chips */
  --pine:#3B4A40;           /* SECONDARY — Northwoods spruce (events, accents) */
  --pine-deep:#2C3830;
  --gold:#C9A86A;           /* fine highlight — rules, sprig, small marks */

  /* ---- type (try-it-on swaps the display + body vars) ---- */
  --display:'Cormorant Garamond', Georgia, serif;  /* default display */
  --serif:'Newsreader', Georgia, serif;            /* reading face (prose) */
  --sans:'Jost', system-ui, sans-serif;            /* UI: nav, labels, forms */

  --measure:38rem;          /* reading column */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* try-it-on variants (toggled by body class) */
body.disp-fraunces{ --display:'Fraunces', Georgia, serif; }
body.body-jost   { --serif:'Jost', system-ui, sans-serif; }  /* sans reading face */
body.accent-pine { --wheat:#3B4A40; --wheat-deep:#2C3830; --wheat-pale:#E2E7E1; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  /* subtle paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ---- type scale ---- */
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--wheat)}
.kicker.pine{color:var(--pine)}
a{color:var(--wheat);text-decoration:none;transition:color .2s}
a:hover{color:var(--wheat-deep)}
em,i{font-style:italic}

/* ---- layout shells ---- */
.wrap{max-width:72rem;margin:0 auto;padding:0 2rem}
.col{max-width:var(--measure);margin:0 auto}
section{padding:5.5rem 0}
.alt{background:var(--paper-deep)}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(250,249,247,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:1.1rem;padding-bottom:1.1rem}
.brandmark{display:flex;align-items:center;gap:.6rem}
.brandmark .name{font-family:var(--display);font-size:1.5rem;color:var(--ink);letter-spacing:.01em}
.brandmark svg{width:26px;height:26px;flex:none}
nav.main{display:flex;gap:1.9rem;font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
nav.main a{color:var(--ink-soft)}
nav.main a:hover{color:var(--wheat)}
.nav-cta{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--pine);color:#fff;padding:.6rem 1.1rem;border-radius:2rem}
.nav-cta:hover{background:var(--pine-deep);color:#fff}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--sans);font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:2rem;transition:all .2s var(--ease)}
.btn-primary{background:var(--wheat);color:#fff}
.btn-primary:hover{background:var(--wheat-deep);color:#fff;transform:translateY(-1px)}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:var(--pine-deep);color:#fff;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--wheat);color:var(--wheat)}
.btn-ghost:hover{background:var(--wheat-pale)}

/* ---- arch frame (organic motif for covers + portrait) ---- */
.arch{border-radius:50% 50% 8px 8px / 28% 28% 4px 4px;overflow:hidden;background:var(--paper-deep);
  box-shadow:0 18px 40px -22px rgba(43,38,34,.45)}
.arch img{display:block;width:100%;height:100%;object-fit:cover}

/* placeholder art when real assets pending */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  background:
    linear-gradient(135deg,var(--wheat-pale),var(--paper-deep));padding:1rem}

/* ---- hero ---- */
.hero{padding:4.5rem 0 4rem}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2.8rem,6vw,4.6rem);margin:.4rem 0 .1rem}
.hero .lede{font-size:1.18rem;color:var(--ink-soft);max-width:30rem;margin-top:1.2rem}
.hero .who{font-style:italic;color:var(--ink-soft);margin-top:1rem;font-size:1.05rem}
.hero .cta-row{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.hero .portrait{aspect-ratio:4/5;max-width:24rem;margin-left:auto}

/* ---- proof strip ---- */
.proof{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center;align-items:center;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0;text-align:center}
.proof b{color:var(--wheat);font-weight:600}
.proof .star{color:var(--gold)}

/* ---- book cards ---- */
.books{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.bookcard{display:grid;grid-template-columns:140px 1fr;gap:1.6rem;align-items:start}
.bookcard .cover{aspect-ratio:2/3;border-radius:3px;overflow:hidden;
  box-shadow:0 14px 30px -16px rgba(43,38,34,.5);background:var(--paper-deep)}
.bookcard .cover img{width:100%;height:100%;object-fit:cover}
.bookcard h3{font-size:1.7rem;margin-bottom:.1rem}
.bookcard .meta{font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem}
.bookcard .hook{font-size:1rem;color:var(--ink-soft);margin-bottom:.8rem}
.gr{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.gr .star{color:var(--gold)}

/* ---- pull quote ---- */
.pull{font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.28;
  color:var(--ink);text-align:center;max-width:46rem;margin:0 auto}
.pull .by{display:block;font-family:var(--sans);font-style:normal;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:1.4rem}

/* deckle / sprig divider */
.divider{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto;max-width:18rem;color:var(--gold)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- book detail ---- */
.bookhero{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
.bookhero .cover{max-width:20rem}
.buy{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0}
.buy a{font-family:var(--sans);font-size:.8rem;letter-spacing:.03em;border:1px solid var(--line);
  padding:.55rem 1rem;border-radius:.4rem;color:var(--ink)}
.buy a:hover{border-color:var(--wheat);color:var(--wheat);background:var(--wheat-pale)}
.formats{font-family:var(--sans);font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em}
.prose p{margin-bottom:1.2rem}
.prose .first::first-letter{font-family:var(--display);font-size:3.4rem;float:left;line-height:.8;padding:.1rem .5rem .1rem 0;color:var(--wheat)}
.rgg-callout{border:1px solid var(--line);border-left:3px solid var(--pine);background:var(--card);
  padding:1.6rem 1.8rem;border-radius:.5rem;margin-top:2rem}
.rgg-callout h4{font-family:var(--display);font-size:1.4rem;margin-bottom:.3rem}

/* ---- invite / events + form ---- */
.invite-hero{text-align:center;max-width:42rem;margin:0 auto}
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1rem}
.offer .o{background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:1.6rem;text-align:center}
.offer .o .ic{color:var(--pine);margin-bottom:.6rem}
.offer .o h4{font-family:var(--display);font-size:1.4rem;margin-bottom:.3rem}
.offer .o p{font-size:.95rem;color:var(--ink-soft)}
.virtual-tag{display:inline-block;font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--pine);color:#fff;padding:.2rem .6rem;border-radius:1rem;margin-top:.6rem}

form.invite{max-width:40rem;margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
form.invite .full{grid-column:1/-1}
form.invite label{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
form.invite input,form.invite select,form.invite textarea{width:100%;font-family:var(--serif);font-size:1rem;
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:.4rem;background:var(--card);color:var(--ink)}
form.invite input:focus,form.invite select:focus,form.invite textarea:focus{outline:2px solid var(--wheat);border-color:var(--wheat)}
.radio-row{display:flex;gap:1.2rem;font-family:var(--sans);font-size:.9rem}
.radio-row label{display:flex;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0;font-size:.95rem;margin:0}

/* seam: where a newsletter block could drop in later (designed-for, not built) */
.seam{border:1px dashed var(--line);border-radius:.5rem;padding:1.2rem 1.4rem;text-align:center;
  font-family:var(--sans);font-size:.8rem;color:var(--ink-faint);background:var(--paper-deep)}

/* ---- footer ---- */
footer.site{background:var(--pine-deep);color:#E9E4DB;padding:3.5rem 0;font-family:var(--sans);font-size:.85rem}
footer.site a{color:var(--gold)}
footer.site .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
footer.site .name{font-family:var(--display);font-size:1.5rem;color:#fff}

/* ---- responsive ---- */
@media(max-width:820px){
  .hero .grid,.books,.bookhero{grid-template-columns:1fr;gap:2.5rem}
  .hero .portrait{margin:0 auto}
  .offer,form.invite{grid-template-columns:1fr}
  nav.main{display:none}
  section{padding:3.5rem 0}
}

/* ---- try-it-on panel ---- */
#tryon{position:fixed;right:1rem;bottom:1rem;z-index:90;font-family:var(--sans)}
#tryon .panel{background:var(--card);border:1px solid var(--line);border-radius:.7rem;box-shadow:0 18px 50px -20px rgba(43,38,34,.5);
  padding:1rem 1.1rem;width:230px;display:none}
#tryon.open .panel{display:block}
#tryon .toggle{background:var(--ink);color:var(--paper);border:none;border-radius:2rem;padding:.6rem 1.1rem;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;float:right}
#tryon h5{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:.8rem 0 .4rem}
#tryon button.opt{display:block;width:100%;text-align:left;background:var(--paper-deep);border:1px solid var(--line);
  border-radius:.4rem;padding:.45rem .6rem;margin-bottom:.35rem;font-size:.82rem;color:var(--ink);cursor:pointer}
#tryon button.opt.on{background:var(--wheat);color:#fff;border-color:var(--wheat)}
#tryon .ttl{font-family:var(--display);font-size:1.2rem;color:var(--ink);margin-bottom:.2rem}