/* Bring the Baggage — bringthebaggage.com
   Design direction: the porch light. Dark field, one warm source, low.
   Sourced from the book's own visual world (ch 19, the road at night),
   not from a template. Deliberately single-theme: this site is a lit
   window, and a light-mode version of that is not the same object. */

:root{
  --field:      #0C0E11;   /* the dark */
  --field-2:    #14171B;   /* raised surface */
  --ink:        #E6E2D7;   /* warm paper white */
  --ink-2:      #9AA096;   /* quiet */
  --ink-3:      #6D736A;   /* quietest */
  --light:      #C79C57;   /* the porch light */
  --light-warm: #FFD98A;   /* the filament */
  --rule:       #262B31;
  --measure:    34em;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--field);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:300;
  line-height:1.7;
  margin:0;
  padding:0 28px;
  -webkit-font-smoothing:antialiased;
}

main{max-width:var(--measure);margin:0 auto}

/* ---------- type ---------- */

h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0;
}

h1{font-size:clamp(2.4rem,7vw,3.6rem);font-variation-settings:"SOFT" 20,"WONK" 1}
h2{font-size:clamp(1.5rem,4vw,2rem);margin:0 0 16px}
h3{font-size:1.2rem;margin:0 0 10px}

p{margin:0 0 1.3em}
p:last-child{margin-bottom:0}

a{color:var(--light);text-decoration:none;border-bottom:1px solid rgba(199,156,87,.35)}
a:hover,a:focus-visible{border-bottom-color:var(--light)}
a:focus-visible{outline:2px solid var(--light);outline-offset:3px}

strong{font-weight:500;color:#F2EEE3}
em{font-style:italic}

.label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--light);
  display:block;
}

.quiet{color:var(--ink-2)}
.small{font-size:.92rem;line-height:1.6}

/* ---------- the light ---------- */

.lamp{
  width:8px;height:8px;border-radius:50%;
  background:var(--light-warm);
  box-shadow:
    0 0 12px 5px rgba(255,203,110,.85),
    0 0 40px 18px rgba(255,183,72,.36),
    0 0 100px 48px rgba(255,170,60,.16);
  margin:0 auto;
}

/* background-IMAGE, not the background shorthand. The shorthand resets
   background-color to transparent and wipes the dark ground body sets,
   which renders the whole page white with near-invisible text. */
.field{
  position:relative;
  background-image:
    radial-gradient(46% 30% at 50% 100%, rgba(255,196,92,.16) 0%, rgba(255,178,70,.05) 42%, rgba(0,0,0,0) 74%);
  background-repeat:no-repeat;
}

/* ---------- layout ---------- */

.hero{
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:96px 0 72px;
  gap:34px;
}

.hero .sub{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--light);
  max-width:24ch;
  line-height:1.4;
  margin:0;
}

section{padding:64px 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}

.stack{display:flex;flex-direction:column;gap:22px}

.doors{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:38px 0}

.door{
  background:var(--field-2);
  padding:26px 28px;
  display:block;
  border:0;
  color:var(--ink);
  transition:background 150ms ease;
}
.door:hover,.door:focus-visible{background:#191D22;border:0}
.door .t{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;color:var(--light);
  display:block;margin-bottom:6px}
.door .d{color:var(--ink-2);font-size:.96rem;line-height:1.55;display:block}

footer{
  border-top:1px solid var(--rule);
  padding:44px 0 88px;
  color:var(--ink-3);
  font-size:.82rem;
  line-height:1.7;
}
footer a{color:var(--ink-2);border-bottom-color:rgba(154,160,150,.3)}

/* ---------- tonight page ---------- */

body.tonight{background:#08090B;font-size:22px}
.tonight main{max-width:26em;padding:12vh 0 18vh}

/* The safety net. Deliberately at the foot and deliberately quiet.
   Steve's call 2026-08-20: a page that opens with a hotline tells the reader
   what you think he is. This is a net, not a diagnosis. */
.safety{margin:3.4em 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.safety p{font-size:.9rem;line-height:1.65;color:var(--ink-3);margin:0}
.safety a{color:var(--ink-2);border-bottom-color:rgba(154,160,150,.35)}
.safety a:hover,.safety a:focus-visible{color:var(--light);border-bottom-color:var(--light)}

.tonight p{margin:0 0 1.5em}
.tonight .big{font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600;
  line-height:1.28;color:#F2EEE3;margin:0 0 1.2em}

/* ---------- reading ---------- */

.reading{max-width:33em}
.reading h1{font-size:clamp(2rem,6vw,2.9rem);margin-bottom:10px}
.reading .rule{width:64px;height:2px;background:var(--light);margin:28px 0 44px}
.reading p{margin:0 0 1.35em}
.reading .brk{display:flex;justify-content:center;gap:14px;margin:42px 0}
.reading .brk span{width:5px;height:5px;border-radius:50%;background:var(--rule)}

.wk{margin:0 0 46px}
.wk .label{margin-bottom:10px}
.wk h2{font-size:1.35rem;margin:0 0 18px;color:#F2EEE3}

.after{
  border:1px solid var(--rule);background:var(--field-2);
  padding:28px 30px;margin-top:56px;
}

/* ---------- the book: contents page and chapter pages ---------- */

/* One quiet indicator, no animation. A person reading nineteen chapters on a
   phone wants to know how far in they are. That is the whole brief. */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:5;
  background:rgba(38,43,49,.6)}
.progress i{display:block;height:100%;width:0;background:var(--light)}

.bookbar{
  max-width:33em;margin:0 auto;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:26px 0 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
}
.bookbar a{color:var(--ink-3);border-bottom:0}
.bookbar a:hover,.bookbar a:focus-visible{color:var(--light)}
.bookbar .where{color:var(--ink-3)}

.reading{padding-top:44px}
.reading .label{margin-bottom:18px}

/* prev / next */
.chapnav{
  display:flex;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:64px 0 0;
}
.chapnav > *{flex:1 1 0;min-width:0;background:var(--field-2);padding:22px 24px}
.chapnav a{border:0;color:var(--ink);transition:background 150ms ease}
.chapnav a:hover,.chapnav a:focus-visible{background:#191D22}
.chapnav .next{text-align:right}
.chapnav .dir{
  display:block;margin-bottom:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.chapnav .t{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.02rem;line-height:1.25;color:var(--light)}

/* contents */
.contents .stack{margin-bottom:40px}

/* display:block beats the hidden attribute, so the empty card renders on a
   first visit unless this is here. Caught on the render, not in the source. */
.resume[hidden]{display:none}

.resume{
  display:block;border:0;background:var(--field-2);
  border-left:2px solid var(--light);
  padding:20px 24px;margin:0 0 40px;color:var(--ink);
}
.resume:hover,.resume:focus-visible{background:#191D22;border-bottom:0}
.resume .t{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.05rem;color:var(--light);margin-bottom:4px}
.resume .d{display:block;color:var(--ink-2);font-size:.92rem}

.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{
  display:flex;align-items:baseline;gap:18px;border-bottom:0;
  padding:17px 4px;color:var(--ink);transition:background 150ms ease;
}
.toc a:hover,.toc a:focus-visible{background:var(--field-2)}
.toc .n{
  flex:0 0 2.2em;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;
}
.toc .tt{flex:1 1 auto;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.06rem;line-height:1.3;color:var(--ink)}
.toc a:hover .tt,.toc a:focus-visible .tt{color:var(--light)}
.toc .tt em{display:block;font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-style:normal;font-size:.78rem;color:var(--ink-3);margin-top:3px;
  letter-spacing:.02em}
.toc .rt{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;color:var(--ink-3);letter-spacing:.06em;
}

.toc .part{padding:38px 4px 14px;border-bottom:1px solid var(--rule)}
.toc .part .label{margin-bottom:8px}
.toc .part .pt{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.3rem;color:#F2EEE3;line-height:1.15}
.toc .part .pb{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.55;
  margin-top:7px}

@media (max-width:560px){
  body{font-size:18px;padding:0 22px}
  body.tonight{font-size:20px}
  .hero{min-height:70vh;padding:64px 0 52px}
  .crisis .num{font-size:2.8rem}
  .bookbar{padding-top:20px}
  .reading{padding-top:34px}
  .chapnav{flex-direction:column}
  .chapnav .next{text-align:left}
  .toc a{gap:14px;padding:15px 2px}
  .toc .rt{display:none}
}

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