/* ============================================================
   Little Red Comes Home — site.css
   v1.4.0
   No external dependencies. No webfonts. No trackers.
   ============================================================ */

:root{
  --paper:#F6F1E6;
  --paper-2:#FFFDF7;
  --ink:#16211D;
  --forest:#1D3A30;
  --thread:#AF272F;
  --thread-deep:#8E1F26;
  --moss:#5A6960;
  --rosemary:#E7EDE7;
  --rule:#DAD2C2;

  --measure:36rem;
  --gutter:3.25rem;
  --shell:49rem;

  --step--1:0.8125rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.75rem;
  --step-5:clamp(2.75rem,7vw,4.5rem);

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--forest);color:#fff;padding:.75rem 1rem;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--thread);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- quick exit ---------- */
.quickexit{
  position:fixed;right:.75rem;bottom:.75rem;z-index:60;
  background:var(--forest);color:#fff;text-decoration:none;
  font-size:var(--step--1);font-weight:800;letter-spacing:.01em;
  padding:.6rem .85rem;border:1px solid #0E1F19;
  box-shadow:0 2px 10px rgba(22,33,29,.25);
}
.quickexit span{font-weight:400;opacity:.8;font-size:.6875rem}
.quickexit:hover{background:#152A23;color:#fff}
@media(max-width:46rem){.quickexit span{display:none}}
@media print{.quickexit{display:none}}

.panel--exit{border-left:4px solid var(--forest);background:var(--rosemary);border-color:#C6D4C8}
kbd{
  font-family:var(--sans);font-size:.75rem;font-weight:700;
  border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;background:#fff;
}

/* ---------- crisis bar ---------- */
.crisis{
  background:var(--forest);
  color:#EEF3EF;
  font-size:var(--step--1);
  border-bottom:2px solid var(--thread);
}
.crisis a{
  display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
  max-width:var(--shell);margin:0 auto;padding:.7rem 1.25rem;
  color:#EEF3EF;text-decoration:none;
}
.crisis a:hover .crisis__cta,.crisis a:focus .crisis__cta{text-decoration-thickness:2px}
.crisis__label{font-weight:800;letter-spacing:.02em}
.crisis__cta{text-decoration:underline;text-underline-offset:3px;color:#F3C7C0}

/* ---------- masthead ---------- */
.masthead{
  max-width:var(--shell);margin:0 auto;padding:1.5rem 1.25rem .75rem;
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:baseline;
  justify-content:space-between;
}
.wordmark{
  display:flex;align-items:flex-start;gap:.7rem;
  font-family:var(--serif);
  font-size:var(--step-1);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark .mark{width:2.35rem;height:2.35rem;flex:0 0 auto;color:var(--thread);margin-top:-.1rem}
.wordmark__t{display:block}
.wordmark small{
  display:block;
  font-family:var(--sans);
  font-size:.5625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--moss);
  margin-top:.35rem;
}
.footmark{display:block;margin-bottom:.9rem}
.footmark .mark{width:2.1rem;height:2.1rem;color:#E9A79B;display:block}
.progmark{margin-bottom:1rem}
.progmark .markwolf{width:3.4rem;height:3.4rem;color:var(--ink);display:block}
@media(max-width:46rem){
  .wordmark .mark{width:2rem;height:2rem}
  .progmark .markwolf{width:2.8rem;height:2.8rem}
}
@media print{.wordmark .mark{color:#000}}
.nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:var(--step--1)}
.nav a{color:var(--forest);text-decoration:none;padding:.15rem 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--thread)}
.nav a[aria-current="page"]{border-bottom-color:var(--thread);font-weight:700}

/* ---------- thread layout ---------- */
.page{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 1.25rem 5rem;
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
}
.thread{
  position:relative;
  grid-column:1;
}
.thread svg{
  position:sticky;top:0;
  width:100%;height:100vh;
  display:block;
  overflow:visible;
}
.thread path{
  fill:none;
  stroke:var(--thread);
  stroke-width:1.25;
  opacity:.55;
}
.flow{grid-column:2;min-width:0;max-width:var(--measure)}
.flow.wide{max-width:none}

/* ---------- node markers ---------- */
.node{
  position:relative;
  margin:3.25rem 0 1rem;
}
.node::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--gutter) / 2 - 5px);
  top:.62em;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--thread);
  box-shadow:0 0 0 4px var(--paper);
}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.015em;margin:0}
h1{font-size:var(--step-5);margin:.15em 0 .5rem}
h2{font-size:var(--step-3);margin:0 0 .65rem}
h3{font-size:var(--step-1);font-weight:700;margin:2rem 0 .4rem}
p{margin:0 0 1.05rem}
.lede{font-size:var(--step-1);line-height:1.5;color:#2C3A34}
.eyebrow{
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:var(--thread);margin:0 0 .9rem;
}
.eyebrow--quiet{color:var(--moss)}

/* the book's own voice */
.voice{
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--step-2);
  line-height:1.45;
  color:var(--forest);
  margin:1.5rem 0;
  padding-left:1.1rem;
  border-left:2px solid var(--thread);
}
.voice p{margin:0 0 .5rem}
.voice p:last-child{margin:0}
.voice--plain{border-left:0;padding-left:0;text-align:center}

a{color:var(--thread-deep);text-underline-offset:2px}
a:hover{color:var(--thread)}

ul,ol{margin:0 0 1.05rem;padding-left:1.15rem}
li{margin:.3rem 0}
li::marker{color:var(--moss)}

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

small,.small{font-size:var(--step--1);color:var(--moss)}

/* ---------- hero ---------- */
.hero{padding:2.5rem 0 1rem}
.hero h1{max-width:12ch}

/* ---------- the three steps ---------- */
.steps{margin:2rem 0 1rem;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);
  gap:.25rem 1.25rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}
.step dt{
  font-family:var(--sans);font-weight:800;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--thread);
}
.step dd{margin:0}

/* ---------- panels ---------- */
.panel{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:1.4rem 1.5rem;
  margin:1.75rem 0;
}
.panel > :last-child{margin-bottom:0}
.panel--green{background:var(--rosemary);border-color:#C6D4C8}
.panel--draft{border-left:4px solid var(--thread);background:#FBF1EE;border-color:#E8CCC6}
.panel--verify{
  background:#FFF8E1;border:2px dashed #B8892A;
}
.panel--verify .eyebrow{color:#8A6318}

.principle{
  font-family:var(--serif);
  font-size:var(--step-2);
  line-height:1.35;
  text-align:center;
  color:var(--forest);
  border-top:1px solid var(--thread);
  border-bottom:1px solid var(--thread);
  padding:1.75rem 1rem;
  margin:2.5rem 0;
}
.principle strong{display:block;margin-top:.4rem;font-weight:700}

/* ---------- say-this blocks (crisis page) ---------- */
.say{
  font-family:var(--serif);
  font-size:var(--step-2);
  color:var(--forest);
  background:var(--rosemary);
  border-left:3px solid var(--forest);
  padding:.85rem 1.1rem;
  margin:.6rem 0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);font-weight:700;font-size:var(--step--1);
  letter-spacing:.02em;
  padding:.7rem 1.1rem;
  background:var(--forest);color:#fff;text-decoration:none;
  border:1px solid var(--forest);
  margin:.25rem .4rem .25rem 0;
}
.btn:hover{background:#16302708;background-color:#152A23;color:#fff}
.btn--ghost{background:transparent;color:var(--forest);border-color:#9DB0A3}
.btn--ghost:hover{background:var(--rosemary);color:var(--forest)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:1.5rem 0}
table{width:100%;border-collapse:collapse;font-size:var(--step--1);background:var(--paper-2)}
th,td{text-align:left;vertical-align:top;padding:.7rem .75rem;border-bottom:1px solid var(--rule)}
th{
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moss);background:#EFEADD;font-weight:800;
}

/* ---------- link list ---------- */
.linklist{list-style:none;padding:0;margin:1.25rem 0}
.linklist li{border-bottom:1px solid var(--rule);margin:0}
.linklist a{
  display:block;padding:.85rem 0;text-decoration:none;color:var(--ink);
}
.linklist a:hover .linklist__t{text-decoration:underline;text-decoration-color:var(--thread)}
.linklist__t{font-family:var(--serif);font-size:var(--step-1);display:block}
.linklist__d{font-size:var(--step--1);color:var(--moss);display:block;margin-top:.15rem}

/* ---------- footer ---------- */
.foot{
  background:var(--forest);color:#CFDBD3;
  font-size:var(--step--1);line-height:1.6;
  padding:3rem 1.25rem 3.5rem;
}
.foot__in{max-width:var(--shell);margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.foot h2{font-size:var(--step-0);color:#fff;margin-bottom:.5rem}
.foot a{color:#F3C7C0}
.foot ul{list-style:none;padding:0}
.foot .legal{
  max-width:var(--shell);margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid #35564A;color:#9FB3A7;font-size:.75rem;
}

/* ---------- utilities ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack-lg{margin-top:3rem}

/* ---------- responsive ---------- */
@media (max-width:46rem){
  :root{--gutter:1.6rem}
  .page{grid-template-columns:var(--gutter) minmax(0,1fr);padding-bottom:3rem}
  .flow{max-width:none}
  .node::before{left:calc(-1 * var(--gutter) / 2 - 5px)}
  .step{grid-template-columns:1fr;gap:.2rem}
  .masthead{padding-bottom:1rem}
}

@media (prefers-reduced-motion:no-preference){
  .thread path{
    stroke-dasharray:2400;
    stroke-dashoffset:2400;
    animation:draw 2.4s ease-out .2s forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0}}
}

@media print{
  .crisis,.nav,.thread{display:none}
  .page{display:block;padding:0}
  body{background:#fff;font-size:11pt}
  .foot{background:#fff;color:#000}
  .foot a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}