@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap');

/* ---------------------------------------------------------------
   christofferbodegard.com / Broadsheet
   Ebb Paper #fbf8e5 / Esoteric Black #020E16 / Ebb Orange #DB5B2C
   --------------------------------------------------------------- */

#cb-app {
  --paper: #fbf8e5;
  --ink: #020E16;
  --orange: #DB5B2C;
  --rule: rgba(2, 14, 22, .15);
  --rule-hard: rgba(2, 14, 22, .28);
  --rail: 300px;

  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  color: var(--ink);
  font-family: Figtree, system-ui, sans-serif;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#cb-app *, #cb-app *::before, #cb-app *::after { box-sizing: border-box; }
#cb-app a { color: inherit; }
#cb-app h1, #cb-app h2, #cb-app h3, #cb-app p { margin: 0; }

/* faded character portrait ------------------------------------- */
.cb-portrait {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Both portraits sit on the same plane, one to each side, feet on the page
   bottom. Their size is set by s.js from each file's native resolution
   (portraitZoom screen px per image px), so higher-res files render bigger.
   Anything taller than the viewport is simply cropped at the top - that is
   the zoom. s.js also shrinks the pair together if they would overlap. */
.cb-portrait img {
  position: absolute;
  bottom: 0;
  width: auto;
  height: auto;
  max-width: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cb-portrait img.is-left { left: 0; }
.cb-portrait img.is-right { right: 0; transform: scaleX(-1); }
.cb-portrait img.is-in { opacity: var(--portrait-opacity, .1); }

.cb-extras { display: flex; flex-direction: column; gap: 8px; }
.cb-extras a { font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 4px; opacity: .8; }
.cb-extras a:hover { opacity: 1; border-bottom-color: var(--orange); }
.cb-extra-text { font-size: 13px; line-height: 1.55; opacity: .65; }

/* rail ---------------------------------------------------------- */
.cb-rail {
  position: relative;
  z-index: 2;
  border-right: 1px solid var(--rule);
  background: rgba(251, 248, 229, .55);
  backdrop-filter: blur(1px);
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  overflow-y: auto;
}
.cb-rail-top { display: flex; flex-direction: column; gap: 30px; }
.cb-name { font-size: 32px; font-weight: 800; line-height: 1.03; letter-spacing: -.03em; }
.cb-hr { height: 1px; background: var(--rule); }

.cb-nav { display: flex; flex-direction: column; gap: 1px; }
.cb-nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 0 10px 14px;
  border-left: 2px solid transparent;
  opacity: .65;
  transition: opacity .15s ease, border-color .15s ease;
}
.cb-nav a:hover { opacity: 1; }
.cb-nav a.is-active { opacity: 1; font-weight: 700; border-left-color: var(--orange); }

.cb-bio { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.6; opacity: .75; }
.cb-rail-bottom { display: flex; flex-direction: column; gap: 16px; }
.cb-social { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.cb-social a { text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 2px; }
.cb-copy { font-size: 11px; opacity: .5; line-height: 1.5; }
.cb-footrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.cb-theme {
  font: inherit; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: inherit;
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; opacity: .75;
}
.cb-theme:hover { opacity: 1; border-color: var(--orange); }
.cb-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cb-watch { display: flex; flex-direction: column; gap: 9px; }
.cb-watch span.cb-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.cb-watch div { display: flex; align-items: center; gap: 9px; font-size: 14px; opacity: .7; }
.cb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(2, 14, 22, .3); }
.cb-dot.is-live { background: #3F893D; }

/* page ---------------------------------------------------------- */
.cb-main { position: relative; overflow-y: auto; overflow-x: hidden; }
.cb-page { position: relative; z-index: 1; padding: 56px 96px 110px; max-width: 1180px; animation: cbIn .45s ease both; }
@keyframes cbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cb-masthead { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.cb-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.cb-masthead .cb-fill { flex: 1; height: 1px; background: rgba(2, 14, 22, .2); }
.cb-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

.cb-title.is-post { font-size: 64px; max-width: 20ch; }
.cb-title.is-mid { font-size: 54px; max-width: 22ch; }
.cb-postmeta {
  display: flex; gap: 14px; margin-top: 34px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
}
.cb-postmeta span { opacity: .5; }
.cb-postmeta .is-orange { color: var(--orange); opacity: 1; }
.cb-title { margin-top: 34px; font-size: 88px; line-height: .92; font-weight: 800; letter-spacing: -.05em; max-width: 15ch; text-wrap: balance; }
.cb-standfirst { margin-top: 26px; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 26px; line-height: 1.4; max-width: 44ch; opacity: .8; text-wrap: pretty; }

/* article body -------------------------------------------------- */
.cb-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
  text-align: justify;
  hyphens: auto;
  columns: 2;
  column-gap: 60px;
  column-rule: 1px solid rgba(2, 14, 22, .14);
  margin-top: 46px;
}
.cb-body.is-single { columns: 1; max-width: 70ch; }
/* Mirrored Steam posts */
.cb-body.is-post { columns: 2; column-gap: 56px; max-width: none; margin-top: 26px; font-size: 17px; }
.cb-body.is-post h3 { font-size: 25px; margin: 30px 0 12px; break-inside: avoid; }
.cb-body.is-post > h3:first-child { margin-top: 0; }
.cb-body.is-post p { margin: 0 0 15px; }
.cb-body.is-post img { border-radius: 6px; }
.cb-linkline {
  text-align: left; hyphens: none; word-break: break-word;
  margin: 4px 0 16px; padding: 8px 0 8px 12px; border-left: 2px solid rgba(219,91,44,.5);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.5;
  break-inside: avoid;
}
.cb-linkline a { border-bottom: none; }
.cb-lede { margin-top: 30px; }
.cb-lede .cb-postmeta { margin-top: 0; }
.cb-lede .cb-title.is-post { margin-top: 12px; font-size: 60px; }
.cb-lede + .cb-figure { margin-top: 26px; }
.cb-lede + .cb-body { margin-top: 26px; }
.cb-body + .cb-body { margin-top: 0; }
.cb-body .cb-out, .cb-body a { overflow-wrap: anywhere; }
.cb-out { text-decoration: none; border-bottom: 1px solid var(--orange); overflow-wrap: anywhere; }
.cb-body blockquote { margin: 0 0 18px; padding-left: 18px; border-left: 2px solid var(--rule); opacity: .85; }
.cb-body ol { margin: 0 0 18px; padding-left: 20px; }
.cb-body li { margin-bottom: 6px; }

/* backstory ------------------------------------------------------ */
.cb-chapter-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px; align-items: start; margin-top: 58px;
}
.cb-page.no-head .cb-chapter-grid:first-of-type { margin-top: 40px; }
.cb-chapter-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
.cb-chapter-grid .cb-body {
  margin-top: 0; column-rule: none; column-gap: 64px; column-fill: balance;
}
.cb-chapter-grid .cb-body p { margin: 0 0 16px; }
.cb-chapter-grid .cb-body p:last-child { margin-bottom: 0; }
.cb-chapter-h {
  font-size: 42px; font-weight: 800; letter-spacing: -.035em;
  margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.cb-side-media { position: sticky; top: 0; margin: 0; }
.cb-side-media img, .cb-side-media video {
  width: 100%; display: block; border: 1px solid var(--rule); border-radius: 6px;
}
.cb-side-quote { position: sticky; top: 0; padding-left: 20px; border-left: 3px solid var(--orange); }
.cb-side-quote div {
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  font-size: 26px; line-height: 1.32; letter-spacing: -.015em;
}
.cb-side-media figcaption {
  margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .5; line-height: 1.5;
}

/* vertical visual rail (backstory + talks) ----------------------- */
/* Wide screens only: the whole rail disappears below 1250px. */
.cb-withside {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px; align-items: start;
}
.cb-withside .cb-chapter-grid .cb-body { columns: 1; max-width: 70ch; }
.cb-vert-rail { position: sticky; top: 28px; margin-top: 44px; min-width: 0; }
.cb-vert { margin: 0; animation: cbIn .35s ease both; }
.cb-vert video, .cb-vert img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border: 1px solid var(--rule); border-radius: 6px; background: #000;
}
.cb-vert figcaption {
  margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .5; line-height: 1.5;
}
.cb-row-talk.is-selectable { cursor: pointer; position: relative; }
.cb-row-talk.is-selected::before {
  content: ''; position: absolute; left: -18px; top: 30px; bottom: 30px;
  width: 3px; background: var(--orange);
}
.cb-aside {
  margin: 30px 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--orange);
}.cb-aside div {
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  font-size: 27px; line-height: 1.32; letter-spacing: -.015em; max-width: 26ch;
}

/* inspirations accordion ----------------------------------------- */
.cb-acc { border-top: 1px solid rgba(2,14,22,.14); }
.cb-acc .cb-row-insp {
  border-top: none; cursor: pointer;
  grid-template-columns: 30px minmax(0,1fr) 160px 60px 22px;
}
.cb-insp-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.cb-chev { font-family: 'JetBrains Mono', monospace; font-size: 15px; opacity: .45; text-align: right; }
.cb-acc.is-open .cb-insp-title { color: var(--orange); }
.cb-drawer { max-height: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.22,1,.36,1); }
.cb-drawer-in { padding: 2px 60px 22px 48px; max-width: 78ch; }
.cb-drawer-in .cb-desc { margin-top: 0; }
.cb-body p { margin: 0 0 18px; }
.cb-body p:last-child { margin-bottom: 0; }
.cb-body a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--orange); }
.cb-body img { width: 100%; height: auto; margin: 6px 0 18px; border: 1px solid var(--rule); }
.cb-body h2, .cb-body h3 { font-family: Figtree, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 12px; }
.cb-body ul { margin: 0 0 18px; padding-left: 20px; }

.cb-dropcap::first-letter {
  float: left;
  font-family: Figtree, sans-serif;
  font-size: 82px;
  line-height: .76;
  font-weight: 800;
  letter-spacing: -.04em;
  padding: 8px 12px 0 0;
}

.cb-pull {
  margin: 52px 0;
  padding: 34px 0;
  border-top: 1px solid rgba(2, 14, 22, .2);
  border-bottom: 1px solid rgba(2, 14, 22, .2);
  text-align: center;
}
.cb-pull div {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 40px;
  line-height: 1.22;
  letter-spacing: -.02em;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

.cb-chapter { display: flex; align-items: baseline; gap: 20px; margin: 52px 0 0; }
.cb-chapter h3 { font-size: 44px; font-weight: 800; letter-spacing: -.035em; }
.cb-chapter .cb-fill { flex: 1; height: 1px; background: rgba(2, 14, 22, .2); }
.cb-chapter span { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em; opacity: .55; }

.cb-plate { margin: 46px 0; display: flex; align-items: flex-end; padding: 20px; aspect-ratio: 16 / 6; border: 1px solid rgba(2, 14, 22, .16); background: repeating-linear-gradient(135deg, rgba(2, 14, 22, .04), rgba(2, 14, 22, .04) 9px, transparent 9px, transparent 18px); }
.cb-plate span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.cb-plate img { width: 100%; height: 100%; object-fit: cover; }
.cb-figure { margin: 46px 0; }
.cb-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 6px; }
.cb-figure figcaption { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* lists (work / press / inspirations) --------------------------- */
.cb-list { margin-top: 30px; }
.cb-list > *:first-child, .cb-list > .cb-acc:first-child { border-top: none; }
.cb-list > .cb-row:first-child { padding-top: 4px; }
.cb-row { display: grid; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(2, 14, 22, .14); text-decoration: none; align-items: baseline; }
.cb-row:hover { background: rgba(2, 14, 22, .035); }
.cb-row-work { grid-template-columns: 78px 1fr; }
.cb-row-press { grid-template-columns: 150px minmax(0,1fr) 90px; padding: 14px 0; align-items: center; }
.cb-press-sum {
  margin-top: 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 14px;
  line-height: 1.5; opacity: .7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cb-thumb.is-empty { border: none; background: none; }
.cb-thumb.is-small.is-empty {
  border: 1px solid rgba(2,14,22,.14);
  background: repeating-linear-gradient(135deg, rgba(2, 14, 22, .05), rgba(2, 14, 22, .05) 9px, transparent 9px, transparent 18px);
}
.cb-thumb.is-small { aspect-ratio: 16 / 9; border: 1px solid rgba(2,14,22,.14); border-radius: 5px; overflow: hidden; }
.cb-thumb.is-small img, .cb-thumb.is-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cb-hero {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 34px;
  align-items: start; margin-top: 34px; text-decoration: none;
  padding-bottom: 34px; border-bottom: 1px solid var(--rule);
}

.cb-hero:hover .cb-hero-title { color: var(--orange); }
.cb-thumb.is-hero {
  aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden;
}
.cb-hero-txt { display: flex; flex-direction: column; gap: 12px; }
.cb-hero-txt .cb-postmeta { margin-top: 0; }
.cb-hero-title {
  margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
  text-wrap: pretty; transition: color .2s ease;
}
.cb-hero-sum {
  margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 16px;
  line-height: 1.6; opacity: .78; max-width: 62ch;
}
.cb-hero .cb-link.is-small { margin-top: 2px; align-self: flex-start; }

.cb-more {
  margin-top: 26px; font: inherit; font-size: 14px; font-weight: 600; color: inherit;
  background: transparent; border: 1px solid var(--rule); border-radius: 4px;
  padding: 12px 22px; cursor: pointer;
}
.cb-more:hover { background: var(--soft); border-color: var(--orange); }
.cb-more.is-arrow {
  display: flex; align-items: center; justify-content: center;
  margin: 26px auto 0; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; font-size: 20px; line-height: 1;
}
.cb-more.is-arrow:hover { color: var(--orange); }
.cb-feed-end {
  margin-top: 30px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; opacity: .4;
}
.cb-row-insp { grid-template-columns: 30px 1fr 160px 60px; padding: 14px 0; }
.cb-row-talk { grid-template-columns: 110px 1fr; padding: 30px 0; }

.cb-row-talk h4 { font-size: 34px; letter-spacing: -.03em; }
.cb-subtitle {
  margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--orange);
}
.cb-row .cb-desc p { margin: 0 0 12px; }
.cb-row .cb-desc p:last-child { margin-bottom: 0; }
.cb-link.is-small { margin-top: 14px; font-size: 15px; }
.cb-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .6; }
.cb-meta.is-orange { color: var(--orange); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; opacity: 1; }
.cb-row h4 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.cb-h4link { text-decoration: none; display: inline-block; }
.cb-h4link h4 { border-bottom: 2px solid rgba(219,91,44,.35); display: inline; }
.cb-h4link:hover h4 { border-bottom-color: var(--orange); }
.cb-right { text-align: right; }
.cb-row .cb-desc { font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.6; opacity: .8; max-width: 62ch; margin-top: 6px; }
.cb-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: #3d4650; padding: 3px 7px; border-radius: 3px; }
.cb-headline { font-size: 17px; line-height: 1.45; font-weight: 500; }

/* devlog cards --------------------------------------------------- */
.cb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; margin-top: 26px; }
.cb-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; padding-top: 16px; border-top: 1px solid rgba(2, 14, 22, .2); }
.cb-card:hover { opacity: .75; }
.cb-card .cb-thumb { aspect-ratio: 16 / 9; border: 1px solid rgba(2, 14, 22, .14); border-radius: 7px; background: repeating-linear-gradient(135deg, rgba(2, 14, 22, .04), rgba(2, 14, 22, .04) 9px, transparent 9px, transparent 18px); overflow: hidden; }
.cb-card-txt { display: flex; flex-direction: column; gap: 8px; }
.cb-card .cb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-card h4 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.cb-card .cb-desc { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.55; opacity: .72; }
.cb-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

.cb-sep { display: flex; align-items: center; gap: 18px; margin: 54px 0 6px; }
.cb-sep span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.cb-sep div { flex: 1; height: 1px; background: rgba(2, 14, 22, .2); }

.cb-link { display: inline-block; margin-top: 26px; font-size: 17px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }
.cb-loading { margin-top: 40px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }

/* mobile top bar (hidden on desktop) ----------------------------- */
.cb-topbar { display: none; }

@media (max-width: 1250px) {
  .cb-chapter-grid { grid-template-columns: minmax(0,1fr); }
  .cb-side-media { display: none; }
  .cb-side-quote { position: static; margin-top: 8px; }
  .cb-withside { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cb-vert-rail { display: none; }
  .cb-row-talk.is-selectable { cursor: auto; }
  .cb-row-talk.is-selected::before { display: none; }
}

@media (max-width: 1150px) {
  .cb-acc .cb-row-insp { grid-template-columns: 30px minmax(0,1fr) 70px 22px; }
  .cb-insp-genre { display: none; }
  .cb-row-press { grid-template-columns: 130px minmax(0,1fr) 80px; }
}

@media (max-width: 900px) {
  #cb-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cb-rail { display: none; }
  .cb-topbar {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(251, 248, 229, .94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
  }
  .cb-topbar .cb-name { font-size: 19px; }
  .cb-topbar nav { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .cb-topbar nav::-webkit-scrollbar { display: none; }
  .cb-topbar nav a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; opacity: .55; padding-bottom: 2px; }
  .cb-topbar nav a.is-active { opacity: 1; font-weight: 700; border-bottom: 2px solid var(--orange); }

  .cb-page { padding: 26px 22px 70px; }
  .cb-title { font-size: 42px; margin-top: 22px; }
  .cb-standfirst { font-size: 18px; margin-top: 16px; }
  .cb-body { columns: 1; font-size: 17px; margin-top: 24px; }
  .cb-dropcap::first-letter { font-size: 56px; padding: 6px 9px 0 0; }
  .cb-pull { margin: 26px 0; padding: 22px 0; }
  .cb-pull div { font-size: 26px; }
  .cb-chapter { margin-top: 30px; gap: 14px; }
  .cb-chapter h3 { font-size: 28px; }
  .cb-cards { grid-template-columns: 1fr; }
  .cb-body.is-post { columns: 1; }
  .cb-lede .cb-title.is-post { font-size: 32px; }
  .cb-row-press { grid-template-columns: 76px minmax(0,1fr); }
  .cb-hero { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .cb-hero-title { font-size: 26px; }
  .cb-row-press .cb-right { display: none; }
  .cb-side-quote { position: static; margin: 22px 0 0; padding-left: 16px; }
  .cb-side-quote div { font-size: 21px; }
  .cb-chapter-grid { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 30px; }
  .cb-side-media { display: none; }
  .cb-chapter-h { font-size: 28px; margin-bottom: 16px; }
  .cb-aside { margin: 22px 0; padding-left: 16px; }
  .cb-aside div { font-size: 21px; }
  .cb-title.is-post { font-size: 34px; }
  .cb-title.is-mid { font-size: 32px; }
  .cb-acc .cb-row-insp { grid-template-columns: 30px minmax(0,1fr) 22px; }
  .cb-insp-genre, .cb-insp-year { display: none; }
  .cb-drawer-in { padding: 0 0 18px 30px; }
  .cb-row-work, .cb-row-press, .cb-row-insp, .cb-row-talk { grid-template-columns: 1fr; gap: 8px; }
  .cb-row-talk { padding: 22px 0; }
  .cb-row-talk h4 { font-size: 26px; }
  .cb-row h4 { font-size: 21px; }
  .cb-plate { aspect-ratio: 16 / 9; margin: 26px 0; }
}


/* ---------------------------------------------------------------
   Dark mode
   --------------------------------------------------------------- */
#cb-app, #cb-app .cb-rail, #cb-app .cb-topbar, #cb-app .cb-main,
#cb-app .cb-row, #cb-app .cb-acc, #cb-app .cb-card, #cb-app .cb-hr,
#cb-app .cb-masthead, #cb-app .cb-chapter-h, #cb-app .cb-thumb,
#cb-app .cb-more, #cb-app .cb-theme, #cb-app .cb-hero, #cb-app .cb-sep div {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

#cb-app.is-dark {
  --paper: #020E16;
  --ink: #DAE5CF;
  --rule: rgba(218, 229, 207, .2);
  --soft: rgba(218, 229, 207, .06);
}
#cb-app.is-dark .cb-portrait { display: none; }
#cb-app.is-dark .cb-rail { background: rgba(2, 14, 22, .6); border-right-color: var(--rule); }
#cb-app.is-dark .cb-topbar { background: rgba(2, 14, 22, .94); border-bottom-color: var(--rule); }
#cb-app.is-dark .cb-hr,
#cb-app.is-dark .cb-sep div,
#cb-app.is-dark .cb-masthead .cb-fill { background: var(--rule); }
#cb-app.is-dark .cb-masthead { border-bottom-color: var(--ink); }
#cb-app.is-dark .cb-row,
#cb-app.is-dark .cb-acc,
#cb-app.is-dark .cb-card,
#cb-app.is-dark .cb-chapter-h { border-color: var(--rule); }
#cb-app.is-dark .cb-row:hover { background: var(--soft); }
#cb-app.is-dark .cb-body { column-rule-color: var(--rule); }
#cb-app.is-dark .cb-body img,
#cb-app.is-dark .cb-figure img,
#cb-app.is-dark .cb-side-media img,
#cb-app.is-dark .cb-side-media video,
#cb-app.is-dark .cb-vert img,
#cb-app.is-dark .cb-vert video,
#cb-app.is-dark .cb-thumb { border-color: var(--rule); }
#cb-app.is-dark .cb-card .cb-thumb,
#cb-app.is-dark .cb-thumb.is-small {
  background: repeating-linear-gradient(135deg, var(--soft), var(--soft) 9px, transparent 9px, transparent 18px);
}
#cb-app.is-dark .cb-tag { background: var(--ink); color: var(--paper); }
#cb-app.is-dark .cb-body blockquote { border-left-color: var(--rule); }
#cb-app.is-dark .cb-h4link h4 { border-bottom-color: rgba(219, 91, 44, .55); }
#cb-app.is-dark .cb-extras a { border-bottom-color: var(--rule); }
#cb-app.is-dark .cb-social a { border-bottom-color: var(--orange); }
#cb-app.is-dark img.cb-invertable { filter: none; }