/* fl718-southwest-road-notes.css — Southwest Road Notes desktop styles
   Version: 1.0.2
   Last updated: 2026-08-12
   1.0.2 — BUG-050: lightbox arrows stayed bright after a tap on mobile.
           :hover now guarded by (hover: hover) and (pointer: fine); touch
           devices pin stroke to the 0.30 rest value and drop the focus ring.
   Scope: body.fl718-location-page.fl718-southwest-road-notes
   Every rule is prefixed with the body class — no unscoped selectors. */

/* ------------------------------------------------------------
   BASE RESET & BODY
   ------------------------------------------------------------ */
body.fl718-southwest-road-notes {
  margin: 0;
  padding: 0;
  /* overflow-x: clip — NOT hidden.
     hidden creates a new scroll container that breaks
     position:sticky. clip clips visually without that side effect. */
  overflow-x: clip;
  background-color: #f0f0ee;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

/* Box-sizing via :where() — zero specificity, never fights other rules */
:where(body.fl718-southwest-road-notes) *,
:where(body.fl718-southwest-road-notes) *::before,
:where(body.fl718-southwest-road-notes) *::after {
  box-sizing: border-box;
}

body.fl718-southwest-road-notes img {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------------------
   VISUALLY HIDDEN — accessible text, not visible on screen.
   ------------------------------------------------------------ */
body.fl718-southwest-road-notes .fl718-swrn-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 SECTION
   16:9 desktop aspect ratio.
   overflow: clip — clips without breaking position:sticky.

   PALETTE NOTE: #ededeb is the pure cool gray hero background.
   Shows at edges during load before the image fills the space.
   No warmth, no cool. The photograph's own temperature speaks.
   ============================================================ */

/* ------------------------------------------------------------
   MENU CURTAIN
   ------------------------------------------------------------ */
body.fl718-southwest-road-notes #fl718-danlann-thread {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(180,160,120,0.6) 30%, rgba(180,160,120,0.85) 50%, rgba(180,160,120,0.6) 70%, transparent 100%);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: height 0.2s ease;
}

body.fl718-southwest-road-notes #fl718-danlann-thread.fl718-danlann-thread--breathing {
  animation: fl718SwrnThreadBreathe 3.8s ease-in-out infinite;
}

@keyframes fl718SwrnThreadBreathe {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.95; }
}

body.fl718-southwest-road-notes #fl718-danlann-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 9998;
  display: none;
  cursor: pointer;
}

body.fl718-southwest-road-notes #fl718-menu-recall {
  position: fixed;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: rgba(180,160,120,0.75);
  user-select: none;
  line-height: 1;
}

body.fl718-southwest-road-notes #fl718-menu-recall:focus-visible {
  outline: 2px solid rgba(180,160,120,0.6);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
body.fl718-southwest-road-notes .fl718-swrn-hero {
  position: relative;
  width: 100%;
  height: calc(100vh + 56px);
  margin-top: -56px;
  overflow: clip;
  background-color: #ededeb;
}

body.fl718-southwest-road-notes .fl718-swrn-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Starting state for "Slow Zoom Out".
     Scale: GSAP animates 1.15->1.0 over 4.5s.
     Reduced motion / no-JS: transform overrides below. */
  transform: scale(1.15);
  transform-origin: center center;
  will-change: transform;
}

body.fl718-southwest-road-notes .fl718-swrn-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   HERO OVERLAY — Title + Subtitle
   Position: bottom-left — the road's vanishing center draws
   the eye inward; the lower-left quadrant is clean negative space.
   Typeface: IM Fell English (title) — cinematic, film title card gravitas.
             Cormorant Garamond 300 Light italic (subtitle) — gossamer whisper.
   ============================================================ */

body.fl718-southwest-road-notes .fl718-swrn-hero__gradient {
  position: absolute;
  inset: 0;
  /* Bottom-to-top: darkens the lower-left corner for text legibility.
     The road surface in the lower portion is bright asphalt —
     this gradient gives the white type a shadow to sit in.
     Fades to transparent by mid-frame — sky and mountain read fully. */
  background: linear-gradient(
    to top,
    rgba(4, 4, 4, 0.52) 0%,
    rgba(4, 4, 4, 0.24) 28%,
    transparent 52%
  );
  /* Starts invisible — GSAP fades in with the typography. */
  opacity: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-hero__text {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: clamp(280px, 42vw, 620px);
  padding: 0 0 clamp(1.6rem, 3.2vw, 3.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  text-align: left;
}

body.fl718-southwest-road-notes .fl718-swrn-hero__title {
  font-family: 'IM Fell English', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.2rem, 4.8vw, 6.2rem);
  letter-spacing: 0.01em;
  line-height: 1.08;
  text-transform: none;
  color: rgba(255, 255, 255, 0.93);
  display: block;
  margin: 0 0 0.55em 0;
  opacity: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-hero__subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(0.72rem, 0.98vw, 0.9rem);
  letter-spacing: 0.16em;
  line-height: 1.5;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  display: block;
  margin: 0;
  opacity: 0;
}

/* ============================================================
   GALLERY GRID — 2-photo alternating editorial layout
   Odd photos: 64% width, right-aligned.
   Even photos: 64% width, left-aligned.
   14vh gap between them. Approaching Headlight reveal — see JS.
   ============================================================ */

body.fl718-southwest-road-notes .fl718-swrn-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(2rem, 4vw, 4rem);
  padding-top: 14vh;
  padding-bottom: 12vh;
}

/* ------------------------------------------------------------
   GALLERY ITEMS — shared base
   opacity: 0 starting state — GSAP "Approaching Headlight" handles reveal.
   margin: 0 — explicit to avoid UA <figure> margin: 1em 40px.
   ------------------------------------------------------------ */

body.fl718-southwest-road-notes .fl718-swrn-item {
  overflow: clip;
  opacity: 0;
  cursor: pointer;
  position: relative;
  transform-origin: center center;
  margin: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Odd photos (data-index 0,2,4,6) — right-aligned */
body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:nth-child(odd) {
  width: 64%;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 14vh;
}

/* Even photos (data-index 1,3,5,7) — left-aligned */
body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:nth-child(even) {
  width: 64%;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 14vh;
}

/* Remove gap after the last photo */
body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  body.fl718-southwest-road-notes .fl718-swrn-grid {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10vh;
  }
  body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:nth-child(odd),
  body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8vh;
  }
  body.fl718-southwest-road-notes .fl718-swrn-grid .fl718-swrn-item:last-child {
    margin-bottom: 0;
  }
}

/* ============================================================
   HOVER — "Road's Hold"
   The photograph brakes on hover. A horizontal anisotropic
   motion blur (SVG feGaussianBlur, "8 0") fires instantly on
   mouseenter then resolves to "0 0" over 0.55s. Simultaneously
   the image scales very slowly from 1.0 to 1.032 over 1.2s.
   No return blur on mouseleave.
   ============================================================ */

/* lift overlay unused by this effect — hidden */
body.fl718-southwest-road-notes .fl718-swrn-item__lift {
  display: none;
}

/* img needs will-change for transform + filter compositing */
body.fl718-southwest-road-notes .fl718-swrn-item img {
  will-change: transform, filter;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-southwest-road-notes .fl718-swrn-item img {
    will-change: auto;
    filter: none !important;
    transform: none !important;
  }
}

/* ============================================================
   LIGHTBOX — "Desert Exposure"
   The darkroom developing tray. Background goes black instantly.
   Photograph develops from brightness(0) contrast(0) to full tone
   across three chemical phases. Red safelight dot top-left.

   Layers (z-ordered):
     9000: .fl718-swrn-lb-overlay — darkroom black
     9010: .fl718-swrn-lb-stage   — centered photograph tray
     9020: .fl718-swrn-lb-safelight — red dot indicator
     9030: .fl718-swrn-lb-close / prev / next — UI controls
   ============================================================ */

/* Darkroom overlay — goes black instantly on open */
body.fl718-southwest-road-notes .fl718-swrn-lb-overlay {
  position: fixed;
  inset: 0;
  background: #0b0b0a;
  opacity: 0;
  z-index: 9000;
  pointer-events: none;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-overlay.fl718-swrn-lb-active {
  pointer-events: auto;
}

/* Stage — centers the developing tray */
body.fl718-southwest-road-notes .fl718-swrn-lb-stage {
  position: fixed;
  inset: 0;
  z-index: 9010;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* BUG-044: the stage is a full-viewport (inset:0) flex centring box sitting
   ABOVE the overlay (9010 vs 9000). Giving the whole sheet pointer-events:auto
   made it swallow every backdrop click before it could reach the overlay's
   close listener. Keep the sheet transparent to pointer events and re-enable
   them only on the tray, which is the sole interactive child. */
body.fl718-southwest-road-notes .fl718-swrn-lb-stage.fl718-swrn-lb-active {
  pointer-events: none;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-stage.fl718-swrn-lb-active .fl718-swrn-lb-tray {
  pointer-events: auto;
}

/* The developing tray — holds the photo */
body.fl718-southwest-road-notes .fl718-swrn-lb-tray {
  position: relative;
  max-width: min(88vw, 1100px);
  max-height: 86vh;
  opacity: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-tray img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  /* Development filter — starts unexposed */
  filter: brightness(0) contrast(0);
}

/* Caption row — below the tray */
body.fl718-southwest-road-notes .fl718-swrn-lb-caption {
  position: absolute;
  bottom: -36px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-film-label {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 240, 238, 0.5);
}

body.fl718-southwest-road-notes .fl718-swrn-lb-counter {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(240, 240, 238, 0.3);
}

/* Red safelight — top-left corner, just perceptible */
body.fl718-southwest-road-notes .fl718-swrn-lb-safelight {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 9020;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(160, 28, 14, 0);
  pointer-events: none;
}

/* Close button */
body.fl718-southwest-road-notes .fl718-swrn-lb-close {
  position: fixed;
  top: clamp(1rem, 2vh, 1.6rem);
  right: clamp(1rem, 2vw, 1.6rem);
  z-index: 9030;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: none;
  padding: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-close.fl718-swrn-lb-active {
  pointer-events: auto;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-close svg {
  width: 18px;
  height: 18px;
  stroke: rgba(240, 240, 238, 0.4);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  transition: stroke 0.25s;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-close:hover svg {
  stroke: rgba(240, 240, 238, 0.9);
}

body.fl718-southwest-road-notes .fl718-swrn-lb-close:focus-visible {
  outline: 2px solid rgba(240, 240, 238, 0.6);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Prev / Next */
body.fl718-southwest-road-notes .fl718-swrn-lb-prev,
body.fl718-southwest-road-notes .fl718-swrn-lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9030;
  width: 56px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: none;
  padding: 0;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-prev { left: clamp(0.5rem, 1.5vw, 1.5rem); }
body.fl718-southwest-road-notes .fl718-swrn-lb-next { right: clamp(0.5rem, 1.5vw, 1.5rem); }

body.fl718-southwest-road-notes .fl718-swrn-lb-prev.fl718-swrn-lb-active,
body.fl718-southwest-road-notes .fl718-swrn-lb-next.fl718-swrn-lb-active {
  pointer-events: auto;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-prev svg,
body.fl718-southwest-road-notes .fl718-swrn-lb-next svg {
  width: 22px;
  height: 22px;
  stroke: rgba(240, 240, 238, 0.30);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* Brighten on hover ONLY where a real hovering pointer exists. On touch,
   Safari latches :hover on tap and holds it until you tap elsewhere — that
   left the tapped arrow stuck at 0.75 for the rest of the lightbox session
   (BUG-050). Guarding with (hover: hover) means touch never enters the state
   at all, so there is nothing to unstick. */
@media (hover: hover) and (pointer: fine) {
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev:hover svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next:hover svg {
    stroke: rgba(240, 240, 238, 0.75);
  }
}

/* Belt and braces: even if a UA reports (hover: hover) on a touch device,
   pin the stroke back to rest while the finger is down and after the tap. */
@media (hover: none), (pointer: coarse) {
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev:hover svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next:hover svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev:focus svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next:focus svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev:active svg,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next:active svg {
    stroke: rgba(240, 240, 238, 0.30);
  }
  /* The JS leaves focus on the arrow after navigating; without this the
     focus ring persists around the button for the rest of the session. */
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev:focus,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next:focus {
    outline: none;
  }
}

body.fl718-southwest-road-notes .fl718-swrn-lb-prev:focus-visible,
body.fl718-southwest-road-notes .fl718-swrn-lb-next:focus-visible {
  outline: 2px solid rgba(240, 240, 238, 0.6);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  body.fl718-southwest-road-notes .fl718-swrn-lb-tray {
    max-width: 100vw;
    max-height: calc(100svh - 80px);
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-tray img {
    max-height: calc(100svh - 80px);
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev { left: 0.25rem; }
  body.fl718-southwest-road-notes .fl718-swrn-lb-next { right: 0.25rem; }
}

/* Reduced motion — skip development, show full immediately */
@media (prefers-reduced-motion: reduce) {
  /* Must carry .fl718-swrn-lb-active. The overlay is a permanent
     position:fixed inset:0 element hidden only by opacity:0 — without the
     active qualifier this !important rule paints a 97% black scrim over the
     whole page from first load for any reduced-motion visitor. */
  body.fl718-southwest-road-notes .fl718-swrn-lb-overlay.fl718-swrn-lb-active {
    opacity: 0.97 !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-tray {
    opacity: 1 !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-tray img {
    filter: brightness(1) contrast(1) !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-caption {
    opacity: 1 !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-lb-close,
  body.fl718-southwest-road-notes .fl718-swrn-lb-prev,
  body.fl718-southwest-road-notes .fl718-swrn-lb-next {
    opacity: 1 !important;
  }
}

@media (max-width: 600px) {
}

@media (max-width: 375px) {
}

/* ============================================================
   PREFERS-REDUCED-MOTION + NO-JS FALLBACKS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body.fl718-southwest-road-notes .fl718-swrn-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-hero__image {
    transform: scale(1) !important;
  }
  body.fl718-southwest-road-notes .fl718-swrn-hero__gradient,
  body.fl718-southwest-road-notes .fl718-swrn-hero__title,
  body.fl718-southwest-road-notes .fl718-swrn-hero__subtitle {
    opacity: 1 !important;
  }
}

body.fl718-southwest-road-notes:not(.fl718-js-loaded) .fl718-swrn-item {
  opacity: 1;
  filter: none;
  transform: none;
}

body.fl718-southwest-road-notes:not(.fl718-js-loaded) .fl718-swrn-hero__image {
  transform: scale(1);
}

body.fl718-southwest-road-notes:not(.fl718-js-loaded) .fl718-swrn-hero__gradient,
body.fl718-southwest-road-notes:not(.fl718-js-loaded) .fl718-swrn-hero__title,
body.fl718-southwest-road-notes:not(.fl718-js-loaded) .fl718-swrn-hero__subtitle {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   AFTER-CONTENT (.fl718-swrn-after*) — REMOVED 2026-08-21, BUG-061 B5.
   0 page-private rules deleted. This page now renders the shared
   partial (template-parts/after-content.php), styled by
   fl718-after-content.css on desktop and fl718-after-content-mobile-v2.css
   on mobile. The markup these rules targeted no longer exists.

   Safety was established by RENDERING, not grepping (plan §12b): the live
   page was snapshotted at the real viewport, re-rendered with these rules
   stripped, and every element's computed styles diffed. Zero differences.
   ───────────────────────────────────────────────────────────── */