/* DW/Co. deliverable skin — maps the earlier Treasure-House-palette deliverables
   (sitemap.html, homepage-ia.html) onto the house system used by
   timeline.thedwco.com: Geist + Geist Mono, white / gray-50 / #141414, violet
   accent, shared-hairline grids, square corners.

   These two pages were authored against their own inline stylesheet in the
   client's cream/forest palette. Rather than rewrite their markup — which risks
   the content — this redefines the SAME class names in the house language, so
   the set reads as one body of work. Load after dwco.css. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--surface);color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;padding:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px 96px}
@media(max-width:640px){.wrap{padding:0 20px 64px}}

/* ── masthead ─────────────────────────────────────────────── */
header.mast{padding:72px 0 40px;border-bottom:1px solid var(--rule);margin-bottom:0}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  color:var(--ink);text-wrap:balance;max-width:20ch;font-family:'Geist',sans-serif}
.mast .sub{margin-top:18px;max-width:62ch;color:var(--body);font-size:17px;line-height:1.6}
.mast .sub b{color:var(--ink);font-weight:600}
.eyebrow{font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--label);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.meta span{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--label);border:1px solid var(--rule);border-radius:8px;padding:7px 12px;background:var(--surface)}
.meta span:first-child{background:var(--dark);color:#fff;border-color:var(--dark)}

/* ── sections ─────────────────────────────────────────────── */
section{padding:34px 0;border-bottom:1px solid var(--rule-soft)}
section:last-of-type{border-bottom:none}
h2{font-family:'Geist',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:600;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink);margin-bottom:0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sec-head .n{font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.1em}
.lede{max-width:66ch;color:var(--body);font-size:15px;margin-bottom:26px}
.lede b{color:var(--ink);font-weight:600}

/* ── tables ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;border:1px solid var(--rule);font-size:14px;border-radius:0}
th{font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--label);text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--muted-bg)}
td{padding:16px 18px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--body)}
tr:last-child td{border-bottom:none}
td b,.v b{color:var(--ink);font-weight:600}
.ok{color:var(--violet);font-weight:600}
.need{color:var(--red);font-weight:600}

/* ── blocks (homepage-ia) ─────────────────────────────────── */
.block{background:var(--surface);border:1px solid var(--rule);border-radius:0;margin-bottom:-1px;
  overflow:hidden;break-inside:avoid}
.block-head{display:flex;align-items:center;gap:13px;padding:16px 22px;background:var(--muted-bg);
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.num{font-family:'Geist Mono',monospace;font-weight:600;font-size:12px;color:#fff;background:var(--dark);
  width:26px;height:26px;border-radius:0;display:flex;align-items:center;justify-content:center;flex:none}
.block-head h3{font-family:'Geist',sans-serif;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.018em}
.aud{margin-left:auto;font-family:'Geist Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--surface);
  border:1px solid var(--rule);color:var(--label)}
.rows{padding:4px 22px 16px}
.row{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.row:last-child{border-bottom:none}
.row .k{font-family:'Geist Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);padding-top:3px}
.row .v{font-size:14px;color:var(--body)}
.row.claim .v{font-size:16px;color:var(--ink);font-weight:600;font-family:'Geist',sans-serif;letter-spacing:-.015em}
.owed{background:var(--muted-bg);border-top:1px solid var(--rule);border-left:2px solid var(--red);
  padding:13px 22px;font-size:13.5px;color:var(--body)}
.owed b{font-family:'Geist Mono',monospace;font-weight:500;text-transform:uppercase;font-size:10px;
  letter-spacing:.1em;color:var(--red);display:block;margin-bottom:4px}

/* ── callouts / legends ───────────────────────────────────── */
.callout{background:var(--muted-bg);border:1px solid var(--rule);border-left:2px solid var(--violet);
  border-radius:0;padding:24px;margin-top:24px}
.callout b{font-family:'Geist',sans-serif;font-weight:600;color:var(--ink);font-size:16px;
  display:block;margin-bottom:8px;letter-spacing:-.015em}
.callout p{font-size:14px;color:var(--body);max-width:76ch}
.legend,.legend-tree{display:flex;flex-wrap:wrap;gap:18px;background:var(--muted-bg);
  border:1px solid var(--rule);border-radius:0;padding:18px 22px;margin-bottom:20px}
.legend div,.legend-tree div,.legend span,.legend-tree span{font-size:13.5px;color:var(--body)}
.legend b,.legend-tree b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--label);display:block;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}

/* ── sitemap tree ─────────────────────────────────────────
   Ported faithfully from the original stylesheet — the connector geometry
   (::before verticals, ::after horizontals, the min-width scroller) is load
   bearing, and an earlier pass replaced it with a plain grid, which ran every
   child page name together into one string. Only the PALETTE is restyled:
   forest -> #141414, orange/brick "new" -> violet, teal "expanded" -> the
   gantt's account teal, cream -> gray-50. */
.treewrap{background:var(--surface);border:1px solid var(--rule);border-radius:0;
  padding:34px 18px 28px;overflow-x:auto}
.tree{min-width:840px}
.root{display:flex;justify-content:center;position:relative;padding-bottom:14px}
.root::after{content:'';position:absolute;bottom:0;left:50%;width:1px;height:14px;background:var(--rule)}
.node{border-radius:0;padding:11px 12px;text-align:center;font-family:'Geist',sans-serif;
  font-weight:600;line-height:1.25;border:1px solid var(--rule);background:var(--surface);
  letter-spacing:-.01em;font-size:13px;color:var(--ink)}
.node.home{background:var(--dark);color:#fff;border-color:var(--dark);font-size:16px;
  padding:14px 40px;letter-spacing:-.02em;font-weight:600}
.branches{display:flex;align-items:flex-start;justify-content:center}
.branch{position:relative;padding:32px 5px 0;flex:1 1 0;min-width:0;background:none}
.branch::before{content:'';position:absolute;top:0;left:50%;width:1px;height:32px;background:var(--rule)}
.branch::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
.branch:first-child::after{left:50%}
.branch:last-child::after{right:50%}
.node.top{font-size:13px;color:var(--ink);background:var(--muted-bg);border-color:var(--ink)}
.node.top.new{border-color:var(--violet);color:var(--violet);background:#F5F3FF}
.node.top.exp{border-color:#0F766E;color:#0F766E;background:#F0FDFA}
.node.top .badge{display:block;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:5px;font-weight:500;color:var(--violet);border:none;padding:0}
.node.top.exp .badge{color:#0F766E}
.kids{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.kids span{font-family:'Geist',sans-serif;font-weight:400;font-size:12px;color:var(--body);
  background:var(--muted-bg);border:1px solid var(--rule);border-radius:0;padding:7px 8px;
  text-align:center;line-height:1.3;letter-spacing:0;text-transform:none}
.kids span.star{background:#F5F3FF;border-color:var(--violet);color:var(--violet);font-weight:600}
.kids span.tmpl{border-style:dashed;color:var(--faint)}
.util{margin-top:28px;padding-top:22px;border-top:1px dashed var(--rule);
  display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.utilgroup{text-align:center}
.utilgroup h4{font-family:'Geist Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--label);margin-bottom:9px}
.utilgroup .kids{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:520px}
.legend-tree{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--body);
  background:none;border:none;padding:0}
.legend-tree i{font-style:normal;display:inline-block;width:12px;height:12px;border-radius:3px;
  vertical-align:-2px;margin-right:7px;border:2px solid}
.legend-tree .l-new i{border-color:var(--violet);background:#F5F3FF}
.legend-tree .l-exp i{border-color:#0F766E;background:#F0FDFA}
.legend-tree .l-keep i{border-color:var(--ink);background:var(--muted-bg)}

/* problem cards + open-questions list */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--surface);border:none;border-left:2px solid var(--violet);
  border-radius:0;padding:24px}
.card h3{margin-bottom:6px;font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.card p{font-size:14px;color:var(--body)}
ol.q{background:var(--surface);border:1px solid var(--rule);border-radius:0;padding:24px 26px 24px 44px}
ol.q li{margin-bottom:12px;font-size:14px;color:var(--body)}
ol.q li b{color:var(--ink);font-weight:600}
.badge,.tmpl,.new,.keep,.move,.add,.demote,.util,.star,.exp{border-radius:6px}
.expand{color:var(--violet)}

.legacy footer,footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--faint);letter-spacing:.08em;
  text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media print{
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  section,.block,.card,.branch{break-inside:avoid;page-break-inside:avoid}
  @page{margin:14mm}
}