/**
 * Flaneur 718 — Mobile Menu CSS
 * Source: Menu/mobile/menu-mobile-index.html
 *
 * Scoped to body.fl718-menu-active (added globally via functions.php body_class filter).
 * This file is the mobile menu counterpart to fl718-menu.css (desktop).
 * Keep them separate — they are architecturally distinct navigation systems.
 *
 * CSS prefix: fl718-mob-
 * Media gate: @media (max-width: 767px) wraps everything.
 * The desktop fl718-walk-* overlay is suppressed at this breakpoint below.
 *
 * To add a new location or section:
 *   HTML: header.php  — add to the relevant list (Featured / International / US)
 *   CSS:  no change needed for list items (they inherit fl718-mob-loc-link styles)
 *   JS:   fl718-menu-mobile.js — the darkroom/coordinate IIFE auto-discovers
 *         new .fl718-mob-featured-coord and .fl718-mob-loc-mark elements
 */

/* ═══════════════════════════════════════════════════════════════════
   SUPPRESS DESKTOP OVERLAY ON MOBILE
   The fl718-walk-* overlay was built for hover interactions — it is
   not the right experience on touch. Hide it completely below 768px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.fl718-menu-active .fl718-walk-header { display: none; }
  body.fl718-menu-active .fl718-walk-backdrop { display: none; }
  body.fl718-menu-active .fl718-walk-panel-container { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SUPPRESS MOBILE NAV ON DESKTOP
   The fl718-mob-* nav is touch-only — hide it above 767px.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body.fl718-menu-active .fl718-mob-nav { display: none; }
  body.fl718-menu-active .fl718-mob-overlay { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE MENU — all rules below are gated at max-width: 767px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

/* ── ZERO-SPECIFICITY RESET — scoped to mobile menu elements only ── */
:where(body.fl718-menu-active) .fl718-mob-nav *,
:where(body.fl718-menu-active) .fl718-mob-overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS CUSTOM PROPERTIES — mobile menu palette ── */
body.fl718-menu-active {
  --fl718-mob-ink:          #1a1814;
  --fl718-mob-warm-white:   #fafaf7;
  --fl718-mob-red:          #c44536;
  --fl718-mob-gray-dark:    #3a3a38;
  --fl718-mob-gray-mid:     #6b6b68;
  --fl718-mob-gray-light:   #d0cec8;
  --fl718-mob-panel-bg:     #f5f3ee;
  --fl718-mob-panel-border: #d4d2cc;
  --fl718-mob-film-amber:   #c8913a;
  --fl718-mob-digital-cool: #6e8fa8;
  /* Chapter tones */
  --fl718-mob-ch1-tone: #2c2a26;
  --fl718-mob-ch2-tone: #252422;
  --fl718-mob-ch3-tone: #2a2723;
  --fl718-mob-ch4-tone: #242328;
  --fl718-mob-ch5-tone: #1a1814;
  --fl718-mob-ch1-wash: rgba(195,120,40,0.52);
  --fl718-mob-ch2-wash: rgba(55,115,150,0.48);
  --fl718-mob-ch3-wash: rgba(200,155,30,0.50);
  --fl718-mob-ch4-wash: rgba(80,105,140,0.45);
  --fl718-mob-ch5-wash: rgba(200,60,48,0.55);
  /* Poetry Machine — water palette */
  --fl718-mob-water-deep:   #0d1018;
  --fl718-mob-water-mid:    #141820;
  --fl718-mob-ripple-color: rgba(180, 200, 220, 0.50);
  --fl718-mob-stone-color:  rgba(230, 220, 205, 0.92);
}

/* ── NAV BAR ── */
body.fl718-menu-active .fl718-mob-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  background: var(--fl718-mob-warm-white);
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

body.fl718-menu-active .fl718-mob-wordmark {
  font-family: 'Libre Baskerville', serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fl718-mob-ink);
  text-decoration: none;
}
body.fl718-menu-active .fl718-mob-wordmark em { color: var(--fl718-mob-red); font-style: normal; }

body.fl718-menu-active .fl718-mob-left-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.fl718-menu-active .fl718-mob-flaneur-runner {
  flex-shrink: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  opacity: 0;
}

body.fl718-menu-active .fl718-mob-flaneur-runner img {
  height: 116px;
  width: auto;
  display: block;
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-flaneur-runner { transition: none; }
}

body.fl718-menu-active .fl718-mob-burger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body.fl718-menu-active .fl718-mob-burger-line {
  width: 22px; height: 1.5px;
  background: var(--fl718-mob-ink);
  display: block;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

body.fl718-menu-active .fl718-mob-burger.is-open .fl718-mob-burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.fl718-menu-active .fl718-mob-burger.is-open .fl718-mob-burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.fl718-menu-active .fl718-mob-burger.is-open .fl718-mob-burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-burger-line { transition: none; }
}

/* ── OVERLAY ── */
body.fl718-menu-active .fl718-mob-overlay {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: var(--fl718-mob-warm-white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
}

/* ── SECTION TABS ── */
body.fl718-menu-active .fl718-mob-tabs {
  display: flex;
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  background: var(--fl718-mob-warm-white);
  position: sticky;
  top: 0;
  z-index: 10;
}

body.fl718-menu-active .fl718-mob-tab {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl718-mob-gray-mid);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  border-right: 1px solid var(--fl718-mob-panel-border);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

body.fl718-menu-active .fl718-mob-tab:last-child { border-right: none; }
body.fl718-menu-active .fl718-mob-tab.is-active { color: var(--fl718-mob-ink); border-bottom-color: var(--fl718-mob-red); }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-tab { transition: none; }
}

body.fl718-menu-active .fl718-mob-panel { display: none; }
body.fl718-menu-active .fl718-mob-panel.is-active { display: block; }

/* ── CONTACT SHEET HEADER (tappable accordion) ── */
body.fl718-menu-active .fl718-mob-sheet-header {
  background: var(--fl718-mob-ink);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

body.fl718-menu-active .fl718-mob-sheet-header-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

body.fl718-menu-active .fl718-mob-sheet-header-label::before {
  content: '';
  display: block;
  width: 12px; height: 1px;
  background: var(--fl718-mob-red);
  flex-shrink: 0;
}

body.fl718-menu-active .fl718-mob-sheet-chevron {
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}

body.fl718-menu-active .fl718-mob-sheet-header.is-open .fl718-mob-sheet-chevron { transform: rotate(180deg); }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-sheet-chevron { transition: none; }
}

body.fl718-menu-active .fl718-mob-accordion-body {
  height: 0;
  overflow: hidden;
}

/* ──────────────────────────────────────────────
   PHOTOGRAPHY PANEL
   ────────────────────────────────────────────── */

/* ── FORMAT SECTION — Split-Panel + 6-Blade Iris ── */
body.fl718-menu-active .fl718-mob-iris-section {
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  overflow: hidden;
}

body.fl718-menu-active .fl718-mob-format-split {
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: 220px;
}

/* Left panel — Film */
body.fl718-menu-active .fl718-mob-split-film {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0 20px 18px;
  background: var(--fl718-mob-panel-bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
body.fl718-menu-active .fl718-mob-split-film.is-active { background: rgba(200,145,58,0.08); }

/* Right panel — Digital */
body.fl718-menu-active .fl718-mob-split-digital {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 20px 18px 20px 0;
  background: var(--fl718-mob-panel-bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
body.fl718-menu-active .fl718-mob-split-digital.is-active { background: rgba(110,143,168,0.08); }

body.fl718-menu-active .fl718-mob-panel-wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
body.fl718-menu-active .fl718-mob-split-film .fl718-mob-panel-wash    { background: rgba(200,145,58,0.12); }
body.fl718-menu-active .fl718-mob-split-digital .fl718-mob-panel-wash { background: rgba(110,143,168,0.12); }

body.fl718-menu-active .fl718-mob-split-label {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--fl718-mob-ink);
  line-height: 1;
  display: block;
  position: relative; z-index: 2;
  transition: color 0.35s ease;
}
body.fl718-menu-active .fl718-mob-split-sub {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl718-mob-gray-mid);
  display: block;
  margin-top: 5px;
  position: relative; z-index: 2;
}
body.fl718-menu-active .fl718-mob-split-fstop {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 6px;
  opacity: 0;
  position: relative; z-index: 2;
  transition: color 0.3s ease;
}
body.fl718-menu-active .fl718-mob-split-film.is-active    .fl718-mob-split-label  { color: var(--fl718-mob-film-amber); }
body.fl718-menu-active .fl718-mob-split-film.is-active    .fl718-mob-split-fstop  { opacity: 1; color: var(--fl718-mob-film-amber); }
body.fl718-menu-active .fl718-mob-split-digital.is-active .fl718-mob-split-label  { color: var(--fl718-mob-digital-cool); }
body.fl718-menu-active .fl718-mob-split-digital.is-active .fl718-mob-split-fstop  { opacity: 1; color: var(--fl718-mob-digital-cool); }

body.fl718-menu-active .fl718-mob-iris-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}
body.fl718-menu-active .fl718-mob-iris-svg {
  width: 120px; height: 120px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

body.fl718-menu-active .fl718-mob-format-bar {
  height: 32px;
  background: var(--fl718-mob-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
body.fl718-menu-active .fl718-mob-format-bar-text {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
body.fl718-menu-active .fl718-mob-format-bar-fstop {
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  transition: color 0.4s ease;
}
body.fl718-menu-active .fl718-mob-format-bar-fstop.film-mode    { color: var(--fl718-mob-film-amber); }
body.fl718-menu-active .fl718-mob-format-bar-fstop.digital-mode { color: var(--fl718-mob-digital-cool); }
body.fl718-menu-active .fl718-mob-format-bar-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }

body.fl718-menu-active .fl718-mob-split-caption {
  position: absolute;
  bottom: 18px;
  font-family: 'Courier Prime', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--fl718-mob-gray-mid);
  white-space: nowrap;
  pointer-events: none;
  z-index: 12;
}
body.fl718-menu-active #fl718mobFmtFilmCaption    { left: 18px; color: var(--fl718-mob-film-amber); }
body.fl718-menu-active #fl718mobFmtDigitalCaption { right: 18px; color: var(--fl718-mob-digital-cool); }

body.fl718-menu-active .fl718-mob-fmt-cursor {
  display: inline-block;
  width: 4px;
  height: 8px;
  background: currentColor;
  margin-left: 1px;
  vertical-align: text-bottom;
  opacity: 0;
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-split-film,
  body.fl718-menu-active .fl718-mob-split-digital,
  body.fl718-menu-active .fl718-mob-split-label,
  body.fl718-menu-active .fl718-mob-split-fstop,
  body.fl718-menu-active .fl718-mob-format-bar-fstop { transition: none; }
  body.fl718-menu-active .fl718-mob-fmt-cursor { display: none; }
}

/* ── FEATURED CITIES ── */
body.fl718-menu-active .fl718-mob-featured-block {
  padding: 10px 20px;
  border-bottom: 1px solid var(--fl718-mob-panel-border);
}

body.fl718-menu-active .fl718-mob-featured-no { font-family: 'Courier Prime', monospace; font-size: 8px; color: var(--fl718-mob-gray-light); display: block; margin-bottom: 2px; }

body.fl718-menu-active .fl718-mob-featured-row { display: flex; align-items: baseline; gap: 30px; }

body.fl718-menu-active .fl718-mob-featured-name { font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic; color: var(--fl718-mob-ink); text-decoration: none; line-height: 1.1; flex-shrink: 0; }

body.fl718-menu-active .fl718-mob-featured-years { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

body.fl718-menu-active .fl718-mob-featured-coord { font-family: 'Courier Prime', monospace; font-size: 8px; color: rgba(107,107,104,0.38); margin-left: 6px; }

body.fl718-menu-active .fl718-mob-year-link { font-family: 'Courier Prime', monospace; font-size: 9px; font-weight: 400; letter-spacing: 0.04em; color: var(--fl718-mob-gray-mid); text-decoration: none; padding: 3px 7px; border: 1px solid rgba(200,145,58,0.25); background: rgba(200,145,58,0.04); min-height: 44px; display: inline-flex; align-items: center; }

/* ── LOCATION LIST ── */
body.fl718-menu-active .fl718-mob-loc-group { padding: 10px 20px; border-bottom: 1px solid var(--fl718-mob-panel-border); }
body.fl718-menu-active .fl718-mob-loc-group-label { font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fl718-mob-gray-light); display: block; margin-bottom: 6px; }
body.fl718-menu-active .fl718-mob-loc-grid { display: grid; grid-template-columns: 1fr 1fr; }
body.fl718-menu-active .fl718-mob-loc-link { font-family: 'Crimson Pro', serif; font-size: 15px; color: var(--fl718-mob-gray-dark); text-decoration: none; padding: 3px 0; display: flex; align-items: baseline; justify-content: space-between; padding-right: 8px; }
body.fl718-menu-active .fl718-mob-loc-mark { font-family: 'Courier Prime', monospace; font-size: 8px; color: var(--fl718-mob-gray-light); }
body.fl718-menu-active .fl718-mob-archive-link { font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--fl718-mob-gray-mid); text-decoration: none; border-bottom: 1px solid var(--fl718-mob-panel-border); padding-bottom: 2px; }

/* ── DARKROOM DEVELOP + COORDINATE PULSE ── */
body.fl718-menu-active .fl718-mob-pulse-digit { display: inline-block; }

@keyframes fl718-mob-coord-breathe {
  0%   { color: rgba(107,107,104,0.28); }
  50%  { color: rgba(200,145,58,0.55); }
  100% { color: rgba(107,107,104,0.28); }
}
body.fl718-menu-active .fl718-mob-featured-coord.is-locked { animation: fl718-mob-coord-breathe 3.8s ease-in-out infinite; }
body.fl718-menu-active .fl718-mob-featured-coord.is-scanning { animation: none; color: rgba(200,145,58,0.7); }

@keyframes fl718-mob-mark-breathe {
  0%   { color: rgba(208,206,200,0.5); }
  50%  { color: rgba(200,145,58,0.45); }
  100% { color: rgba(208,206,200,0.5); }
}
body.fl718-menu-active .fl718-mob-loc-mark.is-locked { animation: fl718-mob-mark-breathe 4.2s ease-in-out infinite; }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-featured-coord.is-locked,
  body.fl718-menu-active .fl718-mob-featured-coord.is-scanning { animation: none !important; }
  body.fl718-menu-active .fl718-mob-loc-mark.is-locked { animation: none !important; }
}

/* ── STYLE LIST — Film Strip Pull + Gestural Mark Draw ── */
body.fl718-menu-active .fl718-mob-style-list { overflow: hidden; }
body.fl718-menu-active .fl718-mob-style-link {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0; border-bottom: 1px solid var(--fl718-mob-panel-border);
  text-decoration: none; color: var(--fl718-mob-gray-dark);
  position: relative; background: var(--fl718-mob-warm-white); overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.fl718-menu-active .fl718-mob-film-edge {
  flex-shrink: 0; width: 20px; min-height: 40px; align-self: stretch;
  background: rgba(26,24,20,0.04); border-right: 1px solid var(--fl718-mob-panel-border);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
body.fl718-menu-active .fl718-mob-film-edge::before,
body.fl718-menu-active .fl718-mob-film-edge::after {
  content: ''; display: block; width: 7px; height: 5px; border-radius: 1.5px;
  border: 1px solid rgba(180,170,155,0.45);
  box-shadow: inset 0 0 0 1px rgba(200,190,175,0.2);
}
body.fl718-menu-active .fl718-mob-frame-no {
  font-family: 'Courier Prime', monospace; font-size: 6px;
  color: rgba(180,170,155,0.45); writing-mode: vertical-rl;
  letter-spacing: 0.04em; line-height: 1; position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
}
body.fl718-menu-active .fl718-mob-style-inner { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; }
body.fl718-menu-active .fl718-mob-style-mark-wrap { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
body.fl718-menu-active .fl718-mob-style-mark-wrap svg { width: 20px; height: 20px; display: block; overflow: visible; }
body.fl718-menu-active .fl718-mob-style-mark-wrap path,
body.fl718-menu-active .fl718-mob-style-mark-wrap rect,
body.fl718-menu-active .fl718-mob-style-mark-wrap line,
body.fl718-menu-active .fl718-mob-style-mark-wrap circle,
body.fl718-menu-active .fl718-mob-style-mark-wrap ellipse { vector-effect: non-scaling-stroke; }
body.fl718-menu-active .fl718-mob-style-name { font-family: 'EB Garamond', serif; }
body.fl718-menu-active .fl718-mob-style-link--architecture .fl718-mob-style-name { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
body.fl718-menu-active .fl718-mob-style-link--street .fl718-mob-style-name { font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; font-style: italic; }
body.fl718-menu-active .fl718-mob-style-link--conceptual .fl718-mob-style-name { font-size: 16px; }
body.fl718-menu-active .fl718-mob-style-link--abstract .fl718-mob-style-name { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--fl718-mob-gray-mid); }
body.fl718-menu-active .fl718-mob-style-link--landscapes .fl718-mob-style-name { font-size: 17px; font-style: italic; }
body.fl718-menu-active .fl718-mob-style-link--portrait .fl718-mob-style-name { font-size: 16px; }
body.fl718-menu-active .fl718-mob-style-link--bw .fl718-mob-style-name { font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

body.fl718-menu-active .fl718-mob-style-row-flaneur {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   WRITING PANEL — tap-triggered animations
   ────────────────────────────────────────────── */

body.fl718-menu-active .fl718-mob-writing-entry {
  display: flex;
  align-items: stretch;
  min-height: 80px;
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.fl718-menu-active .fl718-mob-writing-no-col {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

body.fl718-menu-active .fl718-mob-writing-no {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  color: var(--fl718-mob-gray-light);
  transition: color 0.2s ease;
}

body.fl718-menu-active .fl718-mob-writing-entry.is-active .fl718-mob-writing-no { color: var(--fl718-mob-red); }

body.fl718-menu-active .fl718-mob-writing-inner {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0;
  text-decoration: none;
  color: var(--fl718-mob-ink);
}

body.fl718-menu-active .fl718-mob-writing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}

body.fl718-menu-active .fl718-mob-writing-title {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--fl718-mob-ink);
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}

body.fl718-menu-active .fl718-mob-writing-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--fl718-mob-gray-mid);
  display: block;
  line-height: 1.4;
}

body.fl718-menu-active .fl718-mob-writing-mark-zone {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 001 Photo Essays — Loupe */
body.fl718-menu-active .fl718-mob-loupe-svg {
  width: 54px; height: 54px;
  overflow: visible;
  opacity: 0;
}

/* 002 Travel Writing — Compass */
body.fl718-menu-active .fl718-mob-compass-svg {
  width: 60px; height: 60px;
  overflow: visible;
  opacity: 0;
}

/* Erasure char */
body.fl718-menu-active .fl718-mob-erasure-char { display: inline; transition: opacity 0.25s ease; }

/* Typewriter key — Poetry mark zone */
body.fl718-menu-active .fl718-mob-key-outer { opacity: 0; }
body.fl718-menu-active .fl718-mob-key-inner { width: 36px; height: 36px; position: relative; }
body.fl718-menu-active .fl718-mob-key-cap {
  width: 36px; height: 36px;
  background: #e8e3da;
  border: 1px solid #b8b0a0;
  border-radius: 3px;
  box-shadow: 0 2px 0 #a09888, 0 3px 6px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
body.fl718-menu-active .fl718-mob-key-cap::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 2px;
  border: 0.5px solid rgba(255,255,255,0.5);
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 60%);
}
body.fl718-menu-active .fl718-mob-key-letter {
  font-family: 'Courier Prime', monospace;
  font-size: 16px; font-weight: 700;
  color: #3a3228; line-height: 1;
  position: relative; z-index: 1;
}
body.fl718-menu-active .fl718-mob-key-impression {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(180,60,30,0.18);
  opacity: 0; transform: scale(0.7);
}

body.fl718-menu-active .fl718-mob-key-smear {
  position: absolute;
  top: calc(50% - 1.25px);
  right: 18px;
  height: 2.5px;
  width: 0px;
  background: linear-gradient(270deg, rgba(58,50,40,0.28) 0%, rgba(58,50,40,0.12) 60%, transparent 100%);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform-origin: right center;
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-mob-erasure-char { transition: none; }
}

/* ──────────────────────────────────────────────
   ABOUT ME PANEL — chapter frames swipeable strip
   ────────────────────────────────────────────── */

body.fl718-menu-active .fl718-mob-bio-row {
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  text-decoration: none;
  color: var(--fl718-mob-ink);
  display: block;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

body.fl718-menu-active .fl718-mob-bio-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
}

body.fl718-menu-active .fl718-mob-bio-no { font-family: 'DM Sans', sans-serif; font-size: 9px; color: var(--fl718-mob-gray-light); width: 24px; flex-shrink: 0; }

body.fl718-menu-active .fl718-mob-bio-body { flex: 1; }
body.fl718-menu-active .fl718-mob-bio-eyebrow { font-family: 'Courier Prime', monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl718-mob-gray-mid); display: block; margin-bottom: 5px; }

body.fl718-menu-active .fl718-mob-bio-name { font-family: 'Lora', serif; font-size: 20px; color: var(--fl718-mob-ink); display: block; }

body.fl718-menu-active .fl718-mob-bio-sub { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 300; color: var(--fl718-mob-gray-mid); display: block; margin-top: 3px; }

body.fl718-menu-active .fl718-mob-chapters-strip-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px 14px;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
body.fl718-menu-active .fl718-mob-chapters-strip-wrap.is-expanded {
  height: auto;
  overflow-x: auto;
  opacity: 1;
}
body.fl718-menu-active .fl718-mob-chapters-strip-wrap::-webkit-scrollbar { display: none; }

body.fl718-menu-active .fl718-mob-chapters-strip {
  display: flex;
  gap: 6px;
  width: max-content;
}

body.fl718-menu-active .fl718-mob-chapter-frame {
  width: 72px;
  height: 88px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 300px;
  opacity: 0;
}

body.fl718-menu-active .fl718-mob-frame-card {
  width: 100%; height: 100%; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 8px 8px; overflow: hidden;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.fl718-menu-active .fl718-mob-frame-card::before,
body.fl718-menu-active .fl718-mob-frame-card::after {
  content: ''; position: absolute; left: 0; right: 0; height: 5px;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 6px, rgba(255,255,255,0.07) 6px, rgba(255,255,255,0.07) 12px);
  z-index: 10; pointer-events: none;
}
body.fl718-menu-active .fl718-mob-frame-card::before { top: 0; }
body.fl718-menu-active .fl718-mob-frame-card::after  { bottom: 0; }

body.fl718-menu-active .fl718-mob-chapter-frame--ch1 .fl718-mob-frame-card { background: var(--fl718-mob-ch1-tone); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch2 .fl718-mob-frame-card { background: var(--fl718-mob-ch2-tone); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch3 .fl718-mob-frame-card { background: var(--fl718-mob-ch3-tone); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch4 .fl718-mob-frame-card { background: var(--fl718-mob-ch4-tone); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch5 .fl718-mob-frame-card { background: var(--fl718-mob-ch5-tone); }

body.fl718-menu-active .fl718-mob-ch-wash {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 1;
}

body.fl718-menu-active .fl718-mob-chapter-frame--ch1 .fl718-mob-ch-wash { background: var(--fl718-mob-ch1-wash); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch2 .fl718-mob-ch-wash { background: var(--fl718-mob-ch2-wash); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch3 .fl718-mob-ch-wash { background: var(--fl718-mob-ch3-wash); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch4 .fl718-mob-ch-wash { background: var(--fl718-mob-ch4-wash); }
body.fl718-menu-active .fl718-mob-chapter-frame--ch5 .fl718-mob-ch-wash { background: var(--fl718-mob-ch5-wash); }

body.fl718-menu-active .fl718-mob-ch-frame-no {
  font-family: 'Courier Prime', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
  display: block;
  position: relative;
  z-index: 2;
}

body.fl718-menu-active .fl718-mob-ch-roman {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 2;
}

body.fl718-menu-active .fl718-mob-ch-title {
  font-family: 'Courier Prime', monospace;
  font-size: 7.5px;
  color: rgba(255,255,255,0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  display: block;
  z-index: 2;
  position: relative;
  line-height: 1.3;
}

body.fl718-menu-active .fl718-mob-ch-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

body.fl718-menu-active .fl718-mob-bio-develop-bath {
  position: absolute;
  inset: 0;
  background: var(--fl718-mob-ink);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

body.fl718-menu-active .fl718-mob-flap-char {
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
}
body.fl718-menu-active .fl718-mob-flap-char--space { min-width: 0.32em; text-align: left; }

body.fl718-menu-active .fl718-mob-strip-hint {
  display: none; align-items: center; gap: 6px;
  padding: 4px 20px 12px;
  opacity: 0;
}
body.fl718-menu-active .fl718-mob-chapters-strip-wrap.is-expanded ~ .fl718-mob-strip-hint { display: flex; }
body.fl718-menu-active .fl718-mob-strip-hint-line { flex: 1; height: 1px; background: var(--fl718-mob-panel-border); }
body.fl718-menu-active .fl718-mob-strip-hint-text {
  font-family: 'Courier Prime', monospace; font-size: 8px;
  color: var(--fl718-mob-gray-light); letter-spacing: 0.08em; white-space: nowrap;
}
body.fl718-menu-active .fl718-mob-strip-hint-arrow { font-size: 10px; color: var(--fl718-mob-red); }

/* Other About items */
body.fl718-menu-active .fl718-mob-about-entry {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--fl718-mob-panel-border);
  text-decoration: none;
  color: var(--fl718-mob-ink);
}

body.fl718-menu-active .fl718-mob-about-no { font-family: 'DM Sans', sans-serif; font-size: 9px; color: var(--fl718-mob-gray-light); width: 24px; flex-shrink: 0; }
body.fl718-menu-active .fl718-mob-about-body { flex: 1; }
body.fl718-menu-active .fl718-mob-about-eyebrow { font-family: 'Courier Prime', monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl718-mob-gray-mid); display: block; margin-bottom: 5px; }
body.fl718-menu-active .fl718-mob-about-name { display: block; }
body.fl718-menu-active .fl718-mob-about--nook .fl718-mob-about-name { font-family: 'Courier Prime', monospace; font-size: 20px; color: var(--fl718-mob-ink); }
body.fl718-menu-active .fl718-mob-about--poetry .fl718-mob-about-name { font-family: 'IM Fell English', serif; font-size: 20px; font-style: italic; color: var(--fl718-mob-gray-dark); }
body.fl718-menu-active .fl718-mob-about-sub { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 300; color: var(--fl718-mob-gray-mid); display: block; margin-top: 3px; }

/* ── POETRY MACHINE ROW — Stone Skip Animation ── */
body.fl718-menu-active .fl718-mob-about--poetry { position: relative; overflow: hidden; min-height: 88px; cursor: pointer; transition: min-height 0.5s ease; }
body.fl718-menu-active .fl718-mob-about--poetry.is-playing { min-height: 140px; }
body.fl718-menu-active .fl718-mob-poetry-water { position: absolute; inset: 0; background: var(--fl718-mob-water-deep); opacity: 0; pointer-events: none; z-index: 1; }
body.fl718-menu-active .fl718-mob-poetry-water-sheen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,50,0) 0%, rgba(30,50,80,0.12) 50%, rgba(10,15,25,0.08) 100%); opacity: 0; pointer-events: none; z-index: 2; }
body.fl718-menu-active .fl718-mob-poetry-horizon { position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(150,180,210,0.15) 20%, rgba(150,180,210,0.28) 50%, rgba(150,180,210,0.15) 80%, transparent 100%); opacity: 0; pointer-events: none; z-index: 3; }
body.fl718-menu-active .fl718-mob-stone-outer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; opacity: 0; }
body.fl718-menu-active .fl718-mob-stone-word { font-family: 'EB Garamond', serif; font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fl718-mob-stone-color); white-space: nowrap; display: block; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
body.fl718-menu-active .fl718-mob-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 4; opacity: 0; }
body.fl718-menu-active .fl718-mob-ripple-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--fl718-mob-ripple-color); opacity: 0; }
body.fl718-menu-active .fl718-mob-poetry-static { position: relative; z-index: 0; display: flex; align-items: center; gap: 16px; width: 100%; }
body.fl718-menu-active .fl718-mob-poetry-settled { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; opacity: 0; }
body.fl718-menu-active .fl718-mob-poetry-settled-text { font-family: 'EB Garamond', serif; font-size: 11px; font-style: italic; letter-spacing: 0.10em; color: rgba(200,185,160,0.70); text-align: center; }
body.fl718-menu-active .fl718-mob-poetry-ancient { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
body.fl718-menu-active .fl718-mob-poetry-ancient-char { position: absolute; opacity: 0; line-height: 1; user-select: none; }
body.fl718-menu-active .fl718-mob-poetry-flash-white { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #ffffff; pointer-events: none; z-index: 30; }
body.fl718-menu-active .fl718-mob-poetry-flash-black { position: absolute; inset: 0; background: #000000; opacity: 0; pointer-events: none; z-index: 40; }
body.fl718-menu-active .fl718-mob-poetry-ghost {
  position: absolute; top: 50%; left: 0; width: 100%;
  transform: translateY(-50%); text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: clamp(36px, 10vw, 56px);
  font-weight: 400; font-style: italic;
  letter-spacing: 0.04em; color: #c44536;
  opacity: 0; pointer-events: none;
  white-space: nowrap; line-height: 1;
  user-select: none; z-index: 8;
}
body.fl718-menu-active .fl718-mob-poetry-ghost.fl718-mob-poetry-ghost--exposed { z-index: 50; }
body.fl718-menu-active .fl718-mob-about-arrow { flex-shrink: 0; display: flex; align-items: center; margin-right: 8px; }
body.fl718-menu-active #fl718mobNookArrow { margin-right: 19px; }
body.fl718-menu-active .fl718-mob-about--poetry .fl718-mob-about-arrow { margin-right: 15px; }

/* ── NOOK NOOK ROW ── */
body.fl718-menu-active .fl718-mob-about--nook {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  flex-wrap: wrap;
}
body.fl718-menu-active .fl718-mob-nook-mat {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 88px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
body.fl718-menu-active .fl718-mob-nook-trail-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 3;
}
body.fl718-menu-active .fl718-mob-nook-plane-wrap {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
body.fl718-menu-active .fl718-mob-nook-plane-img {
  width: 72px;
  height: auto;
  display: block;
}
body.fl718-menu-active .fl718-mob-nook-eq-wrap {
  flex: 0 0 100%;
  padding: 0 20px 14px 60px;
  overflow: hidden;
}
body.fl718-menu-active .fl718-mob-nook-eq {
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  color: var(--fl718-mob-film-amber);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
}
body.fl718-menu-active .fl718-mob-nook-dust {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(180, 155, 110, 0.6);
  pointer-events: none;
  z-index: 5;
}

/* ── Page body offset (accounts for fixed nav bar) ── */
body.fl718-menu-active .fl718-mob-page-body { padding-top: 52px; }

} /* end @media (max-width: 767px) */