/* bokaflod — a winter night, seen from inside.
   Deep indigo dark, warm lamplight gold, generous reading measure.
   No webfonts: the page must render instantly on a phone in a bookshop. */
:root{
  --ink:#0d1320;          /* the night outside  */
  --ink-2:#141d2e;        /* raised surfaces    */
  --ink-3:#1d2839;
  --paper:#f2ece1;        /* warm off-white     */
  --paper-dim:#c3bcae;
  --lamp:#e8b464;         /* lamplight          */
  --lamp-deep:#c9903f;
  --rule:#2a3547;
  --measure:34rem;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.7;
  text-rendering:optimizeLegibility;
}
a{color:var(--lamp); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{color:#f6d9a4}
img{max-width:100%; height:auto; display:block}

.wrap{width:min(100% - 2.5rem, 62rem); margin-inline:auto}
.measure{max-width:var(--measure)}

/* ---- header ---- */
.site-head{padding:1.4rem 0; border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex; gap:1.5rem; align-items:baseline; flex-wrap:wrap}
.brand{font-size:1.25rem; letter-spacing:.02em; text-decoration:none; color:var(--paper); font-weight:600}
.brand span{color:var(--lamp)}
.nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem 1.35rem; font-size:1.125rem}
.nav a{color:var(--paper-dim); text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--lamp)}

@media (max-width:40rem){
  .site-head{padding:.65rem 0}
  .site-head .wrap{width:calc(100% - 1.5rem); flex-wrap:nowrap; align-items:center; gap:.5rem}
  .site-head .brand{display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; font-size:1.125rem; white-space:nowrap}
  .nav{flex-wrap:nowrap; flex-shrink:0; gap:.5rem; font-size:1rem}
  .nav a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap}
}
@media (max-width:22.5rem){
  .site-head .wrap{width:calc(100% - 1rem)}
  .site-head .brand{font-size:1rem}
  .nav{font-size:.875rem; gap:.375rem}
}

/* ---- hero ---- */
.kicker{font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lamp); margin:0 0 .9rem}
h1{font-size:clamp(2.1rem,5.5vw,3.4rem); line-height:1.12; margin:0 0 1rem; font-weight:600}
.home-title{font-size:clamp(3.75rem,9vw,6rem); margin-bottom:.5rem}
.home-tagline{font-size:clamp(.95rem,2.4vw,1.4rem); line-height:1.4; margin:0 0 1.2rem}
.lede{font-size:1.2rem; color:#ddd5c6; margin:0 0 1.5rem}
.pron{font-family:var(--sans); font-size:.85rem; color:var(--paper-dim); letter-spacing:.02em}

h2{font-size:1.6rem; line-height:1.25; margin:2.6rem 0 .8rem; font-weight:600}
h3{font-size:1.15rem; margin:1.8rem 0 .5rem; font-family:var(--sans); letter-spacing:.01em}
p{margin:0 0 1.1rem}
section{padding:2.2rem 0}
.page-section{padding-top:3rem}

blockquote{
  margin:1.6rem 0; padding:1rem 0 1rem 1.3rem; border-left:2px solid var(--lamp-deep);
  color:#e6ddcd; font-style:italic;
}
blockquote cite{display:block; margin-top:.6rem; font-style:normal; font-family:var(--sans);
  font-size:.85rem; color:var(--paper-dim)}

.card{background:var(--ink-2); border:1px solid var(--rule); border-radius:10px; padding:1.4rem 1.5rem}
.grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.steps{counter-reset:s; list-style:none; padding:0; margin:1.2rem 0}
.steps h2{font-size:1.15rem; margin:1.8rem 0 .5rem; font-family:var(--sans); letter-spacing:.01em}
.steps li{counter-increment:s; position:relative; padding-left:3rem; margin-bottom:1.4rem}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1rem;
  width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-3); color:var(--lamp); font-family:var(--sans); font-size:.9rem;
  border:1px solid var(--rule);
}

/* ---- sample evening ---- */
.evening-plan h2{margin-top:0}
.evening-plan ul{padding-left:1.2rem; margin-bottom:0}
.evening-plan li{margin-bottom:.6rem}
.evening-plan li:last-child{margin-bottom:0}

/* ---- signup ---- */
.signup{background:linear-gradient(180deg,var(--ink-2),var(--ink)); border:1px solid var(--rule);
  border-radius:12px; padding:1.8rem 1.6rem; margin:2rem 0}
.signup h2{margin-top:0}
.signup form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.signup input[type=email],.signup input[type=text]{
  flex:1 1 15rem; padding:.75rem .9rem; border-radius:8px; border:1px solid var(--rule);
  background:#0b1018; color:var(--paper); font:inherit; font-size:1rem;
}
.signup input:focus{outline:2px solid var(--lamp-deep); outline-offset:1px}
.signup button{
  padding:.75rem 1.3rem; border-radius:8px; border:0; cursor:pointer;
  background:var(--lamp); color:#20160a; font-family:var(--sans); font-weight:650; font-size:.95rem;
}
.signup button:hover{background:#f3c67c}
.fineprint{font-family:var(--sans); font-size:.8rem; color:var(--paper-dim); margin:.9rem 0 0}
.hp{position:absolute; left:-9999px}

/* ---- notes / sources ---- */
.note{font-family:var(--sans); font-size:.88rem; color:var(--paper-dim);
  background:var(--ink-2); border-left:2px solid var(--rule); padding:.9rem 1.1rem; border-radius:0 8px 8px 0}
.sources{font-family:var(--sans); font-size:.85rem; color:var(--paper-dim)}
.sources li{margin-bottom:.5rem}

.site-foot{border-top:1px solid var(--rule); margin-top:3rem; padding:2rem 0 3rem;
  font-family:var(--sans); font-size:.85rem; color:var(--paper-dim)}
.site-foot a{color:var(--paper-dim)}
.site-foot a:hover{color:var(--lamp)}
.affiliate-note{margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid var(--rule)}

@media (prefers-reduced-motion:no-preference){ a,button{transition:color .15s,background .15s} }

.booklist{padding-left:1.2rem}
.booklist li{margin-bottom:.8rem}

/* ---- book shelf (books page) ---- */
.shelf{list-style:none; margin:1.2rem 0 2rem; padding:0; display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.book{display:flex; gap:1rem; align-items:flex-start; background:var(--ink-2);
  border:1px solid var(--rule); border-radius:10px; padding:1rem}
.book-cover{flex:0 0 6.5rem; width:6.5rem; background:var(--ink-3); border-radius:4px; overflow:hidden; line-height:0}
.book-cover img{width:100%; height:auto}
.book-body{min-width:0}
.book h3{margin:0 0 .2rem; font-family:var(--serif); font-size:1.1rem; line-height:1.3}
.book-meta{font-family:var(--sans); font-size:.82rem; color:var(--paper-dim); margin:0 0 .6rem}
.book-body p:last-child{margin:0; font-size:.97rem; line-height:1.55}
.book-links{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:1.5rem 0 0; padding:0; list-style:none}
.book-links a{display:inline-block; padding:.25rem 0}
.book-section{scroll-margin-top:1.5rem}
.seasonal-list{list-style:none; padding:0; margin:1.5rem 0 2rem; display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.seasonal-list li{padding:1.25rem; border:1px solid var(--rule); border-radius:10px; background:var(--ink-2)}
.seasonal-list h3{margin:0 0 .3rem; font-family:var(--serif); font-size:1.2rem; line-height:1.3}
.seasonal-list p:last-child{margin-bottom:0}

/* Text-led home: a welcoming introduction, quiet rules and useful next steps. */
.home-intro{padding:4rem 0 3rem}
.home-intro .lede{max-width:36rem;margin-top:1.75rem}
.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem 1.8rem;margin-top:1.8rem;font-size:1rem}
.home-button{display:inline-flex;align-items:center;gap:1.5rem;min-height:48px;padding:.65rem 1.1rem;background:var(--lamp);color:var(--ink);text-decoration:none;font-weight:600;border:1px solid var(--lamp)}
.home-button:hover{background:#f3c67c;color:var(--ink)}
.home-story{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;padding:3.5rem 0 1.5rem}
.home-section-heading h2{margin:.5rem 0 1.5rem;font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem)}
.home-section-heading>a{font-size:.95rem}
.home-paths{padding-bottom:1rem}
.home-paths>h2{margin:0 0 1.6rem;font-weight:400;font-size:2rem}
.home-path{display:flex;align-items:baseline;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--paper)}
.home-path:last-child{border-bottom:1px solid var(--rule)}
.path-number{font-family:var(--sans);font-size:.8rem;color:var(--lamp)}
.home-path h3{margin:0 0 .4rem;font-family:var(--serif);font-size:1.35rem;font-weight:400}
.home-path p{margin:0;color:var(--paper-dim);font-size:1rem}
.path-arrow{margin-left:auto;color:var(--lamp);font-size:1.5rem}
.home-path:hover h3{text-decoration:underline;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--lamp);outline-offset:5px}
@media(max-width:40rem){
 .home-intro{padding:2.5rem 0 2rem}
 .home-title{font-size:clamp(3.5rem,15vw,6rem)}
 .home-tagline{font-size:clamp(.95rem,4.4vw,1.4rem);white-space:nowrap}
 .home-intro .lede{margin-top:1.5rem}
 .home-actions{gap:1rem 1.5rem}
  .home-story{grid-template-columns:1fr;gap:1.75rem;padding-top:2.5rem}
 .home-section-heading h2{margin-bottom:1rem}
 .home-path{gap:1rem}
 .home-paths>h2{font-size:1.8rem}
}

/* Keep the full opening sentence on one desktop line. */
.home-intro .lede{max-width:none}
.home-opening{white-space:nowrap}
.how-to-title{white-space:nowrap;font-size:clamp(1.65rem,4.8vw,3.4rem)}
.seasonal-list li{display:flex;gap:1rem;align-items:flex-start}
.seasonal-list .book-cover{flex-basis:6.5rem}
@media(max-width:48rem){.home-opening{font-size:clamp(.48rem,2.25vw,1.2rem);white-space:nowrap}}
@media(max-width:40rem){.site-head .brand{font-size:1rem}.nav{font-size:.9375rem;gap:.45rem}}
@media(max-width:22.5rem){.site-head .brand{font-size:.9375rem}.nav{font-size:.8125rem;gap:.3rem}}


/* A useful take-away without interrupting the guide. */
.planner-download{margin:2rem 0 2.5rem;padding:1.5rem 0;border-block:1px solid var(--rule)}
.planner-download h2{margin-top:0}
.planner-detail{font-family:var(--sans);font-size:.85rem;color:var(--paper-dim)}
.invitation{margin:2.5rem 0}
.invitation blockquote{margin:1.25rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--lamp)}
.invitation blockquote p{margin:.4rem 0}
@media print{
 body{background:white;color:#222;font-size:11pt}
 .site-head,.site-foot,.signup,.planner-download{display:none}
 a{color:inherit}.wrap,.measure{width:auto;max-width:none}
 .invitation blockquote{border-color:#777;break-inside:avoid}
}


.printable-plan{max-width:50rem}
.print-help{max-width:40rem;margin-bottom:2rem}
.plan-sheet{background:#fff;color:#222b36;padding:2.5rem;line-height:1.5}
.plan-brand{font-size:1.3rem;margin:0 0 .5rem}
.plan-sheet h1{font-size:2.2rem;margin:0 0 .6rem}
.plan-intro{padding-bottom:1rem;border-bottom:2px solid #ae792d}
.plan-sheet h2{font-size:1.35rem;margin:1.4rem 0 .6rem}
.plan-small,.plan-field,.plan-assignments,.plan-checks,.plan-home{font-family:var(--sans);font-size:.9rem}
.writing-line{display:block;border-bottom:1px solid #b6b0a5;height:1.6rem;margin-bottom:.8rem}
.plan-assignments{border-collapse:collapse;width:100%;text-align:left}
.plan-assignments th{font-weight:400;color:#515b65;padding:.3rem}
.plan-assignments td{height:2rem;border-bottom:1px solid #b6b0a5;width:50%}
.plan-assignments td+td,.plan-assignments th+th{border-left:1rem solid white}
.plan-checks{list-style:none;padding:0}
.plan-checks li{position:relative;padding-left:1.4rem;margin:.5rem 0}
.plan-checks li:before{content:"";position:absolute;left:0;top:.4em;width:.65rem;height:.65rem;border:1px solid #515b65}
.plan-home{margin-top:1.5rem;color:#515b65}.plan-home a{color:inherit}
@media(max-width:40rem){.plan-sheet{padding:1.25rem}.plan-sheet h1{font-size:1.8rem}}
@media print{
 @page{size:auto;margin:12mm}
 .print-help{display:none}
 .printable-plan{padding:0!important;margin:0;max-width:none}
 .plan-sheet{padding:0;font-size:10pt;line-height:1.4}
 .plan-brand{font-size:15pt;margin:0 0 5pt}
 .plan-sheet h1{font-size:25pt;margin:0 0 6pt}
 .plan-sheet h2{font-size:14pt;margin:12pt 0 5pt}
 .plan-intro{padding-bottom:8pt;margin:0 0 10pt}
 .plan-small,.plan-field,.plan-assignments,.plan-checks,.plan-home{font-size:9pt}
 .writing-line{height:16pt;margin-bottom:7pt}
 .plan-assignments td{height:22pt}
 .plan-checks li{margin:6pt 0}
 .plan-home{margin-top:16pt}
 .plan-sheet p{margin-top:6pt;margin-bottom:6pt}
}


/* Reader-first shortcuts stay optional and work without JavaScript. */
.reader-guide{margin-top:1.6rem;border-block:1px solid var(--rule);padding:.8rem 0}
.reader-guide summary{cursor:pointer;color:var(--lamp);font-size:1.15rem;padding:.3rem 0}
.reader-guide[open] summary{margin-bottom:.8rem}
.reader-guide ul{padding-left:1.25rem}
.reader-guide li{margin:1rem 0}
.reader-guide strong{font-weight:600}
.book-body h3[id]{scroll-margin-top:2rem}
.book-body h3:target{outline:2px solid var(--lamp);outline-offset:6px}
.reader-guide a{display:inline-block;padding-block:.15rem}