/* fl718-southwest-road-notes.css — Southwest Road Notes desktop styles
   Version: 1.0.0
   Last updated: 2026-05-18
   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;
}

body.fl718-southwest-road-notes .fl718-swrn-lb-stage.fl718-swrn-lb-active {
  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;
}

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);
}

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) {
  body.fl718-southwest-road-notes .fl718-swrn-lb-overlay {
    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;
  }
}

/* ============================================================
   AFTER-CONTENT
   SW siblings + taxonomy.
   opacity NOT set to 0 here — JS handles that before animating.
   ============================================================ */

body.fl718-southwest-road-notes .fl718-swrn-after {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(3.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 4rem) 250px;
}

body.fl718-southwest-road-notes .fl718-swrn-after__rule {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #d0d0ce;
  margin: 0 0 37px;
}

body.fl718-southwest-road-notes .fl718-swrn-after__eyebrow {
  display: block;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #909090;
  margin: 0 0 18px;
}

body.fl718-southwest-road-notes .fl718-swrn-after__eyebrow--second {
  margin-top: 48px;
}

body.fl718-southwest-road-notes .fl718-swrn-after__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.fl718-southwest-road-notes .fl718-swrn-after__break {
  width: 100%;
  height: 0;
  pointer-events: none;
}

body.fl718-southwest-road-notes .fl718-swrn-after__term {
  display: flex;
  align-items: baseline;
}

body.fl718-southwest-road-notes .fl718-swrn-after__link {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #787878;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: color 0.4s ease, background-size 0.4s ease;
}

body.fl718-southwest-road-notes .fl718-swrn-after__link:hover {
  color: #282828;
  background-size: 100% 1px;
}

body.fl718-southwest-road-notes .fl718-swrn-after__sep {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  color: #c8c8c6;
  padding: 0 18px;
  user-select: none;
  position: relative;
  top: -1px;
}

@media (max-width: 600px) {
  body.fl718-southwest-road-notes .fl718-swrn-after {
    padding-bottom: 120px;
  }
  body.fl718-southwest-road-notes .fl718-swrn-after__link {
    font-size: 14px;
    letter-spacing: 0.1em;
  }
  body.fl718-southwest-road-notes .fl718-swrn-after__sep {
    font-size: 11px;
    padding: 0 12px;
  }
  body.fl718-southwest-road-notes .fl718-swrn-after__eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 375px) {
  body.fl718-southwest-road-notes .fl718-swrn-after__terms {
    flex-direction: column;
    gap: 14px;
  }
  body.fl718-southwest-road-notes .fl718-swrn-after__term[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
   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;
}