/* Layout: one editorial column on a 12-col grid. Labels sit in a narrow left column, content in the wide right one. Pure white or pure black by system setting, one orange full stop as the only colour. */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #6b6b6b;
  --rule: #d9d9d9;
  --accent: #f26a1b;
  --serif-display: "Instrument Serif", "Times New Roman", serif;
  --serif-text: "EB Garamond", Georgia, serif;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 11vw, 144px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000000; --fg: #ffffff; --muted: #9a9a9a; --rule: #2a2a2a; --accent: #ff7a2e; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #000000; --fg: #ffffff; --muted: #9a9a9a; --rule: #2a2a2a; --accent: #ff7a2e; color-scheme: dark; }
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--serif-text); font-size: 21px; line-height: 1.5;
  padding-inline: var(--gutter); padding-block: 0 48px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.page { max-width: 1240px; margin-inline: auto; }
.label { font-family: var(--serif-text); font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

header.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; padding-block: 28px 20px; border-bottom: 1px solid var(--rule); }
.mark { font-family: var(--serif-display); font-weight: 400; font-size: 28px; letter-spacing: normal; text-decoration: none; }
.mark i { color: var(--accent); font-style: normal; }
.top nav { display: flex; gap: 28px; font-size: 19px; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.hero { padding-block: clamp(64px, 12vw, 160px) var(--section); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.hero h1 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(60px, 14.2vw, 216px); line-height: 0.95; letter-spacing: normal; text-wrap: balance; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero h1 i { color: var(--accent); font-style: normal; }
.hero p { margin: 0; max-width: 34ch; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--muted); }
.hero p b { color: var(--fg); font-weight: 500; }

section.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-block: 0 var(--section); }
.sec > .label { grid-column: 1 / span 3; padding-top: 0.5em; }
.sec > .body { grid-column: 4 / -1; min-width: 0; }

.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.index > li { border-bottom: 1px solid var(--rule); }
.index > li:first-child { border-bottom-color: var(--fg); }
.item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: baseline; padding-block: clamp(24px, 3vw, 36px); text-decoration: none; }
.item .n { font-variant-numeric: lining-nums tabular-nums; color: var(--muted); font-size: 16px; }
.item h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(42px, 6vw, 80px); line-height: 1; letter-spacing: normal; }
.item p { grid-column: 2; margin: 0; max-width: 46ch; color: var(--muted); font-size: 20px; line-height: 1.45; }
.item .s { font-style: italic; color: var(--muted); font-size: 20px; white-space: nowrap; }
.item.live { padding-block: clamp(32px, 4vw, 56px); }
.item.live h3 { font-size: clamp(60px, 10vw, 144px); }
.item.live .s { color: var(--fg); }
a.item:hover h3 { font-style: italic; }
a.item:focus-visible { outline-offset: -2px; }
.pillars { grid-column: 2; margin: 14px 0 0; font-size: 20px; color: var(--fg); display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; list-style: none; }
.pillars li + li::before { content: "/"; color: var(--muted); margin-right: 18px; }

.about .body p { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(32px, 4.6vw, 62px); line-height: 1.12; letter-spacing: normal; max-width: 22ch; text-wrap: pretty; }
.about .body p em { font-style: italic; }
.about .body p.more { margin-top: 40px; max-width: 44ch; font-size: 20px; color: var(--muted); font-family: var(--serif-text); letter-spacing: 0; font-weight: 400; line-height: 1.55; }

.follow .body a { display: inline-block; font-family: var(--serif-display); font-weight: 400; font-size: clamp(46px, 8.4vw, 124px); line-height: 1; letter-spacing: normal; text-decoration: none; border-bottom: 1px solid var(--fg); padding-bottom: 0.08em; }
.follow .body a:hover { border-bottom-color: var(--accent); font-style: italic; }
.follow .body a span { color: var(--accent); }
.follow .body p { margin: 24px 0 0; max-width: 40ch; color: var(--muted); font-size: 18px; }

footer.end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 24px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
footer.end b { color: var(--fg); font-weight: 500; }

@media (max-width: 860px) {
  section.sec { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sec > .label, .sec > .body { grid-column: 1; }
  .item { grid-template-columns: 36px minmax(0, 1fr); }
  .item .s { grid-column: 2; grid-row: 2; }
  .item p { grid-row: 3; }
  .pillars { grid-row: 4; }
  .top nav { gap: 20px; }
  .pillars { gap: 4px 20px; }
  .pillars li + li::before { display: none; }
}
@media (max-width: 480px) { body { font-size: 19px; } .item p, .item .s { font-size: 18px; } }
@media (prefers-reduced-motion: no-preference) { a.item h3, .follow .body a { transition: font-variation-settings 0.2s ease; } }