/* Everyone Has a Story — 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;
}

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 ---------- */

.hero.hero-mosaic-banner {
  min-height: clamp(360px, 52vh, 560px);
}

@media (max-width: 600px) {
  .hero.hero-mosaic-banner { min-height: 320px; }
}

.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;
}

/* 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;
}

.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;
}

/* ---------- Infographic gallery ---------- */

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

.gallery-item {
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img { transform: scale(1.03); }

.gallery-item .g-title {
  padding: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}

/* ---------- 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 ---------- */

.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-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.pub-item:first-child { padding-top: 0; }

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

.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: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.pub-abstract {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}

/* ---------- 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;
}

.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);
}

/* 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;
}

.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); }