/* ════════════════════════════════════════════════════
 *  Arthur Krön — Graeco-Futurist Edition
 *  Marble · Basalt · Bronze · Aegean · Speed.
 *  ════════════════════════════════════════════════════ */

/* ─────────── Tokens ─────────── */
:root {
  /* Stone & metal */
  --marble:       #f1ece1;   /* warm marble, primary background */
  --marble-2:     #e7e0d0;   /* deeper marble, panel surface */
  --marble-3:     #d6cdb8;   /* veining */
  --basalt:       #0e1620;   /* near-black with blue, primary ink */
  --basalt-soft:  #2a313b;
  --aegean:       #14406a;   /* deep Aegean blue */
  --aegean-2:     #1f5a8a;
  --bronze:       #b8853a;   /* oxidised gold */
  --bronze-deep:  #8a5f25;
  --propaganda:   #c8281f;   /* futurist red, used sparingly */
  --cyan:         #2a6f8a;

  --shadow-stone: 0 1px 1px rgba(14,22,32,.04), 0 12px 28px -12px rgba(14,22,32,.18);
  --shadow-monu:  0 30px 60px -22px rgba(14,22,32,.35), 0 18px 30px -18px rgba(14,22,32,.22);

  --display:   "Fraunces", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --inscript:  "Cormorant SC", "Cormorant Garamond", "Trajan Pro", serif;
  --machine:   "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;

  --measure:   62ch;
  --pad:       clamp(1.25rem, 4vw, 3rem);
  --ease:      cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--machine);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--basalt);
  background:
    /* faint diagonal "speed" rays from upper right */
    repeating-linear-gradient(115deg,
      rgba(14,64,106,0) 0px,
      rgba(14,64,106,0) 70px,
      rgba(14,64,106,.018) 70px,
      rgba(14,64,106,.018) 71px),
    /* warm marble gradient */
    radial-gradient(900px 600px at 88% -5%, rgba(184,133,58,.07), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(20,64,106,.06), transparent 65%),
    linear-gradient(180deg, #f5efe2 0%, var(--marble) 38%, var(--marble) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition: none !important; }
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--bronze-deep); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─────────── Display & Inscriptions ─────────── */
.display, .display-sm {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-variation-settings: "opsz" 96;
  color: var(--basalt);
}
.display {
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: .92;
}
.display-sm {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--aegean);
}

/* Eyebrow → Inscription. Tracked-out small caps with leading dots. */
.eyebrow {
  font-family: var(--inscript);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  height: 1px;
  width: 28px;
  background: var(--bronze);
}
.eyebrow.eyebrow-flush::before { display: none; }

/* Lede — body serif, dropped */
.lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--basalt-soft);
  max-width: var(--measure);
  letter-spacing: -0.005em;
}
p { max-width: var(--measure); }

/* Section index — large Roman numeral that hangs out into the gutter. */
.section-index {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  color: var(--bronze);
  margin: 0;
  letter-spacing: -0.04em;
}

/* ─────────── Header ─────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--pad);
  background: rgba(241,236,225,.84);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--marble-3);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze) 30%, var(--bronze) 70%, transparent);
  opacity: .35;
  pointer-events: none;
}
.brand {
  display: inline-flex; align-items: baseline; gap: .55rem;
  text-decoration: none; color: var(--basalt);
}
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--basalt);
  line-height: 1;
}
.site-nav {
  display: flex; gap: 1.6rem; justify-self: end;
  font-family: var(--inscript);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-nav a {
  text-decoration: none; color: var(--basalt-soft);
  position: relative; padding: .25rem 0;
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--basalt); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 720px) { .site-nav { display: none; } }

main { padding: 0 var(--pad); }

/* ─────────── Section frame ─────────── */
.section {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) 0;
  position: relative;
}
.section + .section { border-top: 0; }
/* Clean hairline divider between sections */
.section::before {
  content: "";
  position: absolute; top: 0;
  left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: var(--bronze);
  opacity: .55;
}
.section:first-of-type::before { display: none; }
.section-head { margin-bottom: 3rem; max-width: 1180px; }
.section-head .display-sm { margin-top: .4rem; }
.section-intro { max-width: var(--measure); color: var(--basalt-soft); }
.section-foot { margin-top: 2.4rem; }

.link-arrow {
  font-family: var(--inscript);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--basalt);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--bronze-deep); }

/* ─────────── Hero ─────────── */
.hero {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem);
  position: relative;
}
.hero::before {
  /* Roman numeral I as colossal background ornament */
  content: "I.";
  position: absolute;
  top: -1rem; right: -1rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 400;
  color: var(--marble-3);
  opacity: .35;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.06em;
}
.hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
}
.hero-aside {
  margin: 1.1rem 0 0;
  font-family: var(--machine);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--basalt-soft);
}
.hero-aside a {
  text-decoration: none;
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 2px;
  color: var(--basalt);
  font-weight: 500;
}
.hero-aside a:hover { color: var(--bronze-deep); }
.hero-cta { display: flex; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.4rem;
  font-family: var(--inscript);
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; font-weight: 500;
  border-radius: 0; border: 1px solid transparent;
  transition: transform .2s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
  position: relative;
}
.btn::after {
  /* futurist diagonal slash on the trailing edge */
  content: "";
  position: absolute; right: -6px; top: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  transform: translateY(-50%) skewX(-25deg);
  opacity: 0;
  transition: opacity .25s ease, right .25s ease;
}
.btn:hover::after { opacity: .6; right: -16px; }
.btn-primary {
  background: var(--basalt); color: var(--marble);
}
.btn-primary:hover { background: var(--aegean); }
.btn-ghost {
  border-color: var(--basalt); color: var(--basalt);
}
.btn-ghost:hover { background: var(--basalt); color: var(--marble); }
.btn:active { transform: translateY(1px); }

/* Portrait: framed like a temple panel — corner brackets, bronze rule */
.hero-portrait { margin: 0; position: relative; }
.portrait-frame {
  aspect-ratio: 4 / 5;
  background: var(--marble-2);
  border: 1px solid var(--marble-3);
  overflow: hidden; position: relative;
  box-shadow: var(--shadow-monu);
}
.portrait-frame::before,
.portrait-frame::after {
  content: ""; position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--bronze);
  z-index: 2; pointer-events: none;
}
.portrait-frame::before { top: -1px;    left: -1px;
  border-right: 0; border-bottom: 0; }
.portrait-frame::after  { bottom: -1px; right: -1px;
  border-left: 0; border-top: 0; }
.portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease-in-out;
}
.portrait-img.is-active { opacity: 1; filter: contrast(1.02) saturate(.95); }

/* (MMXXVI stamp removed at user's request) */

/* ─────────── Notebook (horizontal photo gallery) ─────────── */
.notebook {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  position: relative;
}
.notebook::before {
  content: "";
  position: absolute; top: 0;
  left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: var(--bronze);
  opacity: .55;
}
.notebook-head {
  display: block;
  margin-bottom: 2.4rem;
  padding: 1.6rem var(--pad) 0;
}
.notebook-head .section-index { margin: 0 0 .4rem; }
.notebook-head .eyebrow { margin: 0 0 1rem; }
.notebook-head h2 { margin: 0 0 .9rem; }
.notebook-head .section-intro {
  margin: 0;
  color: var(--basalt-soft);
  max-width: var(--measure);
}
.clip-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 24vw, 300px);
  gap: 1.4rem;
  padding: .5rem var(--pad) 1.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bronze) transparent;
}
.clip-rail::-webkit-scrollbar { height: 8px; }
.clip-rail::-webkit-scrollbar-thumb { background: var(--bronze); }

.clip-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.clip-frame {
  aspect-ratio: 9 / 16;          /* vertical short-form */
  background: var(--basalt);
  border: 1px solid var(--marble-3);
  overflow: hidden; position: relative;
  box-shadow: var(--shadow-stone);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor: pointer;
}
.clip-card:hover .clip-frame {
  transform: translateY(-5px);
  box-shadow: var(--shadow-monu);
}
.clip-frame video,
.clip-frame iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  background: var(--basalt);
}
/* Cover image sitting over the video until playback starts. Reliable on
   every browser — iOS Safari doesn't paint the first video frame from
   preload=metadata, this <img> guarantees a visible poster. */
.clip-frame .clip-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s var(--ease);
  z-index: 1;
}
.clip-frame.is-playing .clip-poster { opacity: 0; }
.clip-frame.is-empty {
  background:
    repeating-linear-gradient(135deg, rgba(241,236,225,.05) 0 14px,
      rgba(241,236,225,.10) 14px 15px),
    var(--basalt);
}
.clip-frame.is-empty::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--marble);
  font-family: var(--display); font-style: italic;
  text-align: center; padding: 0 1.2rem;
  font-size: .95rem;
}
/* Play badge overlay for non-playing video clips */
.clip-frame .clip-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(14,22,32,.10) 0%, rgba(14,22,32,.55) 100%);
  color: var(--marble);
  pointer-events: none;
  opacity: 1;
  z-index: 2;    /* sit above the .clip-poster (z-index:1) */
  transition: opacity .35s var(--ease);
}
.clip-frame.is-playing .clip-play { opacity: 0; }
.clip-play-icon {
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(241,236,225,.92);
  display: grid; place-items: center;
  border: 1px solid var(--bronze);
  box-shadow: 0 8px 24px rgba(14,22,32,.3);
}
.clip-play-icon::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 14px solid var(--basalt);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.clip-meta {
  margin-top: .8rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.clip-caption {
  font-family: var(--display); font-style: italic;
  color: var(--basalt);
  font-size: 1rem;
  line-height: 1.3;
}
.clip-date {
  font-family: var(--inscript);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--bronze-deep);
  white-space: nowrap;
}

/* ─────────── Publications — image card grid ─────────── */
.publications {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.6rem;
}
@media (max-width: 900px) { .publications { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .publications { grid-template-columns: 1fr; } }

.publications li {
  display: flex; flex-direction: column;
  background: transparent;
  position: relative;
  transition: transform .35s var(--ease);
}
.publications li:hover { transform: translateY(-4px); }

.pub-card-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.pub-image {
  aspect-ratio: 4 / 3;
  background: var(--marble-2);
  border: 1px solid var(--marble-3);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-stone);
  transition: box-shadow .35s var(--ease);
}
.publications li:hover .pub-image { box-shadow: var(--shadow-monu); }
.pub-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.publications li:hover .pub-image img { transform: scale(1.04); }
.pub-image.is-empty::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--basalt-soft);
  font-family: var(--display); font-style: italic;
  text-align: center; padding: 0 1rem; font-size: .92rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px,
      rgba(14,22,32,.03) 14px 15px);
}

.pub-body {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 0 0;
}
.pub-outlet {
  font-family: var(--inscript);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  font-weight: 500;
}
.pub-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.22;
  color: var(--basalt);
  letter-spacing: -0.01em;
  transition: color .25s ease;
}
.publications li:hover .pub-title { color: var(--aegean); }
.pub-date {
  font-family: var(--inscript);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--basalt-soft);
  font-variant-numeric: tabular-nums;
}

/* ─────────── Newsletter board ─────────── */
.section-newsletter { position: relative; }
.subscribe {
  display: inline-flex; align-items: stretch;
  margin-top: 1.6rem;
  border: 1px solid var(--basalt);
  border-radius: 0; overflow: hidden;
  background: var(--marble);
}
.subscribe input {
  border: 0; background: transparent;
  padding: .8rem 1rem;
  font: 400 .92rem var(--machine);
  min-width: 240px; color: var(--basalt);
}
.subscribe input:focus { outline: none; }
.subscribe button {
  border: 0;
  background: var(--basalt); color: var(--marble);
  padding: .8rem 1.4rem;
  font-family: var(--inscript);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.subscribe button:hover { background: var(--aegean); }
.subscribe-status {
  margin: .8rem 0 0;
  font-family: var(--inscript);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--basalt-soft);
  min-height: 1.1rem;   /* reserve space so no layout shift when message appears */
}
.subscribe-status.is-success { color: var(--aegean); }
.subscribe-status.is-error   { color: var(--propaganda); }

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 9 entries fit a perfect 3×3 */
  gap: 0;
  border: 0;
  background: transparent;
  box-shadow: var(--shadow-monu);
}
@media (max-width: 640px) { .board { grid-template-columns: repeat(2, 1fr); } }

.tile {
  aspect-ratio: 1 / 1;
  position: relative;
  padding: 1.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left;
  background: var(--marble-2);
  color: var(--basalt);
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .35s ease;
  overflow: hidden;
}
.tile.dark { background: var(--basalt); color: var(--marble); }
.tile.has-image {
  color: var(--marble);
  background-size: cover;
  background-position: center;
}
.tile.has-image::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,32,.05) 0%, rgba(14,22,32,.70) 100%);
  transition: background .35s ease;
}
.tile.has-image > :not(.tile-num) { position: relative; }
.tile:hover { z-index: 3; transform: scale(1.03); }
.tile.has-image:hover::before {
  background: linear-gradient(180deg, rgba(20,64,106,.20) 0%, rgba(14,22,32,.55) 100%);
}
.tile:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -4px;
}
.tile-num {
  position: absolute; top: .9rem; right: 1rem;
  font-family: var(--display); font-style: italic;
  font-size: 1rem; letter-spacing: -0.02em;
  opacity: .82;
  color: var(--bronze);
}
.tile.has-image .tile-num { color: var(--bronze); text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.tile-month {
  font-family: var(--inscript);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .85;
}
.tile-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.tile-place {
  font-family: var(--display);
  font-style: italic;
  font-size: .9rem;
  opacity: .9;
}

/* ─────────── Photo break (pediment / diagonal cut) ─────────── */
.photo-break {
  position: relative;
  margin: clamp(2.5rem, 6vw, 5rem) 0;
  padding: 0;
}
.photo-break-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 21 / 9;
  background-size: cover;
  background-position: center 38%;
  background-color: var(--basalt);
  display: flex; align-items: flex-end;
  overflow: hidden;
  /* diagonal corner clip — Futurist motion */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 80px) 100%, 0 100%);
}
.photo-break-figure::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,32,0) 35%,
      rgba(14,22,32,.55) 80%, rgba(14,22,32,.78) 100%),
    /* a faint diagonal scanline texture */
    repeating-linear-gradient(115deg,
      rgba(184,133,58,0) 0 60px,
      rgba(184,133,58,.06) 60px 61px);
}
.photo-break-figure::after {
  /* thin bronze rule along the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bronze);
}
.photo-break-quote {
  position: relative;
  color: #fbf6e7;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.15;
  padding: 2.4rem var(--pad);
  max-width: 40ch;
  letter-spacing: -0.005em;
}
.quote-mark {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: .5;
  vertical-align: -0.4em;
  color: var(--bronze);
  margin-right: .12em;
}
.quote-cite {
  display: block;
  font-style: normal;
  font-family: var(--inscript);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-top: 1.2rem;
  opacity: .92;
  color: var(--bronze);
}
@media (max-width: 720px) {
  .photo-break-figure { aspect-ratio: 4 / 5; background-position: center; clip-path: none; }
}

/* ─────────── Appearances ─────────── */
.appearances { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--basalt); }
.appearances li {
  display: grid;
  grid-template-columns: 110px 1fr auto;       /* no thumb by default */
  gap: 1.4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--marble-3);
  align-items: center;
  transition: background .25s ease;
}
.appearances li.has-thumb {
  grid-template-columns: 72px 110px 1fr auto;  /* widens to 4 cols when an entry has an image */
}
.appearances li:hover {
  background: linear-gradient(90deg, rgba(20,64,106,.04), transparent 60%);
}
@media (max-width: 720px) {
  .appearances li,
  .appearances li.has-thumb { grid-template-columns: 1fr; gap: .5rem; }
}
.app-thumb {
  width: 72px; height: 72px;
  border: 1px solid var(--bronze);
  background: var(--marble-2);
  position: relative;
  overflow: hidden;
}
.app-thumb::after {
  /* bronze corner brackets, micro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bronze),var(--bronze)) top    left  / 8px 1px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) top    left  / 1px 8px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) bottom right / 8px 1px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) bottom right / 1px 8px no-repeat;
}
.app-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-thumb.is-empty {
  display: grid; place-items: center;
  color: var(--basalt-soft);
  font-family: var(--display); font-style: italic;
  font-size: .7rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 8px,
      rgba(14,22,32,.04) 8px 9px);
}
.app-kind {
  font-family: var(--inscript);
  font-size: .68rem; letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--marble);
  background: var(--basalt);
  padding: .3rem .65rem;
  width: max-content;
  font-weight: 500;
}
.app-kind.podcast { background: var(--aegean); }
.app-kind.panel   { background: var(--bronze-deep); }
.app-kind.talk    { background: var(--basalt); }
.app-kind.press   { background: var(--basalt-soft); }
.app-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.22;
  text-decoration: none;
  color: var(--basalt);
  letter-spacing: -0.01em;
}
.app-title:hover { color: var(--aegean); }
.app-host {
  display: block;
  font-family: var(--machine);
  font-size: .85rem;
  color: var(--basalt-soft);
  margin-top: .25rem;
}
.app-listen {
  font-family: var(--inscript);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--basalt);
  padding: .55rem .9rem;
  white-space: nowrap;
  color: var(--basalt);
  transition: background .25s ease, color .25s ease;
}
.app-listen:hover { background: var(--basalt); color: var(--marble); }

/* ─────────── About — panel photo as full-bleed background ─────────── */
.section-about {
  position: relative;
  max-width: none;                 /* override .section's 1180px cap */
  margin: 0;
  padding: clamp(5rem, 10vw, 9rem) var(--pad);
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* break out of <main>'s padding */
  background-size: cover;
  background-position: center;
  background-color: var(--basalt);
  color: var(--marble);
  isolation: isolate;
}
.section-about::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,32,.55) 0%, rgba(14,22,32,.78) 100%);
  z-index: 0;
}
.section-about::before {
  /* hairline divider above (in bronze) */
  background: var(--bronze);
  z-index: 1;
}
.section-about > * { position: relative; z-index: 1; }

.section-about .section-index { color: var(--bronze); }
.section-about .eyebrow { color: var(--bronze); }
.section-about .eyebrow::before,
.section-about .eyebrow::after { background: var(--bronze); }
.section-about .display-sm { color: var(--marble); }

.about-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3.5rem;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p {
  font-family: var(--display); font-size: 1.12rem; line-height: 1.55;
  color: var(--marble);
}
.about-grid a {
  color: var(--marble);
  border-bottom: 1px solid var(--bronze);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.about-grid a:hover { color: var(--bronze); }

.colophon h3 {
  font-family: var(--inscript);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1rem;
}
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(184,133,58,.35);
  font-family: var(--inscript);
  font-size: .9rem; letter-spacing: .12em;
  text-transform: uppercase;
}
.colophon a {
  text-decoration: none;
  color: var(--marble);
  border-bottom: 0;
  padding-bottom: 0;
  transition: color .2s ease;
}
.colophon a:hover { color: var(--bronze); }

/* Contact form (About section, on the dark panel photo) */
.contact-form {
  margin-top: 1.2rem;
  display: flex; flex-direction: column;
  gap: .9rem;
  max-width: 44rem;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width: 560px) { .contact-row { grid-template-columns: 1fr; } }
.contact-field {
  display: flex; flex-direction: column;
  gap: .35rem;
}
.contact-field span {
  font-family: var(--inscript);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.contact-field input,
.contact-field textarea {
  font-family: var(--machine);
  font-size: .95rem;
  color: var(--marble);
  background: rgba(241,236,225,0.06);
  border: 1px solid rgba(184,133,58,0.45);
  border-radius: 0;
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
.contact-field textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: var(--display);
  line-height: 1.4;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  background: rgba(241,236,225,0.10);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(241,236,225,0.4); }

.contact-actions {
  display: flex; align-items: center; gap: 1.2rem;
  margin-top: .3rem;
  flex-wrap: wrap;
}
.contact-actions button {
  font-family: var(--inscript);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--bronze);
  color: var(--basalt);
  border: 0;
  padding: .85rem 1.6rem;
  cursor: pointer;
  transition: background .25s ease;
}
.contact-actions button:hover { background: var(--marble); }
.contact-status {
  font-family: var(--inscript);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(241,236,225,0.7);
}
.contact-status.is-success { color: var(--marble); }
.contact-status.is-error   { color: #ff9080; }

/* ─────────── Footer ─────────── */
.site-footer {
  border-top: 0;
  padding: 3rem var(--pad);
  font-family: var(--inscript);
  font-size: .76rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--basalt-soft);
  text-align: center;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: var(--bronze);
  opacity: .55;
}

/* ─────────── Reveal-on-scroll ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ─────────── Dialog ─────────── */
.entry-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: 780px; width: calc(100% - 2rem);
  /* Use dynamic viewport height so iOS Safari's address bar doesn't
     clip the bottom of the modal. Fallback for older browsers. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  color: var(--basalt);
  /* Dialog itself doesn't scroll — the article inside does */
  overflow: hidden;
}
.entry-dialog::backdrop {
  background: rgba(14,22,32,0.62);
  backdrop-filter: blur(3px);
}
.entry-dialog article {
  background: var(--marble);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--bronze);
  border-radius: 0;
  box-shadow: 0 40px 100px rgba(14,22,32,.4);
  position: relative;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  /* iOS Safari: enable momentum scroll + allow vertical touch panning */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.dialog-close {
  position: absolute; top: .8rem; right: 1rem;
  background: transparent; border: 0;
  font-size: 1.8rem; line-height: 1;
  color: var(--basalt-soft); cursor: pointer;
  font-family: var(--display);
}
.dialog-close:hover { color: var(--propaganda); }
.entry-hero {
  margin: 0 calc(-1 * clamp(1.5rem, 4vw, 3rem)) 1.6rem;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--marble-2);
  position: relative;
  border-bottom: 2px solid var(--bronze);
}
.entry-meta {
  font-family: var(--inscript);
  font-size: .76rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin: 0 0 .9rem;
}
.entry-lede {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.42;
  color: var(--basalt-soft);
  margin: 0 0 1.8rem;
  max-width: none;
}
.entry-lede:empty { display: none; }
.entry-body p {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem; line-height: 1.65;
  margin: 0 0 1rem;
}
.entry-body ol, .entry-body ul {
  font-family: var(--display);
  font-size: 1.08rem; line-height: 1.6;
  padding-left: 1.5rem; margin: 0 0 1rem;
}
.entry-body li { margin-bottom: .4rem; }
.entry-body li > p:first-child { margin-top: 0; }
.entry-body li > p:last-child  { margin-bottom: 0; }
.entry-body a {
  color: var(--aegean);
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-underline-offset: 3px;
}
.entry-body a:hover { color: var(--bronze-deep); }
.entry-body > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 4rem; line-height: .8;
  float: left; padding: .25rem .7rem 0 0;
  color: var(--bronze);
  font-style: italic;
}
.entry-body blockquote {
  border-left: 3px solid var(--bronze);
  margin: 1.4rem 0;
  padding: .4rem 0 .4rem 1.2rem;
  font-style: italic;
  color: var(--aegean);
}
.entry-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--marble-3);
  font-family: var(--inscript);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.entry-foot #entry-permalink {
  text-decoration: none;
  color: var(--basalt);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 2px;
  align-self: flex-start;
}
.entry-foot #entry-permalink:hover { color: var(--bronze-deep); }

.entry-share {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .18em;
}
.entry-share .share-label {
  color: var(--basalt-soft);
  margin-right: .4rem;
}
.share-btn {
  font: inherit;
  color: var(--basalt);
  background: transparent;
  border: 1px solid var(--bronze);
  padding: .45rem .8rem;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.share-btn:hover  { background: var(--basalt); color: var(--marble); }
.share-btn.is-copied { background: var(--aegean); color: var(--marble); border-color: var(--aegean); }

/* ─────────── Featured videos (YouTube, lite-embed) ─────────── */
.videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.6rem;
}
@media (max-width: 720px) { .videos { grid-template-columns: 1fr; } }
.video-card { display: flex; flex-direction: column; }
.video-frame {
  aspect-ratio: 16 / 9;
  background: var(--basalt);
  border: 1px solid var(--marble-3);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-stone);
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-frame-empty {
  display: grid; place-items: center;
  color: var(--marble);
  font-family: var(--display); font-style: italic;
  text-align: center; padding: 1rem;
}

/* Lite-embed poster button (channel's cover art + play icon) */
.video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: var(--basalt);
  cursor: pointer;
  display: block;
  font: inherit; color: inherit;
}
.video-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .35s ease;
}
.video-poster:hover .video-cover { transform: scale(1.04); filter: brightness(1.05); }
.video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none;
  transition: transform .25s var(--ease);
  filter: drop-shadow(0 6px 18px rgba(14,22,32,.55));
}
.video-poster:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-play svg { display: block; }

.video-meta {
  padding: 1rem 0 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.video-kind {
  font-family: var(--inscript);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze-deep);
}
.video-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.32rem; line-height: 1.22;
  color: var(--basalt);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.video-title:hover { color: var(--aegean); }
.video-subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--basalt-soft);
  line-height: 1.3;
}
.video-host {
  font-family: var(--machine);
  font-size: .85rem;
  color: var(--basalt-soft);
}

/* ─────────── Closing full-bleed ─────────── */
.closing {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* break out of <main>'s padding */
  margin-top: clamp(3rem, 8vw, 6rem);
  min-height: clamp(440px, 60vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--marble);
  isolation: isolate;
}
.closing-figure {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--basalt);
  z-index: -2;
}
.closing-figure::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,32,.35) 0%, rgba(14,22,32,.70) 100%);
}
.closing-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem var(--pad);
  max-width: 720px;
}
.closing-eyebrow {
  font-family: var(--inscript);
  font-size: .8rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.4rem;
}
.closing-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  color: var(--marble);
  margin: 0 0 1.6rem;
  letter-spacing: -0.01em;
}
.closing-cta {
  margin: 0;
  font-family: var(--inscript);
  font-size: .9rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.closing-cta a {
  color: var(--marble);
  text-decoration: none;
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.closing-cta a:hover {
  color: var(--bronze);
  border-color: var(--marble);
}