*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: #0b0b0b;
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

:root {
  --bg: #0b0b0b;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --border: #232323;
  --muted: #999;
  --dim: #555;
  --accent: #d9a441;      /* tungsten — the colour of stage light */
  --pad: clamp(20px, 4.5vw, 60px);
}

a { color: inherit; }

/* ── PAGE TRANSITIONS (View Transitions API, CSS fallback) ── */
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); } }
@keyframes vt-in-left  { from { opacity: 0; transform: translateX(-48px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(48px); } }
@keyframes vt-out-left  { to { opacity: 0; transform: translateX(48px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(-48px); } }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .34s ease both; }
html[data-dir="left"]::view-transition-old(root) { animation: vt-out-left .28s ease both; }
html[data-dir="left"]::view-transition-new(root) { animation: vt-in-left .34s ease both; }
html[data-dir="right"]::view-transition-old(root) { animation: vt-out-right .28s ease both; }
html[data-dir="right"]::view-transition-new(root) { animation: vt-in-right .34s ease both; }
/* fallback for browsers without the API */
#views.fading { opacity: 0; transform: scale(.99); }
#views { transition: opacity .22s ease, transform .22s ease; }

/* ── VIEWS ── */
.view { display: none; min-height: 100vh; }
.view.current { display: block; }

/* ── NAV ── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 68px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 40px;
  background: linear-gradient(to bottom, rgba(11,11,11,.8), transparent);
  transition: background .4s;
}
#nav.scrolled { background: rgba(11,11,11,.97); }
.nav-logo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  flex: 1;
}
.nav-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.here { color: #fff; }
.nav-links a.here { font-weight: 700; }
.nav-contact {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.4);
  padding: 7px 18px;
  border-radius: 2px;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.nav-contact:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── BILLBOARD (shared hero chrome for home + work pages) ── */
.billboard {
  position: relative;
  height: 88vh;
  min-height: 520px;
  overflow: hidden;
  background: #000;
}
.bb-media { position: absolute; inset: 0; overflow: hidden; }
.bb-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: bb-zoom 30s ease-in-out infinite alternate;
}
.bb-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@keyframes bb-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.bb-poster.art-steel {
  background-image: none !important;
  background: linear-gradient(160deg, #0d1117 0%, #26313f 60%, #0a0e13 100%);
}
.bb-poster.art-steel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 75% 20%, rgba(0,120,212,.25), transparent 60%);
}
.bb-poster.art-green {
  background-image: none !important;
  background: linear-gradient(160deg, #06170a 0%, #114d22 60%, #051408 100%);
}
.bb-poster.art-green::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 75% 20%, rgba(100,220,130,.2), transparent 60%);
}
.bb-media iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%) scale(1.3);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.bb-media iframe.ready { opacity: 1; }
.bb-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
}
.bb-shade-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,11,11,.9) 0%, rgba(11,11,11,.45) 35%, transparent 62%);
  pointer-events: none;
}
.bb-shade-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to top, var(--bg) 8%, rgba(11,11,11,.55) 45%, transparent 100%);
  pointer-events: none;
}
.bb-content {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 12%;
  max-width: 640px;
  z-index: 5;
}
.bb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #c9c9c9;
  font-weight: 600;
  margin-bottom: 14px;
}
.bb-brand::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.bb-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.028em;
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.bb-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #ccc;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bb-meta .match { color: var(--accent); font-weight: 700; }
.bb-meta .chip {
  border: 1px solid rgba(255,255,255,.35);
  font-size: 10px;
  padding: 1px 7px;
  letter-spacing: .06em;
}
.bb-desc {
  font-size: clamp(14px, 1.5vw, 16.5px);
  color: #ddd;
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 24px;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.bb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 3px;
  transition: background .2s;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.bb-btn.play { background: #fff; color: #000; }
.bb-btn.play:hover { background: #ddd; }
.bb-btn.play.hidden { display: none; }
.bb-btn.info { background: rgba(120,120,120,.4); color: #fff; backdrop-filter: blur(6px); }
.bb-btn.info:hover { background: rgba(120,120,120,.55); }
.bb-btn .ic { font-size: 12px; }
.bb-mute {
  position: absolute;
  right: var(--pad);
  bottom: 14%;
  z-index: 6;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.bb-mute:hover { background: rgba(0,0,0,.55); }
.bb-mute.show { display: flex; }

/* ── WORK PAGE: edge navigation between worlds ── */
.edge-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, transform .15s;
  backdrop-filter: blur(4px);
}
.edge-nav:hover { background: rgba(0,0,0,.75); border-color: #fff; transform: translateY(-50%) scale(1.08); }
.edge-nav.prev { left: 14px; }
.edge-nav.next { right: 14px; }
.edge-nav small {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
  left: 50%;
  transform: translateX(-50%);
}
.edge-nav:hover small { opacity: 1; }
.backlink {
  position: absolute;
  top: 84px;
  left: var(--pad);
  z-index: 20;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #bbb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0,0,0,.35);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  transition: color .2s, background .2s;
}
.backlink:hover { color: #fff; background: rgba(0,0,0,.6); }

/* ── WORLD BAND ── */
.world {
  position: relative;
  z-index: 10;
  padding: 26px var(--pad) 46px;
}
.world-grid {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(28px, 5vw, 70px);
  max-width: 1300px;
}
.world-label {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 14px;
}
.world-writeup {
  font-size: 14.5px;
  color: #ccc;
  line-height: 1.8;
}
.world-writeup p + p { margin-top: 14px; }
.world-facts { font-size: 13px; }
.world-facts .fact {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.world-facts .fact:first-child { border-top: 1px solid var(--border); }
.world-facts .k { color: var(--dim); flex: 0 0 auto; }
.world-facts .v { color: #ddd; text-align: right; font-weight: 600; }
.world-bts { margin-top: 30px; max-width: 1300px; }
.world-bts h4 {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 12px;
}
.bts-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.bts-strip img, .bts-strip video {
  height: 170px;
  border-radius: 4px;
  flex: 0 0 auto;
  display: block;
  background: #000;
}
.bts-hint {
  border: 1px dashed #2c2c2c;
  border-radius: 4px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
  padding: 16px 18px;
  max-width: 520px;
}
.bts-hint code { color: #888; font-size: 11px; }

/* ── ROWS ── */
.rows { position: relative; z-index: 10; padding: 26px 0 30px; }
.row-block { margin-bottom: 40px; position: relative; }
.row-title {
  padding: 0 var(--pad);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.row-title small {
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: .04em;
}
.row-wrap { position: relative; }
.row-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px var(--pad) 26px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.row-scroll:active { cursor: grabbing; }
.row-scroll::-webkit-scrollbar { display: none; }
/* row chevrons */
.row-nav {
  position: absolute;
  top: 0;
  bottom: 26px;
  width: 46px;
  border: 0;
  background: linear-gradient(to right, rgba(11,11,11,.9), transparent);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transition: opacity .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-nav.next { right: 0; background: linear-gradient(to left, rgba(11,11,11,.9), transparent); }
.row-nav.prev { left: 0; }
.row-wrap:hover .row-nav { opacity: 1; }

/* ── CARDS ── */
.card {
  flex: 0 0 300px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s;
  position: relative;
  cursor: pointer;
}
.card:hover {
  transform: scale(1.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.9);
  z-index: 20;
}
.card-thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #191919;
}
.card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.card:hover .card-thumb img { transform: scale(1.06); }
.card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 48%);
}
.card-logo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.card-logo small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ccc;
  margin-bottom: 3px;
}
.art-steel { background: linear-gradient(160deg, #0d1117 0%, #26313f 60%, #0a0e13 100%); position: relative; }
.art-steel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 130% 90% at 78% 18%, rgba(0,120,212,.22), transparent 60%);
}
.art-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #aaa;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.4);
  padding: 2px 8px;
}
.art-green { background: linear-gradient(160deg, #06170a 0%, #114d22 60%, #051408 100%); position: relative; }
.art-green::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 130% 90% at 78% 18%, rgba(100,220,130,.16), transparent 60%);
}
/* editorial cards (writing row on home) */
.card.paper .card-thumb { background: #f5f3ee; }
.card.paper .card-thumb::after { background: none; }
.card.paper .paper-inner {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  color: #111;
}
.card.paper .paper-date {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
  margin-bottom: 8px;
}
.card.paper .paper-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  flex: 1;
}
.card.paper .paper-read {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #111;
}

/* ── APPROACH ── */
.appr {
  padding: clamp(80px, 10vw, 140px) var(--pad) clamp(60px, 8vw, 110px);
  background:
    radial-gradient(ellipse 60% 45% at 85% 8%, rgba(217,164,65,.06), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.appr-hd { max-width: 1200px; margin: 0 auto 56px; }
.appr-hd .world-label { margin-bottom: 16px; }
.appr-hd h2, .page-h {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  max-width: 680px;
}
.appr-hd p {
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(14px, 1.5vw, 16.5px);
  line-height: 1.8;
  max-width: 560px;
}
.appr-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  outline: 1px solid var(--border);
}
.appr-step {
  background: var(--surface);
  padding: 30px 28px 34px;
  transition: background .2s;
}
.appr-step:hover { background: #191919; }
.appr-step .n {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.appr-step h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.appr-step p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.75;
}
.appr-step .ex {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--dim);
  font-style: italic;
}
/* approach teaser strip on home */
.appr-teaser {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 50% 90% at 90% 50%, rgba(217,164,65,.08), transparent 60%),
    var(--surface);
  padding: 40px var(--pad);
  transition: background .25s;
}
.appr-teaser:hover { background: radial-gradient(ellipse 50% 90% at 90% 50%, rgba(217,164,65,.12), transparent 60%), #181818; }
.appr-teaser-inner {
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.appr-teaser h3 {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.appr-teaser p { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 560px; }
.appr-teaser .go {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ── PAGES (approach / story shells) ── */
.page-shell { padding: 130px var(--pad) 80px; max-width: 1200px; margin: 0 auto; }

/* ── STORY ── */
.story-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(36px, 6vw, 90px);
  margin-top: 46px;
}
.story-text {
  color: #bbb;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
}
.story-text p + p { margin-top: 20px; }
.story-text strong { color: #fff; font-weight: 600; }
.story-text a { color: #fff; }
.timeline { margin-top: 40px; border-top: 1px solid var(--border); }
.tl-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.tl-when { color: var(--dim); font-size: 12px; padding-top: 2px; }
.tl-what b { color: #eee; font-weight: 600; display: block; }
.tl-what span { color: var(--muted); font-size: 13px; }

/* ── WRITING (index + article pages, in-world editorial) ── */
.paper-page {
  background: #f5f3ee;
  color: #111;
  min-height: 100vh;
}
.paper-shell { max-width: 1100px; margin: 0 auto; padding: 130px var(--pad) 90px; }
.paper-kicker {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #b04a3e;
  font-weight: 700;
  margin-bottom: 16px;
}
.paper-h {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  max-width: 800px;
}
.paper-sub { color: #777; font-size: 15px; margin-top: 16px; max-width: 560px; line-height: 1.7; }
.essay-list { margin-top: 56px; border-top: 1px solid #ddd; }
.essay-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  transition: background .18s;
}
.essay-item:hover { background: #fff; }
.essay-item .d {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
}
.essay-item .t {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
}
.essay-item .l { font-size: 13px; color: #777; margin-top: 6px; line-height: 1.6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.essay-item .go { font-size: 18px; color: #bbb; }
.essay-item:hover .go { color: #111; }

/* article page */
.article-shell { max-width: 720px; margin: 0 auto; padding: 130px var(--pad) 60px; }
.article-date {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b04a3e;
  font-weight: 700;
  margin-bottom: 18px;
}
.article-h {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-bottom: 30px;
}
.article-body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.85;
  color: #222;
}
.article-body p + p { margin-top: 22px; }
.article-body h3 {
  font-size: 21px;
  margin: 34px 0 12px;
  letter-spacing: -.01em;
}
.article-body em { font-style: italic; }
.article-body .lede::first-letter {
  font-size: 3.4em;
  float: left;
  line-height: .85;
  padding: 4px 10px 0 0;
  font-weight: 700;
}
.article-src {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
  font-size: 12.5px;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.article-src a { color: #666; }
.article-pager {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad) 100px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.article-pager a {
  text-decoration: none;
  font-size: 13px;
  color: #777;
  max-width: 44%;
  transition: color .2s;
}
.article-pager a:hover { color: #111; }
.article-pager .lbl {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #aaa;
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
.article-pager .nt { font-family: Georgia, serif; font-weight: 700; font-size: 15px; line-height: 1.3; }
.article-pager .next { text-align: right; margin-left: auto; }

/* ── CONTACT ── */
.contact {
  padding: clamp(80px, 10vw, 150px) var(--pad);
  text-align: center;
}
.contact-h {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 18px;
}
.contact-sub {
  font-size: 15px;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.75;
}
.contact-email {
  display: inline-block;
  font-size: clamp(16px, 2vw, 22px);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 4px;
  transition: border-color .2s;
}
.contact-email:hover { border-color: #fff; }

/* ── FOOTER ── */
footer {
  padding: 26px var(--pad);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--dim);
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--muted); }

/* ── MOBILE ── */
@media (max-width: 760px) {
  .nav-links { display: none; }
  #nav { justify-content: space-between; }
  .billboard { height: 74vh; }
  .card { flex: 0 0 240px; }
  .world-grid { grid-template-columns: 1fr; gap: 26px; }
  .story-grid { grid-template-columns: 1fr; gap: 20px; }
  .tl-row { grid-template-columns: 90px 1fr; }
  .essay-item { grid-template-columns: 1fr; gap: 6px; }
  .essay-item .go { display: none; }
  .edge-nav { width: 40px; height: 40px; font-size: 16px; }
  .row-nav { display: none; }
}

/* ══ TYPOGRAPHY SYSTEM ══
   Fraunces      — display serif for titles (prestige-drama, not streaming-app)
   Newsreader    — essay body, built for on-screen long-form reading
   IBM Plex Mono — small labels: eyebrows, kickers, chips, facts (call-sheet texture)
   Delete this block to revert to the system-sans look. */
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
/* titles — the marquee voice */
.bb-title, .page-h, .appr-hd h2, .contact-h, .appr-teaser h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
}
/* paper-world headings join the same voice */
.paper-h, .article-h, .essay-item .t, .card.paper .paper-title, .article-pager .nt {
  font-family: var(--font-display);
  font-weight: 600;
}
/* essay reading */
.article-body {
  font-family: var(--font-serif);
  font-size: 19px;
}
.article-body em { font-style: italic; }
/* call-sheet labels */
.bb-brand, .world-label, .paper-kicker, .article-date,
.bb-meta .chip, .world-facts .k, .art-badge, .appr-step .n, .tl-when {
  font-family: var(--font-mono);
}
.bb-brand { letter-spacing: .2em; }
.world-label, .paper-kicker, .article-date { letter-spacing: .18em; }
/* nav joins the call-sheet register */
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* location line */
.contact-loc {
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 2;
}

/* ══════════════════════════════════════════════════════════════
   STATIC BUILD LAYER
   Added when the site moved from one client-rendered document to
   real HTML pages. Everything above is the original visual
   language and is deliberately untouched.
   ══════════════════════════════════════════════════════════════ */

/* Each document now contains exactly one view, so it is always shown.
   The class is kept so the client router can continue to reason about it. */
.view { display: block; }

/* Skip link: the first tab stop on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #fff;
  color: #000;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

/* A single, consistent focus indicator. Visible on both grounds. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.paper-page :where(a, button):focus-visible { outline-color: #b04a3e; }

/* Edge navigation is now a pair of real links. */
.work-pager { display: contents; }
a.edge-nav { text-decoration: none; }

/* The approach page needs headroom under the fixed nav. */
.appr-page { min-height: 100vh; padding-top: 130px; }
.appr-step h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

/* Essay list lede sits under the title. */
.essay-item .l { display: block; }

/* Article sub-headings keep their look now that they are h2 not h3. */
.article-body h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 34px 0 12px;
  letter-spacing: -.01em;
}

/* Carousel chevrons hide at the ends rather than sitting dead. */
.row-nav[hidden] { display: none; }

/* Backstage section removes itself when a work item has no photos yet. */
.world-bts[hidden] { display: none; }

/* Cards carry their own focus treatment so the ring follows the artwork. */
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Respect a reader's motion preference throughout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bb-poster { animation: none; }
  .card:hover { transform: none; }
}

/* Print: the essays should print like essays. */
@media print {
  #nav, .bb-media, .row-block, .bb-actions, .bb-mute, .edge-nav,
  .article-pager, .appr-teaser, .contact, footer, .skip-link { display: none !important; }
  body, .paper-page { background: #fff !important; color: #000 !important; }
  .article-shell, .paper-shell { padding: 0 !important; max-width: none !important; }
  .article-body { font-size: 12pt; }
}

/* ── Contrast corrections (WCAG 2.1 AA) ──────────────────────────
   The original greys were chosen by eye on a bright screen and fall
   under 4.5:1. These are the nearest values that keep the same
   restrained feel while passing for small text on both grounds.
   Dark ground  #0b0b0b : #8a8a8a = 5.7:1
   Paper ground #f5f3ee : #6b6660 = 5.1:1                          */
:root { --dim: #8a8a8a; --ink-dim: #6b6660; }

.paper-sub,
.essay-item .d,
.essay-item .l,
.essay-item time,
.card.paper .paper-date,
.article-src,
.article-pager a,
.article-pager .lbl,
.writing-hd a { color: var(--ink-dim); }

.essay-item .go { color: #8d8880; }
.article-src a { color: #4a4640; }

/* Backstage heading is an h2 for document outline; it keeps the small
   call-sheet look it had as an h4. */
.world-bts .bts-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ── Mobile navigation ───────────────────────────────────────────
   Below 760px the inline nav list is replaced by a disclosure menu.
   It is a <details> element, so it opens and closes with no
   JavaScript; the panel is styled as a cinematic sheet rather than
   a shrunken desktop bar.                                          */
.nav-mobile { display: none; position: relative; margin-left: auto; }

.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 8px 16px;
  border-radius: 2px;
  transition: background .2s, border-color .2s;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.nav-mobile[open] > summary { background: rgba(255,255,255,.16); border-color: #fff; }

.nav-mobile > ul {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(14,14,14,.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-lt, #2e2e2e);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.nav-mobile > ul li { list-style: none; }
.nav-mobile > ul a {
  display: block;
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ddd;
  text-decoration: none;
  border-radius: 2px;
}
.nav-mobile > ul a:hover,
.nav-mobile > ul a.here { background: rgba(255,255,255,.08); color: #fff; }
.nav-mobile > ul a.here { color: var(--accent); }
.nav-mobile-contact { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.nav-mobile-contact a { color: var(--accent) !important; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-contact { display: none; }
  .nav-mobile { display: block; }
  #nav { gap: 16px; }
  /* The menu sheet must sit above the billboard content. */
  #nav { z-index: 1100; }
}

/* ── Edge navigation collision ───────────────────────────────────
   The side chevrons sit at the vertical middle of the billboard,
   which on narrower desktops lands on top of a long title. Below
   1180px they regroup as a pair under the hero copy instead of
   disappearing: the affordance is kept, the collision is not.     */
@media (max-width: 1180px) {
  .work-pager {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 var(--pad) 30px;
    margin-top: -18px;
    position: relative;
    z-index: 12;
  }
  a.edge-nav {
    position: static;
    transform: none;
    width: auto;
    height: 40px;
    border-radius: 3px;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
  }
  a.edge-nav:hover { transform: none; background: rgba(0,0,0,.75); }
  a.edge-nav small {
    position: static;
    opacity: 1;
    transform: none;
    margin: 0;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #bbb;
  }
  a.edge-nav.next { flex-direction: row-reverse; }
}

@media (max-width: 480px) {
  a.edge-nav small { display: none; }
  .work-pager { justify-content: space-between; }
}

/* ── Billboard legibility in portrait ────────────────────────────
   The left-to-right shade works in landscape, where copy occupies the
   left half. In portrait the copy spans the full width, so the right
   of every line sits over bright video. Below 760px the scrim becomes
   vertical instead: dark under the text, clear above it, so the
   footage still reads as footage.                                  */
@media (max-width: 760px) {
  .bb-shade-left {
    background: linear-gradient(
      to bottom,
      rgba(11,11,11,.72) 0%,
      rgba(11,11,11,.30) 26%,
      rgba(11,11,11,.55) 52%,
      rgba(11,11,11,.92) 78%,
      var(--bg) 100%
    );
  }
  .bb-shade-bottom { height: 28%; }
  /* Stay bottom-anchored: the billboard clips its overflow, so pushing
     content down from the top hides the buttons on short screens. */
  .bb-content { bottom: 9%; top: auto; }
  .bb-title { font-size: clamp(30px, 8.4vw, 40px); }
  .bb-meta { gap: 8px 12px; font-size: 12px; }
  .bb-desc { font-size: 14px; line-height: 1.65; }
  .bb-actions { gap: 10px; }
  .bb-btn { padding: 12px 20px; font-size: 13px; }
}

/* Very small screens: the hero should not push the work off-screen. */
@media (max-width: 420px) {
  .billboard { height: 78vh; min-height: 520px; }
  .bb-content { bottom: 7%; }
}

/* ── Featured work ───────────────────────────────────────────────
   A row of identical tiles reads as a list. Giving the flagship of
   each row more width and a quiet marker makes the catalogue read
   as a body of work with a starting point.                        */
.card.featured { flex-basis: 400px; }
/* Wider, but exactly as tall: 400 / 2.37 matches 300 / (16:9), so the row
   keeps one baseline instead of leaving dead space under shorter cards. */
.card.featured .card-thumb { aspect-ratio: 2.37 / 1; }
.card.featured .card-logo { font-size: 17px; padding: 14px 16px; }

.card-flag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f0e0bd;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(217,164,65,.55);
  padding: 3px 9px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.card-flag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 760px) {
  /* On a phone the extra width costs more than the emphasis is worth;
     the marker alone carries it. */
  .card.featured { flex-basis: 250px; }
  .card.featured .card-thumb { aspect-ratio: 16 / 9; }
  .card.featured .card-logo { font-size: 15px; }
}

/* ── Navigation over the paper world ─────────────────────────────
   The essays sit on cream. A dark navigation bar floating over them
   reads as a fragment of a different site, so on those pages the nav
   takes the paper's own colours.                                    */
body[data-surface="paper"] #nav {
  background: linear-gradient(to bottom, rgba(245,243,238,.96), rgba(245,243,238,0));
}
body[data-surface="paper"] #nav.scrolled {
  background: rgba(245,243,238,.97);
  border-bottom: 1px solid #e2ded6;
  backdrop-filter: blur(12px);
}
body[data-surface="paper"] .nav-logo { color: #111; }
body[data-surface="paper"] .nav-links a { color: #6b6660; }
body[data-surface="paper"] .nav-links a:hover,
body[data-surface="paper"] .nav-links a.here { color: #111; }
body[data-surface="paper"] .nav-contact {
  color: #111;
  border-color: rgba(17,17,17,.35);
}
body[data-surface="paper"] .nav-contact:hover {
  background: rgba(17,17,17,.08);
  border-color: #111;
}
body[data-surface="paper"] .nav-mobile > summary {
  color: #111;
  border-color: rgba(17,17,17,.35);
}
body[data-surface="paper"] .nav-mobile > summary:hover,
body[data-surface="paper"] .nav-mobile[open] > summary {
  background: rgba(17,17,17,.08);
  border-color: #111;
}
body[data-surface="paper"] .skip-link { background: #111; color: #fff; }

/* ── VISITORS ─────────────────────────────────────────────── */
/* The no-JavaScript counting pixel: present, but never seen or felt. */
.count-pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── CHAT ─────────────────────────────────────────────────── */
/* Docked to the corner like a lower-third, in the site's own voice. Only
   appears when the site owner opens a chat; a visitor has no way to summon
   it. Minimised, it becomes a small tab in the same corner. */
.chat-tab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 2px;
  background: rgba(11,11,11,.88); color: #fff;
  border: 1px solid var(--accent);
  font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(6px);
}
.chat-tab[hidden] { display: none; }
.chat-tab::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(217,164,65,.6);
}
.chat-tab.has-unread::before { animation: chat-pulse 1.6s ease-out infinite; }
@keyframes chat-pulse { to { box-shadow: 0 0 0 9px rgba(217,164,65,0); } }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(380px, calc(100vw - 40px)); height: min(500px, calc(100vh - 100px));
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: var(--surface); color: #eee;
  border: 1px solid var(--border); border-top: 2px solid var(--accent);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: chat-arrive .35s ease-out;
}
@keyframes chat-arrive { from { opacity: 0; transform: translateY(16px); } }
.chat-tuck {
  background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1;
  padding: 0 4px; cursor: pointer;
}
.chat-tuck:hover { color: #fff; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.chat-titles { flex: 1; min-width: 0; }
.chat-title { font: 600 15px/1.2 var(--font-display, serif); margin: 0; }
.chat-status { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.chat-panel.is-online .chat-status::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: #57b36a; vertical-align: 1px;
}
.chat-close {
  background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1;
  padding: 0 4px; cursor: pointer;
}
.chat-close:hover { color: #fff; }

.chat-log { list-style: none; margin: 0; padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; }
.chat-text { margin: 0; padding: 9px 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-them { align-self: flex-start; }
.chat-them .chat-text { background: var(--surface-2); border-left: 2px solid var(--accent); }
.chat-me { align-self: flex-end; }
.chat-me .chat-text { background: rgba(217,164,65,.14); color: #fff; }
.chat-time { display: block; margin-top: 3px; font-size: 10.5px; color: var(--dim); }
.chat-me .chat-time { text-align: right; }
.chat-notice { align-self: center; font-size: 12px; color: var(--muted); }

.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-input {
  flex: 1; min-width: 0; resize: none; background: var(--bg); color: #fff;
  border: 1px solid var(--border); border-radius: 2px; padding: 8px 10px;
  font-family: inherit; font-size: 14px; line-height: 1.4;
}
.chat-input:focus { border-color: var(--dim); }
.chat-send {
  align-self: stretch; padding: 0 14px; border-radius: 2px; cursor: pointer;
  background: var(--accent); color: #1a1204; border: 0;
  font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase;
}
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-note { margin: 0; padding: 0 14px 10px; font-size: 11px; color: var(--dim); }
.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
  .chat-tab { right: 12px; bottom: 12px; }
  .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: min(70vh, 520px); border-left: 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { animation: none; }
  .chat-tab.has-unread::before { animation: none; box-shadow: 0 0 0 3px rgba(217,164,65,.35); }
}
@media print { .chat-tab, .chat-panel { display: none !important; } }

/* ── 404 ─────────────────────────────────────────────────── */
/* Classes, not inline styles: the live site's policy blocks style attributes. */
.not-found { min-height: 60vh; }
.not-found-note { color: var(--muted); max-width: 46ch; margin-top: 18px; line-height: 1.8; }
.not-found-action { margin-top: 32px; }
.not-found-action .bb-btn { text-decoration: none; }

/* ── Comments ────────────────────────────────────────────────
   At the end of an essay, on the paper. Drawn by src/client/comments.js;
   hidden entirely without JavaScript.

   The essay's own three voices and no others: the display face for
   headings and names, the reading serif for anything anyone says (and the
   small print around it), and the mono call-sheet labels for dates,
   counts and buttons. */
.comments {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad) 72px;
  color: #222;
  font-family: var(--font-serif);
}
.comments-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #111;
}
.comments-intro, .comments-empty, .comments-error,
.composer-hint, .composer-note, .composer-error {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.comments-intro { margin-top: 6px; }
.comments-empty { margin-top: 22px; }
.comments-error, .composer-error { color: #9c3a2f; }
.comments-error { margin-top: 22px; }

.comments-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comments-list { margin-top: 30px; }
.comment { outline: none; }
.comments-list > .comment { padding: 22px 0; border-top: 1px solid #e3e0d8; }
.comments-list > .comment:first-child { padding-top: 0; border-top: 0; }
.comment-replies { margin: 18px 0 0 22px; padding-left: 20px; border-left: 1px solid #d8d4ca; }
.comment-replies > .comment + .comment { margin-top: 18px; }

/* A comment someone arrived at by its link, or just posted: a mark in the
   margin, beside the comment only, never shifting the words. */
.comment-body { position: relative; }
.comment.is-target > .comment-body::before,
.comment.is-new > .comment-body::before {
  content: '';
  position: absolute;
  left: -16px; top: 2px; bottom: 2px;
  width: 3px;
  background: #b04a3e;
}

.comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.comment-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: #111;
  overflow-wrap: anywhere;
}
.comment-badge, .comment-time, .composer-progress,
.comment-reply, .comments-start, .composer button {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.comment-badge { font-size: 10px; color: #fff; background: #b04a3e; padding: 2px 7px 1px; border-radius: 2px; }
.comment-time { font-size: 10.5px; color: var(--ink-dim); }
.comment-text {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comment-actions { margin-top: 6px; }

.comment-reply, .comments-start, .composer button { font-size: 11px; cursor: pointer; border-radius: 2px; }
.comment-reply { background: none; border: 0; padding: 6px 0; color: var(--ink-dim); }
.comment-reply:hover { color: #111; }
.comments-start-row { margin-top: 30px; }
.comments-start, .composer-next { background: #111; color: #f5f3ee; border: 1px solid #111; padding: 12px 20px; }
.comments-start:hover, .composer-next:hover { background: #b04a3e; border-color: #b04a3e; }
.composer-next:disabled { opacity: .6; cursor: default; }
.composer-cancel, .composer-back { background: none; color: var(--ink-dim); border: 1px solid #d8d4ca; padding: 12px 16px; }
.composer-cancel:hover, .composer-back:hover { color: #111; border-color: #111; }
.composer-cancel { margin-right: auto; }

/* The box for writing. Under a comment it sits where the reply will. */
.composer {
  margin-top: 16px;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid #e3e0d8;
  border-top: 2px solid #b04a3e;
}
.comment > .composer { margin-left: 42px; }
.composer-progress { font-size: 10px; color: var(--ink-dim); }
.composer-step[hidden] { display: none; }
.composer-label {
  display: block;
  margin: 6px 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #111;
}
.composer-field {
  display: block;
  width: 100%;
  font: 17px/1.6 var(--font-serif);
  color: #111;
  background: #fbfaf7;
  border: 1px solid #d8d4ca;
  border-radius: 2px;
  padding: 10px 12px;
}
textarea.composer-field { resize: vertical; min-height: 140px; }
.composer-field:focus { outline: none; border-color: #b04a3e; box-shadow: 0 0 0 3px rgba(176,74,62,.14); }
.composer-hint { margin-top: 8px; font-size: 15px; }
.composer-error { margin-top: 12px; }
.composer-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.composer-note { margin-top: 14px; font-size: 14.5px; }
.comments-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
  .comment-replies { margin-left: 4px; padding-left: 14px; }
  .comment > .composer { margin-left: 0; }
  .composer { padding: 18px 16px; }
  .comment.is-target > .comment-body::before,
  .comment.is-new > .comment-body::before { left: -12px; }
}
@media print { .comments { display: none !important; } }

/* ── Bookmarks ───────────────────────────────────────────────
   Short takes on the paper, in the spirit of a linked list: the linked
   title is the headline and goes straight to the thing; what I think
   follows; the star beside the time is the bookmark's own page. */
.bm-shell { max-width: 680px; margin: 0 auto; padding: 130px var(--pad) 40px; }
.bm-h { font-size: clamp(28px, 4vw, 44px); max-width: 16em; }
.bm-feed { color: var(--ink-dim); white-space: nowrap; }
.bm-stream { margin-top: 44px; border-top: 1px solid #ddd; }
.bm { padding: 30px 0 26px; border-bottom: 1px solid #e3e0d8; }
.bm-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.bm-title a { color: #111; text-decoration: none; }
.bm-title a::after { content: '\00a0\2192'; color: #b04a3e; }
.bm-title a:hover { color: #b04a3e; }
.bm-host {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.bm-text { font-family: var(--font-serif); font-size: 18.5px; line-height: 1.7; color: #222; overflow-wrap: anywhere; }
.bm-text p + p { margin-top: 14px; }
.bm-text a { color: #111; text-decoration-color: rgba(176,74,62,.55); text-underline-offset: 3px; }
.bm-text a:hover { color: #b04a3e; }
.bm-media { margin-top: 18px; }
.bm-media img { display: block; max-width: 100%; height: auto; max-height: 78vh; border-radius: 3px; border: 1px solid #e3e0d8; }
.bm-play { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #000; }
.bm-video .bm-play img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; opacity: .92; transition: opacity .2s; }
.bm-play:hover img { opacity: 1; }
.bm-play-btn {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px;
  border-radius: 50%; background: rgba(17,17,17,.72);
  transition: background .2s, transform .2s;
}
.bm-play-btn::before {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.bm-play:hover .bm-play-btn { background: #b04a3e; transform: scale(1.05); }
.bm-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; background: #000; }
.bm-meta {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.bm-when, .bm-talk { color: var(--ink-dim); text-decoration: none; }
.bm-when:hover, .bm-talk:hover { color: #111; }
.bm-star { color: #b04a3e; }
.bm-empty { padding: 30px 0; color: var(--ink-dim); font-family: var(--font-serif); font-size: 17px; }
.bm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.paper-kicker a { color: inherit; text-decoration: none; }
.paper-kicker a:hover { text-decoration: underline; }

/* One bookmark on its own page: a little larger, and the conversation follows. */
.bm-single { padding-bottom: 10px; }
.bm-single .bm { border-bottom: 0; padding-top: 8px; }
.bm-single .bm-title { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; }
.bm-single .bm-text { font-size: 20px; }
.bm-single + .comments { max-width: 680px; padding-top: 18px; }
.bm-single + .comments .comments-h { padding-top: 30px; border-top: 1px solid #e3e0d8; }
.bm-single ~ .article-pager { max-width: 680px; }

/* ── Contact ─────────────────────────────────────────────────
   No address anywhere on the site: a note, asked for one question at a
   time, which arrives in the studio. */
.contact-shell { padding-bottom: 110px; }
.contact-lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.7; color: #333; max-width: 34em; }
.note { margin-top: 30px; }
.note .composer { margin-top: 0; }
.note .composer-actions { justify-content: flex-end; }
.note-off { margin-top: 30px; font-family: var(--font-serif); font-size: 17px; color: var(--ink-dim); }
.note-sent {
  margin-top: 30px; padding: 26px 24px 24px; outline: none;
  background: #fff; border: 1px solid #e3e0d8; border-top: 2px solid #b04a3e;
}
.note-sent-h { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: #111; }
.note-sent-p { margin: 8px 0 20px; font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--ink-dim); overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .bm-title { font-size: 20px; }
  .bm-text { font-size: 17.5px; }
  .bm-single .bm-text { font-size: 18.5px; }
}
@media print { .bm-play-btn, .bm-talk, .bm-feed { display: none !important; } }