@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: #082eae;
  --blue-deep: #062b9f;
  --yellow: #ffd10a;
  --red: #f22218;
  --ink: #0a0a0a;
  --paper: #f7f6f1;
  --line: #151515;
  --muted: #6f6f6b;
  --display: "Barlow Condensed", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.site-shell { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 24px;
  color: #fff;
  background: linear-gradient(145deg, #0835bc 0%, var(--blue-deep) 76%, #06268f 100%);
  overflow: hidden;
}

.brand, .rail-label, .rail-nav, .rail-kicker, .section-bar, .side-heading, .archive, .project-number, .project-name, .eyebrow, .post-copy small, .yellow-button { font-family: var(--display); }

.brand { display: block; font-size: 52px; font-weight: 700; line-height: .82; letter-spacing: .01em; white-space: pre-line; }

.rail-nav { margin-top: 46px; }
.rail-nav a { display: block; padding: 14px 0 12px; border-top: 1px solid rgba(255,255,255,.72); font-size: 22px; line-height: 1; letter-spacing: .02em; transition: color .18s ease, padding-left .18s ease; }
.rail-nav a:last-child { border-bottom: 1px solid rgba(255,255,255,.72); }
.rail-nav a:hover, .rail-nav a:focus-visible { padding-left: 6px; color: var(--yellow); outline: none; }

.rail-dot { width: 22px; height: 22px; margin: 16px 0 0; border-radius: 50%; background: var(--yellow); }

.rail-identity { margin-top: auto; }
.rail-label { display: block; font-size: 23px; line-height: 1; }
.rail-number { display: block; margin: 3px 0 6px -4px; font-family: var(--display); font-size: 190px; font-weight: 700; line-height: .75; letter-spacing: -.03em; }
.rail-identity p { max-width: 180px; margin: 20px 0 0; font-family: var(--display); font-size: 17px; line-height: 1.12; letter-spacing: .03em; }

.rail-links { display: flex; flex-direction: column; gap: 11px; margin-top: 40px; }
.rail-links a { display: inline-block; width: fit-content; color: #fff; font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .04em; transition: color .18s ease, transform .18s ease; }
.rail-links a:hover, .rail-links a:focus-visible { color: var(--yellow); transform: translateX(5px); outline: none; }

.main-content { min-width: 0; padding: 31px 33px 24px; background: var(--paper); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 27px; max-width: 1294px; margin: 0 auto; }
.primary-column, .secondary-column { min-width: 0; }

.hero-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, .72fr); gap: 25px; min-height: 530px; border-top: 3px solid var(--line); }
.hero-copy { padding-top: 20px; }
.eyebrow { margin: 0 0 22px; color: var(--red); font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: .015em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 560px; margin-bottom: 23px; font-family: var(--display); font-size: clamp(62px, 5vw, 80px); font-weight: 700; line-height: .84; letter-spacing: -.012em; white-space: pre-line; }
.hero-slogan { display: inline-block; max-width: 540px; margin: 0 0 15px; color: var(--blue); font-family: var(--display); font-size: clamp(23px, 2.1vw, 31px); font-weight: 700; line-height: .95; letter-spacing: .015em; }
.hero-intro { max-width: 540px; margin-bottom: 28px; font-size: 20px; line-height: 1.32; }
.yellow-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-width: 220px; padding: 12px 16px 11px; color: var(--ink); background: var(--yellow); font-size: 24px; line-height: 1; transition: transform .18s ease, box-shadow .18s ease; }
.yellow-button span { font-family: var(--body); font-size: 31px; line-height: .7; }
.yellow-button:hover, .yellow-button:focus-visible { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); outline: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.outline-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 220px; padding: 11px 15px 10px; border: 1px solid var(--ink); color: var(--ink); font-family: var(--display); font-size: 20px; line-height: 1; transition: color .18s ease, background .18s ease, transform .18s ease; }
.outline-button:hover, .outline-button:focus-visible { color: var(--paper); background: var(--ink); transform: translateY(-2px); outline: none; }

.hero-art { position: relative; align-self: start; width: 100%; height: 420px; min-height: 420px; margin-top: 34px; overflow: hidden; background: #f1f0ec; border: 1px solid #dad8d0; }
.hero-art > span { position: absolute; display: block; }
.art-circle { top: 5%; right: 12%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); }
.art-black-form { top: 7%; left: 10%; width: 47%; height: 48%; background: var(--ink); clip-path: polygon(0 0, 100% 0, 53% 100%); }
.art-yellow-triangle { left: 10%; bottom: 0; width: 47%; height: 58%; background: var(--yellow); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.art-bars { right: 12%; top: 47%; width: 35%; height: 35%; background: repeating-linear-gradient(to bottom, var(--ink) 0 8px, transparent 8px 17px); }
.art-dots { right: 12%; bottom: 3%; width: 30%; height: 27%; background-image: radial-gradient(circle, var(--ink) 0 3px, transparent 3.5px); background-size: 22px 22px; }

.section-bar { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 15px; color: #fff; background: var(--ink); }
.section-bar h2, .section-bar a { margin: 0; font-size: 22px; line-height: 1; letter-spacing: .01em; }
.section-bar a { color: var(--yellow); font-size: 16px; transition: color .18s ease; }
.section-bar a:hover, .section-bar a:focus-visible { color: #fff; outline: none; }
.section-bar a span { margin-left: 6px; font-family: var(--body); font-size: 20px; }

.project-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #262626; border-top: 0; }
.project-card { position: relative; display: flex; min-width: 0; min-height: 253px; flex-direction: column; padding: 13px 13px 12px; border-right: 1px solid #262626; transition: background .18s ease, color .18s ease; }
.project-card:last-child { border-right: 0; }
.project-card:hover, .project-card:focus-visible { color: #fff; background: var(--blue); outline: none; }
.project-number { color: var(--blue); font-size: 17px; line-height: 1; }
.project-card:hover .project-number, .project-card:focus-visible .project-number { color: var(--yellow); }
.project-card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 10px 0 12px; overflow: hidden; background: var(--paper); }
.project-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-name { display: block; max-width: 100%; margin-bottom: 6px; color: var(--blue); font-size: 17px; line-height: .95; letter-spacing: .02em; }
.project-card:hover .project-name, .project-card:focus-visible .project-name { color: var(--yellow); }
.project-description { max-width: 150px; font-size: 14px; line-height: 1.18; }
.card-arrow { margin-top: auto; font-size: 24px; line-height: .8; text-align: right; }

.side-heading { display: flex; align-items: center; min-height: 60px; padding: 0 18px; border-bottom: 2px solid var(--blue); }
.side-heading h2 { margin: 0; color: var(--blue); font-size: 25px; line-height: 1; letter-spacing: .015em; }
.latest-posts, .about-box { border: 1px solid var(--line); background: rgba(255,255,255,.16); }
.post-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 101px; margin: 0 20px; border-bottom: 1px solid #272727; transition: color .18s ease, padding-left .18s ease; }
.post-row:last-child { border-bottom: 0; }
.post-row:hover, .post-row:focus-visible { padding-left: 5px; color: var(--blue); outline: none; }
.post-mark { position: relative; display: inline-flex; width: 47px; height: 47px; align-items: center; justify-content: center; border-radius: 50%; }
.mark-blue { background: var(--blue); }
.mark-yellow { color: var(--ink); background: var(--yellow); font-family: var(--body); font-size: 18px; font-weight: 700; }
.mark-butterfly::before, .mark-butterfly::after { content: ""; position: absolute; top: 9px; width: 24px; height: 29px; border-radius: 70% 10% 70% 10%; background: var(--ink); }
.mark-butterfly::before { left: 4px; transform: rotate(34deg); }.mark-butterfly::after { right: 4px; transform: scaleX(-1) rotate(34deg); }
.mark-graph { background: transparent; }.mark-graph::before, .mark-graph::after, .mark-graph i, .mark-graph b, .mark-graph em { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }.mark-graph::before { left: 3px; bottom: 6px; }.mark-graph::after { left: 22px; top: 15px; background: var(--blue); }.mark-graph i { right: 3px; top: 2px; }.mark-graph b { right: 11px; bottom: 2px; background: var(--yellow); }.mark-graph em { display: block; left: 6px; bottom: 9px; width: 35px; height: 1px; border-radius: 0; transform: rotate(-30deg); transform-origin: left; background: var(--ink); box-shadow: 17px 9px 0 var(--ink), 21px -19px 0 var(--ink); }
.post-copy { display: block; min-width: 0; }.post-copy strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.16; }.post-copy small { display: block; margin-top: 8px; color: var(--blue); font-size: 16px; line-height: 1; }.post-arrow { color: var(--blue); font-size: 27px; line-height: 1; }

.about-box { position: relative; margin-top: 20px; min-height: 255px; overflow: hidden; }.about-box p { max-width: 275px; margin: 28px 18px 0; font-size: 18px; line-height: 1.34; }.about-dots { position: absolute; right: 20px; bottom: 15px; width: 96px; height: 68px; background-image: radial-gradient(circle, var(--ink) 0 3px, transparent 3.5px); background-size: 20px 20px; }

.archive { display: grid; grid-template-columns: auto minmax(180px, .7fr) 1px minmax(300px, 1.4fr) 43px; align-items: center; gap: 16px; min-height: 65px; margin-top: 20px; padding: 0 13px; border: 1px solid #282828; }.archive h2 { margin: 0; font-size: 24px; line-height: 1; }.archive-years, .archive-months { display: flex; justify-content: space-between; gap: 9px; }.archive a, .archive span { font-size: 14px; line-height: 1; transition: color .18s ease; }.archive a:hover, .archive a:focus-visible { color: var(--blue); outline: none; }.archive-divider { width: 1px; height: 30px; background: #282828; }.archive-arrow { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; color: var(--ink); background: var(--yellow); font-family: var(--body); font-size: 28px !important; }

.legal-page { max-width: 1120px; }
.legal-copy { max-width: 920px; padding: 28px 30px 34px; border: 1px solid var(--line); background: rgba(255,255,255,.24); }
.legal-copy h2 { margin: 28px 0 11px; color: var(--blue); font-family: var(--display); font-size: 34px; line-height: .95; letter-spacing: .01em; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy h3 { margin: 22px 0 8px; font-family: var(--display); font-size: 24px; line-height: 1; }
.legal-copy p, .legal-copy li { max-width: 780px; color: #30302d; font-size: 16px; line-height: 1.52; }
.legal-copy p { margin-bottom: 14px; }
.legal-copy ul { max-width: 780px; margin: 0 0 16px; padding-left: 23px; }
.legal-copy li { margin-bottom: 6px; }
.legal-copy a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal-copy a:hover, .legal-copy a:focus-visible { color: var(--red); outline: none; }
.legal-draft-note { margin-bottom: 27px; padding: 13px 15px; border-left: 8px solid var(--yellow); background: rgba(255,209,10,.2); font-size: 14px !important; line-height: 1.35 !important; }
.legal-meta { color: var(--muted) !important; font-size: 13px !important; }
.legal-contact { padding: 15px 17px; border: 1px solid #c7c6bf; background: rgba(255,255,255,.34); }

/* Supporting dossier and post pages use the same visual system as the landing page. */
.inner-page { max-width: 1350px; margin: 0 auto; }
.page-header { max-width: 900px; padding: 18px 0 42px; border-top: 3px solid var(--line); }
.page-header h1 { margin-bottom: 19px; font-size: clamp(70px, 8vw, 132px); }
.page-lede { max-width: 700px; margin-bottom: 0; font-size: 21px; line-height: 1.35; }
.project-detail-list, .post-detail-list { display: grid; gap: 18px; }
.project-detail, .post-detail { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(240px, 34%); gap: 24px; padding: 23px; border: 1px solid var(--line); background: rgba(255,255,255,.18); }
.detail-number { color: var(--blue); font-family: var(--display); font-size: 64px; line-height: .82; }
.detail-copy h2, .post-detail h2 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(40px, 4.2vw, 70px); line-height: .88; }
.detail-copy p, .post-detail p { max-width: 630px; margin-bottom: 13px; font-size: 17px; line-height: 1.38; }
.detail-kicker { color: var(--blue); font-family: var(--display); font-size: 18px !important; line-height: 1 !important; letter-spacing: .03em; }
.detail-meta { color: var(--muted); font-size: 14px !important; }
.project-media { min-width: 0; }
.project-detail img { width: 100%; height: 215px; object-fit: cover; border: 1px solid #c7c6bf; filter: saturate(.86) contrast(1.04); }
.detail-media-note { margin: 9px 0 0; color: var(--blue); font-family: var(--display); font-size: 14px; line-height: 1.05; letter-spacing: .02em; }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: var(--blue); font-family: var(--display); font-size: 18px; line-height: 1; }.text-link span { font-family: var(--body); font-size: 24px; }.text-link:hover, .text-link:focus-visible { color: var(--red); outline: none; }
.detail-graphic { position: relative; min-height: 215px; border: 1px solid #c7c6bf; background: #f0efea; overflow: hidden; }
.detail-graph::before, .detail-graph::after { content: ""; position: absolute; height: 2px; width: 76%; left: 12%; top: 51%; background: var(--ink); transform: rotate(-30deg); box-shadow: 0 36px 0 var(--ink), 35px -60px 0 var(--ink); }.detail-graph::after { width: 9px; height: 9px; border-radius: 50%; left: 18%; top: 69%; background: var(--ink); box-shadow: 93px -50px 0 var(--blue), 177px -96px 0 var(--ink), 143px 4px 0 var(--yellow); }
.detail-local-ai { background: var(--blue); }
.detail-local-ai::before { content: ""; position: absolute; inset: 16% 11%; background: radial-gradient(circle at 18% 78%, var(--yellow) 0 6px, transparent 7px), radial-gradient(circle at 48% 45%, #fff 0 6px, transparent 7px), radial-gradient(circle at 80% 22%, var(--yellow) 0 6px, transparent 7px), linear-gradient(145deg, transparent 0 45%, rgba(255,255,255,.78) 45% 46%, transparent 46% 100%); opacity: .9; }
.detail-local-ai::after { content: ""; position: absolute; left: 11%; right: 11%; bottom: 16%; height: 26%; background: repeating-linear-gradient(to right, var(--yellow) 0 12px, transparent 12px 20px); opacity: .9; }
.local-ai-memory, .local-ai-gpu { position: absolute; z-index: 1; display: block; border: 2px solid #fff; }
.local-ai-memory { top: 16%; right: 11%; width: 26%; height: 19%; }
.local-ai-gpu { left: 11%; bottom: 16%; width: 28%; height: 26%; border-color: var(--yellow); }
.local-ai-badge { position: absolute; z-index: 2; right: 12%; bottom: 20%; color: #fff; font-family: var(--display); font-size: 24px; line-height: .9; }
.post-detail { grid-template-columns: minmax(0, 1fr) 220px; }.post-score { align-self: start; display: flex; min-height: 140px; flex-direction: column; justify-content: center; padding: 20px; background: var(--blue); color: #fff; }.post-score strong { font-family: var(--display); font-size: 42px; line-height: .9; }.post-score span { margin-top: 13px; color: var(--yellow); font-size: 14px; line-height: 1.2; }
.post-detail .post-body { max-width: 780px; white-space: pre-line; }
.post-share { gap: 12px; }
.post-share .share-url { margin: 0; color: var(--yellow); font-size: 12px; white-space: nowrap; }
.post-share .share-button { min-width: 0; width: 100%; border-color: #fff; color: #fff; background: transparent; cursor: pointer; }
.post-share .share-button:hover, .post-share .share-button:focus-visible { color: var(--ink); background: #fff; }

/* Visual editorial mode is opt-in via ?edit=1 and never appears in the public snapshot. */
.editor-bar { position: fixed; z-index: 50; top: 14px; right: 14px; left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px 10px 15px; color: #fff; background: var(--ink); border: 2px solid var(--yellow); box-shadow: 7px 7px 0 rgba(8,46,174,.28); }
.editor-context { display: flex; min-width: 0; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.editor-kicker { color: var(--yellow); font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: .04em; }
.editor-context strong { font-family: var(--display); font-size: 20px; line-height: 1; letter-spacing: .02em; }
.editor-status { color: #fff; font-size: 13px; line-height: 1.2; }
.editor-status[data-tone="warn"] { color: var(--yellow); }.editor-status[data-tone="ok"] { color: #86e59b; }
.editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.editor-actions button, .editor-close { display: inline-flex; min-height: 31px; align-items: center; justify-content: center; padding: 7px 10px 6px; color: var(--ink); background: var(--yellow); border: 1px solid var(--yellow); font-family: var(--display); font-size: 14px; line-height: 1; letter-spacing: .02em; cursor: pointer; }
.editor-actions button:hover, .editor-actions button:focus-visible, .editor-close:hover, .editor-close:focus-visible { color: #fff; background: var(--blue); border-color: #fff; outline: none; }
.editor-actions .editor-subtle { color: #fff; background: transparent; border-color: rgba(255,255,255,.5); }.editor-actions .editor-subtle:hover, .editor-actions .editor-subtle:focus-visible { color: var(--yellow); border-color: var(--yellow); }
.editor-close { color: #fff; background: transparent; border-color: rgba(255,255,255,.5); }
.editor-mode { padding-top: 72px; }
.editor-mode [data-editor-editable="true"] { outline: 1px dashed rgba(8,46,174,.32); outline-offset: 4px; cursor: text; transition: outline-color .15s ease, background .15s ease; }
.editor-mode [data-editor-editable="true"]:hover, .editor-mode [data-editor-editable="true"]:focus { outline: 2px solid var(--yellow); outline-offset: 5px; background: rgba(255,209,10,.12); }
.editor-mode [data-editor-editable="true"].editor-dirty { outline-color: var(--red); }
.editor-mode [hidden] { display: none !important; }
.comment-mode [data-editor-comment-target] { outline: 1px dashed rgba(255,209,10,.92); outline-offset: 4px; cursor: crosshair; }
.comment-mode [data-editor-comment-target]:hover { outline: 2px solid var(--yellow); background: rgba(255,209,10,.12); }
.editor-mode [data-editor-comment-target].editor-commented { box-shadow: inset 0 0 0 2px var(--blue); }
.comment-panel { position: fixed; z-index: 60; top: 80px; right: 14px; display: flex; width: min(390px, calc(100vw - 28px)); max-height: calc(100vh - 96px); flex-direction: column; overflow: auto; padding: 15px; color: #fff; background: var(--ink); border: 2px solid var(--yellow); box-shadow: 7px 7px 0 rgba(8,46,174,.28); }
.comment-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.45); }
.comment-panel-heading strong, .comment-panel-kicker, .comment-list-heading, .comment-input-label { display: block; font-family: var(--display); line-height: 1; letter-spacing: .03em; }
.comment-panel-heading strong { font-size: 22px; }
.comment-panel-kicker { margin-bottom: 5px; color: var(--yellow); font-size: 13px; }
.comment-panel-close { width: 28px; height: 28px; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.6); font-size: 22px; line-height: 1; cursor: pointer; }
.comment-panel-close:hover, .comment-panel-close:focus-visible { color: var(--ink); background: var(--yellow); outline: none; }
.comment-target-wrap { display: grid; gap: 5px; padding: 12px 0 10px; }
.comment-target-wrap small { color: var(--yellow); font-family: var(--display); font-size: 12px; line-height: 1; }
.comment-target-wrap strong { color: #fff; font-family: var(--display); font-size: 17px; line-height: 1.05; overflow-wrap: anywhere; }
.comment-target-wrap span { color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.25; }
.comment-input-label { margin-bottom: 6px; color: var(--yellow); font-size: 14px; }
.comment-panel textarea { width: 100%; min-height: 86px; resize: vertical; padding: 9px; color: var(--ink); background: #fff; border: 1px solid #fff; font: 14px/1.3 var(--body); }
.comment-panel textarea:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
.comment-panel-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.comment-panel-actions button, .comment-resolve { min-height: 28px; padding: 6px 9px 5px; color: var(--ink); background: var(--yellow); border: 1px solid var(--yellow); font-family: var(--display); font-size: 13px; line-height: 1; cursor: pointer; }
.comment-panel-actions button:hover, .comment-panel-actions button:focus-visible, .comment-resolve:hover, .comment-resolve:focus-visible { color: #fff; background: var(--blue); border-color: #fff; outline: none; }
.comment-panel-actions .comment-subtle { color: #fff; background: transparent; border-color: rgba(255,255,255,.55); }
.comment-panel-actions .comment-subtle:hover, .comment-panel-actions .comment-subtle:focus-visible { color: var(--yellow); border-color: var(--yellow); }
.comment-list-heading { display: flex; justify-content: space-between; gap: 10px; margin: 17px 0 8px; color: var(--yellow); font-size: 13px; }
.comment-list-heading span:last-child { color: rgba(255,255,255,.68); font-family: var(--body); font-size: 11px; letter-spacing: 0; }
.comment-list { display: grid; gap: 8px; }
.comment-empty { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.3; }
.comment-item { position: relative; padding: 9px 9px 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); }
.comment-item.comment-resolved { opacity: .58; }
.comment-item-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.comment-item-heading strong { color: #fff; font-family: var(--display); font-size: 14px; line-height: 1; overflow-wrap: anywhere; }
.comment-item-heading span { flex: 0 0 auto; color: var(--yellow); font-family: var(--display); font-size: 11px; line-height: 1; }
.comment-item p { margin: 7px 0 5px; color: #fff; font-size: 14px; line-height: 1.3; white-space: pre-wrap; }
.comment-item small { display: block; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.25; }
.comment-resolve { margin-top: 8px; min-height: 24px; padding: 5px 7px 4px; font-size: 11px; }

@media (max-width: 1180px) {
  .site-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .rail { padding-left: 24px; padding-right: 24px; }.brand { font-size: 44px; }.rail-number { font-size: 155px; }
  .main-content { padding-left: 24px; padding-right: 24px; }.content-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .hero-feature { grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: 16px; }.hero-intro { font-size: 18px; }.hero-art { min-height: 330px; }
  .project-card { padding-left: 9px; padding-right: 9px; }.project-name { font-size: 15px; }.project-description { font-size: 12px; }.archive { grid-template-columns: auto 1fr 1px 1.7fr 36px; gap: 10px; }.archive-months { gap: 3px; }.archive a { font-size: 12px; }
}

@media (max-width: 900px) {
  .site-shell { display: block; }.rail { position: relative; height: auto; min-height: 0; padding: 21px 22px 20px; }.brand { font-size: 38px; }.rail-nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 25px; }.rail-nav a, .rail-nav a:last-child { padding: 9px 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.72); font-size: 18px; }.rail-dot, .rail-identity { display: none; }.rail-links { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; margin-top: 23px; }.main-content { padding: 22px 20px 30px; }.content-grid { display: block; }.secondary-column { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 20px; }.about-box { margin-top: 0; }.hero-feature { min-height: 405px; }.hero-art { height: 330px; min-height: 330px; }.project-grid { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; }.project-card { min-width: 118px; }.archive { grid-template-columns: auto 1fr 36px; }.archive-divider, .archive-months { display: none; }
}

@media (max-width: 620px) {
  .editor-bar { top: 8px; right: 8px; left: 8px; display: block; padding: 10px; }.editor-context { display: block; }.editor-kicker, .editor-context strong, .editor-status { display: block; margin-bottom: 4px; }.editor-actions { justify-content: flex-start; margin-top: 8px; }.editor-actions button, .editor-close { min-height: 28px; padding: 6px 7px 5px; font-size: 12px; }.editor-mode { padding-top: 153px; }
  .comment-panel { top: 160px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 176px); }
  .rail-nav { gap: 0 12px; }.rail-nav a { font-size: 16px; }.hero-feature { grid-template-columns: 1fr; min-height: 0; }.hero-copy { padding-top: 17px; }.eyebrow { margin-bottom: 16px; font-size: 19px; }.hero-art { height: 260px; min-height: 260px; margin-top: 0; }.hero-slogan { font-size: 24px; }.hero-intro { font-size: 17px; }.yellow-button { min-width: 190px; font-size: 21px; }.secondary-column { display: block; }.about-box { margin-top: 18px; }.project-grid { grid-template-columns: repeat(5, 140px); }.archive { margin-top: 16px; }.archive-years { gap: 12px; overflow: hidden; }.archive-years a:nth-child(n+4) { display: none; }
}

@media (max-width: 900px) {
  .page-header { padding-bottom: 28px; }
  .project-detail { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .project-media, .detail-graphic { grid-column: 2; height: 190px; min-height: 190px; }
  .post-detail { grid-template-columns: 1fr; gap: 17px; padding: 18px; }
  .post-score { min-height: 96px; }
}

@media (max-width: 620px) {
  .page-header h1 { font-size: 68px; }
  .page-lede { font-size: 18px; }
  .legal-copy { padding: 22px 18px 26px; }
  .legal-copy h2 { font-size: 30px; }
  .project-detail { grid-template-columns: 1fr; }
  .project-media, .detail-graphic { grid-column: 1; }
  .detail-number { font-size: 54px; }
  .detail-copy h2, .post-detail h2 { font-size: 47px; }
}