/* ============================================================
   Kaleido /feed - the immersive shape
   Full-screen vertical scroll-snap slides over the same editorial
   language as candidate A. Hue palettes, duotone photo treatment
   and type helpers all come from site.css (linked first); this
   sheet only lays out the full-bleed slides and their overlays.
   ============================================================ */

/* ---- the page is a single, non-scrolling stage; .feed scrolls ---- */
html { height: 100%; }
.feed-body {
  height: 100svh;
  overflow: hidden;
  background: var(--paper-2); /* letterbox surround on wide screens */
}

/* ---- scroll container: one slide snaps into view at a time ---- */
.feed {
  height: 100svh;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .feed { scroll-behavior: auto; }
}

/* on wide screens the experience stays phone-shaped and centered */
@media (min-width: 40rem) {
  .feed {
    width: min(30rem, 100%);
    margin-inline: auto;
    box-shadow: 0 0 0 1px var(--line), 0 1.4rem 3rem rgba(0, 0, 0, .18);
  }
}

/* ---- a single full-screen slide ---- */
.feed-card {
  position: relative;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate; /* keep the duotone blend inside the card */
}

/* ---- the full-bleed cover (photo or generative SVG) ---- */
.feed-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  line-height: 0;
  background: var(--paper-2);
}

/* photo: reuse site.css .cover-photo duotone, but fill the slide.
   the 4/3 aspect-ratio and block sizing from site.css are overridden
   here; the grayscale/multiply/screen treatment carries through, and
   html[data-photos="natural"] still resets it globally. */
.feed-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed-cover.cover-photo img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* generative SVG: the covers are 400x300 landscape motifs. Slides are
   always portrait, so scaling to full height overflows the width and
   covers; the paper-2 backdrop hides any theoretical seam. */
.feed-cover-svg svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  display: block;
}

/* ---- legibility scrim: ink-side copy rides on a paper wash ---- */
.feed-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 80%, transparent) 18%,
      color-mix(in srgb, var(--paper) 34%, transparent) 44%,
      transparent 70%),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--paper) 58%, transparent) 0%,
      transparent 16%);
}

/* ---- overlaid content: copy bottom-left, action rail bottom-right ---- */
.feed-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding:
    calc(4.2rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 1.6rem)
    calc(clamp(1.4rem, 5vh, 2.6rem) + env(safe-area-inset-bottom));
}

.feed-copy {
  min-width: 0;
  max-width: 34rem;
  color: var(--ink);
}
.feed-copy .label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: 0 0 .7rem;
  color: var(--ink-2);
}
.feed-copy .label .sec { color: var(--hue-1); }
.feed-copy .label .aud { letter-spacing: .08em; text-transform: none; }
.feed-copy .label .date { font-size: .62rem; letter-spacing: .1em; }

.feed-title {
  font-weight: 700;
  font-size: clamp(1.9rem, 7.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.feed-title a { color: inherit; }
.feed-title .hw { color: var(--hue-1); font-style: italic; } /* the hue-word */

.feed-copy .dek {
  margin-top: .7rem;
  color: var(--ink);
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
  line-height: 1.45;
  max-width: 40ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-copy .byline {
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--ink-2);
}
.feed-copy .byline .with {
  font-family: "GT Sectra Fine", Georgia, serif;
  font-style: italic;
}

/* ---- action rail: big round tap targets, one drop of hue when active ---- */
.feed-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.feed-rail .feed-comments,
.feed-rail .feed-open {
  appearance: none;
  box-sizing: border-box;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--ink);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: color .18s ease, border-color .18s ease, transform .12s ease;
}
.feed-rail button:active,
.feed-rail a:active { transform: scale(.94); }
.feed-rail .feed-comments:hover,
.feed-rail .feed-open:hover { color: var(--hue-1); border-color: var(--hue-1); }

.rail-glyph { font-size: 1.15rem; line-height: 1; }
.rail-label { font-size: .5rem; letter-spacing: .1em; color: var(--ink-2); }

/* up/down vote as a rounded rail pill, matching the round action buttons */
.feed-rail .feed-vote {
  box-sizing: border-box;
  width: 3.3rem;
  border-radius: 1.65rem;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin: 0;
  padding: .45rem 0;
}
.feed-rail .feed-vote .vote-arrow {
  color: var(--ink);
  min-width: 2rem;
  min-height: 1.5rem;
  font-size: 1rem;
}
.feed-rail .feed-vote .vote-score { color: var(--ink); font-size: .72rem; }

/* the single tinted moment: an active vote arrow */
.feed-rail .feed-vote .vote-arrow[aria-pressed="true"] { color: var(--hue-1); }

@media (prefers-reduced-motion: reduce) {
  .feed-rail button:active,
  .feed-rail a:active { transform: none; }
}

/* ---- topbar: minimal, translucent, over the first slide ---- */
.feed-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-sizing: border-box;
  width: min(30rem, 100%);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding:
    calc(.7rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 1.6rem) .7rem;
  pointer-events: none; /* the bar itself never eats slide taps */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--paper) 70%, transparent),
    transparent);
}
.feed-top > * { pointer-events: auto; }

.feed-top .wordmark {
  margin-right: auto;
  font-family: "GT Sectra Fine", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2em;
  line-height: 1;
  text-indent: .2em;
}
.feed-top .wordmark span { color: var(--hue-1); }

.feed-tog,
.feed-close {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--ink);
  padding: .35rem .6rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  line-height: 1;
}
.feed-tog:hover,
.feed-close:hover { border-color: var(--hue-1); color: var(--hue-1); }
.feed-tog-name { color: inherit; }
.feed-close { text-decoration: none; }
.hue-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--hue-1);
  flex: none;
}

/* ---- no-JS load-more: a plain final slide with a button look ---- */
.feed-more {
  display: flex;
  height: 100svh;
  scroll-snap-align: start;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.feed-more-label {
  border: 1px solid var(--line-strong);
  padding: .7rem 1.2rem;
  color: var(--ink-2);
}
.feed-more:hover .feed-more-label { border-color: var(--hue-1); color: var(--hue-1); }

/* ---- end-cap: the closing slide when there is no more to load ---- */
.feed-endcap {
  height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 2rem clamp(1.4rem, 6vw, 3rem);
  text-align: center;
  background: var(--paper);
}
.feed-endcap-kicker { color: var(--hue-1); }
.feed-endcap-note {
  color: var(--ink-2);
  max-width: 34ch;
  font-size: .9rem;
  line-height: 1.5;
}
.feed-endcap-back {
  color: var(--ink);
  border-bottom: 1px solid var(--hue-1);
  padding-bottom: .1rem;
}
.feed-endcap-back:hover { color: var(--hue-1); }

/* ---- sentinel: an in-flow, zero-height load trigger (never snaps) ---- */
.feed-sentinel {
  height: 1px;
  scroll-snap-align: none;
  pointer-events: none;
}

/* narrow phones: shrink the rail a touch so copy keeps its room */
@media (max-width: 22rem) {
  .feed-rail .feed-comments,
  .feed-rail .feed-open { width: 3rem; height: 3rem; }
  .feed-rail .feed-vote { width: 3rem; }
}