/* How to Quit Teaching — howtoquitteaching.com
   Palette sampled from the printed cover. */

:root{
  --navy:#102133;
  --navy-soft:#1B3350;
  --orange:#DD5B27;
  --orange-deep:#B8461A;
  --cream:#FDF9F0;
  --paper:#FFFFFF;
  --gold:#FEDC95;
  --ink:#20272F;
  --ink-quiet:#55606C;
  --rule:#D8CFBE;
  --rule-dark:#2C4059;

  --display:"Archivo Black","Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:"Archivo",Helvetica,Arial,sans-serif;
  --prose:"Source Serif 4",Georgia,"Times New Roman",serif;

  --measure:36rem;
  --wide:71rem;
  --gap:clamp(3.5rem,7vw,7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--prose);font-size:clamp(1.0625rem,.42vw + .97rem,1.1875rem);
  line-height:1.62;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-deep);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.wrap{width:min(100% - 2.5rem,var(--wide));margin-inline:auto}
.narrow{max-width:var(--measure)}
.section{padding-block:var(--gap)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--navy);color:var(--cream);padding:.6rem 1rem}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.02;
  letter-spacing:-.015em;color:var(--navy);margin:0 0 .5em}
.h-xl{font-size:clamp(2.6rem,7.4vw,5.1rem)}
.h-lg{font-size:clamp(2rem,4.2vw,3.1rem)}
.h-md{font-size:clamp(1.45rem,2.2vw,1.95rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.005em}
p{margin:0 0 1.05em;max-width:var(--measure)}
.lede{font-size:clamp(1.2rem,1.1vw + .95rem,1.45rem);line-height:1.5;color:var(--navy-soft)}
.quiet{color:var(--ink-quiet)}
.tiny{font-family:var(--ui);font-size:.83rem;line-height:1.5;color:var(--ink-quiet)}

/* one accent word, matching the cover's single orange word */
.flame{color:var(--orange)}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--cream);position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.4rem}
.wordmark{font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:-.01em;color:var(--navy);
  text-decoration:none;line-height:1.15;display:block}
.wordmark span{color:var(--orange)}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{font-family:var(--ui);font-size:.95rem;color:var(--navy);text-decoration:none;padding:.35rem 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--orange)}
.nav a[aria-current=page]{border-bottom-color:var(--navy)}
.navtoggle{display:none;font-family:var(--ui);font-size:.95rem;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:.7rem 1rem;color:var(--navy);min-height:44px}
@media(max-width:44rem){
  .navtoggle{display:block}
  .nav{position:absolute;inset:4.4rem 0 auto;background:var(--cream);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 1.25rem 1.1rem}
  .nav a{padding:.85rem 0;width:100%;min-height:44px;display:flex;align-items:center}
  .nav[hidden]{display:none}
}

/* ---------- hero ---------- */
.hero-band{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 78%, rgba(254,220,149,.55) 0%, rgba(254,220,149,0) 58%),
    radial-gradient(80% 70% at 8% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    var(--cream);
  border-bottom:1px solid var(--rule)}
.hero{padding-block:clamp(2.8rem,6vw,5.4rem) clamp(2.5rem,5vw,4.2rem)}
.hero h1{max-width:14ch}
.hero .lede{max-width:40ch;margin-top:1.3rem}
.hero-grid{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center}
@media(min-width:56rem){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.hero-cover{justify-self:center}
.hero-cover img{width:min(100%,20.5rem);border-radius:3px;transform:rotate(-1.6deg);
  box-shadow:0 34px 60px -26px rgba(16,33,51,.55), 0 8px 20px rgba(16,33,51,.16),
             0 0 0 1px rgba(16,33,51,.06)}
.hero .actions{margin-top:1.9rem}
.hero .fork{margin-top:clamp(2.6rem,5vw,3.4rem)}

/* the fork: two roads, deliberately equal weight */
.fork{display:grid;gap:0;border-top:2px solid var(--navy);margin-top:clamp(2.5rem,5vw,3.6rem)}
@media(min-width:48rem){.fork{grid-template-columns:1fr 1fr}}
.road{padding:1.7rem 0 1.9rem;border-bottom:1px solid var(--rule)}
@media(min-width:48rem){
  .road{padding:1.9rem 2.4rem 2.2rem 0}
  .road + .road{padding-left:2.4rem;border-left:1px solid var(--rule)}
}
.road h2{font-size:1.28rem;margin-bottom:.55rem}
.road p{margin-bottom:0;font-size:1.02rem;color:var(--ink-quiet)}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;align-items:center}
.btn{font-family:var(--ui);font-weight:600;font-size:1rem;line-height:1;
  display:inline-block;padding:1rem 1.5rem;border-radius:2px;text-decoration:none;border:2px solid var(--navy)}
.btn-primary{background:var(--navy);color:var(--cream)}
.btn-primary:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-ghost{background:transparent;color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--cream)}
.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* ---------- navy band ---------- */
/* BUG FIX: labels and primary buttons inherited navy and vanished on navy panels */
.band label{color:var(--cream)}
.band .consent label{color:#D5DCE4}
.band .btn-primary{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.band .btn-primary:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.band .btn-ghost{color:var(--cream);border-color:#5A6E88}
.band .btn-ghost:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.band .status{color:var(--gold);border-color:var(--gold)}

.band{background:var(--navy);color:#E9E3D6}
.band h2,.band h3{color:var(--cream)}
.band p{color:#CFD6DE}
.band a{color:var(--gold)}
.band .rule{border-color:var(--rule-dark)}

/* ---------- pulled line from the book ---------- */
.line{border-top:2px solid var(--orange);border-bottom:1px solid var(--rule);
  padding:1.8rem 0;margin:0}
.line p{font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.16;
  color:var(--navy);max-width:22ch;margin:0}
.line cite{display:block;font-family:var(--ui);font-style:normal;font-size:.82rem;
  color:var(--ink-quiet);margin-top:.9rem}
.band .line p{color:var(--cream)}
.band .line{border-bottom-color:var(--rule-dark)}

/* ---------- ledger: aligned rows, not cards ---------- */
.ledger{border-top:1px solid var(--rule);margin:2rem 0 0;padding:0;list-style:none}
.ledger li{border-bottom:1px solid var(--rule);padding:1.15rem 0;
  display:grid;gap:.15rem .9rem}
@media(min-width:44rem){.ledger li{grid-template-columns:8.5rem 1fr;align-items:baseline}}
.ledger b{font-family:var(--ui);font-weight:600;font-size:.94rem;color:var(--navy)}
.ledger span{color:var(--ink-quiet);font-size:1.02rem}
.band .ledger,.band .ledger li{border-color:var(--rule-dark)}
.band .ledger b{color:var(--gold)}
.band .ledger span{color:#CFD6DE}

/* ---------- chapter list ---------- */
.chapters{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule)}
.chapters li{border-bottom:1px solid var(--rule);padding:1rem 0;display:grid;gap:.1rem .95rem}
@media(min-width:40rem){.chapters li{grid-template-columns:2.6rem 1fr}}
.chapters .num{font-family:var(--display);font-weight:900;font-size:1.05rem;color:var(--orange);line-height:1.35}
.chapters .t{font-family:var(--ui);font-weight:600;color:var(--navy);font-size:1.04rem}
.chapters .d{grid-column:1/-1;color:var(--ink-quiet);font-size:.99rem}
@media(min-width:40rem){.chapters .d{grid-column:2}}

/* ---------- resource status ---------- */
.res{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--rule)}
.res li{border-bottom:1px solid var(--rule);padding:1.25rem 0}
.res h3{margin:0 0 .3rem;font-family:var(--ui);font-weight:600;font-size:1.06rem;
  color:var(--navy);letter-spacing:0;line-height:1.3}
.res p{margin:0;color:var(--ink-quiet);font-size:1rem;max-width:52ch}
.status{font-family:var(--ui);font-size:.75rem;font-weight:600;color:var(--orange-deep);
  display:inline-block;margin-bottom:.45rem;border:1px solid var(--orange);border-radius:2px;
  padding:.16rem .5rem;line-height:1.4}

/* ---------- figures ---------- */
figure{margin:2.6rem 0}
figure img{border:1px solid var(--rule);background:#fff}
figcaption{font-family:var(--ui);font-size:.85rem;color:var(--ink-quiet);margin-top:.7rem;max-width:48ch}
.fig-narrow img{max-width:min(26rem,100%)}

/* ---------- book spread ---------- */
.spread{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:52rem){.spread{grid-template-columns:minmax(0,15.5rem) minmax(0,1fr)}}
.spread img{box-shadow:0 14px 34px rgba(16,33,51,.16)}

/* ---------- forms ---------- */
form{max-width:34rem;margin-top:1.8rem}
.field{margin-bottom:1.15rem}
label{display:block;font-family:var(--ui);font-size:.92rem;font-weight:600;color:var(--navy);margin-bottom:.35rem}
input,textarea,select{width:100%;font:inherit;font-size:1rem;padding:.75rem .8rem;
  border:1px solid #B9AF9C;border-radius:2px;background:#fff;color:var(--ink)}
textarea{min-height:9rem;resize:vertical}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start}
.consent input{width:1.15rem;height:1.15rem;margin-top:.22rem}
.consent label{font-weight:400;font-family:var(--prose);font-size:.98rem;color:var(--ink-quiet)}
.band input,.band textarea{border-color:#3B506B}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#B9C4D1;padding-block:3.2rem 2.6rem;font-family:var(--ui);font-size:.92rem}
.foot a{color:var(--gold)}
.foot .cols{display:grid;gap:2rem}
@media(min-width:44rem){.foot .cols{grid-template-columns:1.4fr 1fr 1fr}}
.foot h3{font-family:var(--ui);font-weight:700;font-size:.85rem;color:#fff;margin:0 0 .7rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.15rem}
.foot li a{display:inline-block;padding:.5rem 0;min-height:24px}
.foot .legal{border-top:1px solid var(--rule-dark);margin-top:2.4rem;padding-top:1.4rem;
  font-size:.82rem;color:#8E9BAA;max-width:60ch}
.foot .qr{width:5.5rem;background:#fff;padding:.4rem;border-radius:2px}

hr.rule{border:0;border-top:1px solid var(--rule);margin:var(--gap) 0 0}

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


/* ---------- book strip: cover + one line + buy ---------- */
.bookstrip{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  border-top:2px solid var(--navy);padding-top:2.2rem;margin-top:var(--gap)}
@media(min-width:42rem){.bookstrip{grid-template-columns:9.5rem 1fr}}
.bookstrip img{width:9.5rem;border-radius:2px;
  box-shadow:0 16px 30px -14px rgba(16,33,51,.45), 0 0 0 1px rgba(16,33,51,.07)}
.bookstrip h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:.4rem}
.bookstrip p{margin-bottom:1.1rem;color:var(--ink-quiet)}
.band .bookstrip{border-top-color:var(--gold)}
.band .bookstrip p{color:#CFD6DE}

/* softer sectioning so the page has rhythm rather than flat cream */
.section-paper{background:linear-gradient(180deg,#FFFDF8 0%,var(--cream) 100%);
  border-block:1px solid var(--rule)}

/* small lifts */
.btn{transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.nav a{transition:border-color .16s ease}
figure img{border-radius:2px;box-shadow:0 10px 26px -18px rgba(16,33,51,.5)}