/* Erin's Quilt — pattern page */
:root{
  --paper:#FBF9F4; --ink:#26303C; --muted:#6C7684; --rule:#E3DED2;
  --card:#FFFDF8; --accent:#6F5088; --accent2:#2B3A4C; --band:#F3EFE5;
  --maxw:1180px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#171A1F; --ink:#E6E3DC; --muted:#9AA3AE; --rule:#2E343D;
         --card:#1D2127; --accent:#B99CCB; --accent2:#9FC3B6; --band:#20242B; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:1.5rem}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%; height:auto}

/* ---------- hero ---------- */
.hero{background:var(--band); border-bottom:1px solid var(--rule); padding:4rem 1.25rem 0}
.hero-in{max-width:760px; margin:0 auto; text-align:center}
.eyebrow{font-family:var(--sans); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 .6rem}
h1{font-size:clamp(2.6rem,7vw,4rem); line-height:1.05; margin:0 0 .6rem; letter-spacing:-.02em}
.lede{font-size:1.15rem; color:var(--muted); margin:0 auto 2.2rem; max-width:34em}
.painting{margin:0}
.painting img{border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 44px rgba(0,0,0,.14)}
.painting figcaption,figure figcaption{
  font-family:var(--sans); font-size:.82rem; color:var(--muted);
  margin-top:.85rem; line-height:1.5}
.swatches{display:flex; margin:2.5rem 0 0; height:16px}
.swatches i{flex:1; background:var(--c)}

/* ---------- layout ---------- */
.layout{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:3.5rem; align-items:start}
main{min-width:0; padding:3.5rem 0 4rem; max-width:66ch}
.toc{position:sticky; top:1.5rem; padding:3.5rem 0 0; font-family:var(--sans)}
.toc-h{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .9rem; font-weight:600}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t}
.toc li{counter-increment:t; margin-bottom:.15rem}
.toc a{display:block; padding:.3rem 0 .3rem 1.9rem; position:relative;
  font-size:.85rem; line-height:1.35; color:var(--muted); text-decoration:none;
  border-radius:4px}
.toc a::before{content:counter(t,decimal-leading-zero); position:absolute; left:0;
  font-size:.7rem; color:var(--rule); font-variant-numeric:tabular-nums; top:.42rem}
.toc a:hover{color:var(--accent)}
.toc-note{font-size:.75rem; color:var(--muted); margin-top:1.6rem; line-height:1.5;
  padding-top:1rem; border-top:1px solid var(--rule)}

/* ---------- headings & text ---------- */
section{margin-bottom:4.5rem}
h2{font-size:1.9rem; line-height:1.15; letter-spacing:-.015em; margin:0 0 1.2rem;
  padding-top:1.6rem; border-top:2px solid var(--ink)}
h2 .n{display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.16em;
  color:var(--accent); font-weight:600; margin-bottom:.5rem}
h3{font-family:var(--sans); font-size:1.02rem; letter-spacing:-.005em;
  margin:2.2rem 0 .7rem; line-height:1.3}
p{margin:0 0 1.1rem}
b,strong{font-weight:600}
a{color:var(--accent)}
ul,ol{margin:0 0 1.1rem; padding-left:1.3rem}
li{margin-bottom:.5rem}
.sub{font-family:var(--sans); font-size:.83rem; color:var(--muted); line-height:1.55}
.note{border-left:3px solid var(--accent); padding:.1rem 0 .1rem 1rem; color:var(--muted);
  font-size:.95rem}

/* ---------- figures ---------- */
figure{margin:2rem 0}
figure.wide img{width:100%; background:var(--card); border-radius:4px}
figure.wide img[src$="hst.svg"],figure.wide img[src$="motifs.svg"]{background:none}
figure.split{max-width:420px}
figure.split img{width:100%}
figure.wide img[src$="quilt.svg"]{box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 34px rgba(0,0,0,.1)}

/* ---------- fact grid ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:5px; overflow:hidden; margin:0 0 2rem}
.facts div{background:var(--card); padding:1rem 1.1rem}
.facts b{display:block; font-size:1.22rem; letter-spacing:-.01em}
.facts span{display:block; font-family:var(--sans); font-size:.76rem; color:var(--muted);
  margin-top:.2rem; line-height:1.4}

/* ---------- panels ---------- */
.panel{background:var(--card); border:1px solid var(--rule); border-radius:6px;
  padding:1.3rem 1.5rem; margin:2rem 0}
.panel h3{margin-top:0}
.panel>:last-child{margin-bottom:0}
.panel.warn{border-left:4px solid var(--accent)}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 2.5rem}
.two h3:first-child{margin-top:1rem}

/* ---------- rules list ---------- */
.rules{list-style:none; padding:0; margin:1rem 0}
.rules li{background:var(--paper); border:1px solid var(--rule); border-radius:5px;
  padding:.7rem .95rem; margin-bottom:.5rem; font-size:.95rem}
.rules span{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.15rem}

/* ---------- steps ---------- */
ol.steps{list-style:none; padding:0; counter-reset:s; margin:1.2rem 0}
ol.steps li{counter-increment:s; position:relative; padding-left:2.6rem;
  margin-bottom:.95rem}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:.05rem;
  width:1.75rem; height:1.75rem; border-radius:50%; background:var(--accent);
  color:#fff; font-family:var(--sans); font-size:.8rem; font-weight:600;
  display:grid; place-items:center}

/* ---------- tables ---------- */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2rem 0}
.tbl{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.87rem;
  margin:1.2rem 0; line-height:1.45}
.tbl th,.tbl td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--rule);
  vertical-align:top}
.tbl thead th{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:1.5px solid var(--ink);
  padding-bottom:.5rem}
.tbl thead th .sub{display:block; font-size:.66rem; letter-spacing:.04em;
  text-transform:none; opacity:.8; margin-top:.1rem}
.tbl tbody th{font-weight:600; white-space:nowrap}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl thead .num{text-align:right}
.tbl .small{font-size:.8rem; color:var(--muted)}
.tbl tr.tot th,.tbl tr.tot td{border-top:1.5px solid var(--ink); border-bottom:none;
  font-weight:600}
.tbl tr.hi{background:var(--band)}
.tbl tr.hi td{font-weight:600}
.sw{display:inline-block; width:11px; height:11px; border-radius:2px; background:var(--c);
  margin-right:.5rem; border:1px solid rgba(0,0,0,.16); vertical-align:baseline}

/* row-by-row assembly table */
.rows td.u{text-align:center; padding:.45rem .2rem; min-width:62px}
.rows td.u span{display:block; font-size:.62rem; color:var(--muted); margin-top:.28rem;
  line-height:1.25}
.rows .ic{display:block; margin:0 auto; border-radius:1px}
.rows thead th.num{text-align:center}
.rows tbody th{font-size:.8rem; position:sticky; left:0; background:var(--paper)}

/* ---------- checklist ---------- */
ul.check{list-style:none; padding:0; margin:.8rem 0 0}
ul.check li{margin-bottom:.1rem}
ul.check label{display:flex; gap:.7rem; align-items:baseline; font-family:var(--sans);
  font-size:.88rem; padding:.4rem .5rem; border-radius:5px; cursor:pointer}
ul.check label:hover{background:var(--band)}
ul.check input{margin:0; accent-color:var(--accent); color-scheme:light; width:16px; height:16px;
  position:relative; top:2px; flex:none}
ul.check input:checked+*,
ul.check label:has(input:checked){color:var(--muted); text-decoration:line-through;
  text-decoration-color:var(--rule)}

/* ---------- definition lists ---------- */
.faq,.gloss{margin:1.2rem 0}
.faq dt{font-weight:600; margin-top:1.4rem}
.faq dd{margin:.35rem 0 0; color:var(--muted)}
.gloss{display:grid; grid-template-columns:auto; gap:0}
.gloss dt{font-family:var(--sans); font-size:.85rem; font-weight:600; margin-top:1.1rem}
.gloss dd{margin:.2rem 0 0; font-size:.95rem; color:var(--muted)}

footer{border-top:1px solid var(--rule); padding:2rem 1.25rem 3rem; text-align:center}
footer p{font-family:var(--sans); font-size:.8rem; color:var(--muted); margin:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:0}
  .toc{position:static; padding:2.5rem 0 0; border-bottom:1px solid var(--rule);
    padding-bottom:1.5rem}
  .toc ol{columns:2; column-gap:1.5rem}
  .toc-note{display:none}
  main{padding-top:2.5rem}
  .hero{padding-top:2.5rem}
}
@media (max-width:560px){
  body{font-size:17px}
  .toc ol{columns:1}
  .two{gap:0}
}

/* ---------- print ---------- */
@media print{
  :root{--paper:#fff; --card:#fff; --band:#fff; --ink:#000; --muted:#444; --rule:#bbb}
  body{font-size:10.5pt}
  .toc,.checklist{display:none}
  footer{border-top:1px solid var(--rule); padding:1rem 0 0; text-align:left}
  .layout{display:block; max-width:none; padding:0}
  main{max-width:none; padding:0}
  .hero{padding:0 0 1rem; border:none}
  .painting img{box-shadow:none}
  section{page-break-inside:auto; margin-bottom:2rem}
  h2{page-break-after:avoid; font-size:15pt; padding-top:1rem}
  h3{page-break-after:avoid}
  figure,table,.panel,ol.steps li{page-break-inside:avoid}
  a{color:inherit; text-decoration:none}
  footer a::after{content:" (" attr(href) ")"; word-break:break-all}
}