/* KWL Data Book — shared styling, atlas/Edition-B register.
   Self-contained: works served or opened from file://. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Archivo:wght@400..900&family=JetBrains+Mono:wght@300..700&display=swap");

:root{
  --ink:#211B16; --ink-2:#3A322B; --ink-3:#6E645C;
  --paper:#F4EFE6; --paper-2:#ECE5D7;
  --wine:#6E1F2E; --gold:#C9A227; --deep:#14110E;
  --ok:#1F6F50; --warn:#C75B12; --bad:#9A2C1B;
  --line:rgba(33,27,22,.14); --line-2:rgba(33,27,22,.34);
  --f-display:'Fraunces',serif; --f-sans:'Archivo',sans-serif; --f-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:radial-gradient(120% 80% at 50% 0%,#F8F3E9 0%,#F4EFE6 45%,#E9E0CE 100%);
  color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
body::before{
  content:'';position:fixed;inset:-10%;pointer-events:none;z-index:200;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a{color:inherit;}
::selection{background:var(--wine);color:var(--paper);}

/* masthead */
.mast{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 32px;border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.mast .wm{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:.02em;text-transform:none;}
.mast nav{display:flex;gap:20px;flex-wrap:wrap;}
.mast nav a{color:var(--ink-3);border-bottom:2px solid transparent;padding-bottom:3px;transition:color .2s,border-color .2s;}
.mast nav a:hover,.mast nav a.here{color:var(--wine);border-color:var(--wine);}

/* hero */
.hero{padding:64px 32px 40px;max-width:1500px;margin:0 auto;border-bottom:1px solid var(--line-2);}
.hero .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);margin-bottom:14px;}
.hero h1{font-family:var(--f-display);font-weight:300;font-size:clamp(42px,7vw,104px);line-height:.92;letter-spacing:-.02em;}
.hero h1 em{font-style:italic;color:var(--wine);}
.hero .lede{margin-top:22px;max-width:74ch;font-size:16px;line-height:1.7;color:var(--ink-2);}
.hero .lede b{color:var(--ink);}

.wrap{max-width:1500px;margin:0 auto;padding:48px 32px 100px;}
section{margin-bottom:64px;scroll-margin-top:70px;}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line-2);padding-bottom:10px;margin-bottom:24px;}
.sec-head .n{font-family:var(--f-display);font-style:italic;font-weight:300;font-size:34px;color:var(--wine);}
.sec-head h2{font-family:var(--f-display);font-weight:300;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;}
.sec-head .tag{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.sec-intro{max-width:80ch;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:26px;}
.sec-intro b{color:var(--ink);}

/* tables */
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line-2);}
tbody tr:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);}
td b{color:var(--ink);}
td .mono,.mono{font-family:var(--f-mono);font-size:11px;}
.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);}

/* status + priority pills */
.pill{display:inline-block;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid;white-space:nowrap;}
.pill.ok{color:var(--ok);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);}
.pill.warn{color:var(--warn);border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent);}
.pill.bad{color:var(--bad);border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent);}
.pill.p1{color:var(--wine);border-color:var(--wine);background:color-mix(in srgb,var(--wine) 10%,transparent);}
.pill.p2{color:var(--gold);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);}
.pill.p3{color:var(--ink-3);border-color:var(--ink-3);}

/* source cards */
.src{border:1px solid var(--line-2);background:color-mix(in srgb,var(--paper) 70%,#fff);margin-bottom:30px;scroll-margin-top:70px;}
.src-head{display:flex;align-items:baseline;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent);}
.src-head .sn{font-family:var(--f-display);font-style:italic;font-size:30px;color:var(--wine);line-height:1;}
.src-head h3{font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:-.01em;}
.src-head .fam{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.src-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.src-body{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.src-body .full{grid-column:1/-1;}
.lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin-bottom:10px;display:block;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12.5px;}
.kv dt{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;}
.kv dd{color:var(--ink-2);}
.attr{font-size:12px;line-height:1.7;}
.attr code{font-family:var(--f-mono);font-size:11px;background:color-mix(in srgb,var(--ink) 6%,transparent);padding:1px 5px;border-radius:2px;}
.tax{font-family:var(--f-mono);font-size:11.5px;line-height:1.9;color:var(--ink-2);white-space:pre;overflow-x:auto;}
.insight{border-left:3px solid var(--wine);padding:4px 0 4px 16px;font-size:13px;line-height:1.65;}
.insight .v{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-3);}
.insight .v b{color:var(--wine);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;}
.uniq{font-size:12.5px;line-height:1.7;color:var(--ink-2);background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding:14px 16px;}
.uniq b{color:var(--ink);}

/* callout */
.callout{border:1px solid var(--line-2);border-left:4px solid var(--wine);padding:20px 24px;background:color-mix(in srgb,var(--paper) 60%,#fff);margin:24px 0;}
.callout h4{font-family:var(--f-display);font-weight:500;font-size:19px;margin-bottom:8px;}
.callout p{font-size:13.5px;line-height:1.7;color:var(--ink-2);}
.callout p+p{margin-top:10px;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.card{border:1px solid var(--line-2);padding:20px;background:color-mix(in srgb,var(--paper) 70%,#fff);}
.card h4{font-family:var(--f-display);font-weight:500;font-size:18px;margin-bottom:8px;}
.card .big{font-family:var(--f-display);font-weight:300;font-size:40px;color:var(--wine);line-height:1;margin-bottom:6px;}
.card p{font-size:12.5px;line-height:1.65;color:var(--ink-2);}

.foot{border-top:1px solid var(--line-2);padding:30px 32px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1500px;margin:0 auto;}

@media(max-width:880px){
  .src-body{grid-template-columns:1fr;}
  .grid2,.grid3{grid-template-columns:1fr;}
  .mast nav{display:none;}
  .wrap{padding:32px 18px 80px;}
}