/* Bars & Bottles — rich entry styles (essay template, design 2a).
   Cinematic dark sections alternating with light-paper reading spreads.
   Mobile-first (design width 430px); reading column centers on desktop,
   full-bleed media breaks out edge to edge. */

:root {
  --accent: #c2ad90;          /* brass — overridable per entry */
  --sheet-dark: #0e0b09;
  --deep-break: #0b0805;
  --warm-white: #ece5da;
  --body-dark: #c9c0b2;
  --muted-dark: #948b7f;
  --quote: #f2eadd;
  --paper: #f4ede2;
  --card: #efe5d6;
  --map-fill: #ded2bf;

  /* Warm striped skeleton — doubles as the placeholder AND the image loading
     state (branded, no layout shift). Real photos cross-fade in over it. */
  --skel: repeating-linear-gradient(135deg, #1e1710 0 2px, #0e0a06 2px 13px);
  --ink: #241c15;
  --ink-2: #2e251c;
  --ink-muted: #5a4f42;

  /* Inline text links — on-palette, never system blue. Rust-brass on light paper,
     brass accent on dark sections (centralized so any author-added link is correct). */
  --link-light: #9a5b28;
  --link-light-hover: #7d4a20;
  --link-dark: #c2ad90;

  --col: 720px;               /* max reading column on desktop */

  /* Display / titles: Alfa Slab One — single weight, size sets emphasis. */
  --serif: "Alfa Slab One", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body.entry {
  margin: 0;
  background: var(--sheet-dark);
  color: var(--warm-white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

.essay {
  max-width: var(--col);
  margin: 0 auto;
  overflow-x: clip;           /* contain full-bleed breakout */
}

/* Full-bleed helper: break out of the centered column to viewport width. */
.fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Labels / kickers */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.kicker--accent { color: var(--accent); }

/* ── Hero ─────────────────────────────────────────────── */
/* Default: landscape wide media (3:2) edge-to-edge, title block BELOW on dark —
   shows the whole wide photo instead of cropping it to a tall slice. */
.hero { background: var(--sheet-dark); }
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #0e0a06;
}
.hero--portrait .hero__media { aspect-ratio: 3 / 4; }   /* only for genuinely portrait sources */
.hero__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.hero--ph .hero__media::before { background: var(--skel); }
.hero__title-block {
  padding: 26px 30px 34px;
  background: var(--sheet-dark);
}
.hero__title {
  font-family: var(--serif);
  /* Fit-to-width: Alfa Slab is very wide; long names shrink (JS in base.njk also
     scales down so the longest word fits — never word-break). */
  font-size: clamp(40px, 16vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 10px 0;
  color: var(--warm-white);
}
.dek {
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--body-dark);
  margin: 0;
  max-width: 34ch;
}
.media-label {
  position: absolute; left: 50%; bottom: 14px; z-index: 2;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--warm-white);
}

/* Play affordance (video heroes/tiles) */
.play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
}
.play span {
  position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

/* ── Light reading spread ─────────────────────────────── */
.spread {
  background: var(--paper);
  color: var(--ink);
  padding: 46px 30px;
}
.spread .kicker { color: var(--ink-muted); }
/* A spread is ONE continuous cream panel; a whole run of light blocks (paragraphs,
   inline photos, the map chip) flows inside it, each separated by its own ~18px
   bottom margin — no per-block card, no dark gutter between them. The run's last
   child drops that margin so only the panel's 46px bottom padding closes it. Real
   separation happens only at a dark break (which ends the run). */
.spread > :last-child { margin-bottom: 0; }
.body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.body--lead { font-size: 19px; line-height: 1.72; }

/* Inline text links on the light reading spread — warm rust-brass, underlined.
   Excludes the bottle-link chip (its own treatment). */
.spread a:not(.bottle-link) {
  color: var(--link-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
}
.spread a:not(.bottle-link):visited { color: var(--link-light); }
.spread a:not(.bottle-link):hover { color: var(--link-light-hover); }
/* Links on dark sections — brass accent. */
.media-break a:not(.bottle-link),
.quote-break a:not(.bottle-link),
.gallery a:not(.bottle-link),
.recap a:not(.bottle-link) { color: var(--link-dark); }

/* Inline documentary photo — a <figure> flowing inside the cream spread, natural
   aspect, caption in muted ink below. No dark letterbox band (spec: quietest,
   default for ordinary story photos). 18px rhythm like a paragraph. */
.photo { margin: 0 0 18px; }
.photo__img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo .caption { color: var(--ink-muted); }
.has-dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 62px;
  line-height: 0.8;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--ink);
}

/* ── Cinematic media break (opt-in: block.cinematic) ──── */
/* A soft warm-dark MAT (#14100b) with equal padding — an intentional frame, not a
   pure-black letterbox. Reserved for deliberate break images; ordinary documentary
   photos render inline on paper (.photo above). */
.media-break {
  background: #14100b;
  padding: 30px;
}
.media-break figure { margin: 0; }
/* Real <img> at natural aspect — show the whole photo, never crop. */
.media-break .media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.caption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted-dark); margin-top: 12px;
}

/* ── Dark pull-quote break ────────────────────────────── */
.quote-break {
  background: var(--deep-break);
  padding: 64px 34px;
  text-align: center;
}
.pullquote {
  /* A distinct "quoted voice" — Spectral italic, not the slab (Alfa has no italic). */
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.28;
  color: var(--quote);
  margin: 0 auto;
  max-width: 22ch;
}
.rule {
  display: block; width: 46px; height: 2px;
  background: var(--accent); margin: 26px auto 0;
}

/* ── Map card (inside a light spread) ─────────────────── */
/* "Where" chip — ALWAYS dark, even on a light spread: a deliberate inset accent,
   consistent across every entry regardless of the surrounding spread color.
   Width-capped, left-aligned — never full-bleed. */
.map-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  max-width: 380px;
  background: var(--sheet-dark);
  border: 1px solid rgba(194,173,144,0.16);
  border-radius: 14px;
  padding: 16px;
  /* 18px rhythm like the other blocks flowing inside the cream spread. */
  margin-bottom: 18px;
}
.map-card .kicker { color: var(--accent); margin: 0 0 4px; }
/* Silhouette thumbnail, cream-tinted (invert) over a near-black fill + pin dot. */
.map-thumb {
  position: relative;
  flex: 0 0 78px;
  width: 78px; height: 78px;
  border-radius: 12px;
  background: #171009;
  overflow: hidden;
}
.map-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.5;
}
/* Vector geo map: cream land on the dark chip, brass projection-computed pin. */
.map-thumb .geo-map { display: block; width: 100%; height: 100%; }
.geo-land path {
  fill: rgba(236, 229, 218, 0.13);
  stroke: rgba(236, 229, 218, 0.3);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}
.geo-pin { fill: var(--accent); stroke: #171009; stroke-width: 1; }
.map-text { min-width: 0; }
.map-place { font-family: var(--serif); font-size: 22px; color: var(--warm-white); margin: 4px 0 4px; }
.map-note { font-family: var(--sans); font-size: 13px; color: var(--muted-dark); margin: 0; }

/* ── Gallery strip (dark) ─────────────────────────────── */
.gallery {
  background: var(--sheet-dark);
  padding: 30px 0;
}
.gallery__scroll {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 30px;
  -webkit-overflow-scrolling: touch;
}
.gallery__tile { flex: 0 0 auto; width: 150px; margin: 0; scroll-snap-align: start; }
.gallery__tile .media {
  width: 150px; height: 190px;
  background-size: cover; background-position: center;
  border-radius: 10px;
}
.gallery__tile .caption { margin-top: 8px; }

/* ── Footer (chrome-free) ─────────────────────────────── */
.site-footer {
  background: var(--deep-break);
  color: var(--warm-white);
  padding: 54px 30px;
  text-align: center;
}
.wordmark { font-family: var(--serif); font-weight: 700; letter-spacing: 0.02em; font-size: 22px; margin: 0 0 10px; }
.footer-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); margin: 0 0 16px; }
.footer-ig { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent); text-decoration: none; }

/* ── Inline bottle deep-links (BourbonBro) ────────────── */
/* Authored via the {% bottle %} shortcode. In the app's web view these are
   intercepted (see data-bottle-id) and open the bottle detail inline; on the
   open web they resolve to the href fallback. */
/* Inline chip (spec tokens): brass-brown text on a faint brass tint + hairline,
   tiny bottle glyph. Reads as a quiet affordance without breaking reading flow.
   On non-native surfaces it's just a styled link; the native reader lights it up. */
.bottle-link {
  color: #8a5a24;
  text-decoration: none;
  background: rgba(160, 106, 43, 0.14);
  border-bottom: 1px solid rgba(160, 106, 43, 0.55);
  border-radius: 4px;
  padding: 0.04em 0.36em;
  white-space: nowrap;
}
.bottle-link::before {
  content: "";
  display: inline-block;
  width: 0.6em; height: 0.84em;
  margin-right: 0.26em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: var(--bottle-glyph) center / contain no-repeat;
          mask: var(--bottle-glyph) center / contain no-repeat;
  opacity: 0.9;
}
:root {
  --bottle-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4v3l1 3v13a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V8l1-3V2z'/%3E%3C/svg%3E");
}

/* ── Browse index / home (9a: big images + previews) ──── */
.index { max-width: var(--col); margin: 0 auto; }
.masthead {
  text-align: center;
  padding: 48px 30px 28px;
  border-bottom: 1px solid rgba(148,139,127,0.18);
}
/* Round bottle mark: the site's real logo asset (black disc / white bottle),
   inverted → off-white disc / dark glyph for the dark index (matches 9a). */
.masthead__mark {
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  filter: invert(1);
  opacity: 0.92;
}
.masthead__title { font-family: var(--serif); font-size: 40px; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--warm-white); }
.masthead__tag { font-family: var(--body); font-style: italic; font-size: 15px; color: var(--muted-dark); margin: 0; }

.index__list { padding: 6px 0 0; }
.idx-card {
  display: block; text-decoration: none;
  padding: 30px 20px;
  border-bottom: 1px solid rgba(148,139,127,0.14);
}
.idx-card__media { position: relative; border-radius: 3px; overflow: hidden; }
.idx-card__img { display: block; width: 100%; height: 260px; object-fit: cover; }
.idx-card__media .media-ph { height: 260px; min-height: 0; }
.idx-card__body { text-align: center; padding: 18px 6px 0; }
.idx-card__title { font-family: var(--serif); font-size: clamp(28px, 9vw, 34px); line-height: 1.02; margin: 0 0 10px; color: var(--warm-white); }
.idx-card__body .kicker { margin: 0 0 12px; }
.idx-card__excerpt { font-family: var(--body); font-size: 16px; line-height: 1.6; color: var(--body-dark); margin: 0 auto; max-width: 340px; }

/* Type badge (Essay / Dispatch / Recap), top-left over card imagery. Warm
   charcoal translucent pill + blur with cream text — legible on both bright
   (daytime storefront) and dark (night bar) photos, and on-palette. NOT a solid
   brass pill (invisible on bright photos) and never a cool/navy pill. */
.type-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f4ebd9;
  background: rgba(14, 10, 7, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid rgba(244, 235, 217, 0.22);
}

/* ── Placeholder media (striped, labeled) ─────────────── */
.media-ph {
  position: relative;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--skel);
}

/* Media <img> sit on the skeleton so it shows while loading (then the opaque
   photo covers it); paired with the cross-fade in base.njk. */
.media, .idx-card__img, .hl__media, .mosaic__media { background: var(--skel); }
.hero__media, .dhero, .cover { background-color: #0e0a06; }
.dhero::before, .cover::before { background-color: #0e0a06; }
.media-ph__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-dark); text-align: center; padding: 0 12px;
}
.media-ph--video .media-ph__label { position: absolute; bottom: 10px; left: 0; right: 0; }
.media-ph__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3);
}
.media-ph__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}

/* ── Dispatch (3a) ────────────────────────────────────── */
.dispatch { max-width: var(--col); margin: 0 auto; overflow-x: clip; }
.dhero {
  position: relative; min-height: 400px; display: flex; align-items: flex-end;
  padding: 30px; overflow: hidden;
}
.dhero::before {
  content: ""; position: absolute; inset: 0; background-image: var(--poster);
  background-size: cover; background-position: center;
  animation: kenburns 24s ease-in-out infinite alternate; z-index: 0;
}
.dhero--ph { background: radial-gradient(120% 100% at 50% 0%, #17110c 0%, var(--deep-break) 70%); }
.dhero--ph::before { display: none; }
.dhero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,8,5,0.92), rgba(11,8,5,0.15)); }
.dhero__title-block { position: relative; z-index: 2; }
.dhero__title {
  font-family: var(--serif); font-size: clamp(38px, 13vw, 52px);
  line-height: 0.98; color: var(--warm-white); margin: 0; max-width: 12ch;
}
.highlights { display: grid; gap: 40px; }
.hl__mediawrap { border-radius: 12px; overflow: hidden; }
.hl__media { display: block; width: 100%; height: auto; }
.hl .media-ph { min-height: 240px; }
.hl__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin: 16px 0 6px; }
.hl__heading { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.hl__blurb { font-family: var(--body); font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* ── Recap (3b) — dark throughout ─────────────────────── */
.recap { max-width: var(--col); margin: 0 auto; background: var(--sheet-dark); overflow-x: clip; }
.cover {
  position: relative; min-height: 560px; display: flex; align-items: flex-end;
  padding: 30px; overflow: hidden;
}
.cover::before {
  content: ""; position: absolute; inset: 0; background-image: var(--poster);
  background-size: cover; background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate; z-index: 0;
}
.cover--ph { background: radial-gradient(120% 100% at 50% 0%, #17110c 0%, #000 72%); }
.cover--ph::before { display: none; }
.cover__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2)); }
.cover__meta {
  position: absolute; top: 24px; left: 30px; right: 30px; z-index: 2;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-dark);
}
.cover__title-block { position: relative; z-index: 2; }
.cover__title { font-family: var(--serif); font-size: clamp(44px, 15vw, 58px);
  line-height: 0.95; color: var(--warm-white); margin: 0 0 10px; }
.cover__year { font-family: var(--body); font-style: italic; font-weight: 400;
  color: var(--accent); font-size: 0.6em; }
.recap__intro {
  font-family: var(--body); font-style: italic; font-size: 17px; color: var(--body-dark);
  text-align: center; padding: 30px; margin: 0;
  border-bottom: 1px solid rgba(148,139,127,0.15);
}
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.mosaic__tile { margin: 0; }
.mosaic__tile--wide { grid-column: span 2; }
.mosaic__media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.mosaic .media-ph { min-height: 0; aspect-ratio: 1 / 1; border-radius: 4px; }
.mosaic__tile--wide .media-ph { aspect-ratio: 2 / 1; }
.mosaic__caption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted-dark); text-align: center; padding: 20px 30px; margin: 0; }

@keyframes kenburns {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.14) translateY(-1.5%); }
}
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.9; }
  50%     { transform: translateX(-50%) translateY(6px); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media::before, .dhero::before, .cover::before { animation: none; }
}