@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Gotham Ultra — site font for the slogan (supplied GothamHTF-Ultra).
   WOFF2 loads in every modern browser; OTF is the fallback. */
@font-face {
  font-family: 'Gotham Ultra';
  src: url('fonts/GothamHTF-Ultra.woff2') format('woff2'),
       url('fonts/GothamHTF-Ultra.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== VARIABLES ===== */
:root {
  --color-paper: #F6F4EF;
  --color-ink: #0E0E0D;
  --color-orange: #AF2A10;
  --color-charcoal: #151413;
  --color-warm-gray: #6D6A63;
  --color-white: #FFFFFF;
  --toc-orange: #AF2A10;
  --toc-yellow: #E4D402;
  --toc-cream: #E2DDC9;
  --toc-paper: #F5EBCB;
  --toc-ink: #2C2B26;
  --toc-stack-w: clamp(48px, 19vw, 365px);
}

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Serif 4', Georgia, serif;
  background: var(--color-paper) url('images/bg.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--color-charcoal);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-orange);
  color: var(--color-white);
}

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

a {
  text-decoration: none;
  color: inherit;
}

/* ===== MASTHEAD =====
   One header, identical on every page — matches the simplified
   design picture: cream background, yellow logo block, 12 orange
   line stacks, FOLKSPRESS wordmark, dark mono menu, hairline rule. */
.masthead {
  background: #E2DDC9 url('images/bg.jpg');
  background-size: cover;
  background-position: center;
  border-bottom: max(1px, 0.14vw) solid #AF2A10;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 1.5vw, 30px);
  padding: clamp(10px, 0.79vw, 15px) clamp(10px, 0.79vw, 15px) 0;
  max-width: none;
  margin: 0;
}

/* Yellow logo block — exact proportions from the design picture
   (247 x 179 px at 1900 px wide = 13vw x 9.42vw). */
.masthead-emblem {
  flex-shrink: 0;
  width: auto;
}

.masthead-emblem a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E4D402;
  width: clamp(90px, 13vw, 247px);
  /* same height as the orange line stacks flanking the wordmark, site-wide */
  height: clamp(48px, 6.44vw, 122px);
  padding: clamp(6px, 0.85vw, 14px);
}

.masthead-emblem img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.masthead-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.masthead-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  padding: clamp(3px, 0.5vw, 8px) 0;
}

/* Line stacks — 10 orange lines, same pitch as the design picture
   (line 0.32vw, pitch 0.68vw -> 10 lines = 6.44vw tall);
   the yellow square stays the tallest element so the square
   defines the row height. */
.masthead-rules {
  flex: 0 1 var(--toc-stack-w);
  width: var(--toc-stack-w);
  height: clamp(48px, 6.44vw, 122px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.masthead-rule {
  height: clamp(2px, 0.32vw, 6px);
  background-color: #AF2A10;
  width: 100%;
}

.masthead-logo-text {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 5.8vw, 110px);
  color: #AF2A10;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
}

/* Middle column: wordmark + menu share one shrink-wrapped container, so
   the menu is always exactly the width of the wordmark (design picture). */
.masthead-mid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 clamp(4px, 0.8vw, 15px);
}

/* Menu — small black caps with orange slashes, spread edge-to-edge
   across the wordmark's width (space-between, as in the design picture). */
.masthead-nav {
  display: flex;
  align-items: center;
  margin-top: 0;
  padding: clamp(6px, 0.6vw, 12px) 0 clamp(8px, 0.85vw, 16px);
  gap: clamp(6px, 0.9vw, 16px);
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Main menu — one shared style on every page (matches the design picture):
   small mono caps, black ink, orange slashes; hover highlights orange. */
.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, 0.75vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #2C2B26;
  padding: 0;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #AF2A10;
  text-decoration: underline;
  text-decoration-color: #AF2A10;
  text-underline-offset: 4px;
}

.nav-separator {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, 0.75vw, 14px);
  color: #AF2A10;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-orange);
  transition: all 0.3s ease;
}

.mobile-menu-btn.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-nav {
  display: none;
  padding: 0 24px 16px;
  border-top: 1px solid rgba(255, 122, 61, 0.3);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 122, 61, 0.2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-charcoal);
}

.mobile-nav a.active {
  color: var(--color-orange);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 110px);
  min-height: 500px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.hero-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white);
  border: 1px solid var(--color-orange);
  padding: 8px 24px;
  margin-bottom: 32px;
}

.hero h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 80px);
  color: var(--color-white);
  line-height: 1.1;
  max-width: 800px;
  margin-bottom: 24px;
}

.hero p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  color: var(--color-white);
  opacity: 0.9;
  max-width: 500px;
  margin-bottom: 40px;
}

.hero-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.hero-cta:hover {
  opacity: 0.8;
}

/* ===== PAGE HEADER ===== */
.page-header {
  padding: 48px 24px;
  text-align: center;
  background: url('images/bg.jpg');
  background-size: cover;
  background-position: center;
}

.page-rule {
  height: 5px;
  background-color: var(--color-orange);
  max-width: 1100px;
  margin: 0 auto;
}

.page-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin: 24px 0 12px;
}

.page-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  color: var(--color-warm-gray);
  font-style: italic;
}

/* ===== CONTENT SECTIONS ===== */
.content-section {
  padding: 60px 24px;
  max-width: calc(900px * 1.08);  /* 4% wider on each side */
  margin: 0 auto;
}

.content-section-wide {
  padding: 60px 24px;
  max-width: calc(1200px * 1.08);  /* 4% wider on each side */
  margin: 0 auto;
}

.section-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

/* ===== DROPCAP ===== */
.dropcap {
  float: left;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 72px;
  line-height: 0.75;
  color: var(--color-orange);
  padding-right: 12px;
  padding-top: 6px;
  font-weight: 400;
}

.dropcap::selection {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.dropcap-paragraph {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

.dropcap-paragraph::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== PULL QUOTE ===== */
.pull-quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-charcoal);
  border-left: 4px solid var(--color-orange);
  padding-left: 24px;
  margin: 32px 0;
}

.pull-quote footer {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  margin-top: 12px;
}

/* ===== DUOTONE IMAGE ===== */
.duotone-wrap {
  position: relative;
  overflow: hidden;
  margin: 32px 0;
}

.duotone-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15) grayscale(100%);
  display: block;
}

.duotone-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-orange);
  mix-blend-mode: multiply;
  opacity: 0.65;
  pointer-events: none;
}

/* ===== STAMP SEAL ===== */
.stamp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0;
}

.stamp-line {
  height: 1px;
  flex: 1;
  max-width: 200px;
  background-color: var(--color-orange);
}

/* Stamp seal — the circles inside the SVG use currentColor, so this one
   `color` value is the seal ink for every page. Sizes live here too. */
.stamp-seal {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  color: var(--color-orange);
}

.stamp-seal--sm {
  width: 30px;
  height: 30px;
}

.stamp-seal--md {
  width: 40px;
  height: 40px;
}

.stamp-seal--lg {
  width: 60px;
  height: 60px;
}

/* ===== GRID ===== */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* ===== TAG/BADGE ===== */
.tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  background-color: var(--color-orange);
  color: var(--color-white);
  margin-bottom: 16px;
}

.tag-outline {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-orange);
  margin-bottom: 16px;
}

/* ===== BUTTON ===== */
.btn-outline {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 24px;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  background: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.btn-solid {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 32px;
  background-color: var(--color-orange);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-solid:hover {
  opacity: 0.9;
}

/* ===== FORM ===== */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  color: var(--color-charcoal);
  background: transparent;
  border: 2px solid var(--color-orange);
  outline: none;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-charcoal);
}

/* ===== NEWSLETTER SECTION ===== */
.newsletter {
  background-color: var(--color-ink);
  padding: 64px 24px;
}

.newsletter-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 12px;
}

.newsletter p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  color: var(--color-warm-gray);
  margin-bottom: 32px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--color-white);
  background: transparent;
  border: 2px solid var(--color-orange);
  outline: none;
}

.newsletter-form input::placeholder {
  color: var(--color-warm-gray);
}

.newsletter small {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  opacity: 0.6;
  margin-top: 16px;
}

/* ===== FOOTER ===== */
/* To change the footer background photo, replace images/footer-bg.jpg
   or point --footer-bg-image (in :root below) at any other image. */
:root {
  --footer-bg-image: url('images/footer-bg.jpg');
}

.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
}

/* Blurred photo backdrop */
.site-footer::before {
  content: '';
  position: absolute;
  inset: -24px;
  background-image: var(--footer-bg-image);
  background-size: cover;
  background-position: center 30%;
  filter: blur(8px) brightness(0.45);
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  padding: 80px 5vw 0;
}

/* Link columns */
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(48px, 12vw, 220px);
}

.footer-col {
  min-width: 140px;
}

/* Emblem — right side of the footer. Swap images/footer-emblem.png to change. */
.footer-emblem {
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
  padding-left: 24px;
}

@media (max-width: 640px) {
  .footer-emblem {
    padding-left: 0;
    padding-top: 8px;
  }
}

.footer-emblem img {
  width: clamp(64px, 7vw, 104px);
  height: auto;
}

.footer-col-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-white);
  margin-bottom: 22px;
}

.footer-col a,
.footer-col p {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 2.3;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--color-orange);
}

/* Legal bar */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 64px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--color-orange);
}

/* Giant wordmark */
.footer-giant {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 11vw, 185px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 12px 0 24px;
}

.footer-giant span {
  display: inline-block;
}

/* ===== UTILITY PAGE (sitemap / policies) ===== */
.utility-page {
  max-width: calc(720px * 1.08);  /* 4% wider on each side */
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.utility-page h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin-bottom: 40px;
}

.utility-page h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-orange);
  margin: 40px 0 16px;
}

.utility-page a {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 2;
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 20, 19, 0.12);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.utility-page a:hover {
  color: var(--color-orange);
  padding-left: 8px;
}

.utility-page p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-warm-gray);
  margin-bottom: 16px;
}

/* ===== DARK SECTION ===== */
.dark-section {
  background-color: var(--color-ink);
  padding: 64px 24px;
}

.dark-section h2 {
  color: var(--color-white);
}

.dark-section .dropcap-paragraph {
  color: rgba(255, 255, 255, 0.85);
}

.dark-section .pull-quote {
  color: var(--color-white);
  border-left-color: var(--color-orange);
}



/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .content-section,
  .content-section-wide {
    padding: 60px 48px;
  }
}

@media (max-width: 767px) {
  .masthead-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  /* keep the yellow logo block visible on small screens */
  .masthead-emblem a {
    width: 90px;
    height: 64px;
    padding: 5px;
  }

  .masthead-inner {
    gap: 12px;
    padding: 10px 12px 0;
  }

  .dropcap {
    font-size: 56px;
    line-height: 0.8;
  }

  .hero {
    height: auto;
    min-height: 70vh;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input,
  .newsletter-form .btn-solid {
    width: 100%;
  }
}

/* ===== MAT FRAME =====
   The standard frame for all galleries and the home hero.
   White mat + thin border + crosshair crop marks at the corners.
   Replaces the old gold frame — do not reintroduce #C9A227. */
.mat-frame {
  position: relative;
  background-color: #ffffff;
  padding: clamp(10px, 1.6vw, 20px);
  border: 1px solid #d9d2c4;
  background-image:
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55)),
    linear-gradient(rgba(21, 20, 19, 0.55), rgba(21, 20, 19, 0.55));
  background-repeat: no-repeat;
  background-size:
    22px 1.5px, 1.5px 22px,
    22px 1.5px, 1.5px 22px,
    22px 1.5px, 1.5px 22px,
    22px 1.5px, 1.5px 22px;
  background-position:
    -11px 0, 0 -11px,
    right -11px top 0, right 0 top -11px,
    left -11px bottom 0, left 0 bottom -11px,
    right -11px bottom 0, right 0 bottom -11px;
}

.mat-frame img {
  display: block;
  width: 100%;
}

/* ===== HOME — TOC DESIGN (v4 — simplified header per Folks-Press.jpg) =====
   Yellow logo block, FOLKSPRESS flanked by CSS line stacks, dark mono menu,
   one hairline orange rule, then a full-bleed clickable bookstore hero. */
.masthead-toc {
  --toc-orange: #AF2A10;
  --toc-yellow: #E4D402;
  --toc-cream: #E2DDC9;
  --toc-paper: #F5EBCB;
  --toc-ink: #2C2B26;
  --toc-stack-w: clamp(48px, 19vw, 365px);
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.5vw, 30px);
  padding: clamp(10px, 0.79vw, 15px) clamp(10px, 0.79vw, 15px) 0;
  background: #E2DDC9 url('images/bg.jpg');
  background-size: cover;
  background-position: center;
}

/* Flag mark — plain text placeholder on the orange flag. Edit the text in
   index.html; style it here (cream, Oswald, scales with the flag). */
.fp-index .toc-flagmark {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.7vw, 52px);
  line-height: 1;
  color: #F5EBCB;
  margin: clamp(6px, 0.9vw, 16px) 0;
}

/* Left rail: tall orange tab + small tail block beneath it */
.toc-rail {
  width: clamp(84px, 9.5vw, 180px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 30px);
}

.toc-tab {
  flex: 1;
  background-color: #AF2A10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 1.6vw, 30px) 0 clamp(14px, 1.6vw, 30px);
}

.toc-tail {
  height: clamp(24px, 2.6vw, 50px);
  background-color: #AF2A10;
  flex-shrink: 0;
}

.toc-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, 0.95vw, 15px);
  letter-spacing: 0.1em;
  color: #F5EBCB;
}

.toc-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 50px);
  color: #F5EBCB;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1;
}

.toc-vertical {
  font-family: 'Anton', sans-serif;
  font-size: clamp(24px, 5.4vw, 108px);
  text-transform: uppercase;
  color: #F5EBCB;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1;
}

/* Right column: masthead on top, hero below */
.toc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.masthead-toc .masthead-inner {
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The orange line — single hairline rule under the masthead (pure CSS) */
.masthead-ruleline {
  height: max(1px, 0.14vw);
  background-color: #AF2A10;
  width: 100%;
  flex-shrink: 0;
}

/* Wordmark row: [yellow emblem] [line stack] FOLKSPRESS [line stack] */
.masthead-toc .masthead-logo-row {
  max-width: none;
  align-items: center;
  padding: clamp(3px, 0.5vw, 8px) 0;
}

/* Line stacks — 10 orange lines drawn entirely in CSS (no images) */
.masthead-toc .masthead-rules {
  flex: 0 1 var(--toc-stack-w);
  width: var(--toc-stack-w);
  height: clamp(48px, 6.44vw, 122px);
  display: block;
  background-image: repeating-linear-gradient(
    to bottom,
    #AF2A10 0,
    #AF2A10 clamp(2px, 0.32vw, 6px),
    transparent clamp(2px, 0.32vw, 6px),
    transparent clamp(5px, 0.68vw, 13px)
  );
  background-size: 100% clamp(5px, 0.68vw, 13px);
}

.masthead-toc .masthead-logo-text {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 5.8vw, 110px);
  color: #AF2A10;
  letter-spacing: 0;
  margin: 0;
  flex: 0 1 auto;
  text-align: center;
}

/* Yellow logo block — home page only */
.masthead-toc .masthead-emblem {
  width: auto;
  flex-shrink: 0;
}

/* Yellow emblem block — exact proportions from the design picture
   (247 x 179 px at 1900 px wide = 13vw x 9.42vw). */
.emblem-yellow {
  background-color: #E4D402;
  width: clamp(90px, 13vw, 247px);
  /* same height as the orange line stacks flanking the wordmark, site-wide */
  height: clamp(48px, 6.44vw, 122px);
  padding: clamp(6px, 0.85vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emblem-yellow img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Menu — shares the site-wide .nav-link style; only the layout differs here. */
.masthead-toc .masthead-nav {
  margin-top: 0;
  padding: clamp(6px, 0.6vw, 12px) 0 clamp(8px, 0.85vw, 16px);
  gap: clamp(6px, 0.9vw, 16px);
  justify-content: space-between;
}

.masthead-toc .nav-link {
  padding: 0;
}

/* Hero — full-bleed photo with HTML clickable issue hotspots */
.toc-hero {
  padding: clamp(8px, 1.2vw, 22px) 0 0;
}

.toc-books {
  position: relative;
}

.toc-books > img {
  display: block;
  width: 100%;
  height: auto;
}

/* invisible clickable areas over each issue — positions in % of the photo */
.toc-books a {
  position: absolute;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

.toc-books a:hover {
  border-bottom: clamp(2px, 0.32vw, 5px) solid #AF2A10;
}

/* Content zone below the hero — plain cream, new content goes here */
.toc-zone {
  background: #E2DDC9 url('images/bg.jpg');
  background-size: cover;
  background-position: center;
  margin: 0;
  /* left padding aligns with the hero's left edge (rail + gap + page margin) */
  padding: clamp(28px, 4vw, 64px) clamp(12px, 1vw, 20px) clamp(48px, 6vw, 96px)
    calc(clamp(84px, 9.5vw, 180px) + clamp(12px, 1.5vw, 30px) + clamp(12px, 1vw, 20px));
  min-height: clamp(220px, 42vh, 520px);
}

/* ===== RESPONSIVE: TOC DESIGN ===== */
@media (max-width: 768px) {
  .masthead-toc {
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 0;
  }

  .toc-rail {
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }

  /* flag mark shrinks with the horizontal bar */
  .fp-index .toc-flagmark {
    font-size: 17px;
    margin: 0;
    flex-shrink: 0;
  }

  .toc-tab {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    gap: 8px;
  }

  .toc-tail {
    display: none;
  }

  .toc-date {
    font-size: 10px;
  }

  .toc-num {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 15px;
  }

  .toc-vertical {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 17px;
  }

  .masthead-toc .masthead-logo-text {
    font-size: clamp(24px, 8vw, 44px);
    flex: 0 1 auto;
    margin: 0 6px;
  }

  /* keep the yellow emblem visible on small screens (original CSS hides it) */
  .masthead-toc .masthead-emblem {
    display: block;
  }

  .masthead-toc .emblem-yellow {
    padding: 5px;
  }

  .masthead-toc .masthead-inner {
    padding: 4px 0;
    gap: 8px;
  }

  .masthead-toc .masthead-nav {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    flex-wrap: wrap;
    padding: 6px 0 8px;
  }

  .toc-hero {
    padding-top: 10px;
  }

  .toc-zone {
    padding: 26px 14px 44px;
    min-height: 200px;
  }
}

@media (max-width: 560px) {
  /* line stacks stay visible on small screens, just narrower */
  .masthead-rules {
    display: flex;
    flex: 0 0 auto;
    width: 44px;
    height: 48px;
  }

  .masthead-toc .masthead-rules {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 48px;
  }

  .masthead-toc .masthead-nav {
    justify-content: center;
  }

  .masthead-nav {
    justify-content: center;
  }
}


/* ============================================================
   PAGE-SPECIFIC STYLES
   Extracted from the individual HTML pages (previously inline
   <style> blocks). Each block is scoped to its page via the
   body class .fp-<slug> so every page keeps its exact look.
   ============================================================ */

/* ----- bethere.html (body.fp-bethere) ----- */
.fp-bethere /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-bethere .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-bethere .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-bethere .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-bethere .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-bethere .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-bethere .story-meta .author {
font-weight: 600;
}
.fp-bethere .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-bethere .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-bethere .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-bethere .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-bethere .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-bethere /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-bethere .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-bethere .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-bethere .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-bethere .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-bethere /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-bethere .inline-image:hover {
transform: scale(1.01);
}
.fp-bethere .inline-image img {
width: 100%;
      display: block;
}
.fp-bethere .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-bethere /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-bethere .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-bethere .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-bethere /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-bethere .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-bethere .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-bethere .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-bethere /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-bethere .lightbox.open {
display: flex;
}
.fp-bethere .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-bethere .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-bethere .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-bethere .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-bethere .lightbox-prev {
left: 10px;
}
.fp-bethere .lightbox-next {
right: 10px;
}
.fp-bethere .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-bethere /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- deep.html (body.fp-deep) ----- */
.fp-deep /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-deep .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-deep .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-deep .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-deep .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-deep .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-deep .story-meta .author {
font-weight: 600;
}
.fp-deep .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-deep .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-deep .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-deep .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-deep .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-deep /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-deep .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-deep .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-deep .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-deep .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-deep /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-deep .inline-image:hover {
transform: scale(1.01);
}
.fp-deep .inline-image img {
width: 100%;
      display: block;
}
.fp-deep .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-deep /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-deep .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-deep .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-deep /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-deep .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-deep .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-deep .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-deep /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-deep .lightbox.open {
display: flex;
}
.fp-deep .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-deep .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-deep .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-deep .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-deep .lightbox-prev {
left: 10px;
}
.fp-deep .lightbox-next {
right: 10px;
}
.fp-deep .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-deep /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- don't .html (body.fp-don-t) ----- */
.fp-don-t /* ===== VIDEO HERO WITH GOLDEN FRAME ===== */
    .video-section {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-don-t .golden-frame-video {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
      position: relative;
}
.fp-don-t .golden-frame-video-inner {
border: 1px solid #e4ded2;
      position: relative;
      overflow: hidden;
      background: #000;
}
.fp-don-t .video-poster {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
}
.fp-don-t .video-play-btn {
position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(0,0,0,0.2);
      transition: background 0.3s ease;
}
.fp-don-t .video-play-btn:hover {
background: rgba(0,0,0,0.1);
}
.fp-don-t .play-circle {
width: 80px;
      height: 80px;
      border: 3px solid #AF2A10;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.4);
      transition: all 0.3s ease;
}
.fp-don-t .play-circle:hover {
background: rgba(0,0,0,0.6);
      transform: scale(1.1);
}
.fp-don-t .play-triangle {
width: 0;
      height: 0;
      border-left: 24px solid #AF2A10;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      margin-left: 6px;
}
.fp-don-t .video-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-don-t /* ===== VIDEO OVERLAY (when playing) ===== */
    .video-overlay-msg {
display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.85);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-don-t .video-overlay-msg.show {
display: flex;
}
.fp-don-t .video-overlay-msg p {
font-family: 'Oswald', sans-serif;
      font-size: 24px;
      color: #AF2A10;
      text-transform: uppercase;
      letter-spacing: 0.05em;
}
.fp-don-t .video-overlay-msg span {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--color-warm-gray);
      margin-top: 8px;
}
.fp-don-t /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-don-t .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-don-t .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-don-t .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-don-t .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-don-t .story-header-meta .author {
font-weight: 600;
}
.fp-don-t .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-don-t /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-don-t .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-don-t .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-don-t .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-don-t .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-don-t /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-don-t .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-don-t .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-don-t .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-don-t .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-don-t .gallery-item img:hover {
transform: scale(1.05);
}
.fp-don-t .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-don-t /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-don-t .inline-image img {
width: 100%;
      display: block;
}
.fp-don-t .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-don-t /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-don-t .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-don-t .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-don-t .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-don-t /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-don-t .lightbox.open {
display: flex;
}
.fp-don-t .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-don-t .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-don-t .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-don-t .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-don-t .lightbox-prev {
left: 10px;
}
.fp-don-t .lightbox-next {
right: 10px;
}
.fp-don-t .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-don-t /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
      .play-circle {
        width: 60px;
        height: 60px;
      }
      .play-triangle {
        border-left: 18px solid #AF2A10;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
      }
}

  

/* ----- hang.html (body.fp-hang) ----- */
.fp-hang /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-hang .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-hang .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-hang .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-hang .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-hang .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-hang .story-meta .author {
font-weight: 600;
}
.fp-hang .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-hang .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-hang .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-hang .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-hang .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-hang /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-hang .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-hang .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-hang .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-hang .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-hang /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-hang .inline-image:hover {
transform: scale(1.01);
}
.fp-hang .inline-image img {
width: 100%;
      display: block;
}
.fp-hang .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-hang /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-hang .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-hang .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-hang /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-hang .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-hang .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-hang .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-hang /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-hang .lightbox.open {
display: flex;
}
.fp-hang .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-hang .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-hang .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-hang .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-hang .lightbox-prev {
left: 10px;
}
.fp-hang .lightbox-next {
right: 10px;
}
.fp-hang .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-hang /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- inone.html (body.fp-inone) ----- */
.fp-inone /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-inone .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-inone .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-inone .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-inone .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-inone .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-inone .story-meta .author {
font-weight: 600;
}
.fp-inone .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-inone .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-inone .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-inone .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-inone .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-inone /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-inone .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-inone .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-inone .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-inone .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-inone /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-inone .inline-image:hover {
transform: scale(1.01);
}
.fp-inone .inline-image img {
width: 100%;
      display: block;
}
.fp-inone .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-inone /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-inone .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-inone .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-inone /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-inone .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-inone .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-inone .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-inone /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-inone .lightbox.open {
display: flex;
}
.fp-inone .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-inone .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-inone .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-inone .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-inone .lightbox-prev {
left: 10px;
}
.fp-inone .lightbox-next {
right: 10px;
}
.fp-inone .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-inone /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- keeping-1.html (body.fp-keeping-1) ----- */
.fp-keeping-1 /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-keeping-1 .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-keeping-1 .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-keeping-1 .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-keeping-1 .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-keeping-1 .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-keeping-1 .story-meta .author {
font-weight: 600;
}
.fp-keeping-1 .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-keeping-1 .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-keeping-1 .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-keeping-1 .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-keeping-1 .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-keeping-1 /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-keeping-1 .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-keeping-1 .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-keeping-1 .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-keeping-1 .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-keeping-1 /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-keeping-1 .inline-image:hover {
transform: scale(1.01);
}
.fp-keeping-1 .inline-image img {
width: 100%;
      display: block;
}
.fp-keeping-1 .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-keeping-1 /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-keeping-1 .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-keeping-1 .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-keeping-1 /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-keeping-1 .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-keeping-1 .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-keeping-1 .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-keeping-1 /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-keeping-1 .lightbox.open {
display: flex;
}
.fp-keeping-1 .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-keeping-1 .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-keeping-1 .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-keeping-1 .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-keeping-1 .lightbox-prev {
left: 10px;
}
.fp-keeping-1 .lightbox-next {
right: 10px;
}
.fp-keeping-1 .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-keeping-1 /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- magazine.html (body.fp-magazine) ----- */
.fp-magazine /* ===== COVERS GRID ===== */
    .covers-grid {
display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      padding: 48px 16px;
      max-width: 1100px;
      margin: 0 auto;
}
.fp-magazine .cover-item {
display: flex;
      flex-direction: column;
}
.fp-magazine .cover-placeholder {
width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      background: transparent;
      transition: all 0.2s ease;
      cursor: pointer;
      position: relative;
}
.fp-magazine .cover-placeholder img {
width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}
.fp-magazine .cover-label {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      text-align: center;
}
.fp-magazine /* ===== STORIES BELOW EACH COVER ===== */
    .cover-stories {
list-style: none;
      padding: 12px 0 0 0;
      margin: 0;
}
.fp-magazine .cover-stories li {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-charcoal);
      padding: 3px 0;
}
.fp-magazine .cover-stories li.bold-story {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: var(--color-charcoal);
      padding: 8px 0 4px 0;
      border-bottom: 2px solid var(--color-charcoal);
      margin-bottom: 4px;
}
.fp-magazine /* Responsive */
    @media (max-width: 768px) {
.covers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 32px 16px;
      }
      .cover-stories li {
        font-size: 13px;
      }
      .cover-stories li.bold-story {
        font-size: 14px;
      }
}

  

/* ----- modern.html (body.fp-modern) ----- */
.fp-modern /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-modern .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-modern .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-modern .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-modern .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-modern .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-modern .story-meta .author {
font-weight: 600;
}
.fp-modern .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-modern .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-modern .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-modern .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-modern .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-modern /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-modern .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-modern .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-modern .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-modern .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-modern /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-modern .inline-image:hover {
transform: scale(1.01);
}
.fp-modern .inline-image img {
width: 100%;
      display: block;
}
.fp-modern .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-modern /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-modern .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-modern .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-modern /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-modern .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-modern .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-modern .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-modern /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-modern .lightbox.open {
display: flex;
}
.fp-modern .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-modern .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-modern .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-modern .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-modern .lightbox-prev {
left: 10px;
}
.fp-modern .lightbox-next {
right: 10px;
}
.fp-modern .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-modern /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- runing-1.html (body.fp-runing-1) ----- */
.fp-runing-1 /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-runing-1 .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-runing-1 .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-runing-1 .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-runing-1 .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-runing-1 .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-runing-1 .story-meta .author {
font-weight: 600;
}
.fp-runing-1 .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-runing-1 .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-runing-1 .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-runing-1 .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-runing-1 .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-runing-1 /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-runing-1 .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-runing-1 .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-runing-1 .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-runing-1 .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-runing-1 .article-body h3 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 22px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-orange);
      margin: 48px 0 24px;
}
.fp-runing-1 .article-body h3:first-of-type {
margin-top: 0;
}
.fp-runing-1 /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-runing-1 .inline-image:hover {
transform: scale(1.01);
}
.fp-runing-1 .inline-image img {
width: 100%;
      display: block;
}
.fp-runing-1 .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-runing-1 /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-runing-1 .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-runing-1 .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-runing-1 /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-runing-1 .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-runing-1 .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-runing-1 .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-runing-1 /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-runing-1 .lightbox.open {
display: flex;
}
.fp-runing-1 .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-runing-1 .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-runing-1 .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-runing-1 .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-runing-1 .lightbox-prev {
left: 10px;
}
.fp-runing-1 .lightbox-next {
right: 10px;
}
.fp-runing-1 .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-runing-1 /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- sexy .html (body.fp-sexy) ----- */
.fp-sexy /* ===== GOLDEN FRAME HERO ===== */
    .hero-wide {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-sexy .golden-frame {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-sexy .golden-frame-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-sexy .golden-frame img {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-sexy .golden-frame img:hover {
transform: scale(1.02);
}
.fp-sexy .hero-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-sexy /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-sexy .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-sexy .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-sexy .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-sexy .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-sexy .story-header-meta .author {
font-weight: 600;
}
.fp-sexy .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-sexy /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-sexy .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-sexy .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-sexy .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-sexy .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-sexy /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-sexy .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-sexy .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-sexy .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-sexy .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-sexy .gallery-item img:hover {
transform: scale(1.05);
}
.fp-sexy .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-sexy /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-sexy .inline-image img {
width: 100%;
      display: block;
}
.fp-sexy .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-sexy /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-sexy .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-sexy .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-sexy .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-sexy /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-sexy .lightbox.open {
display: flex;
}
.fp-sexy .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-sexy .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-sexy .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-sexy .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-sexy .lightbox-prev {
left: 10px;
}
.fp-sexy .lightbox-next {
right: 10px;
}
.fp-sexy .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-sexy /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
}

  

/* ----- sidewalks.html (body.fp-sidewalks) ----- */
.fp-sidewalks /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-sidewalks .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-sidewalks .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-sidewalks .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-sidewalks .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-sidewalks .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-sidewalks .story-meta .author {
font-weight: 600;
}
.fp-sidewalks .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-sidewalks .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-sidewalks .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-sidewalks .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-sidewalks .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-sidewalks /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-sidewalks .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-sidewalks .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-sidewalks .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-sidewalks .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-sidewalks /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-sidewalks .inline-image:hover {
transform: scale(1.01);
}
.fp-sidewalks .inline-image img {
width: 100%;
      display: block;
}
.fp-sidewalks .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-sidewalks /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-sidewalks .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-sidewalks .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-sidewalks /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-sidewalks .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-sidewalks .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-sidewalks .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-sidewalks /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-sidewalks .lightbox.open {
display: flex;
}
.fp-sidewalks .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-sidewalks .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-sidewalks .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-sidewalks .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-sidewalks .lightbox-prev {
left: 10px;
}
.fp-sidewalks .lightbox-next {
right: 10px;
}
.fp-sidewalks .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-sidewalks /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- story-fishermen.html (body.fp-story-fishermen) ----- */
.fp-story-fishermen /* ===== VIDEO HERO WITH GOLDEN FRAME ===== */
    .video-section {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-story-fishermen .golden-frame-video {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
      position: relative;
}
.fp-story-fishermen .golden-frame-video-inner {
border: 1px solid #e4ded2;
      position: relative;
      overflow: hidden;
      background: #000;
}
.fp-story-fishermen .video-poster {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
}
.fp-story-fishermen .video-play-btn {
position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(0,0,0,0.2);
      transition: background 0.3s ease;
}
.fp-story-fishermen .video-play-btn:hover {
background: rgba(0,0,0,0.1);
}
.fp-story-fishermen .play-circle {
width: 80px;
      height: 80px;
      border: 3px solid #AF2A10;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.4);
      transition: all 0.3s ease;
}
.fp-story-fishermen .play-circle:hover {
background: rgba(0,0,0,0.6);
      transform: scale(1.1);
}
.fp-story-fishermen .play-triangle {
width: 0;
      height: 0;
      border-left: 24px solid #AF2A10;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      margin-left: 6px;
}
.fp-story-fishermen .video-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-story-fishermen /* ===== VIDEO OVERLAY (when playing) ===== */
    .video-overlay-msg {
display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.85);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-story-fishermen .video-overlay-msg.show {
display: flex;
}
.fp-story-fishermen .video-overlay-msg p {
font-family: 'Oswald', sans-serif;
      font-size: 24px;
      color: #AF2A10;
      text-transform: uppercase;
      letter-spacing: 0.05em;
}
.fp-story-fishermen .video-overlay-msg span {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: var(--color-warm-gray);
      margin-top: 8px;
}
.fp-story-fishermen /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-story-fishermen .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-story-fishermen .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-story-fishermen .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-story-fishermen .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-story-fishermen .story-header-meta .author {
font-weight: 600;
}
.fp-story-fishermen .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-story-fishermen /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-story-fishermen .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-story-fishermen .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-story-fishermen .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-story-fishermen .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-story-fishermen /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-story-fishermen .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-story-fishermen .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-story-fishermen .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-story-fishermen .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-story-fishermen .gallery-item img:hover {
transform: scale(1.05);
}
.fp-story-fishermen .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-story-fishermen /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-story-fishermen .inline-image img {
width: 100%;
      display: block;
}
.fp-story-fishermen .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-story-fishermen /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-story-fishermen .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-story-fishermen .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-story-fishermen .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-story-fishermen /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-story-fishermen .lightbox.open {
display: flex;
}
.fp-story-fishermen .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-story-fishermen .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-story-fishermen .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-story-fishermen .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-story-fishermen .lightbox-prev {
left: 10px;
}
.fp-story-fishermen .lightbox-next {
right: 10px;
}
.fp-story-fishermen .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-story-fishermen /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
      .play-circle {
        width: 60px;
        height: 60px;
      }
      .play-triangle {
        border-left: 18px solid #AF2A10;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
      }
}

  

/* ----- story-nomads.html (body.fp-story-nomads) ----- */
.fp-story-nomads /* ===== GOLDEN FRAME HERO ===== */
    .hero-wide {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-story-nomads .golden-frame {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-story-nomads .golden-frame-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-story-nomads .golden-frame img {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-story-nomads .golden-frame img:hover {
transform: scale(1.02);
}
.fp-story-nomads .hero-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-story-nomads /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-story-nomads .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-story-nomads .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-story-nomads .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-story-nomads .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-story-nomads .story-header-meta .author {
font-weight: 600;
}
.fp-story-nomads .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-story-nomads /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-story-nomads .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-story-nomads .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-story-nomads .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-story-nomads .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-story-nomads /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-story-nomads .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-story-nomads .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-story-nomads .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-story-nomads .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-story-nomads .gallery-item img:hover {
transform: scale(1.05);
}
.fp-story-nomads .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-story-nomads /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-story-nomads .inline-image img {
width: 100%;
      display: block;
}
.fp-story-nomads .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-story-nomads /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-story-nomads .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-story-nomads .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-story-nomads .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-story-nomads /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-story-nomads .lightbox.open {
display: flex;
}
.fp-story-nomads .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-story-nomads .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-story-nomads .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-story-nomads .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-story-nomads .lightbox-prev {
left: 10px;
}
.fp-story-nomads .lightbox-next {
right: 10px;
}
.fp-story-nomads .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-story-nomads /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
}

  

/* ----- story-oslo.html (body.fp-story-oslo) ----- */
.fp-story-oslo /* ===== LRB-STYLE HEADER ===== */
    .lrb-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
}
.fp-story-oslo .lrb-meta {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.05em;
      color: var(--color-warm-gray);
      margin-bottom: 20px;
}
.fp-story-oslo .lrb-meta span {
color: var(--color-orange);
}
.fp-story-oslo .lrb-section {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-warm-gray);
      margin-bottom: 12px;
}
.fp-story-oslo .lrb-headline {
font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 600;
      font-size: clamp(36px, 5vw, 56px);
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-story-oslo .lrb-author {
font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 500;
      font-size: 22px;
      color: var(--color-charcoal);
      margin-bottom: 24px;
}
.fp-story-oslo .lrb-share-row {
display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
      margin-bottom: 40px;
}
.fp-story-oslo .lrb-share-btn {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 6px 14px;
      border: 1px solid rgba(21, 20, 19, 0.2);
      background: none;
      cursor: pointer;
      transition: all 0.2s ease;
}
.fp-story-oslo .lrb-share-btn:hover {
border-color: var(--color-orange);
      color: var(--color-orange);
}
.fp-story-oslo .lrb-wordcount {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-warm-gray);
      margin-left: auto;
}
.fp-story-oslo /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 0 24px 64px;
}
.fp-story-oslo .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-story-oslo .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-story-oslo .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-story-oslo .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-story-oslo /* ===== IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-story-oslo .inline-image img {
width: 100%;
      display: block;
}
.fp-story-oslo .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-story-oslo /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-story-oslo .gallery-grid {
display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
}
.fp-story-oslo .gallery-grid .gallery-item:first-child {
grid-column: 1 / -1;
}
.fp-story-oslo .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-story-oslo .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-story-oslo .gallery-item img {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-story-oslo .gallery-item:first-child img {
aspect-ratio: 21/9;
}
.fp-story-oslo .gallery-item img:hover {
transform: scale(1.05);
}
.fp-story-oslo .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-story-oslo /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-story-oslo .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-story-oslo .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-story-oslo .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-story-oslo /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-story-oslo .lightbox.open {
display: flex;
}
.fp-story-oslo .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-story-oslo .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-story-oslo .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-story-oslo .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-story-oslo .lightbox-prev {
left: 10px;
}
.fp-story-oslo .lightbox-next {
right: 10px;
}
.fp-story-oslo .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-story-oslo /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid .gallery-item:first-child {
        grid-column: auto;
      }
      .gallery-item:first-child img {
        aspect-ratio: 16/9;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
      .lrb-share-row {
        flex-wrap: wrap;
      }
      .lrb-wordcount {
        margin-left: 0;
        width: 100%;
      }
}

  

/* ----- story.html (body.fp-story) ----- */
.fp-story /* ===== STORY HERO (Split layout like New Yorker) ===== */
    .story-hero {
display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
      background: url('images/bg.jpg');
      background-size: cover;
      background-position: center;
}
.fp-story .story-hero-text {
display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 48px 40px;
}
.fp-story .story-section-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 24px;
}
.fp-story .story-headline {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(36px, 5vw, 64px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      max-width: 480px;
      margin-bottom: 20px;
}
.fp-story .story-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 420px;
      margin-bottom: 32px;
}
.fp-story .story-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-story .story-meta .author {
font-weight: 600;
}
.fp-story .story-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-story .story-hero-image {
position: relative;
      overflow: hidden;
}
.fp-story .story-hero-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-story .story-hero-image img:hover {
transform: scale(1.02);
}
.fp-story .story-hero-caption {
position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--color-white);
      background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.fp-story /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(680px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 64px 24px;
}
.fp-story .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-story .article-body :is(p, pre).dropcap-paragraph:first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-story .article-body .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-story .article-body .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-story /* ===== INLINE IMAGES ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-story .inline-image:hover {
transform: scale(1.01);
}
.fp-story .inline-image img {
width: 100%;
      display: block;
}
.fp-story .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-story /* ===== GALLERY STRIP ===== */
    .gallery-strip {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 40px 0;
}
.fp-story .gallery-strip img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s ease;
}
.fp-story .gallery-strip img:hover {
transform: scale(1.03);
}
.fp-story /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 680px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-story .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-story .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-story .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-story /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-story .lightbox.open {
display: flex;
}
.fp-story .lightbox img {
max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
}
.fp-story .lightbox-caption {
color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
}
.fp-story .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-story .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: var(--color-white);
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
}
.fp-story .lightbox-prev {
left: 10px;
}
.fp-story .lightbox-next {
right: 10px;
}
.fp-story .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--color-white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-story /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
.story-hero {
        grid-template-columns: 1fr;
      }
      .story-hero-image {
        min-height: 300px;
        order: -1;
      }
      .story-headline {
        font-size: 36px;
      }
      .story-hero-text {
        padding: 32px 20px;
      }
      .gallery-strip {
        grid-template-columns: 1fr;
      }
}

  

/* ----- thepost.html (body.fp-thepost) ----- */
.fp-thepost /* ===== GOLDEN FRAME HERO ===== */
    .hero-wide {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-thepost .golden-frame {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-thepost .golden-frame-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-thepost .golden-frame img {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-thepost .golden-frame img:hover {
transform: scale(1.02);
}
.fp-thepost .hero-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-thepost /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-thepost .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-thepost .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-thepost .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-thepost .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-thepost .story-header-meta .author {
font-weight: 600;
}
.fp-thepost .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-thepost /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-thepost .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-thepost .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-thepost .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-thepost .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-thepost /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-thepost .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-thepost .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-thepost .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-thepost .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-thepost .gallery-item img:hover {
transform: scale(1.05);
}
.fp-thepost .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-thepost /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-thepost .inline-image img {
width: 100%;
      display: block;
}
.fp-thepost .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-thepost /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-thepost .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-thepost .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-thepost .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-thepost /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-thepost .lightbox.open {
display: flex;
}
.fp-thepost .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-thepost .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-thepost .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-thepost .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-thepost .lightbox-prev {
left: 10px;
}
.fp-thepost .lightbox-next {
right: 10px;
}
.fp-thepost .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-thepost /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
}

  

/* ----- what.html (body.fp-what) ----- */
.fp-what /* ===== GOLDEN FRAME HERO ===== */
    .hero-wide {
padding: 24px 24px 0;
      max-width: 1200px;
      margin: 0 auto;
}
.fp-what .golden-frame {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-what .golden-frame-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-what .golden-frame img {
width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-what .golden-frame img:hover {
transform: scale(1.02);
}
.fp-what .hero-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-what /* ===== STORY HEADER ===== */
    .story-header {
max-width: 800px;
      margin: 0 auto;
      padding: 48px 24px 0;
      text-align: center;
}
.fp-what .story-header-label {
font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-orange);
      margin-bottom: 16px;
}
.fp-what .story-header h1 {
font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-charcoal);
      margin-bottom: 16px;
}
.fp-what .story-header-dek {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      max-width: 540px;
      margin: 0 auto 24px;
}
.fp-what .story-header-meta {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      color: var(--color-charcoal);
}
.fp-what .story-header-meta .author {
font-weight: 600;
}
.fp-what .story-header-meta .date {
color: var(--color-warm-gray);
      font-size: 13px;
      margin-top: 4px;
}
.fp-what /* ===== ARTICLE BODY ===== */
    .article-body {
max-width: calc(720px * 1.16 * 1.08);  /* 8% + 4% wider on each side */
      margin: 0 auto;
      padding: 48px 24px 64px;
}
.fp-what .article-body :is(p, pre) {
      white-space: pre-wrap;  /* let <pre> wrap like paragraphs */
font-family: 'Source Serif 4', Georgia, serif;
      font-size: calc(18px + 2pt);  /* 18px + 2pt larger */
      line-height: 1.8;
      color: var(--color-charcoal);
      margin-bottom: 28px;
}
.fp-what .article-body :is(p, pre):first-of-type::first-letter {
float: left;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 72px;
      line-height: 0.75;
      color: var(--color-orange);
      padding-right: 12px;
      padding-top: 6px;
      font-weight: 400;
}
.fp-what .pull-quote {
font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 24px;
      line-height: 1.5;
      color: var(--color-charcoal);
      border-left: 4px solid var(--color-orange);
      padding-left: 24px;
      margin: 40px 0;
}
.fp-what .pull-quote footer {
font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-warm-gray);
      margin-top: 12px;
}
.fp-what /* ===== GOLDEN GALLERY ===== */
    .golden-gallery {
max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 48px;
}
.fp-what .gallery-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
}
.fp-what .gallery-item {
border:1px solid #d9d2c4;
      padding:12px;
      background-color:#fff;
      background-image:
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55)),
        linear-gradient(rgba(21,20,19,0.55), rgba(21,20,19,0.55));
      background-repeat:no-repeat;
      background-size:22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px;
      background-position:-11px 0, 0 -11px, right -11px top 0, right 0 top -11px, left -11px bottom 0, left 0 bottom -11px, right -11px bottom 0, right 0 bottom -11px;
}
.fp-what .gallery-item-inner {
border: 1px solid #e4ded2;
      overflow: hidden;
}
.fp-what .gallery-item img {
width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: transform 0.3s ease;
}
.fp-what .gallery-item img:hover {
transform: scale(1.05);
}
.fp-what .gallery-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      text-align: center;
      padding: 12px 0 0;
}
.fp-what /* ===== INLINE IMAGE ===== */
    .inline-image {
margin: 40px 0;
      cursor: pointer;
}
.fp-what .inline-image img {
width: 100%;
      display: block;
}
.fp-what .inline-image-caption {
font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-warm-gray);
      padding: 10px 0;
      border-bottom: 1px solid rgba(21, 20, 19, 0.15);
}
.fp-what /* ===== AUTHOR BIO ===== */
    .author-bio {
max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 64px;
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      display: flex;
      gap: 20px;
      align-items: flex-start;
}
.fp-what .author-bio-avatar {
width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
}
.fp-what .author-bio-text {
font-family: 'Source Serif 4', Georgia, serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-warm-gray);
}
.fp-what .author-bio-text strong {
color: var(--color-charcoal);
}
.fp-what /* ===== LIGHTBOX ===== */
    .lightbox {
display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.fp-what .lightbox.open {
display: flex;
}
.fp-what .lightbox img {
max-width: 90vw;
      max-height: 82vh;
      object-fit: contain;
}
.fp-what .lightbox-caption {
color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 16px;
      text-align: center;
      max-width: 600px;
}
.fp-what .lightbox-close {
position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
}
.fp-what .lightbox-nav {
position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 44px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      padding: 20px;
      line-height: 1;
}
.fp-what .lightbox-prev {
left: 10px;
}
.fp-what .lightbox-next {
right: 10px;
}
.fp-what .lightbox-counter {
position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
}
.fp-what /* Responsive */
    @media (max-width: 768px) {
.gallery-grid {
        grid-template-columns: 1fr;
      }
      .article-body :is(p, pre):first-of-type::first-letter {
        font-size: 56px;
      }
}

  

/* ----- Extracted inline styles (formerly style="..." attributes) ----- */
.fp-folks .ins-01 { gap:48px; }
.fp-folks .ins-02 { display:flex; align-items:center; gap:12px; margin:16px 0 8px; flex-wrap:wrap; }
.fp-folks .ins-03 { font-family:'Oswald',sans-serif; font-size:20px; text-transform:uppercase; letter-spacing:-0.02em; color:var(--color-charcoal); }
.fp-folks .ins-04 { font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-orange); }
.fp-fplog .ins-01 { display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.fp-fplog .ins-02 { color:var(--color-warm-gray); }
.fp-fplog .ins-03 { align-items:start; }
.fp-happenings-2 .ins-01 { margin-bottom:48px; }
.fp-happenings-2 .ins-02 { align-items:start; }
.fp-happenings-2 .ins-03 { color:var(--color-orange); margin-bottom:16px; display:inline-block; }
.fp-happenings .ins-01 { margin-bottom:48px; }
.fp-happenings .ins-02 { align-items:start; }
.fp-happenings .ins-03 { color:var(--color-orange); margin-bottom:16px; display:inline-block; }
.fp-index .ins-01 { left:9.3%; top:7.0%; width:27.0%; height:86.5%; }
.fp-index .ins-02 { left:46.5%; top:39.5%; width:20.3%; height:12.9%; }
.fp-index .ins-03 { left:46.5%; top:53.6%; width:20.3%; height:4.9%; }
.fp-index .ins-04 { left:46.5%; top:59.7%; width:20.3%; height:4.9%; }
.fp-index .ins-05 { left:46.5%; top:65.8%; width:20.3%; height:5.5%; }
.fp-index .ins-06 { left:46.5%; top:72.0%; width:20.3%; height:5.5%; }
.fp-index .ins-07 { left:46.5%; top:78.1%; width:20.3%; height:5.5%; }
.fp-index .ins-08 { left:46.5%; top:84.2%; width:20.3%; height:5.5%; }
.fp-index .ins-09 { left:66.9%; top:39.5%; width:16.9%; height:49.0%; }
.fp-magazine .ins-01 { color:inherit;text-decoration:none; }
.fp-us .ins-01 { text-align:center; }
.fp-us .ins-02 { gap:32px; }
.fp-us .ins-03 { font-family:'Oswald',sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:-0.02em; color:var(--color-charcoal); margin-top:16px; }
.fp-us .ins-04 { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-orange); }
.fp-us .ins-05 { text-align:left; }
.fp-us .ins-06 { gap:64px; }
.fp-us .ins-07 { margin-top:32px; space-y:16px; }
.fp-us .ins-08 { margin-bottom:16px; }
.fp-us .ins-09 { font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-orange); margin-bottom:4px; }
.fp-us .ins-10 { font-family:'Source Serif 4',Georgia,serif; font-size:16px; color:var(--color-charcoal); }
.fp-us .ins-11 { width:100%; }
.fp-us .ins-12 { display:none; text-align:center; padding:48px 24px; border:2px solid var(--color-orange); }
.fp-us .ins-13 { margin:0 auto 16px; }
.fp-us .ins-14 { font-family:'Oswald',sans-serif; font-size:20px; text-transform:uppercase; letter-spacing:-0.02em; color:var(--color-charcoal); margin-bottom:8px; }
.fp-us .ins-15 { font-family:'Source Serif 4',Georgia,serif; font-size:16px; color:var(--color-warm-gray); }

/* ============================================================
   HOME PAGE — TAGLINE BAND + MANIFESTO (FolkPress-5.jpg design)
   ============================================================ */

/* The content zone becomes a full-bleed stack for these sections */
.fp-index .toc-zone {
  padding: 0;
  min-height: 0;
  background: none;
}

/* --- Task 1: black band, gold text --- */
.fp-index .tagline-band {
  background-color: #161311;
  padding: clamp(36px, 4.6vw, 90px) clamp(16px, 3vw, 60px);
  text-align: center;
}

.fp-index .tagline-gold {
  font-family: 'Gotham Ultra', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 2.45vw, 47px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A3885D;
  margin: 0;
}

/* --- Task 2: manifesto --- */
.fp-index .manifesto {
  position: relative;
  background-color: #E3DECA;
  padding: clamp(24px, 4.1vw, 80px) clamp(16px, 7.3vw, 140px) clamp(36px, 4.8vw, 92px);
}

/* Gold handshake — artwork from the supplied hands-logo file, placed as
   shown in the sample: gold print on the cream field beside the black
   bars. Color is set here (background-color); shape comes from the mask. */
/* Yellow logo square — left of the black bars (design image #1).
   Square block; the logo image inside is swapped in index.html. */
.fp-index .mani-logo {
  position: absolute;
  top: clamp(28px, 5.1vw, 100px);
  left: clamp(16px, 7.3vw, 140px);
  /* sized to sit inside the five-bar block without touching the rows below */
  width: clamp(150px, 26vw, 500px);
  aspect-ratio: 1 / 1;
  background-color: #E4D402;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 0.85vw, 14px);
}

.fp-index .mani-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Right-hand column of bars, offset clear of the handshake */
.fp-index .mani-right {
  margin-left: clamp(0px, 33.6vw, 645px);
}

/* A black bar with white condensed caps */
.fp-index .mani-bar {
  background-color: #241F1F;
  color: #FAFAFA;
  font-family: 'Six Caps', 'Arial Narrow', sans-serif;
  font-size: clamp(15px, 2.8vw, 54px);
  line-height: 0.95;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.3em 0.5em 0.34em;
  margin: 0 0 clamp(10px, 1.25vw, 24px);
}

/* First bar — the heading, larger type */
.fp-index .mani-bar--head {
  font-size: clamp(18px, 3.35vw, 64px);
  padding-top: 0.22em;
  padding-bottom: 0.26em;
}

/* Full-width rows below */
.fp-index .mani-full {
  margin-top: clamp(18px, 1.9vw, 36px);
}

.fp-index .mani-full .mani-bar {
  padding-top: 0.14em;
  padding-bottom: 0.18em;
  margin-bottom: clamp(14px, 1.85vw, 36px);
}

.fp-index .mani-full .mani-bar:last-child {
  margin-bottom: 0;
}

/* --- Responsive: stack the logo square above the bars on smaller screens --- */
@media (max-width: 900px) {
  .fp-index .mani-logo {
    position: static;
    width: min(70%, 420px);
    margin: 0 auto clamp(20px, 4vw, 40px);
  }

  .fp-index .mani-right {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .fp-index .manifesto {
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: clamp(12px, 4vw, 24px);
  }

  .fp-index .mani-bar {
    letter-spacing: 0.08em;
  }
}

/* ============================================================
   READ MORE — shared magazine card section (all story pages)
   One code block: three gallery-image cards, each linking a story.
   ============================================================ */

.read-more-rule {
      height: 1px;
      background: rgba(21, 20, 19, 0.15);
      max-width: 1200px;
      margin: 0 auto;
}

.read-more {
      border-top: 1px solid rgba(21, 20, 19, 0.15);
      max-width: 1200px;
      margin: 0 auto;
      padding: 48px 24px 64px;
}

.read-more-title {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 28px;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      color: var(--color-charcoal);
      margin-bottom: 32px;
      text-align: center;
}

.read-more-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
}

.read-more-card {
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
}

.read-more-card:hover .read-more-headline {
      color: var(--color-orange);
}

.read-more-card-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      margin-bottom: 12px;
      display: block;
}

.read-more-category {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--color-orange);
      margin-bottom: 6px;
}

.read-more-headline {
      font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 600;
      font-size: 18px;
      line-height: 1.3;
      color: var(--color-charcoal);
      margin-bottom: 8px;
      transition: color 0.2s ease;
}

.read-more-excerpt {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--color-warm-gray);
      margin-bottom: 10px;
}

/* "read more..." link line at the foot of each card */
.read-more-cta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      text-transform: lowercase;
      letter-spacing: 0.1em;
      color: var(--color-orange);
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s ease;
}

.read-more-card:hover .read-more-cta {
      border-bottom-color: var(--color-orange);
}

@media (max-width: 900px) {
.read-more-grid {
      grid-template-columns: 1fr;
      gap: 32px;
}
}

@media (max-width: 768px) {
.read-more {
      padding: 36px 18px 48px;
}
}