/**
 * Flaneur 718 — Desktop Menu
 * Source: Menu/menu-desktop-index.html
 *
 * Scoped to body.fl718-menu-active (added globally via functions.php body_class filter).
 * The menu appears on every page, so this stylesheet loads globally.
 *
 * CSS prefixes: fl718-walk-, fl718-fai-, fl718-abio-cs-, fl718-nook-, fl718-pm-
 */

/* ── ZERO-SPECIFICITY RESET — scoped to menu elements only ── */
:where(body.fl718-menu-active) .fl718-walk-header *,
:where(body.fl718-menu-active) .fl718-walk-backdrop,
:where(body.fl718-menu-active) .fl718-walk-panel-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS CUSTOM PROPERTIES ── */
body.fl718-menu-active {
  --fl718-ink:          #1a1814;
  --fl718-warm-white:   #fafaf7;
  --fl718-red:          #c44536;
  --fl718-gray-dark:    #3a3a38;
  --fl718-gray-mid:     #6b6b68;
  --fl718-gray-light:   #d0cec8;
  --fl718-panel-bg:     #f5f3ee;
  --fl718-panel-border: #d4d2cc;
  --fl718-coord-color:  rgba(107,107,104,0.38);
  --fl718-film-amber:   #c8913a;
  --fl718-digital-cool: #6e8fa8;
  /* Biography contact sheet chapter tones */
  --fl718-ch1-tone:  #2c2a26;
  --fl718-ch2-tone:  #252422;
  --fl718-ch3-tone:  #2a2723;
  --fl718-ch4-tone:  #242328;
  --fl718-ch5-tone:  #1a1814;
  /* Chapter emotional color washes */
  --fl718-ch1-wash:  rgba(180, 110, 50, 0.38);
  --fl718-ch2-wash:  rgba(65, 105, 130, 0.35);
  --fl718-ch3-wash:  rgba(185, 148, 42, 0.36);
  --fl718-ch4-wash:  rgba(88, 100, 118, 0.32);
  --fl718-ch5-wash:  rgba(196, 69, 54, 0.42);
}

/* ─── HEADER / NAV BAR ─── */
body.fl718-menu-active .fl718-walk-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--fl718-warm-white);
  border-bottom: 1px solid var(--fl718-panel-border);
}

/* ─── BUG-082: PARK THE BAR ON THE FIRST PAINT ─────────────────────────────
   BUG-080 changed the arrival so the nav bar never appears — but it did so in
   JS, inside a double-rAF after measureNav() resolves. The browser therefore
   painted the bar in its normal position and JS corrected it ~340ms later.
   Measured live on /santa-fe/ (rAF-polled from navigation commit): visible at
   292/315/323ms, parked at 337ms. **That correction WAS the flash** — a third
   of a second of the old behaviour on every page load, longer on a slow
   connection. Reported by Seamus on a fresh Chrome, so it was never cache.

   The arrival state has to be correct on the FIRST PAINT, so it belongs here
   rather than in JS. JS then takes over from this state instead of fixing it.

   THE GUARD CLASS IS MENU-OWNED, AND THAT IS DELIBERATE.
   The site's usual no-JS hook is `body:not(.fl718-js-loaded)`. It does NOT work
   here. Measured: `fl718-js-loaded` is added by the PAGE's own JS at 403ms,
   while the MENU script parks the bar at 429ms — 26ms later. A
   :not(.fl718-js-loaded) guard would therefore stop applying BEFORE JS had
   taken control of the transform, reintroducing a smaller flash. The guard must
   be a class the menu script itself sets at the moment it parks the bar.

   -59px matches the JS park exactly: -(navH + 2), navH measured 57.
   The header is position:fixed, so this cannot disturb document flow, and a
   transform does not change getBoundingClientRect().height — measureNav() still
   reads 57 and navH still resolves for dropCurtain()'s return journey.

   NO-JS SAFETY: if the menu script never runs, `fl718-menu-arrival-ready` is
   never added and the bar stays parked. `fl718-menu-recall-scrim-v2.css` hides
   the legacy glyph unconditionally, so a no-JS visitor would have no menu at
   all. `.no-js` is therefore excluded below — WordPress/GeneratePress does not
   set it, so this is a belt-and-braces escape hatch, not a live path.
   ────────────────────────────────────────────────────────────────────────── */
/* SCOPED TO .fl718-menu-curtain, NOT .fl718-menu-active — this matters.
   `fl718-menu-active` is GLOBAL (functions.php:417, the menu appears on every
   page). Parking on it meant the homepage, /legal/ and /privacy/ also parked the
   bar — and having no `-menu-v3.js` to add `fl718-menu-arrival-ready`, they never
   un-parked it. The menu vanished entirely on those three. Seamus reported it on
   the homepage the same day this shipped.

   `fl718-menu-curtain` is added only for pages in fl718_menu_recall_scrim_pages(),
   the existing canonical list of curtain pages, so the two cannot drift. */
html:not(.no-js) body.fl718-menu-curtain:not(.fl718-menu-arrival-ready) .fl718-walk-header {
  transform: translateY(-59px);
}

/* BUG-098 — the MOBILE bar needs the same first-paint park as the desktop bar
   above. BUG-082 listed only `.fl718-walk-header`, so `.fl718-mob-nav` painted
   at top:0 until the menu script parked it, on some loads (a flash of the
   retracted bar). A JS-applied park only proves out on the viewport it was
   measured on; the sibling element on the other viewport has to be listed too.

   Same menu-owned guard class (`fl718-menu-arrival-ready`, set by each
   `-menu-v3.js` at the moment it takes over the transform) and same scope
   (`fl718-menu-curtain`), so the two bars cannot drift apart.

   calc(-100% - 2px) equals the JS park -(navH + 2): -54 on the 52px bar.
   `scripting: enabled` keeps the bar visible with JS off, where the guard class
   would never be added. `visibility: hidden` is belt-and-braces so the parked
   bar cannot paint even if a transform is dropped. `.fl718-mob-nav` is
   display:none at 768px and above, so this is inert on desktop. */
@media (scripting: enabled) {
html:not(.no-js) body.fl718-menu-curtain:not(.fl718-menu-arrival-ready) .fl718-mob-nav {
  transform: translateY(calc(-100% - 2px));
  visibility: hidden;
}
}

/* Reduced motion: BUG-081 gives these visitors the same parked end state, just
   without the tween. The park must not animate when JS later re-sets it. */
@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-walk-header { transition: none; }
}

/* Push header below WP admin bar when logged in */
.admin-bar body.fl718-menu-active .fl718-walk-header {
  top: 32px;
}
.admin-bar body.fl718-menu-active .fl718-walk-backdrop,
.admin-bar body.fl718-menu-active .fl718-walk-panel-container {
  top: calc(32px + 56px);
}
@media screen and (max-width: 782px) {
  .admin-bar body.fl718-menu-active .fl718-walk-header { top: 46px; }
  .admin-bar body.fl718-menu-active .fl718-walk-backdrop,
  .admin-bar body.fl718-menu-active .fl718-walk-panel-container { top: calc(46px + 56px); }
}

body.fl718-menu-active .fl718-walk-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 56px;
  padding: 0 48px;
}

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

body.fl718-menu-active .fl718-walk-flaneur {
  display: flex;
  align-items: center;
  pointer-events: none;
  height: 44px;
  overflow: hidden;
  opacity: 0; /* GSAP reveals on load */
}

body.fl718-menu-active .fl718-walk-flaneur img {
  height: 132px;
  width: auto;
  margin-top: 4px;
  display: block;
}

body.fl718-menu-active .fl718-walk-wordmark {
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fl718-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
}

body.fl718-menu-active .fl718-walk-wordmark em {
  color: var(--fl718-red);
  font-style: normal;
}

/* ─── PRIMARY NAV ITEMS ─── */
body.fl718-menu-active .fl718-walk-primary {
  display: flex;
  align-items: stretch;
}

body.fl718-menu-active .fl718-walk-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 28px;
  cursor: pointer;
  border-left: 1px solid var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-nav-item:last-child {
  border-right: 1px solid var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-nav-item[data-menu="writing"] {
  padding: 0 44px;
}

body.fl718-menu-active .fl718-walk-nav-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl718-gray-dark);
  transition: color 0.2s ease;
  white-space: nowrap;
}

body.fl718-menu-active .fl718-walk-nav-item:hover .fl718-walk-nav-label,
body.fl718-menu-active .fl718-walk-nav-item.is-open .fl718-walk-nav-label {
  color: var(--fl718-ink);
}

body.fl718-menu-active .fl718-walk-nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28px; right: 28px;
  height: 2px;
  background: var(--fl718-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

body.fl718-menu-active .fl718-walk-nav-item.is-open::after,
body.fl718-menu-active .fl718-walk-nav-item:hover::after {
  transform: scaleX(1);
}

/* ─── PANEL BACKDROP ─── */
body.fl718-menu-active .fl718-walk-backdrop {
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  background: rgba(20,20,18,0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity 0.25s ease;
}

body.fl718-menu-active .fl718-walk-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ─── PANEL CONTAINER ─── */
body.fl718-menu-active .fl718-walk-panel-container {
  position: fixed;
  top: 56px; left: 0; right: 0;
  z-index: 95;
  pointer-events: none;
}

body.fl718-menu-active .fl718-walk-panel {
  background: var(--fl718-panel-bg);
  border-bottom: 1px solid var(--fl718-panel-border);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
}

body.fl718-menu-active .fl718-walk-panel.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ─── PHOTOGRAPHY PANEL: Walking Contact Sheet ─── */
body.fl718-menu-active .fl718-walk-sheet {
  display: grid;
  grid-template-columns: 1fr 230px 40px 280px;
  border-top: 3px solid var(--fl718-ink);
  position: relative;
}

body.fl718-menu-active .fl718-walk-sheet-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 230px 40px 280px;
  background: var(--fl718-ink);
  padding: 6px 0;
}

body.fl718-menu-active .fl718-walk-col-hd {
  padding: 0 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

body.fl718-menu-active .fl718-walk-col-hd::before {
  content: '';
  display: block;
  width: 16px; height: 1px;
  background: var(--fl718-red);
  flex-shrink: 0;
}

/* ─── LOCATION COLUMN ─── */
body.fl718-menu-active .fl718-walk-loc-col {
  padding: 12px 32px 24px;
  border-right: 1px solid var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-featured-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-featured-two-col .fl718-walk-loc-featured-block:first-child {
  border-right: 1px solid var(--fl718-panel-border);
  padding-right: 24px;
}

body.fl718-menu-active .fl718-walk-featured-two-col .fl718-walk-loc-featured-block:nth-child(2) {
  padding-left: 24px;
}

body.fl718-menu-active .fl718-walk-frame-no {
  font-family: 'Roboto Slab', serif;
  font-size: 8px;
  font-weight: 300;
  color: var(--fl718-gray-light);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  display: block;
}

body.fl718-menu-active .fl718-walk-featured-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--fl718-ink);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: color 0.2s ease;
  line-height: 1.1;
}

body.fl718-menu-active .fl718-walk-featured-name:hover {
  color: var(--fl718-red);
}

body.fl718-menu-active .fl718-walk-coord {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  color: var(--fl718-coord-color);
  letter-spacing: 0.04em;
  user-select: none;
  flex-shrink: 0;
  margin-right: 2px;
}

body.fl718-menu-active .fl718-walk-year-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

body.fl718-menu-active .fl718-walk-year-link {
  font-family: 'Roboto Slab', serif;
  font-size: 9px;
  font-weight: 300;
  color: var(--fl718-gray-mid);
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.04em;
}

body.fl718-menu-active .fl718-walk-year-link:hover {
  color: var(--fl718-red);
}

body.fl718-menu-active .fl718-walk-loc-section {
  margin-bottom: 8px;
}

body.fl718-menu-active .fl718-walk-loc-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fl718-gray-light);
  margin-bottom: 5px;
  display: block;
}

body.fl718-menu-active .fl718-walk-loc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

body.fl718-menu-active .fl718-walk-loc-link {
  font-family: 'Crimson Pro', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--fl718-gray-dark);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 0;
  line-height: 1.2;
  transition: color 0.18s ease, padding-left 0.15s ease;
}

body.fl718-menu-active .fl718-walk-loc-link:hover {
  color: var(--fl718-red);
  padding-left: 5px;
}

body.fl718-menu-active .fl718-walk-loc-mark {
  font-family: 'Roboto Slab', serif;
  font-size: 8px;
  font-weight: 300;
  color: var(--fl718-gray-light);
  letter-spacing: 0.04em;
  margin-left: 6px;
  flex-shrink: 0;
  user-select: none;
}

/* Two archive eras sit side by side — the location column has more room
   horizontally than vertically. Wraps if the column ever narrows. */
body.fl718-menu-active .fl718-walk-loc-archive-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

body.fl718-menu-active .fl718-walk-loc-archive-link {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fl718-gray-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.18s ease;
  border-bottom: 1px solid var(--fl718-panel-border);
  padding-bottom: 2px;
}

body.fl718-menu-active .fl718-walk-loc-archive-link:hover {
  color: var(--fl718-gray-dark);
  border-bottom-color: var(--fl718-gray-mid);
}

body.fl718-menu-active .fl718-walk-loc-archive-arrow {
  font-size: 11px;
  transition: transform 0.18s ease;
  display: inline-block;
}

body.fl718-menu-active .fl718-walk-loc-archive-link:hover .fl718-walk-loc-archive-arrow {
  transform: translateX(3px);
}

body.fl718-menu-active .fl718-walk-loc-sub-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--fl718-gray-light);
  text-decoration: none;
  display: block;
  line-height: 1.9;
  padding-left: 12px;
  transition: color 0.2s ease;
}

body.fl718-menu-active .fl718-walk-loc-sub-link:hover {
  color: var(--fl718-gray-mid);
}

/* ─── STYLE COLUMN ─── */
body.fl718-menu-active .fl718-walk-style-col {
  padding: 0;
  border-right: 1px solid var(--fl718-panel-border);
  display: flex;
  flex-direction: column;
}

body.fl718-menu-active .fl718-walk-style-link {
  text-decoration: none;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  border-bottom: 1px solid var(--fl718-panel-border);
  background-color: transparent;
  transition: background-color 0.28s ease, color 0.22s ease;
  color: var(--fl718-gray-dark);
  position: relative;
  overflow: hidden;
}

body.fl718-menu-active .fl718-walk-style-link:first-child {
  border-top: 1px solid var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-style-link:hover {
  background-color: rgba(0, 0, 0, 0.045);
  color: var(--fl718-ink);
}

body.fl718-menu-active .fl718-walk-style-link.neighbor-glow {
  background-color: rgba(200, 145, 58, 0.04);
}

body.fl718-menu-active .fl718-walk-style-mark {
  flex-shrink: 0;
  width: 20px;
  opacity: 0.25;
  color: var(--fl718-gray-dark);
  transition: opacity 0.26s ease, color 0.26s ease;
}

body.fl718-menu-active .fl718-walk-style-link:hover .fl718-walk-style-mark {
  opacity: 1;
  color: var(--fl718-film-amber);
}

body.fl718-menu-active .fl718-walk-row-flaneur {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.fl718-menu-active .fl718-walk-style-link:hover .fl718-walk-row-flaneur {
  opacity: 1;
}

body.fl718-menu-active .fl718-walk-style-name {
  font-family: 'EB Garamond', serif;
  line-height: 1;
  white-space: nowrap;
  transition: text-shadow 0.3s ease;
}

body.fl718-menu-active .fl718-walk-style-link:hover .fl718-walk-style-name {
  text-shadow: 0 0 20px rgba(200, 145, 58, 0.45);
}

/* Style variants */
body.fl718-menu-active .fl718-walk-style-link--architecture .fl718-walk-style-name {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.fl718-menu-active .fl718-walk-style-link--street .fl718-walk-style-name {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
}

body.fl718-menu-active .fl718-walk-style-link--conceptual .fl718-walk-style-name {
  font-size: 16px;
  letter-spacing: 0.04em;
}

body.fl718-menu-active .fl718-walk-style-link--abstract .fl718-walk-style-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fl718-gray-mid);
}

body.fl718-menu-active .fl718-walk-style-link--landscapes .fl718-walk-style-name {
  font-size: 18px;
  font-style: italic;
}

body.fl718-menu-active .fl718-walk-style-link--portrait .fl718-walk-style-name {
  font-size: 17px;
}

body.fl718-menu-active .fl718-walk-style-link--bw .fl718-walk-style-name {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.fl718-menu-active .fl718-walk-style-link--bw:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

body.fl718-menu-active .fl718-walk-style-link--bw:hover .fl718-walk-style-mark {
  color: var(--fl718-ink);
}

body.fl718-menu-active .fl718-walk-style-link--bw:hover .fl718-walk-style-name {
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-walk-style-link,
  body.fl718-menu-active .fl718-walk-style-mark,
  body.fl718-menu-active .fl718-walk-row-flaneur,
  body.fl718-menu-active .fl718-walk-style-name {
    transition: none;
  }
}

/* ─── FORMAT COLUMN — Split-Panel Aperture Iris ─── */
body.fl718-menu-active .fl718-walk-format-col {
  padding: 0;
  margin-left: -40px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.fl718-menu-active .fl718-fai-iris-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--fl718-panel-border);
  overflow: hidden;
}

body.fl718-menu-active .fl718-fai-format-split {
  flex: 1;
  display: flex;
  align-items: stretch;
  position: relative;
}

body.fl718-menu-active .fl718-fai-split-film {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 0 28px 24px;
  background: var(--fl718-panel-bg);
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
body.fl718-menu-active .fl718-fai-split-film.is-active { background: rgba(200,145,58,0.08); }

body.fl718-menu-active .fl718-fai-split-digital {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 28px 24px 28px 0;
  background: var(--fl718-panel-bg);
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
body.fl718-menu-active .fl718-fai-split-digital.is-active { background: rgba(110,143,168,0.08); }

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

body.fl718-menu-active .fl718-fai-split-label {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 30px;
  color: var(--fl718-ink);
  line-height: 1;
  display: block;
  position: relative; z-index: 2;
  transition: color 0.35s ease;
}
body.fl718-menu-active .fl718-fai-split-sub {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl718-gray-mid);
  display: block;
  margin-top: 7px;
  position: relative; z-index: 2;
  transition: color 0.35s ease;
}
body.fl718-menu-active .fl718-fai-split-fstop {
  font-family: 'Courier Prime', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 8px;
  opacity: 0;
  position: relative; z-index: 2;
  transition: color 0.3s ease;
}
body.fl718-menu-active .fl718-fai-split-film.is-active    .fl718-fai-split-label  { color: var(--fl718-film-amber); }
body.fl718-menu-active .fl718-fai-split-film.is-active    .fl718-fai-split-sub    { color: rgba(200,145,58,0.7); }
body.fl718-menu-active .fl718-fai-split-film.is-active    .fl718-fai-split-fstop  { opacity: 1; color: var(--fl718-film-amber); }
body.fl718-menu-active .fl718-fai-split-digital.is-active .fl718-fai-split-label  { color: var(--fl718-digital-cool); }
body.fl718-menu-active .fl718-fai-split-digital.is-active .fl718-fai-split-sub    { color: rgba(110,143,168,0.7); }
body.fl718-menu-active .fl718-fai-split-digital.is-active .fl718-fai-split-fstop  { opacity: 1; color: var(--fl718-digital-cool); }

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

body.fl718-menu-active .fl718-fai-format-bar {
  height: 40px;
  background: var(--fl718-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-fai-format-bar-text {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
body.fl718-menu-active .fl718-fai-format-bar-fstop {
  font-family: 'Courier Prime', monospace;
  font-size: 14px;
  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-fai-format-bar-fstop.film-mode    { color: var(--fl718-film-amber); }
body.fl718-menu-active .fl718-fai-format-bar-fstop.digital-mode { color: var(--fl718-digital-cool); }
body.fl718-menu-active .fl718-fai-format-bar-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.25); }

body.fl718-menu-active .fl718-fai-split-caption {
  position: absolute;
  bottom: 24px;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--fl718-gray-mid);
  white-space: normal;
  pointer-events: none;
  z-index: 12;
}
body.fl718-menu-active #faiFilmCaption    { left: 24px; right: calc(50% + 24px); color: var(--fl718-film-amber); }
body.fl718-menu-active #faiDigitalCaption { right: 24px; left: calc(50% + 24px); text-align: right; color: var(--fl718-digital-cool); }

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

@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-fai-split-film,
  body.fl718-menu-active .fl718-fai-split-digital,
  body.fl718-menu-active .fl718-fai-split-label,
  body.fl718-menu-active .fl718-fai-split-sub,
  body.fl718-menu-active .fl718-fai-split-fstop,
  body.fl718-menu-active .fl718-fai-format-bar-fstop { transition: none; }
  body.fl718-menu-active .fl718-fai-cursor { display: none; }
}

/* ─── WRITING PANEL ─── */
body.fl718-menu-active .fl718-walk-writing-index {
  border-top: 3px solid var(--fl718-ink);
}

body.fl718-menu-active .fl718-walk-writing-index-header {
  background: var(--fl718-ink);
  padding: 6px 0;
  display: flex;
  align-items: center;
}

body.fl718-menu-active .fl718-walk-writing-index-hd-label {
  padding: 0 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

body.fl718-menu-active .fl718-walk-writing-index-hd-label::before {
  content: '';
  display: block;
  width: 16px; height: 1px;
  background: var(--fl718-red);
  flex-shrink: 0;
}

body.fl718-menu-active .fl718-walk-writing-entry {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--fl718-panel-border);
  text-decoration: none;
  color: var(--fl718-ink);
  position: relative;
  transition: background 0.18s ease;
  overflow: hidden;
  min-height: 72px;
}

body.fl718-menu-active .fl718-walk-writing-entry:hover {
  background: rgba(26, 24, 20, 0.025);
}

body.fl718-menu-active .fl718-walk-writing-entry-no {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  font-weight: 400;
  color: var(--fl718-gray-light);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: color 0.18s ease;
}

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

body.fl718-menu-active .fl718-walk-writing-entry-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  min-width: 0;
}

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

body.fl718-menu-active .fl718-walk-writing-entry--photo-essays .fl718-walk-writing-entry-title { font-size: 30px; }
body.fl718-menu-active .fl718-walk-writing-entry--travel .fl718-walk-writing-entry-title       { font-size: 30px; }
body.fl718-menu-active .fl718-walk-writing-entry--poetry .fl718-walk-writing-entry-title       { font-size: 30px; }

body.fl718-menu-active .fl718-walk-writing-entry-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--fl718-gray-mid);
  line-height: 1.4;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

body.fl718-menu-active .fl718-walk-writing-entry:hover .fl718-walk-writing-entry-desc {
  opacity: 1;
}

body.fl718-menu-active .fl718-walk-writing-entry-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 4px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
  color: var(--fl718-red);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  pointer-events: none;
  user-select: none;
  width: 32px;
}

body.fl718-menu-active .fl718-walk-writing-entry:hover .fl718-walk-writing-entry-arrow {
  opacity: 1;
  transform: translateX(0);
}

body.fl718-menu-active .fl718-walk-writing-future {
  display: flex;
  align-items: center;
  padding: 14px 32px;
  gap: 12px;
  opacity: 0.35;
  pointer-events: none;
}

body.fl718-menu-active .fl718-walk-writing-future-no {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  color: var(--fl718-gray-light);
  width: 36px;
  flex-shrink: 0;
}

body.fl718-menu-active .fl718-walk-writing-future-line {
  flex: 1;
  height: 1px;
  background: var(--fl718-panel-border);
}

body.fl718-menu-active .fl718-walk-writing-entry-mark-zone {
  flex-shrink: 0;
  width: 80px;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.fl718-menu-active .fl718-contact-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateX(16px);
}

body.fl718-menu-active .fl718-contact-frame {
  width: 20px;
  height: 14px;
  border: 1px solid var(--fl718-gray-mid);
  flex-shrink: 0;
  position: relative;
  background: transparent;
}

body.fl718-menu-active .fl718-contact-frame--selected {
  border-color: var(--fl718-gray-dark);
  background: rgba(26,24,20,0.06);
}

body.fl718-menu-active .fl718-contact-frame--selected::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 0.5px solid rgba(26,24,20,0.22);
}

body.fl718-menu-active .fl718-contact-frame-no {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-family: 'Courier Prime', monospace;
  font-size: 5px;
  color: var(--fl718-gray-light);
  line-height: 1;
  pointer-events: none;
}

body.fl718-menu-active .fl718-stamp-svg {
  width: 64px;
  height: 48px;
  overflow: visible;
}

body.fl718-menu-active .fl718-stamp-ring-outer {
  fill: none;
  stroke: rgba(89, 108, 140, 0.55);
  stroke-width: 1.5;
}

body.fl718-menu-active .fl718-stamp-ring-inner {
  fill: none;
  stroke: rgba(89, 108, 140, 0.35);
  stroke-width: 0.8;
}

body.fl718-menu-active .fl718-stamp-text {
  font-family: 'Courier Prime', monospace;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  fill: rgba(89, 108, 140, 0.6);
  text-anchor: middle;
  opacity: 0;
}

body.fl718-menu-active .fl718-stamp-infinity {
  fill: none;
  stroke: rgba(89, 108, 140, 0.5);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

body.fl718-menu-active .fl718-erasure-char {
  display: inline;
  transition: opacity 0.3s ease;
}

body.fl718-menu-active .fl718-desk-key-smear {
  position: absolute;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
  height: 3px;
  width: 0px;
  background: linear-gradient(90deg, transparent 0%, rgba(58, 50, 40, 0.12) 40%, rgba(58, 50, 40, 0.28) 100%);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: right center;
}

body.fl718-menu-active .fl718-desk-key-outer { opacity: 0; }
body.fl718-menu-active .fl718-desk-key-inner {
  width: 42px; height: 42px;
  position: relative;
}
body.fl718-menu-active .fl718-desk-key-cap {
  width: 42px; height: 42px;
  background: #e8e3da;
  border: 1px solid #b8b0a0;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 3px 0 #a09888, 0 1px 2px rgba(0,0,0,0.18);
}
body.fl718-menu-active .fl718-desk-key-cap::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 3px;
  border: 0.5px solid rgba(255,255,255,0.55);
  background: linear-gradient(160deg, rgba(255,255,255,0.22) 0%, transparent 60%);
  pointer-events: none;
}
body.fl718-menu-active .fl718-desk-key-letter {
  font-family: 'Courier Prime', monospace;
  font-size: 18px; font-weight: 700;
  color: #3a3228; line-height: 1;
  position: relative; z-index: 1;
}
body.fl718-menu-active .fl718-desk-key-impression {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(180,60,30,0.18);
  pointer-events: none;
}

body.fl718-menu-active .fl718-writing-shutter-flash {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.88);
  pointer-events: none; opacity: 0; z-index: 10;
}
body.fl718-menu-active .fl718-stamp-ghost {
  fill: none; stroke: rgba(89,108,140,0.22);
  stroke-width: 1; opacity: 0; stroke-dasharray: 6 4;
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-erasure-char { transition: none; }
  body.fl718-menu-active .fl718-walk-writing-entry-arrow { transform: translateX(0); transition: opacity 0.15s ease; }
  body.fl718-menu-active .fl718-walk-writing-entry-no { transition: color 0.15s ease; }
  body.fl718-menu-active .fl718-walk-writing-entry-desc { transition: opacity 0.15s ease; }
  body.fl718-menu-active .fl718-abio-cs-frame-title { color: rgba(255,255,255,0.5) !important; }
  body.fl718-menu-active .fl718-abio-cs-frame-ch    { color: rgba(255,255,255,0.5) !important; }
  body.fl718-menu-active .fl718-abio-cs-fragment    { opacity: 1 !important; transform: none !important; }
  body.fl718-menu-active .fl718-abio-cs-enter       { opacity: 1 !important; }
  body.fl718-menu-active .fl718-abio-cs-frame-wash  { transform: scaleY(0.5) !important; }
}

/* ─── ABOUT PANEL ─── */
body.fl718-menu-active .fl718-walk-about-sheet {
  border-top: 3px solid var(--fl718-ink);
}

body.fl718-menu-active .fl718-walk-about-row {
  display: flex;
  align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid var(--fl718-panel-border);
  text-decoration: none;
  gap: 24px;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

body.fl718-menu-active .fl718-walk-about-row:hover {
  background: rgba(0,0,0,0.025);
  padding-left: 52px;
}

body.fl718-menu-active .fl718-walk-about-row-no {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--fl718-gray-light);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 28px;
}

body.fl718-menu-active .fl718-walk-about-row-name {
  font-family: 'EB Garamond', serif;
  font-size: 24px;
  color: var(--fl718-ink);
  transition: color 0.2s ease;
}

body.fl718-menu-active .fl718-walk-about-row:hover .fl718-walk-about-row-name { color: var(--fl718-red); }

/* ─── NOOK NOOK MATS ROW ─── */
body.fl718-menu-active .fl718-nook-row.fl718-walk-about-row {
  transition: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
body.fl718-menu-active .fl718-nook-row.fl718-walk-about-row:hover {
  padding-left: 0;
  background: transparent;
}

body.fl718-menu-active .fl718-nook-row {
  position: relative;
  border-bottom: 1px solid var(--fl718-panel-border);
  overflow: visible;
}

body.fl718-menu-active .fl718-nook-content {
  display: flex;
  align-items: flex-start;
  padding: 62px 40px 0 92px;
  height: 100%;
  box-sizing: border-box;
}

body.fl718-menu-active .fl718-nook-eyebrow {
  position: absolute;
  top: 14px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.fl718-menu-active .fl718-nook-no {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--fl718-gray-light);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
body.fl718-menu-active .fl718-nook-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--fl718-gray-light);
  letter-spacing: 0.08em;
  opacity: 0.75;
}

body.fl718-menu-active .fl718-nook-text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

body.fl718-menu-active .fl718-nook-name {
  font-family: 'Courier Prime', monospace;
  font-size: 22px;
  color: var(--fl718-ink);
  transition: color 0.2s ease;
  display: block;
}

body.fl718-menu-active .fl718-nook-row:hover .fl718-nook-name { color: var(--fl718-red); }

body.fl718-menu-active .fl718-nook-equation {
  height: 0;
  overflow: hidden;
  line-height: 1;
}

body.fl718-menu-active .fl718-nook-eq-text {
  font-family: 'Courier Prime', monospace;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(76, 175, 80, 0.8);
}

body.fl718-menu-active .fl718-nook-cursor {
  font-family: 'Courier Prime', monospace;
  font-size: 14px;
  line-height: 1;
  color: rgba(76, 175, 80, 0.8);
}

body.fl718-menu-active .fl718-nook-mat {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 110px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

body.fl718-menu-active .fl718-nook-trail-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
}

body.fl718-menu-active .fl718-nook-plane-wrap {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

body.fl718-menu-active .fl718-nook-plane-img {
  width: 52px;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ─── MY BIOGRAPHY — Contact Sheet Row ─── */
body.fl718-menu-active .fl718-abio-cs-row {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--fl718-panel-border);
  position: relative;
  overflow: hidden;
}

body.fl718-menu-active .fl718-abio-cs-left {
  flex: 1 1 auto;
  padding: 22px 36px 22px 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0px solid var(--fl718-panel-border);
  position: relative;
  z-index: 2;
}

body.fl718-menu-active .fl718-abio-cs-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--fl718-gray-light);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  top: 12px;
  left: 40px;
}

body.fl718-menu-active .fl718-abio-cs-eyebrow-label {
  font-family: 'Courier Prime', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl718-gray-light);
}

body.fl718-menu-active .fl718-abio-cs-name {
  font-family: 'Lora', serif;
  font-size: 26px;
  color: var(--fl718-ink);
  line-height: 1.1;
  transition: color 0.2s ease;
}
body.fl718-menu-active .fl718-abio-cs-row:hover .fl718-abio-cs-name { color: var(--fl718-gray-dark); }

body.fl718-menu-active .fl718-abio-cs-fragment {
  position: absolute;
  left: 92px;
  right: 36px;
  bottom: 36px;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--fl718-gray-mid);
  line-height: 1.5;
  opacity: 0;
}

body.fl718-menu-active .fl718-abio-cs-enter {
  position: absolute;
  left: 92px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
}
body.fl718-menu-active .fl718-abio-cs-enter-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fl718-red);
}
body.fl718-menu-active .fl718-abio-cs-enter-arrow {
  width: 16px;
  height: 1px;
  background: var(--fl718-red);
  position: relative;
}
body.fl718-menu-active .fl718-abio-cs-enter-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -2.5px;
  width: 5px; height: 5px;
  border-top: 1px solid var(--fl718-red);
  border-right: 1px solid var(--fl718-red);
  transform: rotate(45deg);
}

body.fl718-menu-active .fl718-abio-cs-strip {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: 8px 0;
  background: var(--fl718-ink);
  position: relative;
  z-index: 4;
}
body.fl718-menu-active .fl718-abio-cs-strip::before,
body.fl718-menu-active .fl718-abio-cs-strip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(255,255,255,0.07) 10px, rgba(255,255,255,0.07) 20px);
  z-index: 10;
}
body.fl718-menu-active .fl718-abio-cs-strip::before { top: 0; }
body.fl718-menu-active .fl718-abio-cs-strip::after  { bottom: 0; }

body.fl718-menu-active .fl718-abio-cs-frame {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 12px 12px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
body.fl718-menu-active .fl718-abio-cs-frame:last-child { border-right: none; }

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

body.fl718-menu-active .fl718-abio-cs-frame-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-abio-cs-frame--ch1 .fl718-abio-cs-frame-wash { background: var(--fl718-ch1-wash); }
body.fl718-menu-active .fl718-abio-cs-frame--ch2 .fl718-abio-cs-frame-wash { background: var(--fl718-ch2-wash); }
body.fl718-menu-active .fl718-abio-cs-frame--ch3 .fl718-abio-cs-frame-wash { background: var(--fl718-ch3-wash); }
body.fl718-menu-active .fl718-abio-cs-frame--ch4 .fl718-abio-cs-frame-wash { background: var(--fl718-ch4-wash); }
body.fl718-menu-active .fl718-abio-cs-frame--ch5 .fl718-abio-cs-frame-wash { background: var(--fl718-ch5-wash); }

body.fl718-menu-active .fl718-abio-cs-frame-no,
body.fl718-menu-active .fl718-abio-cs-frame-ch,
body.fl718-menu-active .fl718-abio-cs-frame-title { position: relative; z-index: 2; }

body.fl718-menu-active .fl718-abio-cs-frame-no {
  font-family: 'Courier Prime', monospace;
  font-size: 8px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
  display: block;
}
body.fl718-menu-active .fl718-abio-cs-frame-ch {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  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%);
  transition: color 0.3s ease;
  white-space: nowrap;
}
body.fl718-menu-active .fl718-abio-cs-frame-title {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-top: auto;
  line-height: 1.3;
  z-index: 2;
}

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

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

/* ─── POETRY MACHINE ─── */
body.fl718-menu-active .fl718-pm-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 40px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1px solid var(--fl718-panel-border);
  height: 160px;
}

body.fl718-menu-active .fl718-pm-water {
  position: absolute; inset: 0;
  background: #0d1018;
  pointer-events: none; opacity: 0; z-index: 0;
}
body.fl718-menu-active .fl718-pm-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14,28,48,0.7) 100%);
  pointer-events: none; opacity: 0; z-index: 1;
}
body.fl718-menu-active .fl718-pm-horizon {
  position: absolute; left: 0; right: 0; top: 56%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80,130,180,0.28) 20%, rgba(100,160,220,0.42) 50%, rgba(80,130,180,0.28) 80%, transparent 100%);
  pointer-events: none; opacity: 0; z-index: 2;
}
body.fl718-menu-active .fl718-pm-ancient-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 4;
}
body.fl718-menu-active .fl718-pm-ancient-char {
  position: absolute; opacity: 0;
  line-height: 1; user-select: none;
}
body.fl718-menu-active .fl718-pm-ghost {
  position: absolute; top: 50%; left: 0; width: 100%;
  transform: translateY(-50%); text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: clamp(56px, 7.5vw, 92px);
  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: 3;
}
body.fl718-menu-active .fl718-pm-content {
  position: relative;
  z-index: 10;
  padding-left: 52px;
}
body.fl718-menu-active .fl718-pm-eyebrow {
  position: absolute;
  top: 14px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
body.fl718-menu-active .fl718-pm-no {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--fl718-gray-light);
  letter-spacing: 0.08em;
}
body.fl718-menu-active .fl718-pm-danlann {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--fl718-gray-mid);
  letter-spacing: 0.06em;
}
body.fl718-menu-active .fl718-pm-name {
  font-family: 'IM Fell English', serif;
  font-size: 24px; font-weight: 400; font-style: italic;
  color: var(--fl718-gray-dark); display: block;
  line-height: 1.2; letter-spacing: 0;
}
body.fl718-menu-active .fl718-pm-ornament {
  position: absolute;
  top: calc(50% + 20px);
  left: 52px;
  width: calc(100% - 52px - 40px);
  display: flex; align-items: center;
  gap: 8px; margin: 0;
  opacity: 0;
}
body.fl718-menu-active .fl718-pm-orn-line {
  flex: 1; height: 1px; background: #c8913a;
  transform: scaleX(0); transform-origin: center;
}
body.fl718-menu-active .fl718-pm-orn-mark {
  font-size: 9px; color: #d4a04a;
  line-height: 1; flex-shrink: 0;
  opacity: 0; letter-spacing: 0;
  display: inline-block;
}
body.fl718-menu-active .fl718-pm-tagline-mask {
  position: absolute;
  top: calc(50% + 42px);
  left: 52px;
  overflow: hidden; height: 32px;
}
body.fl718-menu-active .fl718-pm-tagline-inner {
  font-family: 'EB Garamond', serif;
  font-size: 16px; font-weight: 500; font-style: italic;
  letter-spacing: 0.14em; color: #d4a04a;
  transform: translateY(110%); opacity: 0;
  display: block; white-space: nowrap; line-height: 1.6;
}

body.fl718-menu-active .fl718-pm-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-pm-flash-black {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
body.fl718-menu-active .fl718-pm-ghost.fl718-pm-ghost--exposed {
  z-index: 50;
}

/* ─── PREFERS-REDUCED-MOTION — disable CSS transitions ─── */
@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-walk-nav-label,
  body.fl718-menu-active .fl718-walk-nav-item::after,
  body.fl718-menu-active .fl718-walk-backdrop,
  body.fl718-menu-active .fl718-walk-about-row,
  body.fl718-menu-active .fl718-walk-about-row-name,
  body.fl718-menu-active .fl718-walk-loc-link,
  body.fl718-menu-active .fl718-walk-year-link,
  body.fl718-menu-active .fl718-walk-loc-archive-link,
  body.fl718-menu-active .fl718-walk-loc-archive-arrow,
  body.fl718-menu-active .fl718-walk-writing-entry,
  body.fl718-menu-active .fl718-walk-writing-entry-no,
  body.fl718-menu-active .fl718-walk-writing-entry-desc,
  body.fl718-menu-active .fl718-walk-writing-entry-arrow,
  body.fl718-menu-active .fl718-walk-style-link,
  body.fl718-menu-active .fl718-walk-style-mark,
  body.fl718-menu-active .fl718-walk-style-name,
  body.fl718-menu-active .fl718-walk-loc-sub-link,
  body.fl718-menu-active .fl718-fai-split-film,
  body.fl718-menu-active .fl718-fai-split-digital,
  body.fl718-menu-active .fl718-fai-split-label,
  body.fl718-menu-active .fl718-fai-split-sub,
  body.fl718-menu-active .fl718-fai-split-fstop,
  body.fl718-menu-active .fl718-fai-format-bar-fstop,
  body.fl718-menu-active .fl718-nook-name,
  body.fl718-menu-active .fl718-abio-cs-name,
  body.fl718-menu-active .fl718-abio-cs-frame-ch {
    transition: none !important;
  }
}

/* ─── TABLET — 900px to 1100px ─── */
@media (max-width: 1100px) and (min-width: 769px) {
  body.fl718-menu-active .fl718-walk-bar {
    padding: 0 28px;
  }
  body.fl718-menu-active .fl718-walk-sheet {
    grid-template-columns: 1fr 210px 20px 210px;
  }
  body.fl718-menu-active .fl718-walk-sheet-header {
    grid-template-columns: 1fr 210px 20px 210px;
  }
  body.fl718-menu-active .fl718-walk-format-col {
    margin-left: -20px;
  }
  body.fl718-menu-active .fl718-walk-style-col {
    padding: 20px 12px 28px;
  }
  body.fl718-menu-active .fl718-walk-loc-col {
    padding: 12px 20px 20px;
  }
  body.fl718-menu-active .fl718-walk-featured-name {
    font-size: 18px;
  }
  body.fl718-menu-active .fl718-fai-iris-svg {
    width: 80px;
    height: 80px;
  }
}

/* ─── MOBILE — 768px and below ─── */
@media (max-width: 768px) {
  body.fl718-menu-active .fl718-walk-bar { padding: 0 20px; }
  body.fl718-menu-active .fl718-walk-flaneur { display: none; }
  body.fl718-menu-active .fl718-walk-nav-item { padding: 0 16px; }
  body.fl718-menu-active .fl718-walk-nav-item[data-menu="writing"] { padding: 0 16px; }

  body.fl718-menu-active .fl718-walk-sheet { grid-template-columns: 1fr; }
  body.fl718-menu-active .fl718-walk-sheet-header { grid-template-columns: 1fr; }
  body.fl718-menu-active .fl718-walk-sheet-header .fl718-walk-col-hd:not(:first-child) { display: none; }
  body.fl718-menu-active .fl718-walk-loc-col { border-right: none; border-bottom: 1px solid var(--fl718-panel-border); padding: 12px 20px 18px; }
  body.fl718-menu-active .fl718-walk-featured-two-col { grid-template-columns: 1fr; gap: 12px 0; }
  body.fl718-menu-active .fl718-walk-featured-two-col .fl718-walk-loc-featured-block:first-child { border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--fl718-panel-border); }
  body.fl718-menu-active .fl718-walk-featured-two-col .fl718-walk-loc-featured-block:nth-child(2) { padding-left: 0; }
  body.fl718-menu-active .fl718-walk-featured-name { font-size: 18px; }
  body.fl718-menu-active .fl718-walk-loc-two-col { grid-template-columns: 1fr 1fr; }
  body.fl718-menu-active .fl718-walk-style-col { border-right: none; border-bottom: 1px solid var(--fl718-panel-border); padding: 16px 20px 20px; }
  body.fl718-menu-active .fl718-walk-format-col { margin-left: 0; padding: 0; }
  body.fl718-menu-active .fl718-walk-sheet > div:empty { display: none; }

  body.fl718-menu-active .fl718-walk-writing-entry { min-height: 56px; padding: 0 20px; }
  body.fl718-menu-active .fl718-walk-writing-entry--photo-essays .fl718-walk-writing-entry-title,
  body.fl718-menu-active .fl718-walk-writing-entry--travel .fl718-walk-writing-entry-title,
  body.fl718-menu-active .fl718-walk-writing-entry--poetry .fl718-walk-writing-entry-title { font-size: 20px; }
  body.fl718-menu-active .fl718-walk-writing-entry-mark-zone { display: none; }
  body.fl718-menu-active .fl718-walk-writing-index-hd-label { padding: 0 20px; }

  body.fl718-menu-active .fl718-walk-about-row { padding: 18px 20px; }
  body.fl718-menu-active .fl718-walk-about-row:hover { padding-left: 28px; }
  body.fl718-menu-active .fl718-abio-cs-left { padding: 18px 20px 18px 60px; }
  body.fl718-menu-active .fl718-abio-cs-eyebrow { left: 20px; }
  body.fl718-menu-active .fl718-abio-cs-strip { display: none; }
  body.fl718-menu-active .fl718-abio-cs-name { font-size: 20px; }
  body.fl718-menu-active .fl718-nook-content { padding: 62px 20px 0 60px; }
  body.fl718-menu-active .fl718-nook-eyebrow { left: 20px; }
  body.fl718-menu-active .fl718-pm-item { padding: 0 20px; }
  body.fl718-menu-active .fl718-pm-content { padding-left: 36px; }
  body.fl718-menu-active .fl718-pm-eyebrow { left: 20px; }
  body.fl718-menu-active .fl718-pm-ghost { font-size: 36px; }
  body.fl718-menu-active .fl718-fai-iris-svg { width: 100px; height: 100px; }
}

/* ─── SMALL MOBILE — 430px and below ─── */
@media (max-width: 430px) {
  body.fl718-menu-active .fl718-walk-bar { padding: 0 10px; }
  body.fl718-menu-active .fl718-walk-left-group { gap: 8px; }
  body.fl718-menu-active .fl718-walk-wordmark { font-size: 11px; letter-spacing: 0.12em; }
  body.fl718-menu-active .fl718-walk-nav-item { padding: 0 6px; }
  body.fl718-menu-active .fl718-walk-nav-item[data-menu="writing"] { padding: 0 6px; }
  body.fl718-menu-active .fl718-walk-nav-label { font-size: 10px; letter-spacing: 0.06em; }
  body.fl718-menu-active .fl718-walk-nav-item::after { left: 6px; right: 6px; }
}

/* ─── COMING SOON — unbuilt destinations in the Location column ───
   Destinations without a page yet are marked with [data-fl718-soon] in
   header.php. They sit slightly dimmed, and reveal a small Courier label
   on hover instead of behaving like a live link. CSS-only so it needs no
   hook into the menu reveal timeline. Location column only — Style and
   Format links have their own hover art and are deliberately excluded. */

body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon],
body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon],
body.fl718-menu-active .fl718-walk-year-link[data-fl718-soon],
body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon] {
  cursor: default;
  opacity: 0.58;
  transition: opacity 0.18s ease, color 0.18s ease;
}

/* Dimmed links must not take the red hover or the slide-right nudge —
   those read as "this goes somewhere." */
/* Hover goes to FULL opacity, not 0.78. The label inherits the parent's
   opacity, and at 0.78 even gray-mid measured 3.31:1 against the panel —
   below the 4.5:1 the project holds itself to. At opacity 1 it is 5.11:1. */
body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon]:hover {
  color: var(--fl718-gray-dark);
  padding-left: 0;
  opacity: 1;
}

body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon]:hover,
body.fl718-menu-active .fl718-walk-year-link[data-fl718-soon]:hover,
body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon]:hover {
  opacity: 1;
}

body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon]:hover .fl718-walk-loc-archive-arrow {
  transform: none;
}

/* The label itself. Inline-block with a collapsed max-width so it opens
   sideways rather than reflowing the row on hover. */
body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon]::after,
body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon]::after,
body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon]::after {
  content: 'coming soon';
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  /* Eased back one step on request. NOT toward gray-light (#d0cec8), which
     measured 1.50:1 here and was unreadable — this is #71716e at 4.68:1,
     still above the 4.5:1 AA floor. Do not lighten further: #747471 is
     already 4.48:1 and fails. The weight drop (700 → 600) does most of the
     softening; the colour moves only slightly. */
  color: #71716e;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  align-self: center;
  transition: max-width 0.24s ease, opacity 0.2s ease, margin-left 0.24s ease;
}

body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon]:hover::after,
body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon]:hover::after,
body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon]:hover::after {
  max-width: 130px; /* 10px bold + wider tracking needs more than 90px or it clips */
  opacity: 1;
  margin-left: 10px;
}

/* The loc link is a space-between flex row (name ─── travel time). The
   ::after label is last in DOM order, so without an explicit order it
   renders past the travel-time mark and the two collide. Ordering puts
   the label directly after the name and keeps the mark pinned right. */
body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon] {
  justify-content: flex-start;
}

body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon]::after {
  order: 1;
}

body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon] .fl718-walk-loc-mark {
  order: 2;
  margin-left: auto;
}

/* Year links are small and sit in a tight row — a per-link label would
   crowd them, so the row shows one shared label on hover instead. */
body.fl718-menu-active .fl718-walk-year-row {
  position: relative;
}

body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon] {
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-menu-active .fl718-walk-loc-link[data-fl718-soon]::after,
  body.fl718-menu-active .fl718-walk-featured-name[data-fl718-soon]::after,
  body.fl718-menu-active .fl718-walk-loc-archive-link[data-fl718-soon]::after {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SHORT-VIEWPORT PANEL SCROLL

   A landscape phone is ~393px tall. openPanel() caps the panel at
   window.innerHeight * 0.85 (= 334px) while the Photography panel's own
   content is 472px, and .fl718-walk-panel is overflow:hidden — so roughly a
   third of the nav links sit below the fold with no way to reach them.
   Measured on /taos/, /white-sands/, /poetry/ (852x393) and /about-me/
   (925x427): 10 of 37 links unreachable, identical on all four.

   Gate on HEIGHT, not width: a landscape phone is 852px WIDE, wider than
   every width breakpoint on the site, so a width-gated rule would silently
   not apply here (see project_landscape_852_wider_than_breakpoints).

   Desktop is unaffected — no desktop viewport is under 500px tall.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) {
  body.fl718-menu-active .fl718-walk-panel.is-active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The inner sheet is overflow:visible and would otherwise establish the
     scroll height on the wrong element. */
  body.fl718-menu-active .fl718-walk-panel.is-active .fl718-walk-sheet {
    overflow-y: visible;
  }
}