/* App interiors. Shared first, then per app. */

.app-root {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  container-type: inline-size;
  container-name: app;
  background: var(--surface);
}

.app-sidebar {
  flex: none;
  width: 220px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
}

.sidebar-group-label {
  margin: 12px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sidebar-group-label:first-child { margin-top: 2px; }

.sidebar-empty {
  margin: 2px 10px 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.ghost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-2);
}

.ghost-row svg { flex: none; display: block; opacity: 0.75; }

/* ---------- Notes (two-pane) ---------- */

.notes-list {
  flex: none;
  width: 340px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-2);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.notes-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
}

.notes-item + .notes-item { margin-top: 1px; }

.notes-item:hover { background: rgba(127, 127, 132, 0.1); }

.notes-item.is-selected { background: rgba(230, 184, 0, 0.22); }

/* The title gets two lines before it is cut; the list is wide so it rarely is. */
.notes-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
}

.notes-item-pill {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(127, 127, 132, 0.16);
}

.notes-item.is-selected .notes-item-pill {
  color: var(--ink);
  background: rgba(230, 184, 0, 0.36);
}

.notes-item-preview {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-read {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.notes-toolbar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 7px 16px;
  box-shadow: 0 0.5px 0 var(--hairline);
  color: var(--ink-2);
}

.notes-toolbar svg { display: block; }

.notes-read-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.note-view {
  max-width: 42em;
  margin: 0 auto;
  padding: 34px 44px 64px;
}

.note-title {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.note-view p {
  margin: 0 0 1em;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink);
}

.note-standfirst {
  margin: -8px 0 22px !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: var(--ink-2) !important;
}

.note-h2 {
  margin: 1.9em 0 0.7em;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.note-view > .note-h2:first-of-type { margin-top: 1.2em; }

.note-list {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink);
}

.note-list li { margin-bottom: 0.45em; }

.note-aside {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  font-style: italic;
}

/* Where a piece was first published. Sits at the foot, quietly. */
.note-source {
  margin: 2.2em 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 13px !important;
  color: var(--ink-2) !important;
}

.note-source a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 6px;
}

.note-source a:hover { text-decoration: underline; }

/* A list of pieces that live elsewhere. */
.note-links {
  display: flex;
  flex-direction: column;
  margin: 0.6em 0 0;
  border-top: 1px solid var(--hairline);
}

.note-link {
  display: grid;
  gap: 3px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
}

.note-link:hover .note-link-title { color: var(--accent); }

.note-link-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.note-link-line { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.note-link-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  filter: brightness(0.9);
}

.note-timeline {
  list-style: none;
  margin: 1.5em 0;
  padding: 0;
}

.note-timeline li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.55;
}

.note-timeline li + li { border-top: 1px solid var(--hairline); }

.note-timeline .tl-year {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--yellow);
  filter: brightness(0.82);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

@container app (max-width: 899px) {
  .notes-list { width: 280px; }
}

/* ---------- Stocks (dark-native) ---------- */

.stocks-root .app-sidebar { width: 250px; }

.stocks-caption {
  margin: 2px 10px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.stocks-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px;
  border-radius: 9px;
}

.stocks-row + .stocks-row { margin-top: 2px; }
.stocks-row:hover { background: rgba(255, 255, 255, 0.06); }
.stocks-row.is-selected { background: rgba(255, 255, 255, 0.1); }

.stocks-row-id { flex: 1; min-width: 0; }

.stocks-symbol {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.stocks-name {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stocks-pill {
  flex: none;
  min-width: 62px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 6px;
  color: #ffffff;
  white-space: nowrap;
}

.tone-up .stocks-pill { background: var(--up); }
.tone-down .stocks-pill { background: var(--down); }
.tone-neutral .stocks-pill { background: var(--neutral-pill); }

.stocks-detail { padding: 30px 34px 38px; }

.stocks-detail-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.stocks-detail-symbol {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stocks-detail-name { font-size: 15px; color: var(--ink-2); }

.stocks-detail-period {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.stocks-detail-status {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
}

.tone-up .stocks-detail-status { color: var(--up); }
.tone-down .stocks-detail-status { color: var(--down); }
.tone-neutral .stocks-detail-status { color: var(--ink-2); }

.stocks-timeline { margin: 28px 0 6px; }
.stocks-timeline svg { display: block; width: 100%; height: auto; }

.stocks-events {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.stocks-events li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 10px 2px;
  font-size: 14px;
  align-items: baseline;
}

.stocks-events li + li { border-top: 1px solid var(--hairline); }

.stocks-events .ev-year {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.stocks-footnote {
  margin-top: 24px;
  font-size: 12px;
  color: var(--ink-2);
}

/* ---------- Safari ---------- */

.safari-root { flex-direction: column; }

.safari-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 8px;
  background: var(--surface-2);
  box-shadow: 0 0.5px 0 var(--hairline);
}

.safari-nav {
  display: flex;
  gap: 4px;
}

.safari-nav-btn {
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink);
  opacity: 0.85;
}

.safari-nav-btn:hover:not(:disabled) { background: rgba(127, 127, 132, 0.16); }
.safari-nav-btn:disabled { opacity: 0.25; }
.safari-nav-btn svg { display: block; }

.safari-address {
  flex: 1;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: rgba(127, 127, 132, 0.14);
  border-radius: 7px;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden;
}

.safari-share { color: var(--ink-2); opacity: 0.7; }
.safari-share svg { display: block; }

.safari-body { flex: 1; min-height: 0; display: flex; }

.safari-sidebar {
  flex: none;
  width: 292px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.safari-sidebar-heading {
  margin: 2px 8px 10px;
  font-size: 15px;
  font-weight: 700;
}

.reading-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
}

.reading-item + .reading-item { margin-top: 1px; }

/* A print item is a button rather than a link, and looks the same. */
button.reading-item { width: 100%; text-align: left; cursor: pointer; }

a.reading-item:hover,
button.reading-item:hover { background: rgba(127, 127, 132, 0.14); }

.reading-item.is-selected,
a.reading-item.is-selected:hover,
button.reading-item.is-selected:hover { background: var(--accent-selection); }

.reading-item-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reading-item-source {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.safari-content:focus { outline: none; }

.safari-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-2);
  container-type: inline-size;
  container-name: pane;
}

.safari-startpage {
  min-height: 100%;
  display: grid;
  place-items: center;
}

.safari-startpage p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* Start page: the reading list as cards. */
.safari-cards { padding: 26px 28px 34px; }

.safari-cards-heading {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Every row the same height, so a card with no excerpt never collapses. */
  grid-auto-rows: 1fr;
  gap: 14px;
}

@container pane (max-width: 820px) {
  .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In one column each card stands alone, so it sizes to what it holds. */
@container pane (max-width: 520px) {
  .press-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

.press-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--hairline), 0 1px 3px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
}

button.press-card { width: 100%; text-align: left; cursor: pointer; }

a.press-card:hover,
button.press-card:hover {
  box-shadow: 0 0 0 0.5px var(--hairline-strong), 0 3px 10px rgba(0, 0, 0, 0.1);
}

.press-thumb {
  width: 78px;
  height: 78px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  display: block;
}

.press-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.press-thumb.is-mono {
  display: grid;
  place-items: center;
}

.press-mono {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

/* The domain sits at the bottom, so cards in a row line up whatever they hold. */
.press-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 78px;
}

.press-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press-card-excerpt {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press-card-domain {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reader: publisher, title, picture, the excerpt, then the way out. */
.reader {
  max-width: 34em;
  margin: 0 auto;
  padding: 40px 40px 56px;
}

.reader-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.reader-favicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  display: block;
}

.reader-source {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.reader-year {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.reader-title {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.reader-note {
  margin: 0 0 12px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
}

.reader-hero {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin: 18px 0;
  background: var(--surface-3);
}

/* A scan of a page is taller than it is wide, and cropping it to a banner
   would keep a chin and lose the words. It stands at its own shape instead,
   on the left, where a clipping would be pinned. */
.reader-hero.is-tall {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  box-shadow: 0 0 0 0.5px var(--hairline);
}

/* A picture story, one drawing under the next, no wider than the reading
   measure so it reads like the page it came from. */
.reader-clippings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  margin: 18px 0;
}

.reader-figure { margin: 0; }

.reader-clipping {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px var(--hairline);
  background: var(--surface-3);
}

.reader-figcaption {
  margin: 8px 2px 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.reader-excerpt {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--hairline-strong);
}

.reader-excerpt p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink);
}

.reader-excerpt-credit {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.reader-meta {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.reader-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 30px 0;
}

.reader-action { text-align: center; }

.reader-open {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.reader-open:hover { filter: brightness(1.08); }

.reader-published {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}

/* Player: video pages allow framing, so this is the real thing. */
.player {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 30px 36px;
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}

.player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-title {
  margin: 18px 0 4px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Contacts ---------- */

.contacts-list {
  flex: none;
  width: 200px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.contacts-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 10px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(127, 127, 132, 0.14);
  font-size: 12.5px;
  color: var(--ink-2);
}

.contacts-search svg { display: block; opacity: 0.8; }

.contacts-list-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent-selection);
}

.contacts-card {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 34px 30px;
  text-align: center;
}

.contacts-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contacts-line {
  margin: 4px 0 22px;
  font-size: 13px;
  color: var(--ink-2);
}

.contacts-fields {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px var(--hairline);
}

.contact-field {
  display: block;
  padding: 9px 14px;
  background: var(--surface-2);
  text-decoration: none;
}

a.contact-field:hover { background: var(--surface-3); }

.contact-field-label {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 1px;
}

.contact-field-value {
  font-size: 13.5px;
  color: var(--accent);
  word-break: break-all;
}

.contact-field.is-empty .contact-field-value { color: var(--ink-2); }

/* ---------- Game Center (dark-native) ---------- */

.gc-root {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  padding: 28px 32px 36px;
}

.gc-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.gc-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gc-line {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* Each section is a heading and its own grid; the second one needs air above it. */
.gc-section { margin: 0 0 12px; }
.gc-grid + .gc-section { margin-top: 24px; }

.gc-section-line {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.gc-section-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gc-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 55%), #26262a;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gc-card::after {
  content: "";
  position: absolute;
  inset: -40% -70%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%);
  transform: translateX(-70%);
  pointer-events: none;
}

.gc-card:hover::after {
  transition: transform 1.3s ease;
  transform: translateX(70%);
}

/* A linked trophy says so by behaving like one: it lifts, its edge catches a
   little more light, and it takes a focus ring shaped like the card. */
.gc-card.is-linked {
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.gc-card.is-linked:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.34);
}

.gc-card.is-linked:active { transform: translateY(0); }

.gc-card.is-linked:focus-visible { border-radius: 14px; }

/* A photograph in the medal's place: a small square, the medal pinned to its
   corner, the same footprint as the medal alone so the grid never changes. */
.gc-card-face {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: visible;
}

.gc-card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
  display: block;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}

.gc-card-face-medal {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #26262a;
  box-shadow: 0 0 0 2px #26262a;
}

.gc-card-face-medal svg { width: 100%; height: 100%; display: block; }

/* Where a card leads out rather than opening. */
.gc-card-out {
  font-size: 11px;
  color: var(--ink-2);
  margin-left: -4px;
}

/* The text column takes the rest of the card, so every maker's mark hangs from
   the same right edge instead of drifting with the length of its title. */
.gc-card-text { flex: 1; min-width: 0; }

.gc-medal { flex: none; width: 52px; height: 52px; }
.gc-medal svg { width: 100%; height: 100%; display: block; }

.gc-card-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #d8d9de;
}

.gc-card-detail {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.gc-card-state {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The year and the maker's mark share the foot of the card. The row keeps its
   height whether the mark is artwork or type, so no card sits taller than its
   neighbour for having had a logo available. */
.gc-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 16px;
  color: var(--ink-2);
}

/* Artwork and type are brought to the same weight of ink: about eleven pixels
   of mark against nine of capital. A card must not look different for having
   had a logo available. */
.gc-card-mark {
  flex: none;
  margin-left: auto;
  height: 12px;
  opacity: 0.5;
}

/* Stamped, not printed: only the silhouette is taken, and it is filled with the
   card's own ink. Nothing of the original colour survives. */
.gc-card-mark.is-logo {
  width: 68px;
  background-color: currentColor;
  -webkit-mask-image: var(--mark);
  mask-image: var(--mark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.gc-card-mark.is-name {
  display: flex;
  align-items: center;
  max-width: 45%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}

.gc-card.is-locked {
  background: #202024;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
}

.gc-card.is-locked::after { display: none; }

/* ---------- one trophy, opened ---------- */

.gc-doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.gc-doc-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.gc-back {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  cursor: pointer;
}

.gc-back:hover { text-decoration: underline; }

.gc-doc-title {
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-doc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 32px;
}

.gc-trophy { max-width: 640px; }

.gc-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gc-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #202024;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

/* A recording in the trophy: sixteen by nine, the window's width. */
.gc-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}

.gc-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A card whose trophy holds a recording says so with a play mark on the face. */
.gc-card-face.is-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-38%, -50%);
  border-left: 13px solid rgba(255, 255, 255, 0.92);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.gc-card-face.is-video img { filter: brightness(0.72); }

.gc-trophy-caption {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.gc-trophy-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.gc-trophy-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #e8e9ee;
}

.gc-trophy-line {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.gc-trophy-detail {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #c7c8cf;
}

.gc-trophy-source {
  display: inline-block;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.gc-trophy-source:hover { text-decoration: underline; }

/* A trophy that opens is a button; it keeps the card's face and its lift. */
button.gc-card { text-align: left; cursor: pointer; font: inherit; }

@container app (max-width: 620px) {
  .gc-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-card::after { display: none; }

  .gc-card.is-linked,
  .gc-card.is-linked:hover { transition: none; transform: none; }
}

/* ---------- Music ---------- */

.music-sidebar {
  flex: none;
  width: 200px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 8px;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.music-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 30px 34px;
}

.music-head {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.music-art {
  flex: none;
  width: 118px;
  height: 118px;
  border-radius: 8px;
  background: linear-gradient(160deg, #fb5c74, #fa233b 55%, #d51e33);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}

.music-art svg { width: 54px; height: 54px; display: block; }

.music-title {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.music-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.music-table-head {
  display: grid;
  grid-template-columns: 30px 1fr 52px;
  gap: 14px;
  padding: 0 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
}

.music-table-head .t-right { text-align: right; }

.music-rows { list-style: none; margin: 0; padding: 0; }

.music-row {
  display: grid;
  grid-template-columns: 30px 1fr 52px;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
}

.music-row + .music-row { border-top: 1px solid var(--hairline); }

.music-row-n {
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slot-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(127, 127, 132, 0.16);
}

.slot-bar.is-short { width: 38%; }
.slot-bar.is-mid { width: 58%; }
.slot-bar.is-long { width: 72%; }

.slot-time {
  height: 8px;
  border-radius: 4px;
  background: rgba(127, 127, 132, 0.11);
  justify-self: end;
  width: 34px;
}

/* A track that has somewhere to point is a row-sized link, and it is treated
   like every other clickable row on the site: a rounded highlight under the
   pointer and the shared focus ring where the keyboard lands. The rule between
   rows goes with it — a hairline crossing the corners of that highlight is what
   makes a list look ruled rather than clickable. */
.music-track + .music-track { margin-top: 1px; }

.music-row.is-track {
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.music-row.is-linked { cursor: pointer; }

.music-row.is-linked:hover { background: rgba(127, 127, 132, 0.14); }

.music-row.is-linked:active { background: rgba(127, 127, 132, 0.2); }

/* Matched to the highlight, so the ring lands on the shape it belongs to. */
.music-row.is-linked:focus-visible { border-radius: 6px; }

.music-row-text { min-width: 0; }

/* One line each: a long title shortens rather than pushing the year off the
   end of the row. */
.music-row-title,
.music-row-artist {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-row-title { font-size: 13.5px; line-height: 1.35; }

.music-row-artist {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
}

.music-row-year {
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@container app (max-width: 640px) {
  .music-sidebar { display: none; }
}

/* ---------- Books ---------- */

.books-root {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  padding: 28px 32px 40px;
}

.books-heading {
  margin: 0 0 22px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.books-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--ink-2);
}

.books-section-label {
  margin: 30px 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.books-section-label:first-of-type { margin-top: 0; }

/* An optional line under a shelf heading, saying why the shelf is what it is.
   The heading gives up its gap to it so the two read as one block. */
.books-section-label:has(+ .books-section-note) { margin-bottom: 5px; }

.books-section-note {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* To Read is quieter than Finished in both senses: the covers are smaller, and
   they sit back a little. It reads as a list of intentions rather than a second
   record competing with the first. */
.books-grid.is-intent {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 20px 16px;
}

.books-grid.is-intent .book-face {
  opacity: 0.72;
  box-shadow:
    inset 0 0 0 0.5px var(--hairline),
    0 2px 8px rgba(0, 0, 0, 0.16);
}

/* The intent shelf draws the same card at about two thirds the width, so the
   type and the padding come down with it rather than being clamped away. */
.books-grid.is-intent .book-face.is-type {
  gap: 6px;
  padding: 12px 10px 12px 16px;
}

.book.is-intent .book-title {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.book.is-intent .book-meta { font-size: 11.5px; }

.book.is-folded { display: none; }

.books-more {
  margin-top: 16px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
}

.books-more:hover { text-decoration: underline; }

/* A cover, or the same shape drawn in type when there is no cover to be had. */
.book-face {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow:
    inset 0 0 0 0.5px var(--hairline),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

/* On the cover, in the corner. The shadow is what keeps it legible over a dark
   cover as well as a light one, since it sits on artwork we do not control. */
.book-loved {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  display: block;
  color: var(--accent);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.book-loved svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* The intent shelf draws everything smaller, and the mark comes with it. */
.books-grid.is-intent .book-loved {
  right: 5px;
  bottom: 5px;
  width: 11px;
  height: 11px;
}

/* Reading Now is the one big cover on the shelf, so the mark can be too. */
.books-now .book-loved {
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
}

.book-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-face.is-type {
  /* What the type above is sized against. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px 18px 22px;
  text-align: left;
}

/* The darker strip reads as the spine, so the drawn card is still a book. */
.book-face.is-type::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

/* The card is drawn at anything from 88 to 170 pixels wide, and it carries a
   title that was never written to fit it: "The Condemnation of Blackness" has a
   word in it wider than the card at every one of those sizes. So the type is
   sized against the card's own width rather than fixed in pixels, which keeps
   the longest word on one line. Hyphens would be the typographic answer, but
   Chrome ships no hyphenation dictionary and breaks the word without drawing
   one, which reads as a bug; break-word stays only as the last guarantee that
   nothing is ever clipped off the side. */
.book-face-title {
  font-size: clamp(9.5px, 10.8cqw, 15px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.book-face-author {
  flex: none;
  font-size: clamp(8.5px, 8.6cqw, 12px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Reading now */

.books-now {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.books-now .book-face {
  flex: none;
  width: 128px;
}

.books-now-text { padding-top: 4px; min-width: 0; }

.books-now-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Finished */

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 26px 20px;
}

.book { min-width: 0; }

.book-title {
  margin: 12px 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.book-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}

.book-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- TV (dark-native) ---------- */

.tv-root {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  padding: 26px 30px 36px;
}

.tv-heading {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.tv-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--ink-2);
}

.tv-section-label {
  margin: 24px 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.tv-section-label:first-of-type { margin-top: 0; }

/* Sized to its contents: one card should not leave half a row empty. */
.tv-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


.tv-hero-card {
  flex: 1 1 320px;
  max-width: 460px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

.tv-card-type {
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
}

.tv-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.tv-card-note {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.68);
}

.tv-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px;
  align-items: start;
}

.tv-poster { min-width: 0; }

.tv-poster-face {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.tv-poster-logo {
  position: absolute;
  inset: 14% 12%;
  width: 76%;
  height: 72%;
  object-fit: contain;
}

.tv-hero-logo {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 62%;
  max-height: 46%;
  object-fit: contain;
}

/* Ink too dark to read on a dark card is drawn as a white wordmark instead.
   Artwork that already reads, in colour or on a light plate, is left alone. */
.is-mask-dark .tv-poster-logo,
.is-mask-dark .tv-hero-logo { filter: brightness(0) invert(1); }

/* The wordmark is the title, so it is not also set in type beneath itself. */
.tv-hero-card.has-logo .tv-card-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A wordmark baked onto a dark plate loses the plate instead. */
.is-plate-dark .tv-poster-logo,
.is-plate-dark .tv-hero-logo { mix-blend-mode: screen; }

/* The title card: what a tile is when no wordmark for it is free to use. It is
   a design, not a fallback — the type is set as large as the tile will hold, so
   the card carries the same weight as one with artwork rather than reading as
   the absence of one. The size comes from the markup, stepped down by the app
   until the title fits, and the tile is its own container so that the same card
   works at 155 pixels on the desktop and 100 on a phone. */
.tv-poster-face.is-type {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Centred, because a wordmark tile centres its artwork: put the two side by
     side in the shelf and the type sits where the logo would have been. */
  justify-content: center;
  align-items: stretch;
  /* Per cent of the tile's width on every side, vertical included, so the
     margins stay in proportion at any size. */
  padding: 9%;
}

/* The title, its rule and the quiet line are one lockup: the rule belongs under
   the title, not adrift at the bottom of the card. */
.tv-type-title {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #ffffff;
  /* The step above this one was rejected for not fitting, so this never has to
     act. It is here so that a title of one impossible word still cannot spill
     over the side of the card. */
  overflow-wrap: break-word;
}

.tv-type-rule {
  height: 1px;
  margin-top: 5cqw;
  background: rgba(255, 255, 255, 0.3);
}

/* Only when something follows it. */
.tv-type-rule:not(:last-child) { margin-bottom: 5cqw; }

.tv-type-meta {
  font-size: 8.5cqw;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}

/* On a wordmark tile the count sits in the corner; on a title card it is the
   quiet line, so the two never appear on the same card. */
.tv-count-text { display: block; }

.tv-poster-note {
  margin: 8px 2px 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* The collection card: one card, with the run listed underneath when opened. */

.tv-poster-count {
  position: absolute;
  left: 12px;
  top: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.tv-poster-button,
.book-collection-button {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 10px;
  text-align: left;
}

.tv-poster-button .tv-poster-face { transition: transform 0.18s var(--ease-out); }
.tv-poster-button:hover .tv-poster-face { transform: translateY(-2px); }

.collection-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.collection-toggle::before,
.collection-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.collection-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.2s var(--ease-out);
}

.is-open .collection-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Spans the shelf so it opens directly under its own card, whatever the order. */
.tv-collection-panel,
.books-collection-panel {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 18px 22px;
  border-radius: 12px;
}

.tv-collection-panel {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

/* The shelf is a light surface, so the books panel takes its colour from tokens. */
.books-collection-panel {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.5px var(--hairline);
}

.book.is-collection .book-face { margin-bottom: 0; }
.book-collection-button:hover .book-face { transform: translateY(-2px); }
.book-collection-button .book-face { transition: transform 0.18s var(--ease-out); }

.collection-heading {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.collection-list {
  margin: 0;
  padding-left: 20px;
  columns: 3;
  column-gap: 28px;
  font-size: 13px;
  line-height: 1.5;
}

.collection-list li {
  break-inside: avoid;
  padding: 3px 0;
  color: var(--ink-2);
}

@container app (max-width: 720px) {
  .tv-hero-card { max-width: none; }
  .collection-list { columns: 2; }
}

.books-collection-panel .collection-list { columns: 2; }

@container app (max-width: 460px) {
  .collection-list { columns: 1; }
}
/* ---------- About ---------- */

.about-root {
  flex: 1;
  overflow-y: auto;
  padding: 26px 26px 22px;
  text-align: center;
  background: var(--surface);
}

.about-name {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-role {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.about-specs {
  margin: 0 auto;
  max-width: 250px;
  text-align: left;
  font-size: 12.5px;
}

.about-specs div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 2px;
}

.about-specs div + div { border-top: 1px solid var(--hairline); }

.about-specs dt { color: var(--ink-2); flex: none; }
.about-specs dd { margin: 0; text-align: right; }

.about-record-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-record-link:hover { color: var(--accent); }

/* ---------- Maps ---------- */

.map-root { min-height: 0; }

/* The heading is a row of the sidebar rather than something floating over it,
   so nothing scrolls underneath it and nothing shows through it. */
.map-side {
  flex: none;
  width: 260px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  box-shadow: 0.5px 0 0 var(--hairline);
}

.map-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 18px;
}

.map-count {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px 10px;
}

.map-count-text { min-width: 0; }

.map-count-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.map-count-line {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.map-country {
  scroll-margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin: 12px 0 4px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.map-country-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Our own simplified drawings in assets/flags/, one per country slug. */
.map-flag {
  flex: none;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.map-country:hover { background: rgba(127, 127, 132, 0.12); }
.map-country.is-open { color: var(--accent); background: var(--accent-selection); }

.map-country-count {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.map-back {
  flex: none;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(127, 127, 132, 0.14);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.map-back:hover { background: rgba(127, 127, 132, 0.22); }
.map-back[hidden] { display: none; }

.map-rows { display: flex; flex-direction: column; gap: 1px; }

.map-row {
  scroll-margin: 6px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 7px;
}

.map-row:hover { background: rgba(127, 127, 132, 0.12); }
.map-row.is-selected { background: var(--accent-selection); }

.map-row-city { font-size: 13.5px; }
.map-row.is-home .map-row-city { font-weight: 700; }

.map-row-kind {
  flex: none;
  font-size: 11px;
  color: var(--ink-2);
}

/* The map scrolls sideways rather than shrinking, so pins never collide. */
.map-pane {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--map-ocean);
}

/* Zooming to a country is what keeps close cities apart, so the map no longer
   needs to overflow its pane. */
.map-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: auto;
}

/* The surface keeps the same proportions as the view rect, so the land and the
   pins are always looking at exactly the same region. */
/* The map keeps a workable size and the canvas scrolls to it, rather than
   shrinking until neighbouring cities land on the same few pixels. */
.map-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 480px;
  min-height: 360px;
  overflow: hidden;
}

.map-land-slot { position: absolute; inset: 0; }
.map-land { display: block; width: 100%; height: 100%; }
.map-land path { fill: var(--map-land); }

.map-pins { position: absolute; inset: 0; }

.map-pin {
  position: absolute;
  width: var(--pin-hit, 26px);
  height: var(--pin-hit, 26px);
  margin: calc(var(--pin-hit, 26px) / -2) 0 0 calc(var(--pin-hit, 26px) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.map-pin-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--map-dot);
  box-shadow: 0 0 0 1.5px var(--map-ocean);
  transition: transform 0.16s var(--ease-out);
}

/* A country in the world view: one mark carrying how many cities are inside. */
.map-pin.is-country .map-pin-mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--map-ocean), 0 2px 7px rgba(0, 0, 0, 0.28);
}

.map-pin-count {
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* Pins outside the current view keep their place in the DOM but not on screen. */
.map-pin.is-offscreen {
  opacity: 0;
  pointer-events: none;
}

.map-pin.is-lived .map-pin-mark {
  width: 15px;
  height: 15px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--map-ocean), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-pin.is-home .map-pin-mark {
  box-shadow: 0 0 0 2px var(--map-ocean), 0 0 0 5px var(--accent-selection), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-pin.is-wants .map-pin-mark {
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1.5px var(--map-ocean);
}

.map-pin:hover .map-pin-mark,
.map-pin:focus-visible .map-pin-mark,
.map-pin.is-selected .map-pin-mark { transform: translateY(-3px) scale(1.25); }

.map-pin.is-selected .map-pin-mark { background: var(--accent); }
.map-pin.is-wants.is-selected .map-pin-mark { background: transparent; }

.map-pin-label {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--tooltip-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 0.5px var(--hairline-strong), 0 4px 12px rgba(0, 0, 0, 0.22);
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s var(--ease-out);
}

.map-pin:hover .map-pin-label,
.map-pin:focus-visible .map-pin-label,
.map-pin.is-selected .map-pin-label { opacity: 1; transform: translateX(-50%) translateY(0); }



/* The card is a caption, not a control, so it never takes a click away from a
   pin sitting underneath it. */
.map-card {
  position: absolute;
  pointer-events: none;
  left: 16px;
  bottom: 16px;
  width: 232px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 0 0 0.5px var(--hairline-strong), 0 10px 30px rgba(0, 0, 0, 0.24);
}

.map-card-city {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.map-card-country { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

.map-card-kind {
  margin: 9px 0 0;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  background: rgba(127, 127, 132, 0.18);
  font-size: 11.5px;
  font-weight: 600;
}

.map-card-kind.is-home { background: var(--accent-selection); color: var(--accent); }

.map-card-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}


/* ---------- Portraits ---------- */

/* Every profile image on the site is the same drawn portrait at a different
   size. Each of these is a whole multiple of the 48 pixel grid. */
.about-portrait { width: 96px; height: 96px; margin: 0 auto 18px; }
.contact-portrait { width: 96px; height: 96px; }
.gc-portrait { width: 96px; height: 96px; }

/* ---------- Keynote ---------- */

/* The document browser. A light neutral ground, and the documents on it: three
   talks look like three documents, so nothing is added to fill the row. */
.kn-root {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  container-type: inline-size;
  container-name: app;
  background: var(--surface-2);
  padding: 26px 30px 34px;
}

/* The document view is the window's whole interior rather than a page in it. */
.kn-root.is-doc {
  display: flex;
  overflow: hidden;
  padding: 0;
  background: var(--surface);
}

.kn-empty {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.kn-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 26px;
  align-items: start;
}

@container app (max-width: 780px) {
  .kn-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container app (max-width: 470px) {
  .kn-gallery { grid-template-columns: minmax(0, 1fr); }
}

.kn-item { min-width: 0; }

.kn-card {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 8px;
  background: none;
  /* A button centres its text; a title slide does not. */
  text-align: left;
  /* Raised on hover and nothing else: no tilt, no glow. */
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.14);
}

.kn-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.26);
}

.kn-card:active { transform: translateY(-1px); }

.kn-card:focus-visible { border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .kn-card,
  .kn-card:hover,
  .kn-card:active { transition: none; transform: none; }
}

/* Keynote's filename-and-date line: outside the card, never over it. */
.kn-caption {
  margin: 10px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn-caption-venue {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.kn-caption-meta {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
}

/* ---------- the generated title slide ---------- */

/* The slide is its own container, so one drawing works at ninety pixels in the
   navigator strip and seven hundred on the canvas: everything inside is sized
   against the slide's own width. */
.kn-slide {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7%;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}

.kn-slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-weighted, because that is where the type sits. */
.kn-slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.76) 0%,
    rgba(0, 0, 0, 0.5) 38%,
    rgba(0, 0, 0, 0.12) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

.kn-slide-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* The one dominant thing on the slide. The size is set on the element by the
   app, stepped down until the venue fits two lines; it never ellipses. */
.kn-slide-venue {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  /* The step above this one was rejected for not fitting, so this never has to
     act; it is here so an impossible single word still cannot spill out. */
  overflow-wrap: break-word;
}

.kn-slide-rule {
  width: 20cqw;
  height: 1px;
  margin: 3.4cqw 0 2.8cqw;
  background: rgba(255, 255, 255, 0.42);
}

.kn-slide-quiet {
  font-size: 3.4cqw;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.kn-slide-venture {
  position: absolute;
  left: 7%;
  bottom: 6%;
  font-size: 3cqw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
}

/* With a photograph behind it the type drops to the foot of the slide, into
   the dark of the scrim, and the picture keeps its top half. */
.kn-slide.has-photo {
  justify-content: flex-end;
  padding-bottom: 11%;
}

.kn-slide.has-photo .kn-slide-rule { margin: 2.4cqw 0 2cqw; }

/* A photograph on its own slide keeps its shape: the slide is the frame. */
.kn-slide.is-photo { padding: 0; }

.kn-photo-fill {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kn-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.32);
}

.kn-play-mark {
  width: 18cqw;
  height: 18cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.kn-play-mark svg {
  width: 62%;
  height: 62%;
  fill: #16181d;
}

.kn-play:hover .kn-play-mark { background: #ffffff; }

/* ---------- the document ---------- */

.kn-doc {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  outline: none;
}

.kn-doc-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.kn-back {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
}

.kn-back:hover { text-decoration: underline; }

.kn-doc-title {
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kn-doc-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* The navigator strip: one thumbnail per slide, and one thumbnail when there is
   one slide. A single-slide document is an ordinary document. */
.kn-navigator {
  flex: none;
  width: 124px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  box-shadow: inset -0.5px 0 0 var(--hairline);
}

.kn-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
}

.kn-thumb .kn-slide { border-radius: 5px; }

.kn-thumb.is-current {
  box-shadow: 0 0 0 2px var(--accent);
}

.kn-stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kn-canvas {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kn-canvas .kn-slide {
  width: auto;
  height: 100%;
  max-width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

/* Notes are only here when there is something to say; the area is not drawn
   empty under a heading. */
.kn-notes {
  flex: none;
  padding: 14px 20px 18px;
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.kn-notes-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- No such file (the 404) ---------- */

.missing-root {
  padding: 22px 24px 24px;
  font-size: 14px;
  line-height: 1.55;
}

.missing-root p { margin: 0 0 10px; }

.missing-path code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(127, 127, 132, 0.16);
  word-break: break-all;
}

.missing-line { color: var(--ink-2); }

.missing-links { margin-top: 16px; }
.missing-links a { color: var(--accent); text-decoration: none; }
.missing-links a:hover { text-decoration: underline; }

/* ---------- Terminal ---------- */

.term-root {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  cursor: text;
}

/* Real, selectable text: the output is the point of the window. */
.term-out {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}

.term-row { min-height: 1.55em; }
.term-row.is-input { color: var(--ink-2); }

.term-line {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 14px 12px;
  white-space: pre;
}

.term-prompt { color: var(--ink-2); margin-right: 0.6ch; }

.term-echo { white-space: pre; }

/* A block caret of our own, so it can stop blinking when motion is unwelcome;
   the input itself sits over the line unseen but focused. */
.term-caret {
  display: inline-block;
  width: 0.62ch;
  height: 1.15em;
  margin-left: 1px;
  background: var(--ink);
  vertical-align: -0.2em;
  animation: term-blink 1s steps(1) infinite;
}

.term-input {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0 14px;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  outline: none;
}

.term-input::selection { background: transparent; }

.term-line:focus-within .term-caret { background: var(--accent); }

@keyframes term-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .term-caret { animation: none; }
}

/* ---------- Messages ---------- */

.msg-root {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.msg-head {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px 12px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.msg-avatar { width: 44px; height: 44px; margin-bottom: 4px; }
.msg-name { font-size: 13px; font-weight: 600; }
.msg-line { font-size: 11.5px; color: var(--ink-2); }

.msg-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 10px;
}

/* Bubbles in the site's own tokens: the visitor in the accent, him on the
   third surface. The shape is a bubble's; the colours are ours. */
.msg-bubble {
  max-width: 76%;
  padding: 8px 12px;
  border-radius: 17px;
  font-size: 14px;
  line-height: 1.4;
}

.msg-bubble.is-mine {
  align-self: flex-end;
  background: var(--accent);
  color: #ffffff;
  border-bottom-right-radius: 5px;
}

.msg-bubble.is-theirs {
  align-self: flex-start;
  background: var(--surface-3);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

.msg-text { margin: 0; }

/* The one row under an answer: where it came from. */
.msg-link {
  display: block;
  margin-top: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  text-decoration: none;
}

.msg-link:hover { text-decoration: underline; }
.msg-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Three dots, rising in turn. */
.msg-bubble.is-typing {
  display: flex;
  gap: 4px;
  padding: 11px 13px;
}

.msg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: msg-dot 1.1s ease-in-out infinite;
}

.msg-dot:nth-child(2) { animation-delay: 0.15s; }
.msg-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes msg-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Where the compose bar would be: the questions that can be asked. */
.msg-chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 14px;
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.msg-chip {
  padding: 7px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--accent);
  background: var(--accent-selection);
  text-align: left;
}

.msg-chip:hover { background: var(--accent); color: #ffffff; }
.msg-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .msg-dot { animation: none; }
}

/* ---------- Photos ---------- */

.ph-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}

.ph-albums {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 32px;
}

.ph-heading {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ph-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 22px 18px;
}

.ph-album {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.ph-album-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 0 0 0.5px var(--hairline);
}

.ph-album-cover img,
.ph-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-album-title {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.ph-album-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
}

.ph-doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ph-doc-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.ph-back {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  cursor: pointer;
}

.ph-back:hover { text-decoration: underline; }

.ph-doc-title {
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-doc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 32px;
}

.ph-album-head { margin-bottom: 16px; }
.ph-album-head .ph-heading { margin-bottom: 2px; }

.ph-album-line {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.ph-album-about {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}

.ph-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
  cursor: pointer;
}

/* The picture on a dark ground, the caption in a strip beneath it. */
.ph-viewer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ph-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111114;
  outline: none;
}

.ph-picture {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ph-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ph-arrow svg { width: 12px; height: 18px; display: block; }
.ph-arrow.is-prev { left: 14px; }
.ph-arrow.is-next { right: 14px; }
.ph-arrow.is-next svg { transform: scaleX(-1); }
.ph-stage:hover .ph-arrow,
.ph-arrow:focus-visible { opacity: 1; }
.ph-arrow:hover { background: rgba(255, 255, 255, 0.24); }

.ph-caption {
  flex: none;
  padding: 12px 20px 14px;
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.ph-caption-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.ph-caption-meta {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}

.ph-empty {
  margin: 0;
  padding: 24px 28px;
  color: var(--ink-2);
  font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .ph-arrow { transition: none; opacity: 1; }
}

/* ---------- News ---------- */

.nw-root {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--surface);
}

.nw-side {
  flex: none;
  width: 200px;
  overflow-y: auto;
  padding: 12px 8px 16px;
  background: var(--sidebar-bg);
  box-shadow: inset -0.5px 0 0 var(--hairline);
}

.nw-side-heading {
  margin: 8px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nw-channel {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border-radius: 7px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.nw-channel:hover { background: rgba(127, 127, 132, 0.14); }
.nw-channel.is-selected,
.nw-channel.is-selected:hover { background: var(--accent-selection); }

.nw-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.nw-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 32px;
}

.nw-heading {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* A card in the feed: the clipping's own picture on top, the publication in
   small capitals, the headline as the biggest thing on it. */
.nw-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--hairline), 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.nw-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 0.5px var(--hairline-strong), 0 6px 18px rgba(0, 0, 0, 0.1);
}

.nw-card-art {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-3);
}

.nw-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.nw-card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }

.nw-card-source,
.nw-source {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d7263d;
}

.nw-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.nw-card-excerpt {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nw-card-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }

.nw-empty {
  margin: 0;
  padding: 24px 28px;
  color: var(--ink-2);
  font-size: 13.5px;
}

/* ---- one clipping ---- */

.nw-article {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.nw-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.nw-back {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  cursor: pointer;
}

.nw-back:hover { text-decoration: underline; }

.nw-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-zoom {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(127, 127, 132, 0.16);
  cursor: pointer;
}

.nw-zoom:hover { background: rgba(127, 127, 132, 0.26); }

/* The grey a scan sits on; the sheet is the reading measure. */
.nw-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 28px 36px;
  background: var(--surface-2);
}

.nw-sheet { max-width: 720px; margin: 0 auto; }
.nw-sheet.is-actual { max-width: none; width: max-content; }

.nw-head { margin-bottom: 16px; }

.nw-title {
  margin: 4px 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.nw-meta { margin: 0; font-size: 12.5px; color: var(--ink-2); }

.nw-line {
  margin: 10px 0 0;
  max-width: 600px;
  font-size: 13.5px;
  line-height: 1.5;
}

.nw-pages { display: flex; flex-direction: column; gap: 18px; }

.nw-page {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px var(--hairline), 0 6px 20px rgba(0, 0, 0, 0.12);
}

.nw-sheet.is-actual .nw-page { width: auto; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .nw-card, .nw-card:hover { transition: none; transform: none; }
}