/* Sulamita Youth — /media/ archive wall. Loads AFTER styles.css and only adds
   what this page invents: the slim bar, the filter pills, the dense wall, and
   the carousel touches on the shared lightbox. Everything else (tokens, .btn,
   .eyebrow, .lightbox family, .lang-pill) comes from styles.css.
   Design direction: "the whole feed, rehosted" — the media wall IS the
   boldness; the chrome around it stays quiet hub furniture. */

.media-page { background: var(--cream); }

/* ── top bar and head band ────────────────────────────────────────────────
   Both MOVED to styles.css (bar 2026-07-29, head band 2026-07-30). They are
   shared chrome: /albums/ wears the same markup but loads albums.css, not
   this file, so anything left here styled only half the pages that use it —
   which is exactly how the albums head band ended up with .section's 11vh
   padding and a phone-screen of dead space. This file keeps only what
   /media/ alone invents. */

/* ── the profile rows in the head band ────────────────────────────────────
   The live stories tray and the saved-highlight circles moved here on
   2026-07-30 (the front page keeps the tray alone). Everything about how they
   LOOK is in styles.css — they are the same rows the hub wears, including the
   phone scroll-bleed and its scroll-padding — so all this page adds is where
   they sit in its own band: under the lede, above the filters, which is the
   order a profile is read in. */
/* The 18px under the tray belongs to the HIGHLIGHTS row, not to the tray.
   It used to be the tray's own margin-bottom, which meant it disappeared with
   the tray: with no live stories the tray collapses (insta-circles.js) and the
   post-count line ended up sitting straight on top of the HIGHLIGHTS label.
   Carried by the row underneath, the gap is there in both states — and while
   the tray IS up, adjacent margins collapse to the same 18px it always was. */
.media-head-band .insta-stories { margin: 22px 0 0; }
.media-head-band .insta-highlights { margin: 18px 0 2px; }

.media-count {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* The kind pills were cut 2026-07-31; .media-filters is the row they lived in
   and is no longer rendered. The PILL itself is now the shared .a-pill in
   styles.css — this page had its own copy called .filter-pill, and the copy
   had drifted: its selected state changed the fill only (no weight change, so
   one visual cue where the house asks for two), its count span was dimmed with
   `opacity` rather than the quiet-voice colour token, its selected edge was
   transparent (the 1.4.11 gap), and it had no focus-visible ring at all.
   Nothing about a pill lives on this page any more. */
.media-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ── the wall ── */
/* .media-wall-band's padding is shared chrome too — see styles.css. */
.media-wall-wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
.media-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (min-width: 760px) { .media-wall { grid-template-columns: repeat(4, 1fr); gap: 4px; } }
@media (min-width: 1100px) { .media-wall { grid-template-columns: repeat(5, 1fr); gap: 4px; } }

/* A tile is a <button> since 2026-08-02, not a link to instagram.com: it opens
   the on-site viewer, and a button is what opens a dialog. These four lines are
   the UA button reset — without them the wall gets iOS's own button chrome and
   a 2px inset border on every one of 367 tiles. */
.m-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px; /* deliberately below the radius scale: dense wall, 3-4px gaps */
  background: var(--oak-200);
}
.m-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease-glide), opacity var(--t-med) var(--ease);
}
/* A tile still waiting its turn has no src yet (media.js's image gate), and an
   <img> with alt text but no source paints the CAPTION inside the tile in
   Firefox. Hide the box, not the space — the tile's own oak fill is the
   placeholder, and visibility keeps the grid exactly where it was. */
.m-tile img[data-src], .v-shot img[data-src] { visibility: hidden; }
.m-tile:active img { transition-duration: var(--press-down); transform: scale(0.985); }
@media (hover: hover) {
  .m-tile:hover img { transform: scale(1.04); }
}
.m-tile:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 2px; }

/* corner badges: ▶ video, ⧉ carousel — same glyph weight as the hub's reel badge */
.m-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 9, 0.72);
  color: #fff;
  /* The badge sits INSIDE the tile's own <button>, so a tap on it has always
     reached the button — but its house sibling .reel-badge (styles.css) has
     carried pointer-events:none since it was written, and one of the two
     answering hit-testing differently is how the pair drifts. Same rule here:
     the corner mark is a mark, never a target. */
  pointer-events: none;
}
.m-badge svg { width: 11px; height: 11px; display: block; }

/* ── more / empty ── */
.media-more-wrap { display: flex; justify-content: center; padding: 26px 0 0; }
/* the [hidden] trap again (storybox, 07-30): the flex above outranks the UA's
   [hidden]{display:none}, so "More posts" ignored its hidden attribute — the
   retired .media-empty "Filling in" block had the same bug via display:grid,
   which is exactly why the owner could see it under a full wall */
.media-more-wrap[hidden] { display: none; }
.media-none {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--ink);
}

.media-noscript {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--ink);
}
.media-noscript a { color: var(--gold-text); }

/* ── the viewer ──
   Nothing here any more. This page opened its posts in a lightbox of its own
   until 2026-07-30; it now shares the front page's, so the slide counter
   (.lb-count) and the reel frame live in styles.css with the rest of that
   family, where both pages read the same rules. */

/* ── mini footer ──
   The rules moved to styles.css on 2026-08-01: eight pages wear
   <footer class="media-foot"> and only /media/ loads THIS sheet, so on
   /albums/, /people/, and /rewind/ the footer was
   raw unstyled text (audit). It is shared chrome; it belongs with the rest. */

/* reduced motion: the wall holds still */
@media (prefers-reduced-motion: reduce) {
  .m-tile img { transition: none; }
}

/* ---------- video view: the archive read as a video shelf ----------
   The owner, 2026-07-28: the reels should be "presented in a proper way…
   like a YouTube format". So in the Videos filter the dense square wall
   becomes cards that carry a runtime, a title, and how many watched —
   the layout everyone already knows how to read. Two per row on a phone,
   because Instagram video is vertical and a single column would put one
   card on a whole screen. */
.media-wall.video-wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
@media (min-width: 760px) { .media-wall.video-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } }
@media (min-width: 1100px) { .media-wall.video-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; } }

/* same button reset as .m-tile, plus the text alignment a card needs — a
   <button>'s default is centred, which would centre every video title */
.v-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.v-card:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; border-radius: var(--radius-tile); }

.v-shot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--oak-200);
}
.v-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease-glide);
}
.v-card:active .v-shot img { transition-duration: var(--press-down); transform: scale(0.985); }
@media (hover: hover) {
  .v-card:hover .v-shot img { transform: scale(1.04); }
}

/* The play mark sits centre-stage: on a shelf of stills it is the one
   thing that says "this one moves". */
.v-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  backdrop-filter: blur(2px);
}
.v-play svg { width: 15px; height: 15px; display: block; margin-left: 2px; }

.v-dur {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(11, 11, 12, 0.82);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.v-body { padding: 8px 2px 0; }
.v-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* two lines, then stop — a caption is not a headline and a ragged card
     grid is harder to scan than a clipped one */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v-meta {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--steel);
}

/* ---------- month rules on the photo wall ----------
   367 undated thumbnails give no sense of where in time you are.
   `.media-wall .m-month`, NOT bare `.m-month` (fixed 2026-08-11, the owner's direction:
   "massive month and year sections off all the posts"): the label is an <h2>
   inside a .section, and styles.css's `.section h2` (37-58px display type)
   outweighs a single class — so the intended 11.5px whisper rendered as a
   giant heading. Two classes win the fight; keep them if this ever moves. */
.media-wall .m-month {
  grid-column: 1 / -1;
  margin: 22px 0 4px;
  /* the wall's own gutter is 10px (tiles run nearly edge to edge); the label
     is text, and text keeps the 16px phone gutter (mobile-qa safe-area,
     2026-09-02): 10 + 6 = 16. The tiles do not move. */
  padding-inline-start: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-wall .m-month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 154, 46, 0.5), rgba(201, 154, 46, 0));
}
/* The wall band starts FLUSH under the head band on purpose (styles.css:
   `.media-head-band + .media-wall-band { padding: 0 0 56px }` — it must not
   stack its own seam on top of the one already there), so a first label with
   no margin sat right on the cream/dark boundary while the year pills above it
   had room to spare (the owner, 2026-08-11: "the first date above the latest post
   is nearly touching the section above it"). 24px clears the seam and stays
   inside the 22px rhythm every LATER month keeps, so the run reads evenly all
   the way down instead of the first one being special. */
.media-wall .m-month:first-child { margin-top: 24px; }

/* ---------- one row of circles, and what a ring means ----------
   The "Memories" strip that used to live here — a second row of circles under
   the highlights — was removed 2026-08-23. Its five auto-generated day circles
   were re-slices of the story archive at the bottom of the same page, and two
   rows of look-alike circles meaning different things is not a feature. The
   hand-curated moments moved INTO the highlights row as pinned circles; the
   archive moved to the Stories entry on the pill bar below.

   THE RING NOW CARRIES THE MEANING. Every circle used to wear the brass
   gradient, so twenty-nine identical gold rings spent the one accent on
   nothing — and once the moments were promoted into the same row there was no
   way left to say which circles are ours rather than Instagram's. An ordinary
   saved reel wears a quiet hairline ring; the accent is reserved for the
   pinned moments. The geometry stays in styles.css with the rest of .hl-card;
   only the two rules that changed live here, because /media/ is the only page
   that draws this row and this file is the only stylesheet it does not share
   with twenty-one pages that draw no circles at all. */
.highlights-row .hl-ring { background: rgba(255, 255, 255, 0.26); }
/* THE RAIL MUST NOT COMPENSATE FOR THE PREPEND (2026-08-23, measured). The
   pinned circles arrive on their own request and are inserted at the FRONT of
   this scroller. Chrome's scroll anchoring then shifts scrollLeft by exactly
   the width it just inserted — 92px — so the reels stay put and the pinned
   circle is pushed off the left edge, sitting at left:-72px: the one circle
   that has to be seen is the only one hidden. Turning anchoring off on this
   rail is the fix; insta-circles.js also resets scrollLeft after the insert
   for engines that ignore this property. */
.highlights-row { overflow-anchor: none; }
/* PINNED MOMENTS. Four changes at once, so it reads at a glance on a phone and
   never leans on colour alone: the ring is FILLED with the accent gradient
   instead of a hairline, it is thicker, it carries the accent glow, and the
   caption underneath switches to the house mono label voice — ours, not
   another Instagram reel. */
.highlights-row .hl-ring-pinned {
  padding: 3px;
  background: var(--accent-gradient);
  box-shadow: var(--shadow-accent-soft);
}
.hl-pinned .hl-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (hover: hover) {
  .hl-pinned:hover .hl-ring { box-shadow: var(--shadow-accent-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .v-shot img { transition: none; }
  .v-card:active .v-shot img { transform: none; }
}

/* ── year row ────────────────────────────────────────────────────────────
   367 posts behind one "More posts" button is eight taps to reach 2023
   (the owner, 2026-07-28). The years scroll in one line rather than wrapping to
   three stacked rows on a phone; .media-filters above it still wraps, because
   three kind pills fit. */
.pill-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* same as albums.css .pill-row — a flick that runs past the last year pill
     must stop there, not hand the rest of the gesture to the page (iOS
     sideways rubber-band / back-swipe). Audit 2026-08-06. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 3px 0;
}
/* flex outranks the browser's own [hidden] { display: none } — #media-years
   ships hidden and stayed on screen as an empty band without this */
.pill-row[hidden] { display: none; }
.pill-row::-webkit-scrollbar { display: none; }
/* layout, count colour and the selected state all come with .a-pill now */

/* ── the pill bar: years, and nothing but years ─────────────────────
   The story archive rode this line from 2026-08-23 to 2026-09-06 as a
   "Stories 27 →" entry pinned to its right. It cost no vertical space, which
   was the whole argument for putting it here — and it drew nothing, which is
   what the owner could not see. A row of FILTERS is also the wrong
   neighbourhood for the one control that OPENS something: read at a glance,
   "Stories 27" beside "2026 48" is the twenty-seven-story filter. The saved
   stories have a row of their own above now (see below), and this line is
   back to being years. The flex wrapper stays — it is what keeps the year
   scroller inside the container, and it is where a second entry would go if
   one ever earns its place on this line again. */
.media-pillbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-pillbar > .pill-row { flex: 1 1 auto; min-width: 0; }

/* THE BAND'S OWN FLOOR, RE-MEASURED (2026-09-06). 540px was the settled band
   when the saved stories were a pill on the year row and this band drew one
   row of circles. It now draws the circles AND the saved-story row, measured
   at 772px settled with no live tray at 390px, so the floor moves with it —
   a reservation short by a row is the jump it exists to prevent, and one over
   the settled height is the dead space the 700px it replaced was.
   styles.css's original 700px is still what this replaces; same selector,
   later in the cascade, still deliberately just under the settled height. */
@media (max-width: 639px) {
  html.js .media-head-band:has(#media-count) { min-height: 765px; }
}
/* ── the saved stories ───────────────────────────────────────
   Twenty-seven expired stories, kept because we keep everything, and now SHOWN
   because a count is not a picture (the owner, 2026-09-06: "the twenty seven
   saved stories are very hard to see"). The geometry is the live tray's — the
   same .stories-row scroller, the same 9:16 .story-card, the same viewer — so
   nothing here is a new component. Only the SIZE and the RING are this row's
   own, and both carry an argument.

   BIGGER BY THE WIDTH OF A THUMB. 124px against the tray's 104px is not
   decoration: at 390px it puts two and two-thirds cards on screen, so the
   third is visibly cut and the row says "flick me" without a scrollbar to say
   it with; and it takes the card from 104×185 to 124×220. Both clear 44px
   twice over — but this target is a PHOTOGRAPH, and one you cannot make out
   is not a picture you would tap.

   THE RING SAYS WHICH ROW YOU ARE IN. The tray above wears the brass gradient
   and counts down in hours; a saved story wears .is-archived's quiet oak with
   the same ink hairline the highlight circles draw, and states its date
   instead. The accent stays where this band already spends it — on what is
   live now and on the pinned moments — and never on twenty-seven cards at
   once. */
.media-head-band .insta-saved { margin: 18px 0 2px; }
/* the count rides the label in the same quiet numeral the pills use for
   theirs — "SAVED STORIES 27", one line, no second control to carry it */
.stories-label .n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-quiet);
}
/* the row fills from one request after first paint, and scroll anchoring
   would pin the rail to whatever it drew first — the trap .highlights-row
   documents two hundred lines up */
.saved-row { overflow-anchor: none; }
/* THIS ROW PAYS ITS OWN WAY THROUGH FIRST PAINT. styles.css is print-swapped
   on this page, and the inline critical block carries .story-card but not
   .story-card img, .is-archived, .reel-badge or .story-left — survivable
   while the only row drawing cards was a live tray that is usually empty.
   This row draws twenty-seven of them on every load, so the two rules a card
   cannot be seen without are stated in THIS file, which is render-blocking:
   the ring, and the photo that fills it. The rest can arrive with the swap.
   The ink hairline is the dark gap .hl-ring img draws between ring and photo
   — without it an oak ring on the cream band is cream on cream and the card
   loses its edge against the page. */
.saved-row .story-card {
  width: 124px;
  background: var(--oak-300);
}
.saved-row .story-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--oak-200);
}
/* Forty cards is the survey limit; any remainder rides one tile that opens
   the viewer on all of them. Neutral chrome and a dashed edge, the same thing
   "Show all" wears on the circles above — a filled ring means a real story is
   behind it — and the number on it is the true count, never a stand-in. */
.story-card-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 1px dashed var(--control-line);
  color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.story-card-all .sc-all-n { font-weight: 700; font-size: 17px; }
.story-card-all .sc-all-w {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fg-quiet);
}
@media (hover: hover) {
  .story-card-all:hover { border-color: rgba(201, 154, 46, 0.6); }
}
@media (min-width: 760px) {
  .saved-row .story-card { width: 144px; }
  .story-card-all .sc-all-n { font-size: 19px; }
}

/* ── WHICH WAY A RAIL STILL GOES (audit 2026-08-12, wave C) ──────────────
   Three of this page's rows scroll sideways with the scrollbar hidden, and
   each of them was cut clean through at the screen edge with nothing to say
   so: the year row mid-pill, the fourth highlight circle sliced with its
   caption clipped to "co". A row now dissolves at whichever end still has
   something behind it, and at NEITHER end while everything fits — a fade over
   a complete row would be a lie about there being more.
   THE PATTERN IS .pp-with[data-edge] IN people.css; that is the original and
   the place to fix the idea. This is a deliberate second copy: /media/ loads
   neither people.css nor albums.css, and a new shared asset file for six
   rules was the wrong trade. media.js (railEdges) writes data-rail-edge on
   scroll, on resize and whenever insta-circles.js refills a row.
   .stories-row and .highlights-row themselves live in styles.css — this only
   adds the mask, on this page, where those rows are the whole profile. */
.pill-row[data-rail-edge],
.stories-row[data-rail-edge],
.highlights-row[data-rail-edge] {
  -webkit-mask-image: var(--rail-fade);
  mask-image: var(--rail-fade);
}
[data-rail-edge="end"]   { --rail-fade: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
[data-rail-edge="start"] { --rail-fade: linear-gradient(to right, transparent, #000 40px); }
[data-rail-edge="both"]  { --rail-fade: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ── the two folds (2026-08-02) ───────────────────────────────────────────
   Twelve year pills and twenty-nine highlight circles were 41 of the 51
   tappable things a phone showed before the first post. The four most recent
   years and the eight most recent highlights stay; the rest are one tap away.
   Both rows lay their children out with flex/inline-flex, which OUTRANKS the
   browser's own [hidden] { display: none } — the same trap that left "More
   posts" and the empty year band on screen. So both need saying explicitly. */
.pill-row .a-pill[hidden] { display: none; }
.highlights-row .hl-card[hidden] { display: none; }

/* "Earlier ▾" is not a filter: it wears the shared .a-pill-more variant
   (dashed edge, no fill, no shadow) from styles.css. */

/* "Show all" wears the circle shape of the row it belongs to, in neutral
   chrome — the gold ring means "a real saved reel is behind this". The number
   on it is the count of circles actually folded, never a rounded stand-in. */
.hl-ring-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px dashed var(--control-line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
@media (hover: hover) {
  .hl-more:hover .hl-ring-more { border-color: rgba(201, 154, 46, 0.6); color: var(--ink); }
}