/* The Byte Beaver (BB.ca). Old Canadian, older millennial: wool paper, old ink, spruce and lake, barn red and ochre only as signals.
   The mark is a one-colour woodcut beaver on a log, in the nickel composition, printed in rust: the orange band of the Modern Mouse spectrum as pigment, not light. Eye, tooth and hatching are the ground.
   Rokkitt (slab) for the masthead and headlines, Archivo (grotesque) for labels, nav and stamps, Source Serif 4 for reading.
   Square corners, printed rules, no shadows. Tokens are documented in BRAND.md. */
:root {
  --paper: #f1ebdd;
  --card: #e4dbc8;
  --ink: #241f19;
  --ink-2: #574c3f;
  --ink-3: #85785f;
  --line: #c9bda4;
  --accent: #2f5d3a;
  --accent-soft: #dfe6d6;
  --lake: #27405e;
  --critter: #A0522D;
  --act: #9b2d20;
  --heads: #8f6a14;
  --fyi: #6e675b;
  --display: "Rokkitt", "Rockwell", Georgia, serif;
  --label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 64ch;
  --gutter: clamp(16px, 4vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1c1915; --card: #26221c; --ink: #efe7d6; --ink-2: #c9bfae; --ink-3: #9a8f7a; --line: #3a342c; --accent: #8fbf93; --accent-soft: #22302a; --lake: #8fa9c6; --act: #e0674f; --heads: #d9ad45; --fyi: #a39a8c; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 19px; line-height: 1.55; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lake); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* shared small type */
.label, .kicker, .foot-label, .post-card time, .beat-chip, .pill, .draft-banner, .post-nav small, .dateline, .site-nav, .nav-toggle, .list-head, .btn {
  font-family: var(--label);
}

/* the stripe: three equal bands, never four */
.stripe { display: flex; flex-direction: column; }
.stripe span { display: block; height: 4px; }
.stripe span:nth-child(1) { background: var(--accent); }
.stripe span:nth-child(2) { background: var(--act); }
.stripe span:nth-child(3) { background: var(--heads); }

/* header */
.site-header { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 12px 0 8px; border-bottom: 3px double var(--ink); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.masthead { display: flex; align-items: center; gap: 16px; padding: 16px 0 12px; }
.brand { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 16px; }
.brand:hover { color: var(--ink); }
.brand svg { width: 76px; height: 52px; flex: 0 0 auto; }
.brand-the { display: none; }
.brand-name { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 6vw, 58px); line-height: 0.95; letter-spacing: -0.005em; }
.brand-tag { margin-left: auto; font-family: var(--label); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-2); max-width: 22ch; text-align: right; line-height: 1.3; }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 4px 0; }
.site-nav a[aria-current="page"] { color: var(--act); }
.site-nav a:hover { color: var(--lake); }
.nav-toggle { display: none; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 1px solid var(--ink); padding: 8px 12px; color: var(--ink); border-radius: 0; margin: 8px 0; }
@media (max-width: 640px) {
  .brand svg { width: 56px; height: 38px; }
  .brand-tag { display: none; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; flex-direction: column; gap: 10px; }
  .site-nav.open { display: flex; }
}

main { max-width: 1120px; margin: 0 auto; padding: 28px var(--gutter) 60px; }
.masthead-line { font-family: var(--body); font-style: italic; font-size: 19px; color: var(--ink-2); margin: 0 0 28px; }

/* post */
.post { max-width: var(--measure); }
.post-head { margin-bottom: 20px; }
.kicker { font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kicker .dot { width: 4px; height: 4px; background: var(--ink-3); display: inline-block; }
.post-title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.2vw, 50px); line-height: 1.02; margin: 0 0 14px; text-wrap: balance; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: var(--lake); }
.beats { display: flex; flex-wrap: wrap; gap: 6px; }
.beat-chip { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--accent); background: var(--card); padding: 5px 9px 4px; }
.beat-chip:hover { color: var(--lake); }

.prose { font-size: 19px; }
.prose h2 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; margin: 34px 0 10px; padding-top: 12px; border-top: 3px double var(--ink); }
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose p, .prose li { max-width: var(--measure); }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 12px; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose a { word-break: break-word; }
.top3 { background: var(--card); padding: 18px 22px; margin: 0 0 26px; }
.top3 > p:first-child { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.top3 ul { margin: 0; }
.top3 li:last-child { margin-bottom: 0; }
.pill { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); padding: 3px 7px 2px; margin-right: 6px; vertical-align: 2px; }
.pill.act { background: var(--act); } .pill.heads { background: var(--heads); } .pill.fyi { background: var(--fyi); }
.prose h2 + ul { margin-top: 6px; }
.post-foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); max-width: var(--measure); }
.post-foot p { margin: 0; }
.draft-banner { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--heads); color: var(--paper); padding: 8px 12px; display: inline-block; margin: 0 0 18px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: var(--measure); margin-top: 34px; }
.post-nav a { display: block; padding: 12px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2; min-width: 0; }
.post-nav a:hover { border-color: var(--ink); }
.post-nav a small { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.post-nav .older { text-align: right; grid-column: 2; }
.post-nav .newer { grid-column: 1; }
@media (max-width: 520px) { .post-nav { grid-template-columns: 1fr; } .post-nav .older, .post-nav .newer { grid-column: auto; text-align: left; } }

/* lists */
.list-head { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 44px 0 6px; padding-bottom: 8px; border-bottom: 3px double var(--ink); max-width: var(--measure); }
.post-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.post-card { padding: 16px 0; border-bottom: 1px solid var(--line); }
.post-card time { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.post-card h3 { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; margin: 4px 0 6px; text-wrap: balance; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--lake); }
.post-card p { margin: 0; color: var(--ink-2); font-size: 17px; }
.empty-note { color: var(--ink-2); }

/* sub strip */
.sub-strip { max-width: var(--measure); margin: 36px 0 0; padding: 18px 20px; background: var(--accent-soft); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sub-strip p { margin: 0; flex: 1 1 280px; font-size: 17px; }
.btn { display: inline-block; background: var(--accent); color: var(--paper); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 18px; text-decoration: none; border: 0; cursor: pointer; min-height: 44px; }
.btn:hover { background: var(--lake); color: var(--paper); }

/* pages */
.page-head { max-width: var(--measure); margin-bottom: 26px; }
.page-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5vw, 48px); line-height: 1.02; margin: 0 0 12px; text-wrap: balance; }
.page-head .lede { font-size: 21px; font-style: italic; color: var(--ink-2); margin: 0; }
.page-body { max-width: var(--measure); }
.page-body h2 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; margin: 30px 0 8px; padding-top: 12px; border-top: 3px double var(--ink); }
.page-body p, .page-body li { font-size: 19px; }
.page-body ul, .page-body ol { padding-left: 22px; }
.page-body li { margin-bottom: 8px; }
.beat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 20px; padding: 0; list-style: none; }
.beat-grid li { background: var(--card); padding: 14px 16px; }
.beat-grid a { font-family: var(--display); font-weight: 800; text-decoration: none; color: var(--ink); font-size: 20px; }
.beat-grid a:hover { color: var(--lake); }
.beat-grid p { margin: 4px 0 0; font-size: 16px; color: var(--ink-2); }

/* subscribe form */
.sub-form { max-width: 520px; display: grid; gap: 14px; margin-top: 10px; }
.sub-form label { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.sub-form input[type="email"], .sub-form input[type="text"] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); min-height: 44px; }
.sub-form input:focus { border-color: var(--ink); }
.sub-form fieldset { border: 0; padding: 0; margin: 0; }
.sub-form legend { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.sub-form .choice { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 17px; min-height: 44px; }
.sub-form .choice input { margin-top: 5px; accent-color: var(--accent); }
.sub-form .choice span small { display: block; color: var(--ink-2); }
.sub-form .hp { position: absolute; left: -9999px; }
.sub-form .fine { font-size: 15px; color: var(--ink-2); margin: 0; }

/* footer */
.site-footer { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) 48px; }
.site-footer .stripe { margin-bottom: 26px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { font-family: var(--display); font-weight: 900; font-size: 24px; margin: 0 0 6px; }
.foot-note { font-size: 15px; color: var(--ink-2); margin: 0 0 8px; max-width: 48ch; }
.foot-label { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.foot-links a { display: block; font-size: 16px; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.foot-links a:hover { color: var(--lake); }
.empty h1 { font-family: var(--display); font-weight: 800; font-size: 38px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* by day: the daily report strip. One link per brief, newest first. */
.day-strip { max-width: 1120px; margin: 0 0 28px; }
.day-strip ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.day-strip li a { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-top: 3px solid var(--ink); text-decoration: none; color: var(--ink); min-width: 96px; }
.day-strip li:first-child a { border-top-color: var(--accent); }
.day-strip li a:hover { border-color: var(--lake); color: var(--lake); }
.day-strip time { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.1; }
.day-strip span { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.day-strip .day-more a { justify-content: center; border-style: dashed; }
.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 34px 0 0; padding: 0 0 8px; border-bottom: 3px double var(--ink); font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.day-head a { color: var(--ink); text-decoration: none; }
.day-head a:hover { color: var(--lake); }
.day-head span { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.day-head span a { color: var(--accent); }
.day-head + .bytes { border-top: 0; }

/* bytes: every item of the week as a small unit. Hairline grid, no boxes. */
.bytes-wrap { max-width: 1120px; }
.bytes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 40px; border-top: 3px double var(--ink); }
.byte { padding: 18px 0 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.byte .kicker { margin-bottom: 8px; }
.byte h3 { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; margin: 0 0 8px; text-wrap: balance; }
.byte h3 a { color: var(--ink); text-decoration: none; }
.byte h3 a:hover { color: var(--lake); }
.byte-text { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.byte-why { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.byte-foot { margin: 0; font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.byte-foot a { color: var(--accent); text-decoration: none; }
.byte-foot a:hover { color: var(--lake); text-decoration: underline; }
.bytes-more { margin: 18px 0 0; font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.bytes-more a { color: var(--accent); text-decoration: none; }
.page-home .list-head { margin-top: 48px; }

/* subject tags: one spectrum stop each, as a bar and a wash of pigment on the paper. Text stays ink. */
.tag { display: inline-block; font-family: var(--label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); border-left: 5px solid var(--tag, var(--fyi)); background: color-mix(in srgb, var(--tag, var(--fyi)) 14%, var(--paper)); padding: 3px 7px 2px 6px; margin-right: 6px; vertical-align: 2px; line-height: 1.2; }
.prose .tag { font-size: 10.5px; vertical-align: 2px; }
.kicker .tag { margin-right: 0; }
@media (prefers-color-scheme: dark) { .tag { background: color-mix(in srgb, var(--tag, var(--fyi)) 22%, var(--paper)); } }

/* byte front: TL;DR line, the rest folded */
.byte-tldr { margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.tldr-label { display: inline-block; font-family: var(--label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 3px 6px 2px; margin-right: 6px; vertical-align: 2px; line-height: 1.2; }
.byte-more { margin: 0; }
.byte-more summary { cursor: pointer; list-style: none; font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 4px 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
.byte-more summary::-webkit-details-marker { display: none; }
.byte-more summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.byte-more[open] summary::before { transform: rotate(90deg); }
.byte-more summary:hover { color: var(--lake); }
.byte-more[open] summary { margin-bottom: 8px; }
.byte-more .byte-text { margin-top: 0; }