:root {
  --bg: #0b0c0a; --surface: #141511; --surface-2: #1b1c17; --line: #2a2b24;
  --text: #f0ede4; --soft: #c9c5b9; --muted: #96958d;
  --amber: #e2ae4f; --amber-bright: #ffc560; --on-amber: #1a1408;
  --builders: #ffc560; --owners: #7ccf8a; --storm: #ff7a59; --convenience: #7cb8ff;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --bg: #f6f3ea; --surface: #fffdf7; --surface-2: #efebe0; --line: #ddd7c8;
  --text: #15160f; --soft: #3c3b33; --muted: #6f6d63;
  --amber: #a8711a; --amber-bright: #e2ae4f;
  --builders: #a8711a; --owners: #2f8a43; --storm: #c4441f; --convenience: #2a6fc4;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); }

/* Masthead */
.mast { border-bottom: 1px solid var(--line); padding: 18px 0 30px; background: radial-gradient(700px 260px at 50% -40%, rgba(226,174,79,.16), transparent 70%); }
.mast-sm { padding: 14px 0; }
.mast-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.mast-tools { display: flex; gap: 6px; }
.tool-link { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 13px; color: var(--soft); }
.tool-link:hover { color: var(--text); border-color: var(--amber); }
.by { color: var(--muted); text-decoration: none; }
.logo, .logo-xl { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.logo { font-size: 24px; }
.logo-xl { font-size: clamp(46px, 9vw, 104px); line-height: 1; margin: 26px 0 14px; }
.logo i, .logo-xl i { width: .2em; height: .2em; border-radius: 4px; background: var(--amber); box-shadow: 0 0 20px var(--amber); flex: none; }
.tagline { max-width: 62ch; font-size: clamp(17px, 2vw, 20px); color: var(--soft); margin: 0; }

/* Edition timeline */
.edition { padding-top: 34px; }
.edition-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.edition-head h2 { font-family: var(--serif); font-size: 28px; margin: 0; }
.next-drop { margin: 0; color: var(--amber); font-weight: 700; }
.slots { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.slot { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); min-height: 108px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.slot time { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.slot span { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.slot:hover { border-color: var(--amber); }
.slot.next { border-style: dashed; border-color: var(--amber); }
.slot.next span, .slot.later span { color: var(--muted); }
@media (max-width: 900px) { .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lane filter */
.lanes { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 8px; }
.chip { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--soft); }
.chip:hover { border-color: var(--amber); color: var(--text); }
.chip.active { background: var(--amber-bright); border-color: var(--amber-bright); color: var(--on-amber); }

/* Feed */
.lane-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lane, var(--amber)); }
[data-lane-c='builders'], .lane-builders { --lane: var(--builders); }
[data-lane-c='owners'], .lane-owners { --lane: var(--owners); }
[data-lane-c='storm'], .lane-storm { --lane: var(--storm); }
[data-lane-c='convenience'], .lane-convenience { --lane: var(--convenience); }
.lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; padding: 26px 0 30px; border-bottom: 1px solid var(--line); text-decoration: none; }
.lead:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lead h2 { font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; margin: 8px 0 12px; }
.lead .dek { font-size: 19px; color: var(--soft); margin: 0 0 16px; }
.lead ul { margin: 0; padding-left: 18px; color: var(--soft); }
.cover { border-radius: 18px; min-height: 260px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line);
  background: radial-gradient(420px 220px at 85% 10%, color-mix(in srgb, var(--lane) 30%, transparent), transparent 70%), var(--surface); }
.cover .big { font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1; color: var(--lane); }
.cover .src { font-size: 13px; color: var(--muted); }
@media (max-width: 820px) { .lead { grid-template-columns: 1fr; } .cover { min-height: 170px; order: -1; } }
.day { font-family: var(--serif); font-size: 24px; margin: 38px 0 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 14px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; border-top: 3px solid var(--lane); transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-2px); }
.card h3 { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin: 0; }
.card p { margin: 0; color: var(--soft); font-size: 15px; }
.card .meta { margin-top: auto; font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.empty { padding: 40px 0; color: var(--soft); }

.how { padding-top: 56px; padding-bottom: 40px; }
.how h2 { font-family: var(--serif); font-size: 28px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.how-grid div { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); }
.how-grid p { margin: 6px 0 0; color: var(--soft); font-size: 15px; }
.foot { border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 14px; color: var(--muted); }

/* Article page */
.article { max-width: 760px; padding-top: 28px; padding-bottom: 50px; }
.back { font-size: 14px; color: var(--muted); text-decoration: none; }
.kicker { margin: 26px 0 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.when { font-size: 13px; color: var(--muted); }
.headline { font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); line-height: 1.06; letter-spacing: -0.02em; margin: 10px 0 14px; }
.article .dek { font-size: 21px; color: var(--soft); margin: 0 0 20px; }
.meta-row { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.score b { color: var(--lane); }
.article h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 12px; }
.why { margin: 28px 0; padding: 22px 24px; border-radius: 16px; background: var(--surface); border-left: 4px solid var(--lane); }
.why ul { margin: 0; padding-left: 20px; } .why li { margin: 6px 0; }
.body p { font-size: 19px; line-height: 1.7; margin: 0 0 18px; font-family: var(--serif); }
.moves { margin: 34px 0; display: grid; gap: 12px; }
.move { padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.move b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.move p { margin: 4px 0 0; }
.sources ol { padding-left: 20px; } .sources li { margin: 4px 0; }
.cta { margin-top: 36px; padding: 24px; border-radius: 16px; text-align: center; border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line)); background: radial-gradient(400px 160px at 50% 0%, rgba(226,174,79,.14), transparent 70%), var(--surface); }
.cta p { font-family: var(--serif); font-size: 22px; margin: 0 0 14px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 12px; background: var(--amber-bright); color: var(--on-amber); font-weight: 800; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }