/* fl718-los-angeles.css — Los Angeles desktop styles
   Version: 1.0.0
   Last updated: 2026-09-16
   Extracted from los-angeles-index.html (desktop prototype), lines 204-1017.
   Body class: fl718-los-angeles-page
   overflow-x: clip used throughout (never hidden) — verified during extraction.
   :where() used for the box-sizing reset — verified during extraction.
   No HTML comments present (this is CSS; N/A). */

/* ============================================================
   ALL CSS SCOPED TO: body.fl718-los-angeles-page
   Every rule below uses this body class as its scope prefix.
   Never write an unscoped rule — the site shares one stylesheet
   cascade and unscoped rules bleed into other pages.
   ============================================================ */

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
body.fl718-los-angeles-page {
  margin: 0;
  padding: 0;
  /* overflow-x: clip — NOT hidden. hidden creates a new scroll
     container that breaks position:sticky and ScrollTrigger pins
     site-wide. clip clips visually without that side effect.
     Never overflow-x:hidden on body or html on this project. */
  overflow-x: clip;
  background-color: #f2f2f3;
  color: #1a1a1c;
  -webkit-font-smoothing: antialiased;
}

/* Box-sizing via :where() — zero specificity, never fights another rule */
:where(body.fl718-los-angeles-page) *,
:where(body.fl718-los-angeles-page) *::before,
:where(body.fl718-los-angeles-page) *::after {
  box-sizing: border-box;
}

body.fl718-los-angeles-page img {
  max-width: 100%;
  display: block;
}

body.fl718-los-angeles-page .fl718-la-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HERO
   Container is 16/9 with min-height 100vh — NOT the photo's native
   ratio. object-fit:cover on the image handles the crop. Using the
   source ratio as the container ratio breaks viewport-filling on
   non-matching screens (QA_CHECKLIST, CRITICAL, Session 61).

   Background is the pre-load edge colour: #17181a, near-black and
   faintly cool. This is a night set; the sunset frames sit better
   on dark than on white.
   ============================================================ */

body.fl718-los-angeles-page .fl718-la-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 100vh;
  /* overflow: clip — NOT hidden, same reason as body. */
  overflow: clip;
  background-color: #17181a;
}

body.fl718-los-angeles-page .fl718-la-hero__image {
  width: 100%;
  height: 100%;
  /* object-position: the Griffith frame puts the basin and the
     towers low and centre-right, with open sky above the ridge.
     Anchoring at 55% keeps the horizon low in frame and preserves
     the sky the title sits in. Verified 2026-09-06 against the real
     -hero export (2560x1707) — holds correctly, no adjustment
     needed. This is the desktop crop and stays as CSS, per
     flaneur-photo-gallery -> "Mobile hero crop": only the MOBILE
     hero crop must never live in CSS; desktop's does by design. */
  object-fit: cover;
  object-position: center 55%;
  display: block;
  /* Starting state — GSAP owns the reveal. Paired with the
     no-JS and reduced-motion fallbacks at the bottom of this
     sheet: a CSS opacity:0 start state and its JS reveal tween
     are a matched pair; ship both or neither. */
  opacity: 0;
  transform-origin: center center;
}

/* Gradient lift — upper-left, so the title has purchase against
   the sky without a visible bar. Cool dark, never warm: the only
   warmth on this page belongs inside the photograph. */
body.fl718-los-angeles-page .fl718-la-hero__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72%;
  background:
    linear-gradient(to bottom, rgba(8, 9, 12, 0.62) 0%, transparent 100%),
    radial-gradient(ellipse at 0% 0%, rgba(10, 12, 18, 0.52) 0%, transparent 66%);
  z-index: 5;
  pointer-events: none;
}

/* ── Title block — upper-LEFT, high in the open sky above the ridge.
   Per editorial notes: "upper-left or upper-centre, well clear of
   the horizon." Placement is a per-page decision — re-verify against
   the real hero export. ── */
body.fl718-los-angeles-page .fl718-la-hero__title-block {
  position: absolute;
  top: clamp(32px, 9vh, 76px);
  left: 0;
  padding: 0 clamp(28px, 4vw, 56px);
  z-index: 10;
  pointer-events: none;
}

body.fl718-los-angeles-page .fl718-la-hero__eyebrow {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 300;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: rgba(238, 240, 244, 0.94);
  text-shadow: 0 1px 8px rgba(4, 6, 10, 0.72);
  margin-bottom: clamp(10px, 1.6vh, 18px);
  opacity: 0;
}

/* "los angeles" — lowercase, Crimson Pro 300, mixed case.
   Lowercase is the register the other cities use (peru, china):
   not LOS ANGELES the place on a map — los angeles, where I was.
   Deliberately NOT deco, NOT signage, NOT mid-century. */
body.fl718-los-angeles-page .fl718-la-hero__title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: clamp(50px, 6.6vw, 100px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: none;
  color: rgba(244, 245, 248, 0.96);
  line-height: 0.98;
  margin: 0;
  opacity: 0;
  text-shadow: 0 2px 24px rgba(4, 6, 10, 0.58), 0 1px 6px rgba(4, 6, 10, 0.38);
}

body.fl718-los-angeles-page .fl718-la-hero__subtitle-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(14px, 2.2vh, 28px);
  opacity: 0;
}

/* Height follows the subtitle's content. It was 34px for a
   two-line location+year stack; the location line was removed
   2026-09-05 and a 34px rule beside a single line reads as an
   orphan. */
body.fl718-los-angeles-page .fl718-la-hero__subtitle-rule {
  display: block;
  width: 1px;
  height: 16px;
  background: rgba(238, 240, 244, 0.24);
  flex-shrink: 0;
}

/* .fl718-la-hero__location was removed with its markup 2026-09-05 —
   the selector is gone rather than left inert. */
body.fl718-los-angeles-page .fl718-la-hero__year {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(9px, 0.88vw, 12px);
  font-weight: 300;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(4, 6, 10, 0.78), 0 1px 10px rgba(4, 6, 10, 0.70);
}

body.fl718-los-angeles-page .fl718-la-hero__year {
  letter-spacing: 0.26em;
  color: rgba(238, 240, 244, 0.88);
}

/* The byline. Title serif, not the metadata sans — this is a
   sentence in Seamus's voice, not a data field. Sits below the
   location/year block, held to a short measure so it breaks in a
   controlled place rather than running the width of the hero. */
body.fl718-los-angeles-page .fl718-la-hero__byline {
  margin: clamp(16px, 2.4vh, 30px) 0 0;
  max-width: 30ch;
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: clamp(15px, 1.34vw, 21px);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(240, 242, 246, 0.97);
  text-shadow: 0 1px 3px rgba(4, 6, 10, 0.80), 0 1px 14px rgba(4, 6, 10, 0.78);
  opacity: 0;
}

/* Reduced motion — hero shows its END STATE immediately.
   Reduced motion means skip the animation and KEEP the end state,
   never hide the content. Editorial notes: "a static full-colour
   frame." */
@media (prefers-reduced-motion: reduce) {
  body.fl718-los-angeles-page .fl718-la-hero__image {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.fl718-los-angeles-page .fl718-la-hero__eyebrow,
  body.fl718-los-angeles-page .fl718-la-hero__title,
  body.fl718-los-angeles-page .fl718-la-hero__subtitle-block,
  body.fl718-los-angeles-page .fl718-la-hero__byline {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   GALLERY GRID — CSS-columns masonry
   CSS columns, NOT CSS Grid. CSS Grid leaves dead vertical space
   between mixed-height rows. All 23 frames are landscape, which is
   the masonry family's case (flex two-column editorial grid is for
   portrait-heavy sets). Confirmed by Seamus 2026-09-05.

   3 columns desktop -> 2 at 768px. The 768px step is the one
   legitimate size-driven use of the site breakpoint. This is the
   DESKTOP sheet; the mobile template gets its own single-column
   sheet with no width query at all (Step 5, not this file).

   WARNING — column-count fills COLUMN-FIRST. A DOM order validated
   to max-run-2 can still stack four grey frames down one column.
   The sequence must be re-checked against the RENDERED columns at
   3-col, not the source order. This is precisely how Monument
   Valley and White Sands shipped wrong.
   ============================================================ */

body.fl718-los-angeles-page .fl718-la-grid {
  columns: 3;
  column-gap: 8px;
  padding: 8px;
  padding-top: 14vh;
  padding-bottom: 12vh;
}

@media (max-width: 768px) {
  body.fl718-los-angeles-page .fl718-la-grid {
    columns: 2;
    padding-top: 10vh;
  }
}

/* ------------------------------------------------------------
   GRID ITEMS
   break-inside: avoid — stops masonry breaking an image mid-column.
   margin: 0 0 8px — <figure> carries a UA margin that escapes a
   :where() reset, so it is zeroed explicitly here.
   opacity: 0 — GSAP owns the reveal; paired with the fallbacks
   at the bottom of this sheet.
   NO CAPTIONS IN THE GRID. The grid is a pure visual field;
   all metadata lives in the lightbox only.
   ------------------------------------------------------------ */

body.fl718-los-angeles-page .fl718-la-item {
  break-inside: avoid;
  margin: 0 0 8px 0;
  overflow: clip;
  cursor: pointer;
  position: relative;
  display: block;
  opacity: 0;
}

/* The grid items are real controls (tabindex + role="button"), so
   they need a visible focus indicator. :focus-visible only — a mouse
   click must not leave a ring on the photograph. Outline, not
   box-shadow: `overflow: clip` above would crop an inset shadow.
   Matches the lightbox control ring. */
body.fl718-los-angeles-page .fl718-la-item:focus {
  outline: none;
}
body.fl718-los-angeles-page .fl718-la-item:focus-visible {
  outline: 2px solid rgba(190, 198, 214, 0.85);
  outline-offset: 3px;
}

body.fl718-los-angeles-page .fl718-la-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── HOVER — "the light finds it."

   Dialled up 2026-09-05 (Seamus: "give the hover effect we have now
   a little bit more of a kick... it's just a little bit too light
   right now"). The scaffold's version was a flat cool veil at 0.20
   and nothing else — barely perceptible on an already-dark set.

   Three things now move together, all cheap and all compositor-safe:
     1. The veil INVERTS. It was a flat darkener, which is backwards
        for a page about light. It is now a soft radial lift —
        brighter at the centre, falling off to a slightly deepened
        edge. The photograph appears to catch light rather than be
        covered.
     2. The image scales 1.028 with a matching slow settle. The item
        has `overflow: clip`, so the frame never grows and the masonry
        column geometry is untouched.
     3. A thin warm hairline rises at the bottom edge — the page's
        one warm accent, echoing the hero's last-light orange without
        using the reserved signature red.

   Still NO CSS filter on a photograph (standing project rule) —
   the lift is a sibling overlay, never a filter on the <img>. ── */
body.fl718-los-angeles-page .fl718-la-item__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(255, 246, 232, 0.16) 0%,
      rgba(255, 240, 220, 0.06) 42%,
      rgba(10, 12, 18, 0.10) 78%,
      rgba(8, 10, 16, 0.26) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

/* The warm hairline. Separate element so it can rise independently
   of the veil's fade — scaleX from the left, like light arriving
   along the bottom edge. */
body.fl718-los-angeles-page .fl718-la-item__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
    rgba(224, 122, 62, 0.0) 0%,
    rgba(224, 122, 62, 0.85) 22%,
    rgba(238, 156, 92, 0.95) 55%,
    rgba(224, 122, 62, 0.0) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-los-angeles-page .fl718-la-item__edge {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-los-angeles-page .fl718-la-item__veil {
    display: none !important;
  }
}

/* ============================================================
   LIGHTBOX
   Layers:
     9000  .fl718-la-lb-dark   — backdrop
     9100  .fl718-la-lb-stage  — photograph, centred
     9200  .fl718-la-lb-ui     — close, nav, counter

   CAPTION CONTRACT: the ONLY thing that produces a caption is
   data-medium. analog / analog-color show the film stock name from
   data-film; digital shows nothing. On this page that means the 9
   analog frames caption "Ilford Pan 400" and the 14 digital frames
   caption nothing at all.

   ANIMATION HOOK: LIGHTBOX. The open/close gesture here is a plain
   crossfade — the minimum the gallery skill allows ("no entrance
   choreography beyond a crossfade or a subtle scale-up"). Each city
   develops its own; LA's is Step 3. NO filter:blur on a lightbox
   image, ever — CPU repaints every frame and it conflicts with the
   parent drop-shadow filter context.
   ============================================================ */

body.fl718-los-angeles-page .fl718-la-lb-dark {
  position: fixed;
  inset: 0;
  /* rgba(0,0,0,0.92) is the gallery-skill standard: not pure black,
     not too light. Faintly cool to match the page. */
  background: rgba(6, 7, 10, 0.92);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
}

body.fl718-los-angeles-page .fl718-la-lb-stage {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

body.fl718-los-angeles-page .fl718-la-lb-stage--active {
  pointer-events: auto;
}

/* Backdrop is a SIBLING of the image wrap, not a child — it captures
   clicks outside the photograph so tap-outside-to-close works clear
   of the arrows. */
body.fl718-los-angeles-page .fl718-la-lb-backdrop {
  position: fixed;
  inset: 0;
  cursor: pointer;
  z-index: 0;
}

body.fl718-los-angeles-page .fl718-la-lb-image-wrap {
  position: relative;
  z-index: 1;
  max-width: min(82vw, 1200px);
  max-height: 88vh;
  box-shadow: 0 12px 70px rgba(2, 3, 6, 0.72);
}

body.fl718-los-angeles-page .fl718-la-lb-image {
  display: block;
  max-width: min(82vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  opacity: 0;
}

/* Caption — analog frames only, film stock name only. */
body.fl718-los-angeles-page .fl718-la-lb-caption {
  position: absolute;
  bottom: -1.8rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(228, 230, 236, 0.55);
  letter-spacing: 0.06em;
  margin: 0;
  opacity: 0;
}

body.fl718-los-angeles-page .fl718-la-lb-ui {
  position: fixed;
  inset: 0;
  z-index: 9200;
  pointer-events: none;
  opacity: 0;
}

/* The UI sheet never takes pointer-events:auto as a whole — only
   its individual controls do. A full-sheet pointer-events:auto
   swallows the backdrop's close click. */
body.fl718-los-angeles-page .fl718-la-lb-ui--active .fl718-la-lb-close-btn,
body.fl718-los-angeles-page .fl718-la-lb-ui--active .fl718-la-lb-nav {
  pointer-events: auto;
}

/* 44px minimum touch target on every control. */
body.fl718-los-angeles-page .fl718-la-lb-close-btn {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.8rem);
  right: clamp(1rem, 2.5vw, 1.8rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 16, 22, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.2s ease;
  /* GeneratePress styles every <button> on the site, and
     button:focus at (0,1,1) beats a bare class selector. These
     explicit background/border/color declarations are what keep
     the control from inheriting GP's grey pill. Do not remove
     them when porting; check :focus and :hover after deploy. */
}

body.fl718-los-angeles-page .fl718-la-lb-close-btn:hover {
  background: rgba(60, 66, 78, 0.42);
  color: #fff;
}

body.fl718-los-angeles-page .fl718-la-lb-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

body.fl718-los-angeles-page .fl718-la-lb-counter {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  pointer-events: none;
}

body.fl718-los-angeles-page .fl718-la-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease;
}

body.fl718-los-angeles-page .fl718-la-lb-nav:hover { color: #fff; }

body.fl718-los-angeles-page .fl718-la-lb-nav svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

body.fl718-los-angeles-page .fl718-la-lb-prev { left: clamp(0.8rem, 2vw, 1.6rem); }
body.fl718-los-angeles-page .fl718-la-lb-next { right: clamp(0.8rem, 2vw, 1.6rem); }

body.fl718-los-angeles-page .fl718-la-lb-close-btn:focus-visible,
body.fl718-los-angeles-page .fl718-la-lb-nav:focus-visible {
  outline: 2px solid rgba(190, 198, 214, 0.8);
  outline-offset: 2px;
}

/* Reduced motion — lightbox appears at its end state, fade only,
   no scale, no translate. Every rule here carries the open-state
   qualifier (--active / the JS is-open guard) rather than applying
   "always", per the lightbox dismissal contract. */
@media (prefers-reduced-motion: reduce) {
  body.fl718-los-angeles-page .fl718-la-lb-stage--active .fl718-la-lb-image {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ============================================================
   AFTER-CONTENT — International Static Burst pattern
   Dateline -> rule -> eyebrow -> sibling city strip (JS-rendered)
   -> bottom rule -> taxonomy nav (2-col CSS grid).

   MANDATORY on every location page, desktop and mobile.

   In WordPress this is ONE SHARED COMPONENT, not this markup — see
   templates/page-los-angeles.php's get_template_part() call.
   Everything variable — cards, hero photographs, links, region,
   coordinates, the taxonomy row — is DERIVED from the Location
   taxonomy. There is no city list in the component.

   The rules below style only this page's own container
   (.fl718-la-after*). NOT ONE .fl718-ws-city* SELECTOR IS
   REDECLARED HERE — those live in fl718-ws-city-system.css.
   A page that redeclares one silently wins the cascade and
   reverts the shared fix for this page only.
   ============================================================ */

body.fl718-los-angeles-page .fl718-la-after {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 40px 140px;
}

body.fl718-los-angeles-page .fl718-la-after__dateline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 40px;
}

body.fl718-los-angeles-page .fl718-la-after__city,
body.fl718-los-angeles-page .fl718-la-after__sep,
body.fl718-los-angeles-page .fl718-la-after__coords,
body.fl718-los-angeles-page .fl718-la-after__year {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
}

body.fl718-los-angeles-page .fl718-la-after__city {
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #3a3a3e;
}

body.fl718-los-angeles-page .fl718-la-after__sep {
  font-weight: 400;
  color: #6d645d;
  margin: 0 20px;
  user-select: none;
}

body.fl718-los-angeles-page .fl718-la-after__coords,
body.fl718-los-angeles-page .fl718-la-after__year {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #6d645d;
}

body.fl718-los-angeles-page .fl718-la-after__rule {
  width: 100%;
  height: 1px;
  background: #d6d6d8;
  margin-bottom: 36px;
  transform-origin: left center;
}

body.fl718-los-angeles-page .fl718-la-after__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #6d645d;
  margin-bottom: 24px;
}

/* Strip container is page-scoped. The CARDS inside it are styled
   entirely by fl718-ws-city-system.css. */
body.fl718-los-angeles-page .fl718-la-after__strip {
  display: flex;
  gap: 14px;
  margin-bottom: 36px;
  overflow-x: clip;
}

/* Static Burst link-out: full-viewport wipe bar.

   FIRST-PAINT FLASH (fixed 2026-09-05). This element is static markup,
   full-viewport, #111, z-index 9999. Hiding it with `transform` alone
   is NOT enough: a transform is applied by the compositor, and on a
   genuinely cold first load the browser can paint one frame at the
   untransformed position first — a black rectangle across the top of
   the viewport, gone by the next frame and never seen again on reload.
   That is exactly the reported symptom.

   `visibility: hidden` is resolved during style/layout, before any
   paint, and cannot be beaten by the compositor. The bar is switched
   to `visibility: visible` only when a wipe actually starts, and put
   back at rest. The transform is kept as the animated property. */
body.fl718-los-angeles-page .fl718-la-wipe-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #111;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
}

body.fl718-los-angeles-page .fl718-la-burst-char {
  position: fixed;
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 200;
}

body.fl718-los-angeles-page .fl718-la-after__bottom-rule {
  width: 100%;
  height: 1px;
  background: #d6d6d8;
  margin-bottom: 28px;
}

body.fl718-los-angeles-page .fl718-la-after__taxonomy {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px 24px;
}

body.fl718-los-angeles-page .fl718-la-after__tax-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}

body.fl718-los-angeles-page .fl718-la-after__tax-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6d645d;
  margin-right: 10px;
  white-space: nowrap;
}

body.fl718-los-angeles-page .fl718-la-after__tax-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d645d;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  padding: 13px 0;
}

body.fl718-los-angeles-page .fl718-la-after__tax-link:hover { color: #3a3a3e; }

/* Visible middot between tags. Was display:none, which collapsed the
   gap to a bare word-space and ran "STREET PHOTOGRAPHY STREET PORTRAIT
   LIGHT AND SHADOW" together as one string. Seamus 2026-09-06. */
body.fl718-los-angeles-page .fl718-la-after__tax-sep {
  display: inline-block;
  color: #6d645d;
  user-select: none;
}

/* After-content animation start states — only when motion is allowed,
   so a reduced-motion visitor never sees a hidden element. */
@media (prefers-reduced-motion: no-preference) {
  body.fl718-los-angeles-page .fl718-la-after__dateline    { opacity: 0; }
  body.fl718-los-angeles-page .fl718-la-after__rule        { transform: scaleX(0); }
  body.fl718-los-angeles-page .fl718-la-after__eyebrow     { opacity: 0; }
  body.fl718-los-angeles-page .fl718-la-after__bottom-rule { opacity: 0; }
  body.fl718-los-angeles-page .fl718-la-after__taxonomy    { opacity: 0; }
}

/* ============================================================
   REDUCED-MOTION + NO-JS FALLBACKS
   Anything that starts at opacity:0 MUST be visible if JS fails
   or reduced motion is active. Reduced motion means skip the
   animation and keep the END STATE — never hide the content.
   Where an animation uses x/y/scale, the fallback must also
   reset transform, not only opacity.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body.fl718-los-angeles-page .fl718-la-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.fl718-los-angeles-page .fl718-la-after__dateline,
  body.fl718-los-angeles-page .fl718-la-after__rule,
  body.fl718-los-angeles-page .fl718-la-after__eyebrow,
  body.fl718-los-angeles-page .fl718-la-after__bottom-rule,
  body.fl718-los-angeles-page .fl718-la-after__taxonomy {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* No-JS: show everything at its end state. */
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-item {
  opacity: 1;
  transform: none;
  filter: none;
}
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-hero__image,
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-hero__eyebrow,
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-hero__title,
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-hero__subtitle-block,
body.fl718-los-angeles-page:not(.fl718-js-loaded) .fl718-la-hero__byline {
  opacity: 1;
  transform: none;
  filter: none;
}