/* Shared by every page. Mobile defaults; larger layouts are added below. */
:root {
  color-scheme: light;
  --bg: #f8f7f3; --panel: #ffffff; --line: #d6dbdd;
  --text: #182536; --muted: #536170; --orange: #b44720;
  --orange-bright: #f47845;
  --paper: #fffdf8; --ink: #182536; --paper-muted: #52606a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 136px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
::selection { background: #f6c6b2; color: var(--text); }
svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font: 11px/1.5 var(--mono); letter-spacing: .8px; text-transform: uppercase; }
.wrap, .reader-container { width: calc(100% - 36px); max-width: 1160px; margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--orange); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: #fffdf8; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 20px; font-weight: 900; letter-spacing: -.9px; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 27px; height: 30px; background: var(--orange-bright); color: var(--text); }
.brand-mark .icon { width: 20px; height: 20px; }
.brand-slash { color: var(--orange); margin-inline: 1px; }
.main-nav { display: flex; gap: 20px; flex-basis: 100%; }
.main-nav a { display: flex; align-items: center; min-height: 44px; color: #425365; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); border-bottom-color: var(--orange); }
.header-note { display: none; color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-bright); flex-shrink: 0; }
.hero { padding: 38px 0 32px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--orange); flex-shrink: 0; }
.hero h1 { font-size: clamp(54px, 16vw, 82px); font-weight: 900; letter-spacing: -3px; line-height: 1; margin: 22px 0; }
.hero h1 span { display: block; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-lede { font-size: 22px; line-height: 1.4; letter-spacing: -.5px; }
.hero-copy { max-width: 450px; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.primary-link, .text-link { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; font-size: 13px; font-weight: 700; }
.primary-link { padding: 12px 17px; background: var(--orange); color: #fff; }
.primary-link:hover { background: #973917; }
.text-link:hover { color: var(--orange); }
.text-link .icon { width: 16px; height: 16px; }
.workbench { display: none; }
.process-bar { padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 34px; }
.process-label { display: none; }
.process-steps { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.process-step { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.process-step .mono { color: var(--orange); font-size: 10px; }
.process-arrow { color: #6e7b87; }
.notebook-section, .projects-section { padding-bottom: 40px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading-label, .about-kicker { color: var(--orange); margin-bottom: 8px; }
.section-head h2 { font-size: 28px; letter-spacing: -1px; line-height: 1.2; }
.section-count { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 12px; }
.section-count strong { color: var(--text); font-size: 22px; }
.entry-grid { display: grid; gap: 14px; }
.entry-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); padding: 24px 21px; transition: background .15s, border-color .15s; }
.entry-card:hover { background: #fff9f4; border-color: #b6bec4; }
.entry-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 20px; }
.entry-number { color: #51606c; }
.entry-type { color: #963b1d; border: 1px solid #ddb6a7; background: #fff3ec; padding: 3px 7px; font-size: 11px; }
.entry-card h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.6px; }
.entry-card p { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.entry-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 24px; margin-top: auto; font-size: 12px; }
.entry-bottom .icon { width: 16px; height: 16px; color: var(--orange); }
.draft-label { color: #51606c; margin-left: auto; font-size: 11px; }
.edition-note { display: flex; align-items: start; gap: 12px; color: var(--muted); font-size: 13px; margin-top: 20px; }
.edition-note .icon { margin-top: 3px; }
.edition-note strong { color: var(--text); }
.all-entries { margin-top: 20px; }
.project-grid { display: grid; gap: 12px; align-items: start; }
.project-card { border: 1px solid var(--line); }
.project-card summary { display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 18px; cursor: pointer; list-style: none; touch-action: manipulation; }
.project-card summary::-webkit-details-marker { display: none; }
.project-card summary:hover { background: var(--panel); }
.project-icon { display: grid; place-items: center; width: 34px; height: 36px; border: 1px solid #cbd1d4; color: var(--orange); flex-shrink: 0; }
.project-name { display: flex; flex-direction: column; min-width: 0; }
.project-name strong { font-size: 16px; }
.project-name > span { font-size: 12px; color: var(--muted); }
.project-plus { margin-left: auto; color: var(--muted); font-size: 24px; }
.project-card[open] .project-plus { transform: rotate(45deg); color: var(--orange); }
.project-entries { padding: 0 18px 10px; }
.project-entries > p { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); }
.project-entries a { display: flex; align-items: start; gap: 10px; padding: 14px 0; font-size: 13px; }
.project-entries a:hover { color: var(--orange); }
.project-entries a > .mono { color: var(--orange); padding-top: 3px; }
.project-entries a > .icon { margin-left: auto; width: 16px; height: 16px; }
.about-section { display: grid; gap: 24px; border-top: 1px solid var(--line); padding: 36px 0 40px; }
.about-section h2 { font-size: 34px; line-height: 1.2; letter-spacing: -1px; }
.about-method { border-left: 2px solid var(--orange); padding-left: 17px; margin-top: 24px; font-size: 14px; }
.about-text { color: var(--muted); font-size: 14px; line-height: 1.85; }
.about-text strong { color: var(--text); }
.about-text p + p { margin-top: 15px; }
.site-footer { border-top: 1px solid var(--line); padding: 24px 0; background: var(--bg); color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; font-size: 12px; }
.footer-name { font-size: 14px; color: var(--text); font-weight: 700; }
.footer-name span { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 8px; }
.footer-note { display: flex; align-items: center; gap: 8px; }
/* The archive has no fixed limit or client-side data dependency. */
.archive { padding-block: 36px 48px; }
.archive-header { max-width: 750px; margin-bottom: 28px; }
.archive-header h1 { font-size: clamp(38px, 8vw, 60px); letter-spacing: -1.5px; line-height: 1.1; margin: 14px 0 20px; }
.archive-header > p:last-child { color: var(--muted); font-size: 16px; }
.idea-backlog { margin-top: 38px; }
.idea-backlog h2 { font-size: 27px; line-height: 1.3; }
.idea-backlog > p { color: var(--muted); margin-top: 12px; }
.idea-list { list-style: none; padding: 0; margin: 24px 0 0; }
.idea-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.idea-list h3 { font-size: 19px; line-height: 1.4; font-weight: 600; flex: 1 1 250px; }
.idea-list .mono { color: var(--muted); }
/* Article ideas have a paper reading surface and explicit editorial status. */
.article-page { color-scheme: light; background: var(--paper); color: var(--ink); padding: 24px 0 44px; }
.reader-container { max-width: 1040px; }
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 24px; color: var(--paper-muted); font-size: 13px; }
.back-link .icon { width: 16px; height: 16px; }
.reader-meta { color: #8b361b; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.reader-header h1 { font-size: clamp(35px, 7vw, 64px); line-height: 1.1; letter-spacing: -1.5px; margin-top: 20px; max-width: 900px; }
.reader-deck { font-size: 18px; line-height: 1.7; color: var(--paper-muted); max-width: 750px; margin-top: 22px; }
.draft-notice { border: 1px solid #ccbba8; border-left: 3px solid #a74322; background: #eae5d9; padding: 18px; margin-top: 28px; font-size: 14px; }
.draft-notice strong { display: block; color: #70422d; margin-bottom: 5px; }
.reader-layout { display: flex; flex-direction: column; margin-top: 30px; gap: 26px; }
.reader-body { min-width: 0; }
.reader-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #d4d5d0; }
.section-counter { color: #6a7074; }
.reader-section h2 { font-size: 27px; line-height: 1.3; margin: 9px 0 16px; letter-spacing: -.5px; }
.reader-section > p { font: 18px/1.85 Georgia, "Times New Roman", serif; color: var(--paper-muted); }
.reader-sidebar { order: -1; }
.sidebar-label { color: #687076; margin-bottom: 12px; }
.reader-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; border-bottom: 1px solid #d4d5d0; padding-bottom: 14px; }
.reader-sidebar nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; }
.reader-sidebar nav a:hover { color: #923817; }
.reader-sidebar nav .mono { color: #8b361b; }
.next-entry { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; color: #8b361b; font-weight: 600; }
@media (min-width: 640px) {
  html { scroll-padding-top: 98px; }
  .wrap, .reader-container { width: calc(100% - 64px); }
  .header-inner { flex-wrap: nowrap; min-height: 76px; }
  .main-nav { flex-basis: auto; gap: 28px; }
  .hero { padding-block: 54px; }
  .hero h1 { font-size: 80px; }
  .process-step { flex-direction: row; align-items: center; gap: 12px; font-size: 13px; }
  .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .entry-card { padding: 28px; min-height: 290px; }
  .section-head h2 { font-size: 34px; }
  .notebook-section, .projects-section { padding-bottom: 58px; }
  .archive { padding-block: 52px 64px; }
}
@media (min-width: 960px) {
  .wrap { width: calc(100% - 80px); }
  .header-inner { justify-content: start; gap: 48px; }
  .header-note { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; font-size: 10px; }
  .hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 70px; align-items: center; padding-block: 72px 62px; }
  .hero h1 { font-size: 88px; letter-spacing: -4px; }
  .hero-lede { font-size: 25px; }
  .workbench { display: block; position: relative; isolation: isolate; padding: 19px 0 24px 11px; }
  .workbench::before { content: ""; position: absolute; inset: -27px -18px -24px; z-index: -1; background-image: linear-gradient(#798ca213 1px, transparent 1px), linear-gradient(90deg, #798ca213 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse, black 45%, transparent 75%); }
  .bench-top { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 16px; }
  .bench-top span:last-child { color: var(--orange); }
  .paper-back { position: absolute; inset: 60px -3px 45px 28px; transform: rotate(3deg); background: #e5e5df; border: 1px solid #c3c9c9; z-index: -1; }
  .notebook-paper { display: block; position: relative; background: var(--paper); color: var(--ink); padding: 25px 27px; border-top: 4px solid var(--orange); box-shadow: 0 16px 34px #0003; transform: rotate(-2.5deg); transition: transform .2s; }
  .notebook-paper:hover { transform: rotate(-1deg); }
  .paper-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c4c9c9; padding-bottom: 15px; color: #505a62; }
  .paper-label { color: #9c3e21; margin: 19px 0 10px; }
  .paper-title { font-size: 28px; line-height: 1.15; letter-spacing: -1px; font-weight: 750; }
  .paper-rule { height: 1px; background: #c7cbc9; margin: 21px 0 15px; }
  .paper-list { display: grid; gap: 10px; }
  .paper-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #58616a; }
  .paper-checkbox { width: 12px; height: 12px; border: 1px solid #839098; }
  .paper-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; color: #58616a; font-size: 10px; }
  .bench-annotation { font: italic 18px Georgia, serif; text-align: right; margin: 25px 17px 0 0; transform: rotate(-4deg); }
  .bench-annotation span { color: var(--orange); margin-right: 10px; }
  .process-bar { display: flex; align-items: center; gap: 40px; margin-bottom: 58px; padding-block: 22px; }
  .process-label { display: block; color: var(--muted); padding-right: 22px; border-right: 1px solid var(--line); }
  .process-steps { flex: 1; }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .about-section { grid-template-columns: 1fr 1.05fr; gap: 100px; padding-block: 48px 59px; }
  .about-section h2 { font-size: 40px; }
  .about-text { padding-top: 27px; }
  .article-page { padding-block: 36px 68px; }
  .reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 60px; }
  .reader-sidebar { order: 0; border-left: 1px solid #d4d5d0; padding-left: 24px; }
  .sidebar-sticky { position: sticky; top: 108px; }
  .reader-sidebar nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print {
  body, .article-page { background: white; color: black; }
  .site-header, .site-footer, .hero-actions, .workbench, .reader-sidebar, .back-link, .next-entry { display: none; }
  .wrap, .reader-container { width: 100%; }
  .reader-layout { display: block; }
  .entry-card { break-inside: avoid; background: white; color: black; border-color: #777; }
  .entry-card p { color: #333; }
}