/* A Little Story I Can Tell — Bernard Robin: Digital Storytelling */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400;500;600&family=Special+Elite&display=swap');

:root {
  --paper: #F3EEE4;
  --paper-raised: #FBF8F2;
  --paper-deep: #E8E0CF;
  --ink: #2B2420;
  --ink-soft: #6B5F52;
  --rule: #DCD2BC;
  --rule-soft: #E8E0CF;

  --accent: #C1521C;
  --accent-strong: #8F3C14;
  --accent-soft: #F3DCC9;
  --accent-light: #E8965A;

  --dark-bg: #14100D;
  --dark-bg-2: #241A13;
  --dark-ink: #F3ECE1;
  --dark-ink-soft: #D9CFC3;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-type: "Special Elite", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Regular body text (paragraphs, list descriptions, etc. that don't set
   their own font-size) reads a bit small on a PC/Mac monitor viewed from
   normal desk distance, even though the same 16px looks fine held closer
   on a phone/tablet. `pointer: fine` targets mouse/trackpad devices
   specifically — unlike a width-based breakpoint, it doesn't accidentally
   catch a touch device (iPad, especially landscape) that happens to have
   a wide viewport, since those stay `pointer: coarse` regardless of size. */
@media (pointer: fine) {
  body {
    font-size: 18px;
  }
}

img { max-width: 100%; display: block; }

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / nav ---------- */

header.site-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.15;
}

.brand-logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand .brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.brand .brand-sub {
  font-family: var(--font-type);
  font-size: 13.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: flex-end;
}

nav.main-nav a {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav.main-nav a:hover { color: var(--ink); }

nav.main-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  nav.main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    margin-top: 10px;
  }
  nav.main-nav a { padding: 8px 0; }
  nav.main-nav.open { display: flex; }
  .header-inner { flex-wrap: wrap; }
}

/* ---------- Photo hero (Robin's Market, WWII — image + overlaid title) ---------- */

.hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.hero.hero-full {
  min-height: calc(100vh - 70px);
}

.hero.hero-full .hero-inner { padding-bottom: 64px; }
.hero.hero-full h1 { font-size: 58px; }
.hero.hero-full .eyebrow { font-size: 18px; margin-bottom: 4px; }

@media (max-width: 600px) {
  .hero.hero-full { min-height: 80vh; }
  .hero.hero-full h1 { font-size: 38px; }
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: rgba(20,16,12,0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: hero-cue-bounce 2.2s ease-in-out infinite;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hero-scroll-cue:hover {
  border-color: #fff;
  background: rgba(20,16,12,0.45);
}

.hero-scroll-cue svg { width: 18px; height: 18px; }

@keyframes hero-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,0.05) 0%, rgba(10,8,6,0.82) 100%);
}

/* The mosaic banner has no text overlaid on it (title moved to the content
   section below it), so it doesn't need the text-legibility dark gradient
   above — without this override that gradient was darkening the bottom
   row severely (82% black at the very bottom). */
.hero.hero-mosaic-banner::after {
  content: none;
}

/* Mosaic hero — real story photos instead of one background image, for
   pages (like Student Stories) with no single obvious hero photo. Justified
   rows: each photo is sized close to its own natural aspect ratio (not
   force-cropped into uniform grid cells), so nothing gets cut off oddly. */
.mosaic-rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.mosaic-row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.mosaic-row img {
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .mosaic-row.row-2 { display: none; }
}

/* Equal-width grid variant — every tile in a row gets the same share of
   width (CSS grid) instead of being sized from its own natural aspect
   ratio (the flex technique above). The flex technique looks more organic
   with fewer, similarly-proportioned photos (e.g. Student Stories' 3+4);
   it stops looking balanced once a row mixes very-narrow-portrait images
   with wide-landscape ones, since flex-grow stretches the narrow ones far
   more and crops into faces. Equal grid cells avoid that entirely — used
   on the homepage, where the photo set is more varied. */
.mosaic-rows.grid-mosaic .mosaic-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.mosaic-rows.grid-mosaic .mosaic-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .mosaic-rows.grid-mosaic .mosaic-row.row-2 { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

.hero .eyebrow {
  font-family: var(--font-type);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--accent-light);
  margin: 0 0 10px;
}

.hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  font-weight: 600;
  margin: 0 0 10px;
  text-wrap: balance;
}

.hero p {
  font-size: 17px;
  max-width: 60ch;
  color: #F1E9DE;
  margin: 0;
}

/* ---------- Homepage: mosaic photo banner, nav list + tagline below ---------- */

/* Row height used to come from the hero's own min-height (a vh-based
   clamp), which meant a real full-screen browser window — even an
   ordinary ~1900px-wide one, not just an ultra-wide monitor — could end
   up with a row noticeably shorter than what the photos were cropped
   for, cropping into the bottom of faces (confirmed: at 1908×~268 the
   row-2 box aspect was 2.37, versus 1.65–1.9 for the actual photo crops).
   Switching to aspect-ratio ties each row's height purely to its own
   width, so the framing is identical at every window size — width alone,
   independent of viewport height or monitor shape. */
.hero.hero-mosaic-banner {
  display: block;
  min-height: 0;
  background: var(--ink);
}

.hero.hero-mosaic-banner .mosaic-rows {
  position: static;
  display: block;
  width: min(100%, 2000px);
  margin: 0 auto;
}

.hero.hero-mosaic-banner .mosaic-row {
  flex: none;
}

/* row-1: 4 tiles, each cropped to 1.5 → 4 × 1.5 = 6.
   row-2: 3 tiles; sailor (the tightest face crop) is 1.65, so that's the
   row's target — gachet/popups (both 1.9) lose a little off the sides
   instead, which is safe for a painting/building photo. 3 × 1.65 = 4.95. */
.hero.hero-mosaic-banner .mosaic-row.row-1 { aspect-ratio: 6 / 1; }
.hero.hero-mosaic-banner .mosaic-row.row-2 { aspect-ratio: 4.95 / 1; }

.homepage-intro h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 52px;
  margin: 0 0 14px;
  text-wrap: balance;
}

.homepage-intro .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 74ch;
  margin: 0 0 8px;
}

.homepage-intro .lede a {
  color: var(--accent);
}

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  position: relative;
  background: linear-gradient(155deg, var(--dark-bg-2) 0%, var(--dark-bg) 100%);
  background-size: cover;
  background-position: center;
  padding: 54px 0 42px;
}

.page-hero.with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.92) 100%);
}

.page-hero .wrap { position: relative; z-index: 1; }

.page-hero .eyebrow {
  font-family: var(--font-type);
  font-size: 18px;
  color: var(--accent-light);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
}

.page-hero p.lede {
  font-size: 16.5px;
  color: var(--dark-ink-soft);
  max-width: 68ch;
  margin: 0;
}

/* ---------- Sections ---------- */

main { padding: 48px 0 90px; }

section.block { margin-bottom: 60px; }

section.block h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
}

section.block p.intro {
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}

.section-nav a {
  font-family: var(--font-type);
  font-size: 13px;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.section-nav a:hover { color: var(--accent); border-color: var(--accent); }

.year-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  margin: 48px 0 22px;
  scroll-margin-top: 90px;
}

.year-heading:first-of-type { margin-top: 0; }

/* ---------- Story tiles (photo-gallery treatment for videos) ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px 24px;
}

.video-card { position: relative; }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0e0c0a;
  overflow: hidden;
  cursor: pointer;
}

.video-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-embed img { transform: scale(1.045); }

.video-embed .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-embed .play-badge::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

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

.video-meta { padding: 14px 2px 0; }

.video-meta .v-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 3px;
  line-height: 1.3;
}

.video-meta .v-author {
  font-family: var(--font-type);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}

.video-meta .v-note {
  font-size: 12.5px;
  color: var(--accent);
  margin: 6px 0 0;
  font-style: italic;
}

.video-meta .v-materials {
  display: inline-block;
  font-family: var(--font-type);
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
  margin: 8px 0 0;
}
.video-meta .v-materials:hover { color: var(--accent-strong); }

/* Featured (wider) tile, used sparingly for rhythm */
.video-card.featured { grid-column: span 2; }
.video-card.featured .video-meta .v-title { font-size: 22px; }
@media (max-width: 700px) {
  .video-card.featured { grid-column: span 1; }
}

.rm-lead {
  max-width: 74ch;
  margin: 0 0 40px;
}

/* ---------- Self-hosted (non-YouTube) video player — for archived
   material like the James Surls exhibition videos, no lightbox JS needed
   since a native <video> already has its own controls. ---------- */
.local-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0e0c0a;
  display: block;
}

/* ---------- Simple photo gallery grid — image + caption, no click-through.
   Square crop keeps a long, mixed-aspect-ratio set (drawings, sculptures,
   photographed at odd crops over 20 years) looking tidy as one grid. ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

.gallery-item {
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  display: block;
  transition: opacity 0.15s ease;
}

.gallery-item:hover img { opacity: 0.85; }

.gallery-item p {
  font-family: var(--font-type);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 6px 0 0;
  text-align: center;
}

/* ---------- Lightbox — click-to-enlarge for gallery grids. Generic, not
   Surls-specific, so any future archived-site gallery can reuse it. ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 12, 10, 0.94);
  align-items: center;
  justify-content: center;
  padding: 60px 70px;
}

.lightbox.open { display: flex; }
.lightbox { overflow-y: auto; }

body.lightbox-open { overflow: hidden; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  background: #0e0c0a;
}

.lightbox-figure figcaption {
  max-width: 520px;
  text-align: center;
}

.lightbox-figure .lb-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  margin: 0 0 6px;
}

.lightbox-figure .lb-meta {
  font-family: var(--font-type);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.8;
  margin: 2px 0;
}

.lightbox-figure .lb-count {
  font-family: var(--font-type);
  font-size: 11.5px;
  color: var(--paper);
  opacity: 0.55;
  margin: 10px 0 0;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  line-height: 1;
}

.lightbox-close {
  top: 18px;
  right: 24px;
  font-size: 34px;
}

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding: 10px;
}

.lightbox-arrow.prev { left: 12px; }
.lightbox-arrow.next { right: 12px; }

.lightbox-close:hover,
.lightbox-arrow:hover { color: var(--accent-light, var(--accent)); }

@media (max-width: 640px) {
  .lightbox { padding: 70px 16px 30px; align-items: flex-start; }
  .lightbox-arrow { font-size: 24px; padding: 6px; position: fixed; top: 50%; }
  .lightbox-figure img { max-height: 50vh; }
}

.rm-lead p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
}

/* ---------- Lists (articles / presentations / decks) ---------- */

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.doc-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--rule);
}

.doc-title { flex: 1 1 260px; min-width: 0; font-family: var(--font-display); font-size: 17px; }
.doc-title .doc-authors { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

.doc-action {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  font-family: var(--font-type);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--accent);
}

.doc-action.disabled {
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Carousel (one large image, prev/next) ---------- */

.carousel {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}

.carousel-stage {
  flex: 1;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-deep);
}

.carousel-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper-deep);
}

.carousel-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }

.carousel-caption {
  max-width: 880px;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.carousel-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  margin: 0;
}

.carousel-count {
  font-family: var(--font-type);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .carousel { gap: 10px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 15px; }
}

/* ---------- About / bio ---------- */

/* Two side-by-side topic cards (e.g. What Is Digital Storytelling? / EUODS) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
}

.bio-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.bio-layout img.portrait { width: 100%; }

.bio-layout p { margin: 0 0 16px; }

@media (max-width: 700px) {
  .bio-layout { grid-template-columns: 1fr; }
  .bio-layout img.portrait { max-width: 240px; }
}

/* ---------- Publications (on the About page) ---------- */

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

.pub-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 24px 26px 26px;
}

.pub-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 6px;
}

.pub-title a { color: var(--ink); text-decoration: none; }
.pub-title a:hover { color: var(--accent); }

.pub-byline {
  font-family: var(--font-type);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.pub-hook {
  font-size: 14.5px;
  font-style: italic;
  color: var(--accent-strong);
  line-height: 1.5;
  margin: 0 0 12px;
}

.pub-abstract {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
  flex: 1;
}

.pub-cta {
  font-family: var(--font-type);
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
}
.pub-cta:hover { color: var(--accent-strong); }

.pub-note {
  font-family: var(--font-type);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin: auto 0 0;
}

/* ---------- Story cards (featured-story grid, e.g. Roman Ohnemus collection) ---------- */

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 34px;
}

/* For a small, fixed set of cards (e.g. two collections) that shouldn't
   stretch to fill a wide row or sit left-justified with dead space —
   sizes each card to a sensible max width and centers the group, growing
   gracefully into a wider centered row if more cards are added later. */
.story-grid.centered {
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
}

/* Exactly three cards: slightly narrower max so all three fit one row on desktop. */
.story-grid.centered.three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
}

.story-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
}

.story-card .story-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}

.story-card .story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.story-card:hover .story-img img { transform: scale(1.04); }

.story-card .story-body { padding: 20px 22px 24px; }

.story-card .story-eyebrow {
  font-family: var(--font-type);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 8px;
}

.story-card .story-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.story-card .story-teaser {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}

.story-card .story-cta {
  font-family: var(--font-type);
  font-size: 12.5px;
  color: var(--accent);
}

/* A card for a project with no live site and no page here to explore —
   same look, but not clickable, so it shouldn't hint that it is. */
.story-card.static { cursor: default; }
.story-card.static:hover .story-img img { transform: none; }
.story-card .story-cta.static-note { color: var(--ink-soft); font-style: italic; }

/* Prominent button-style CTA — for a single highlighted link, not repeated nav */
.btn-cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-type);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.btn-cta:hover {
  background: var(--accent-strong);
  color: #fff;
}

/* Archive teaser box — points to unpublished raw material */
.archive-teaser {
  background: var(--paper-deep);
  border: 1px dashed var(--rule);
  padding: 30px 30px 26px;
}

.archive-teaser h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  margin: 0 0 10px;
}

.archive-teaser ul {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.9;
}

/* Story detail page — long-form narrative with photos */
.story-detail {
  max-width: 74ch;
  margin: 0 auto;
}

.story-detail .story-byline {
  font-family: var(--font-type);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 30px;
}

.story-detail p { margin: 0 0 20px; line-height: 1.75; }

/* General-purpose inset supporting image — for a single illustrative photo
   or screenshot within a regular content section (not full-article width). */
.inline-figure {
  max-width: 640px;
  margin: 28px 0;
}

.inline-figure img {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
}

.inline-figure figcaption {
  font-family: var(--font-type);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* Smaller variant — for a supporting image that shouldn't visually compete
   with the section's main photo/content (e.g. an award certificate). */
.inline-figure.inline-figure-small {
  max-width: 240px;
}

.story-detail figure {
  margin: 34px 0;
}

.story-detail figure img { width: 100%; }

.story-detail figcaption {
  font-family: var(--font-type);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

.story-detail .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--accent-strong);
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  margin: 36px 0;
}

.story-detail .doc-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin: 8px 0 34px;
}

.story-detail .doc-thumbs a { text-decoration: none; }
.story-detail .doc-thumbs img {
  width: 100%;
  border: 1px solid var(--rule);
}
.story-detail .doc-thumbs span {
  display: block;
  font-family: var(--font-type);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.story-detail .back-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-type);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}

/* Draft banner — remove once a page goes live */
.draft-banner {
  background: var(--accent-strong);
  color: #fff;
  text-align: center;
  font-family: var(--font-type);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
}

/* ---------- Footer ---------- */

footer.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: 28px 0;
  margin-top: 40px;
}

footer.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

footer.site-footer p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}

footer.site-footer a { color: var(--ink-soft); }