:root {
  color-scheme: dark;
  --bg: #121416;
  --panel: #1b1e20;
  --ink: #f6f2e9;
  --quiet: #b8bbb8;
  --line: #35393a;
  --accent: #eccb93;
  --serif: "Instrument Serif", Georgia, serif;
  font-family: "DM Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.6; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wrap { width: min(100% - 2rem, 65rem); margin-inline: auto; }
.skip { position: fixed; inset: .5rem auto auto .5rem; z-index: 5; background: var(--bg); padding: .65rem; transform: translateY(-160%); }
.skip:focus { transform: none; }
.masthead { border-bottom: 1px solid var(--line); }
.bar, .section-head, .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bar { min-height: 4.15rem; }
.brand, .nav-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; }
.brand { font-weight: 700; }
.brand-mark { display: grid; place-items: center; border: 1px solid #867353; border-radius: .45rem; width: 2rem; height: 2rem; color: var(--accent); font-family: var(--serif); }
.nav-link, .footer { color: var(--quiet); font-size: .875rem; }
.nav-link:hover, .footer a:hover { color: var(--accent); }
.hero { isolation: isolate; position: relative; overflow: hidden; margin-block: 1.5rem 2.8rem; border: 1px solid #3d3b33; border-radius: 1.1rem; background: radial-gradient(ellipse at 92% 39%, #463725, #24241f 40%, #1a1d1d 76%); }
.hero-copy { position: relative; z-index: 1; padding: clamp(1.4rem, 6vw, 4rem); max-width: 45rem; }
.eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(3.35rem, 10vw, 7.15rem); line-height: .92; letter-spacing: -.025em; margin-block: .95rem 1.15rem; }
h1 em { color: var(--accent); }
.intro { color: #d9d9ce; max-width: 36ch; font-size: clamp(.95rem, 2vw, 1.125rem); }
.art { pointer-events: none; position: absolute; right: -8%; top: -31%; width: clamp(19rem, 46vw, 37rem); aspect-ratio: 1; opacity: .24; transform: rotate(-26deg); }
.art i { position: absolute; inset: var(--ring); border: 1px solid #d4a969; border-radius: 50% / 46%; box-shadow: 0 0 1.4rem #ad80562e; }
.art i:nth-child(1) { --ring: 0%; }
.art i:nth-child(2) { --ring: 5%; }
.art i:nth-child(3) { --ring: 10%; }
.art i:nth-child(4) { --ring: 15%; }
.art i:nth-child(5) { --ring: 20%; }
.art i:nth-child(6) { --ring: 25%; }
.art i:nth-child(7) { --ring: 30%; }
#digest, #sources { scroll-margin-top: 1.2rem; }
h2 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1; }
.section-head { margin-bottom: 1rem; }
#read-count { color: var(--quiet); white-space: nowrap; font-size: .88rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 0 1.25rem; }
.filters button { color: var(--quiet); background: var(--bg); border: 1px solid var(--line); border-radius: 2rem; padding: .45rem .85rem; font-size: .85rem; min-height: 44px; cursor: pointer; transition: color .16s, background-color .16s, border-color .16s; }
.filters button:hover { border-color: var(--accent); color: var(--ink); }
.filters button[aria-pressed="true"] { color: #282115; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.stories { display: grid; gap: .85rem; align-items: start; }
.story, .empty { min-width: 0; padding: clamp(1.1rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); overflow-wrap: anywhere; }
.story.featured { background: linear-gradient(135deg, #262523, var(--panel) 68%); border-color: #544a3c; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; color: var(--quiet); font-size: .8rem; }
.badge { display: inline-block; padding: .17rem .52rem; border-radius: .35rem; font-size: .71rem; font-weight: 700; }
.badge.youtube { background: #462e2c; color: #ffc4bb; }
.badge.blog { background: #343e30; color: #d2e8bd; }
.badge.social { background: #32384a; color: #d8dfff; }
h3 { margin-block: .6rem .55rem; font-size: clamp(1.8rem, 4.5vw, 2.75rem); line-height: 1.04; }
details { margin-top: .6rem; border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: .88rem; font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { width: .55rem; height: .55rem; margin: .3rem; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .18s; }
details[open] summary span { transform: rotate(225deg); }
.story ul { display: grid; gap: .5rem; margin: 0 0 1rem; padding-inline-start: 1.2em; list-style: disc; color: #dedfd9; max-width: 70ch; }
.story li::marker { color: var(--accent); }
.practice { border-left: 2px solid #a78454; padding: .7rem .85rem; border-radius: 0 .45rem .45rem 0; background: #b88c4813; }
.practice h4 { color: var(--accent); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.practice p { color: #dedfd9; margin-top: .2rem; max-width: 70ch; }
.original { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .3rem; color: var(--accent); font-size: .875rem; font-weight: 700; }
.original:hover { text-decoration: underline; }
.empty p, #filter-empty { color: var(--quiet); }
#sources { margin-top: 3.3rem; }
.source-links { display: grid; gap: .65rem; margin-top: 1rem; }
.source-links a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; background: #191b1d; border: 1px solid var(--line); border-radius: .65rem; transition: border-color .16s; }
.source-links a:hover { border-color: var(--accent); }
.source-links a > span:last-child { color: var(--accent); }
.source-links small { display: block; color: var(--quiet); font-size: .72rem; }
.footer { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-block: 1rem max(1.2rem, env(safe-area-inset-bottom)); font-size: .77rem; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (min-width: 44rem) {
  .wrap { width: min(100% - 4rem, 65rem); }
  .hero { margin-top: 2.15rem; }
  .art { opacity: .64; }
  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { grid-column: 1 / -1; }
  .source-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Field dossier presentation */
:root {
  --bg: #0d1110;
  --panel: #141a16;
  --ink: #f1f3e9;
  --quiet: #aeb9ae;
  --line: #303b32;
  --accent: #d4e69f;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
.brand { font: 600 .78rem var(--mono); text-transform: uppercase; letter-spacing: .065em; }
.brand-mark { border-color: #70804f; border-radius: .16rem; font: 600 .8rem var(--mono); }
.navigation { display: flex; align-items: center; gap: clamp(.55rem, 2.8vw, 1.3rem); }
.nav-link { font-size: .78rem; }
.refresh-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  gap: .35rem; padding: .35rem .58rem; border: 1px solid #74834e; border-radius: .22rem;
  font: 500 .69rem var(--mono); color: var(--accent); white-space: nowrap;
}
.refresh-button:hover { background: #d4e69f; color: #192316; }
.hero {
  border-color: #435140; border-radius: .45rem;
  background: radial-gradient(ellipse at 92% 39%, #2b3828, #1b251e 42%, #131a17 80%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#c2dc9a10 1px, transparent 1px), linear-gradient(90deg, #c2dc9a10 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(95deg, transparent 10%, #000 85%);
}
.eyebrow { font-family: var(--mono); letter-spacing: .09em; }
.eyebrow span { border-radius: 1px; box-shadow: 0 0 12px #d4e69fa3; }
.art { transform: none; opacity: .32; }
.art i { border-color: #bfd78b; border-radius: 50%; box-shadow: none; }
.art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 49.8%, #bfd78b 50%, transparent 50.2%),
              linear-gradient(transparent 49.8%, #bfd78b 50%, transparent 50.2%);
}
.story, .empty, .source-links a { border-radius: .4rem; }
.story.featured { background: linear-gradient(135deg, #20291f, var(--panel) 68%); border-color: #465642; }
.badge, #read-count, .story-meta time { font-family: var(--mono); }
.filters button { border-radius: .22rem; }
.filters button[aria-pressed="true"] { color: #192316; }
.practice { background: #bdd68b0e; border-color: #9daa69; }
.source-links a { background: #131914; }
.refresh-help { margin-top: 3.3rem; }
.refresh-help p { color: var(--quiet); margin-top: .6rem; max-width: 58ch; }
@media (max-width: 375px) {
  .brand { font-size: .65rem; gap: .4rem; }
  .nav-link { font-size: .71rem; }
  .refresh-button { font-size: .63rem; }
}
@media (min-width: 44rem) {
  .art { opacity: .55; }
  .refresh-button { padding-inline: .8rem; font-size: .76rem; }
}