/* Layout: a school notebook. Seyès ruling and a red margin line frame each page head; content sits in one column (cards in a 2-col grid when wide). Tabs are notebook dividers. */
:root{
  --paper:#f6f7fb; --panel:#ffffff; --ink:#1c2757; --ink-soft:#56608a; --rule:#d3d9ee; --margin:#c4313b; --blue:#2c64b4; --mark:#bcc3db; --grid:#e6e9f4;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --f-body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-data:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s-cap:.8rem; --s-body:1.02rem; --s-h3:1.12rem; --s-h2:1.6rem; --s-h1:clamp(2rem,5vw,3.3rem);
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#0f1329; --panel:#161b36; --ink:#e7eaf8; --ink-soft:#a2aad0; --rule:#252c52; --margin:#ff6f72; --blue:#7fb1ff; --mark:#3b4370; --grid:#232a4d; color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0f1329; --panel:#161b36; --ink:#e7eaf8; --ink-soft:#a2aad0; --rule:#252c52; --margin:#ff6f72; --blue:#7fb1ff; --mark:#3b4370; --grid:#232a4d; color-scheme:dark}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--s-body); line-height:1.55}
a{color:var(--blue)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.wrap{max-width:70rem; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-.01em}
.cap{font-family:var(--f-data); font-size:var(--s-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.num{font-family:var(--f-data); font-variant-numeric:tabular-nums}

/* top bar */
.bar{border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:env(safe-area-inset-top, 0px); z-index:20}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem}
.brand{font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.55rem}
.brand i{width:.7rem; height:1.1rem; border-left:2px solid var(--margin); border-right:2px solid var(--margin)}
.bar .wrap{flex-wrap:wrap}
.bar nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem 1rem; font-family:var(--f-data); font-size:var(--s-cap)}
.bar nav a{color:var(--ink-soft); text-decoration:none}
.bar nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--margin); text-underline-offset:4px}

/* notebook head */
.seyes{background-color:var(--paper);
  background-image:linear-gradient(90deg, transparent calc(2.2rem - 1px), var(--margin) calc(2.2rem - 1px), var(--margin) 2.2rem, transparent 2.2rem),
  repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);
  border-bottom:1px solid var(--rule)}
.seyes .wrap{padding-block:2.6rem 2rem}
.seyes .in{padding-left:3.2rem; display:flex; flex-direction:column; gap:.9rem}
.seyes h1{font-size:var(--s-h1); line-height:1.05; max-width:22ch}
.lede{max-width:62ch; color:var(--ink-soft); margin:0; font-size:1.1rem}
@media (max-width:520px){.seyes .in{padding-left:2.4rem} .seyes{background-image:linear-gradient(90deg, transparent calc(1.4rem - 1px), var(--margin) calc(1.4rem - 1px), var(--margin) 1.4rem, transparent 1.4rem), repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem)}}

main{padding-block:2rem 4rem}
.stack{display:flex; flex-direction:column; gap:2rem}

/* home */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap:1rem; counter-reset:st}
.step{border-top:2px solid var(--ink); padding-top:.7rem}
.step b{font-family:var(--f-display); display:block; margin-bottom:.2rem}
.step p{margin:0; color:var(--ink-soft); font-size:.95rem}
.acard{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.2rem; align-items:end; background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:1.4rem; text-decoration:none; color:inherit}
.acard:hover{border-color:var(--ink-soft)}
.acard h3{font-size:1.45rem; margin:.3rem 0 .5rem}
.acard p{margin:0; color:var(--ink-soft); max-width:60ch}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem}
.chip{font-family:var(--f-data); font-size:.72rem; border:1px solid var(--rule); border-radius:99px; padding:.15rem .55rem; color:var(--ink-soft)}
.go{font-family:var(--f-display); font-weight:700; color:var(--margin); white-space:nowrap}
@media (max-width:560px){.acard{grid-template-columns:1fr}}

/* tabs */
.tabs{display:flex; gap:.25rem; border-bottom:1px solid var(--rule); overflow-x:auto}
.tabs a{font-family:var(--f-display); font-weight:500; text-decoration:none; color:var(--ink-soft); padding:.6rem 1rem; border:1px solid transparent; border-bottom:none; border-radius:var(--r) var(--r) 0 0; white-space:nowrap; position:relative; top:1px}
.tabs a[aria-selected="true"]{color:var(--ink); background:var(--paper); border-color:var(--rule); box-shadow:inset 0 3px 0 var(--margin)}
.meta{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.meta div{display:flex; flex-direction:column}
.meta b{font-family:var(--f-data); font-weight:500; font-size:.9rem}

/* cards and charts */
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap:1rem}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:1.2rem; position:relative; min-width:0}
.card h3{font-size:var(--s-h3)}
.card .note{font-size:.88rem; color:var(--ink-soft); margin:.25rem 0 .9rem}
.sec-h{display:flex; flex-direction:column; gap:.3rem}
.sec-h h2{font-size:var(--s-h2)}
.sec-h p{margin:0; color:var(--ink-soft); max-width:65ch}
.chart{min-height:200px}
.chart svg{display:block; overflow:visible}
.chart text{font-family:var(--f-data); font-size:11px; fill:var(--ink-soft)}
.chart text.hl{fill:var(--ink); font-weight:500}
.sw{display:inline-block; width:.65rem; height:.65rem; border-radius:2px; margin-right:.3rem; vertical-align:baseline}
.tip{position:absolute; pointer-events:none; background:var(--panel); border:1px solid var(--rule); border-radius:8px; box-shadow:0 6px 20px rgba(10,15,40,.18); padding:.35rem .6rem; font-family:var(--f-data); font-size:.75rem; z-index:5; white-space:nowrap}
.tip .h{color:var(--ink-soft); margin-bottom:.1rem}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap:1rem}
.kpi{border-top:2px solid var(--ink); padding-top:.6rem}
.kpi .v{font-family:var(--f-display); font-size:2.1rem; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi .d{font-family:var(--f-data); font-size:var(--s-cap); color:var(--ink-soft)}
.kpi .d em{font-style:normal; color:var(--margin)}
.cta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; border:1px dashed var(--ink-soft); border-radius:var(--r); padding:1rem 1.2rem}
.cta p{margin:0; max-width:60ch; color:var(--ink-soft)}
.btn{font-family:var(--f-display); font-weight:700; background:var(--ink); color:var(--paper); text-decoration:none; padding:.6rem 1rem; border-radius:8px; white-space:nowrap; border:0; cursor:pointer; font-size:.95rem}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}

/* tables */
.tbox{overflow:auto; max-height:24rem; border:1px solid var(--rule); border-radius:8px}
table{border-collapse:collapse; width:100%; font-family:var(--f-data); font-size:.78rem; font-variant-numeric:tabular-nums}
th,td{padding:.35rem .6rem; border-bottom:1px solid var(--grid); text-align:left; white-space:nowrap}
th{position:sticky; top:0; background:var(--panel); font-weight:500; color:var(--ink-soft)}
th button{all:unset; cursor:pointer}
td.r, th.r{text-align:right}
.search{width:100%; box-sizing:border-box; font:inherit; font-family:var(--f-data); font-size:.85rem; padding:.55rem .7rem; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); margin-bottom:.7rem}
@media (max-width:560px){.hide-s{display:none}}

/* sources */
.cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap:.15rem 1.2rem; font-size:.9rem; margin:.6rem 0 1rem; padding:0; list-style:none}
.cols li{display:flex; gap:.5rem; align-items:baseline; min-width:0}
.cols code{font-family:var(--f-data); font-size:.76rem; color:var(--ink)}
.cols span{color:var(--ink-soft); font-size:.85rem}
.files tr[aria-expanded] td:first-child{color:var(--blue); cursor:pointer}
.preview td{background:var(--paper)}

/* insights */
.ins{display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 1rem; padding-block:1.4rem; border-top:1px solid var(--rule)}
.ins .n{font-family:var(--f-display); font-weight:700; font-size:1.6rem; color:var(--margin); text-align:right; line-height:1.2}
.ins h3{font-size:1.3rem; margin-bottom:.4rem}
.ins p{margin:0 0 .5rem; max-width:66ch}
.ins .fig{font-family:var(--f-data); font-weight:500; background:linear-gradient(transparent 62%, color-mix(in srgb, var(--margin) 22%, transparent) 62%)}
.ins .lnk{font-family:var(--f-data); font-size:var(--s-cap)}
.group-h{font-family:var(--f-display); font-size:var(--s-h2); margin-top:1rem}
.method{font-size:.92rem; color:var(--ink-soft); max-width:70ch}
.method p{margin:0 0 .6rem}
footer{border-top:1px solid var(--rule); padding-block:1.5rem; font-family:var(--f-data); font-size:var(--s-cap); color:var(--ink-soft)}
@media (prefers-reduced-motion: no-preference){.view{animation:fade .35s ease-out} @keyframes fade{from{opacity:.4; transform:translateY(4px)} to{opacity:1; transform:none}}}