/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the front door's own furniture. Loaded after cc.css.
   Ported from notes/mockups/redesign-2026-08/a-darkroom.html.
   ───────────────────────────────────────────────────────────────────────── */

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{padding-top:62px; position:relative}
/* Top aligned, not bottom aligned. The two columns are different lengths and
   bottom alignment pushed the headline down to meet the panel's foot, so the
   page opened on a band of empty space with the release panel floating in it
   and the sentence the site is about starting halfway down. Aligning the tops
   puts the headline and the panel's first rule on the same line. */
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:64px; align-items:start}
.kicker{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.kicker .lbl{color:var(--sig)}
.kicker .ln{flex:1; height:1px; background:var(--rule-2); max-width:180px}

h1{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(34px,4.5vw,70px); line-height:1.02; letter-spacing:-.012em;
}
h1 em{font-style:italic; color:var(--sig)}
h1 .br{display:block}

.deck{margin-top:26px; max-width:56ch; font-size:18px; line-height:1.6; color:var(--ink-2); font-weight:300}
.deck b{color:var(--ink); font-weight:500}

/* ── latest-release panel ───────────────────────────────────────────── */
/* The register mark in its top-left corner is the site's one recurring
   ornament: two hairlines, drawn over the border rather than inside it. */
.feat{border:1px solid var(--rule-2); padding:22px 22px 20px; background:var(--bg-2); position:relative; display:block; transition:border-color .2s var(--ease)}
.feat:hover{border-color:var(--sig-dim)}
.feat::before{content:""; position:absolute; top:-1px; left:-1px; width:26px; height:1px; background:var(--sig)}
.feat::after{content:""; position:absolute; top:-1px; left:-1px; width:1px; height:26px; background:var(--sig)}
.feat .lbl{color:var(--ink-3); margin-bottom:14px; display:block}
.feat .vnum{font-family:"Instrument Serif",serif; font-size:54px; line-height:.95; letter-spacing:-.02em; color:var(--ink)}
.feat .vdate{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:10px}
.feat .tr{
  margin-top:16px; font-size:16px; color:var(--ink-2); line-height:1.5; font-weight:300;
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.feat .split{display:flex; gap:26px; margin-top:20px; padding-top:16px; border-top:1px solid var(--rule)}
.feat .split div{flex:1}
.feat .split .n{font-family:"Instrument Serif",serif; font-size:32px; line-height:1; color:var(--ink); display:block}
.feat .split .n.hot{color:var(--sig)}
.feat .split .u{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:7px; line-height:1.5}
.feat .go{margin-top:18px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sig); display:flex; align-items:center; gap:8px}
.feat .go span{transition:transform .2s var(--ease)}
.feat:hover .go span{transform:translateX(4px)}

/* ── scale strip ────────────────────────────────────────────────────── */
/* The outer edges stay flush with the text column above, so the inner cells
   buy their breathing room from the rules and the end cells do not. */
.strip{margin-top:76px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:repeat(4,1fr)}
.strip div{padding:26px 26px 24px; border-right:1px solid var(--rule)}
.strip div:first-child{padding-left:0}
.strip div:last-child{padding-right:0; border-right:0}
.strip .n{font-family:"Instrument Serif",serif; font-size:52px; line-height:.9; letter-spacing:-.02em}
.strip .n.hot{color:var(--sig)}
.strip .lbl{display:block; margin-top:12px}

/* ── the hero's top entries ─────────────────────────────────────────── */
/* Beside the panel, not inside it: the panel is itself one link. */
.picks{border:1px solid var(--rule); border-top:0; padding:16px 22px 18px; background:var(--bg-2)}
.picks .lbl{display:block; margin-bottom:12px}
.picks ol{list-style:none; counter-reset:t}
.picks li{counter-increment:t; display:flex; gap:12px; font-size:15px; line-height:1.45; color:var(--ink-2); font-weight:300; padding:7px 0; border-top:1px solid var(--rule)}
.picks li:first-child{border-top:0; padding-top:0}
.picks li::before{content:counter(t); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--ink-4); padding-top:4px}
.picks a{border-bottom:1px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease)}
.picks a:hover{color:var(--ink); border-bottom-color:var(--sig)}

/* ── cadence chart and the running totals ───────────────────────────── */
.charts{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; margin-top:30px; align-items:start}
/* `min-width:0` and a scroll of its own because ApexCharts will not draw
   itself below 300px and simply renders a 300px canvas into whatever box it is
   given. Under about 340px viewport that box is narrower than 300, so without
   this the chart pushed the whole document sideways and every page below it
   scrolled: a 31px horizontal scroll on the front page at 320px, measured
   2026-08-16. The chart scrolls inside its own frame instead. */
.chart{border:1px solid var(--rule); background:var(--bg-2); padding:14px 10px 6px; min-height:260px; min-width:0; overflow-x:auto}
.chart .fallback{padding:22px 14px; font-size:11.5px; letter-spacing:.04em; color:var(--ink-3)}
.chart .fallback p+p{margin-top:8px}
/* Apex writes its own <text> colours from the options; these two it does not. */
.chart .apexcharts-tooltip{border:1px solid var(--rule-2) !important; border-radius:0 !important; box-shadow:none !important; background:var(--bg-2) !important; color:var(--ink) !important}
.chart .apexcharts-tooltip-title{background:var(--raise) !important; border-bottom:1px solid var(--rule) !important; color:var(--ink-2) !important; font-family:"JetBrains Mono",ui-monospace,monospace}

.totals{border-top:1px solid var(--rule-2); padding-top:18px}
.totals .lbl{display:block; margin-bottom:16px}
.tot{padding:12px 0; border-bottom:1px solid var(--rule)}
.tot .n{font-family:"Instrument Serif",serif; font-size:44px; line-height:.9; letter-spacing:-.02em; display:block}
.tot .n.hot{color:var(--sig)}
.tot .u{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:9px}
.caveat{margin-top:16px; font-size:14px; line-height:1.5; color:var(--ink-3); font-weight:300}

/* ── the ledger ─────────────────────────────────────────────────────── */
/* The row itself is in cc.css: the archive wears the same one. */
section{padding-top:82px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  /* The totals stop being a column beside the chart and become a block under it. */
  .charts{grid-template-columns:1fr; gap:26px}
  /* Two per row, so the flush edge belongs to whichever cell ends up on it. */
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div{border-right:1px solid var(--rule); padding-left:26px; padding-right:26px}
  .strip div:nth-child(odd){padding-left:0}
  .strip div:nth-child(even){padding-right:0; border-right:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--rule)}
}

@media(max-width:860px){
  .hero{padding-top:38px}
  .hero-grid{gap:34px}
  .kicker{margin-bottom:18px}
  .deck{font-size:16.5px; margin-top:20px}
  .feat{padding:18px 18px 16px}
  .feat .vnum{font-size:44px}
  .feat .split{gap:14px}
  .feat .split .n{font-size:26px}
  .feat .split .u{font-size:9px; letter-spacing:.1em}
  .picks{padding:14px 18px 16px}
  .charts{gap:30px}
  .strip{margin-top:46px}
  .strip div{padding:18px 16px}
  .strip .n{font-size:38px}
  section{padding-top:52px}
}

/* The scale strip is the one place a four-up grid genuinely cannot survive:
   at this width two 38px serif numerals per row still collide. */
@media(max-width:430px){
  .strip{grid-template-columns:1fr}
  .strip div{padding:15px 0; border-right:0; border-top:1px solid var(--rule)}
  .strip div:first-child{border-top:0}
  .strip .n{font-size:34px}
}