/* ==========================================================================
   Layout — masthead, overlays, grid, sections, colophon
   ========================================================================== */

.app { position: relative; min-height: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; padding-top: calc(var(--head-h) + var(--safe-top)); }
.has-overlay-head .main { padding-top: 0; }

/* Page frame: wide, asymmetric-friendly. Never a phone column. */
.wrap, .frame-w {
  width: min(100% - var(--margin) * 2 - var(--safe-left) - var(--safe-right), var(--w-max));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - var(--margin) * 2, var(--w-wide)); margin-inline: auto; }
.wrap--text { width: min(100% - var(--margin) * 2, var(--w-text)); margin-inline: auto; }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); }
@media (max-width: 767.98px) { .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g12 > * { grid-column: 1 / -1 !important; } }
@media (min-width: 768px) and (max-width: 1099.98px) { .g12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--line { border-top: 1px solid var(--line); }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--s-3)); align-items: center; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.grid { display: grid; gap: var(--grid-gap, var(--col-gap)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.with-aside { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .with-aside { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
  .with-aside--left { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
  .aside-sticky { position: sticky; top: calc(var(--head-h) + 32px); }
}

/* Section headline row: big title left, context right — the editorial "spread" header */
.sect-head { display: grid; gap: var(--s-5); align-items: end; margin-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .sect-head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
.sect-head__title { font-size: var(--t-xl); line-height: 0.92; letter-spacing: -0.035em; margin-top: var(--s-4); }
.sect-head__aside { color: var(--bone-2); }

/* Inner page opener */
.page-head { padding-block: clamp(2.5rem, 1rem + 6vw, 7rem) clamp(2rem, 1rem + 3vw, 4rem); }
.page-head__title, .tool-head__title { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xxl); line-height: 0.88; letter-spacing: -0.045em; margin-top: var(--s-5); max-width: 15ch; }
.page-head__lede { margin-top: var(--s-6); }
.page-head__actions { margin-top: var(--s-7); }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: fixed; z-index: var(--z-nav); inset: 0 0 auto 0;
  height: calc(var(--head-h) + var(--safe-top));
  padding: var(--safe-top) calc(var(--margin) + var(--safe-right)) 0 calc(var(--margin) + var(--safe-left));
  display: flex; align-items: center; gap: var(--s-6);
  background: rgba(8, 7, 7, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-slow) var(--ease-out);
}
.has-overlay-head .masthead { background: linear-gradient(to bottom, rgba(8, 7, 7, 0.85), rgba(8, 7, 7, 0.35) 70%, rgba(8, 7, 7, 0)); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-overlay-head .masthead.is-scrolled, .masthead.is-scrolled { background: rgba(8, 7, 7, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.masthead.is-hidden { transform: translateY(-100%); }

.wordmark {
  display: inline-flex; align-items: flex-start;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  letter-spacing: -0.035em; line-height: 1;
  text-transform: uppercase;
  text-decoration: none; color: var(--bone);
  flex: none;
}
.wordmark span { color: var(--flare); }
.wordmark i { width: 0.26em; height: 0.26em; border-radius: 50%; background: var(--flare); margin-left: 0.1em; }

.masthead__nav { margin-inline: auto; }
.masthead__nav ul { display: flex; gap: clamp(0.75rem, 0.2rem + 1.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.masthead__nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-display); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-2); text-decoration: none;
  transition: color var(--t-fast);
}
.masthead__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1.5px; background: var(--flare); transition: right var(--t) var(--ease-out); }
.masthead__nav a:hover { color: var(--bone); }
.masthead__nav a:hover::after, .masthead__nav a[aria-current="page"]::after { right: 0; }
.masthead__nav a[aria-current="page"] { color: var(--bone); }
.masthead__end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.masthead__nav + .masthead__end { margin-left: 0; }
.masthead__signin { font-family: var(--f-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--bone-2); padding: 0 6px; min-height: 44px; display: inline-flex; align-items: center; }
.masthead__signin:hover { color: var(--bone); }

/* round icon buttons */
.orb {
  width: 46px; height: 46px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-3);
  color: var(--bone);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.orb:hover { background: var(--ink-4); border-color: var(--line-2); }
.orb:active { transform: scale(0.96); }
.orb .i { width: 19px; height: 19px; }
.orb--me { padding: 0; overflow: hidden; }
.orb__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; background: var(--wine); }
.orb--close { background: var(--bone); color: #120d0c; border-color: var(--bone); }
.orb--close:hover { background: #fff; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 8px 0 20px;
  border-radius: var(--r-pill);
  background: var(--bone); color: #120d0c;
  font-family: var(--f-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--t-fast);
}
.menu-btn:hover { background: #fff; }
.menu-btn__bars { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #120d0c; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 9px; right: 9px; height: 1.6px; background: var(--bone); border-radius: 2px; }
.menu-btn__bars::before { top: 12px; }
.menu-btn__bars::after { top: 17px; right: 12px; }

@media (max-width: 1099.98px) { .masthead__nav { display: none; } .masthead__end { margin-left: auto !important; } }
@media (max-width: 599.98px) {
  :root { --head-h: 64px; }
  .masthead { gap: 8px; }
  .masthead__signin { display: none; }
  .menu-btn { padding: 0; width: 46px; justify-content: center; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-btn__bars { width: 46px; height: 46px; background: transparent; }
  .menu-btn__bars::before, .menu-btn__bars::after { background: #120d0c; left: 14px; right: 14px; }
  .menu-btn__bars::before { top: 19px; }
  .menu-btn__bars::after { top: 25px; right: 18px; }
}

/* ==========================================================================
   Full-screen overlays (menu + search) — native <dialog>
   ========================================================================== */
.overlay {
  border: 0; margin: 0; padding: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--bone);
  overflow: hidden;
}
.overlay::backdrop { background: transparent; }
.overlay__inner {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--safe-top) calc(var(--margin) + var(--safe-right)) calc(var(--safe-bottom) + var(--s-6)) calc(var(--margin) + var(--safe-left));
  background: radial-gradient(110% 70% at 100% 0%, rgba(116, 20, 31, 0.55), transparent 60%), var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--t) var(--ease), clip-path var(--t-slow) var(--ease-out);
}
.overlay.is-in .overlay__inner { opacity: 1; clip-path: inset(0 0 0 0); }
.overlay__bar { flex: none; height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.overlay__grid { flex: 1; display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); padding-block: clamp(1.5rem, 1rem + 3vw, 4rem); align-content: start; }
@media (min-width: 900px) { .overlay__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.overlay__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }

.bigmenu ol { list-style: none; margin: 0; padding: 0; }
.bigmenu a {
  display: flex; align-items: baseline; gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  text-decoration: none; color: var(--bone);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.3rem, 1.2rem + 4.8vw, 6rem);
  line-height: 1.04; letter-spacing: -0.045em;
  transition: color var(--t-fast), transform var(--t) var(--ease-out);
}
.bigmenu__n { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--bone-3); font-weight: 500; min-width: 2.2em; transform: translateY(-1.4em); }
.bigmenu a:hover, .bigmenu a:focus-visible { color: var(--flare-hi); transform: translateX(0.12em); }
.bigmenu a[aria-current="page"] .bigmenu__t { color: var(--flare); }
@media (prefers-reduced-motion: no-preference) {
  .overlay .bigmenu li { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
  .overlay.is-in .bigmenu li { opacity: 1; transform: none; }
  .overlay.is-in .bigmenu li:nth-child(2) { transition-delay: 30ms; } .overlay.is-in .bigmenu li:nth-child(3) { transition-delay: 60ms; }
  .overlay.is-in .bigmenu li:nth-child(4) { transition-delay: 90ms; } .overlay.is-in .bigmenu li:nth-child(5) { transition-delay: 120ms; }
  .overlay.is-in .bigmenu li:nth-child(6) { transition-delay: 150ms; } .overlay.is-in .bigmenu li:nth-child(7) { transition-delay: 180ms; }
  .overlay.is-in .bigmenu li:nth-child(8) { transition-delay: 210ms; }
}
.menu-side { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.menu-side__group ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 2px; }
.menu-side__group a { display: inline-flex; min-height: 38px; align-items: center; color: var(--bone-2); text-decoration: none; }
.menu-side__group a:hover, .menu-side__group a[aria-current="page"] { color: var(--bone); text-decoration: underline; text-decoration-color: var(--flare); text-underline-offset: 0.3em; }
.me-chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.me-chip .orb__img { width: 40px; height: 40px; }
.link-caps { font-family: var(--f-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-2); text-decoration: none; }
.link-caps:hover { color: var(--bone); }

/* Search overlay */
.bigsearch { padding-top: clamp(2rem, 1rem + 5vw, 6rem); display: grid; gap: var(--s-6); }
.bigsearch input {
  width: 100%;
  border: 0; border-bottom: 2px solid var(--line-2); border-radius: 0;
  background: transparent;
  padding: 0.1em 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.4rem, 1.2rem + 6vw, 7rem);
  letter-spacing: -0.045em; line-height: 1.05;
  color: var(--bone);
  -webkit-appearance: none; appearance: none;
}
.bigsearch input::placeholder { color: var(--bone-4); }
.bigsearch input:focus { outline: none; border-bottom-color: var(--flare); }
.bigsearch__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bigsearch__browse { margin-top: clamp(2rem, 1rem + 4vw, 5rem); display: grid; gap: var(--s-4); }
.az-line { display: flex; flex-wrap: wrap; gap: 4px; }
.az-line a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--f-display); font-weight: 600; text-decoration: none; color: var(--bone-2); transition: background var(--t-fast), color var(--t-fast); }
.az-line a:hover { background: var(--flare); color: #fff; border-color: var(--flare); }

/* ==========================================================================
   Colophon (footer)
   ========================================================================== */
.colophon { margin-top: var(--section); border-top: 1px solid var(--line); overflow: hidden; }
.colophon__top {
  width: min(100% - var(--margin) * 2, var(--w-max)); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  padding-top: clamp(3.5rem, 2rem + 5vw, 7rem);
}
@media (min-width: 1100px) { .colophon__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.colophon__claim { font-size: var(--t-l); line-height: 0.95; }
.colophon__claim .serif-it { color: var(--flare-text); }
.colophon__cols { display: grid; gap: var(--s-7) var(--col-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.colophon__cols ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 2px; }
.colophon__cols a { display: inline-flex; min-height: 36px; align-items: center; color: var(--bone-2); text-decoration: none; }
.colophon__cols a:hover { color: var(--bone); }
.colophon__word {
  margin: clamp(3rem, 1.5rem + 5vw, 6rem) 0 0;
  padding-inline: calc(var(--margin) * 0.5);
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.2rem, 0.3rem + 14.6vw, 18.5rem);
  line-height: 0.76; letter-spacing: -0.055em;
  white-space: nowrap;
  color: var(--ink-3);
  user-select: none;
}
.colophon__word::before { content: attr(data-a); }
.colophon__word::after { content: attr(data-b); color: var(--oxblood); }
.colophon__base {
  width: min(100% - var(--margin) * 2, var(--w-max)); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6);
  padding-block: var(--s-6) calc(var(--s-7) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--bone-3);
}
.colophon__base a { color: var(--bone-3); }

/* Elfsight chat launcher: keep clear of page chrome on phones */
@media (max-width: 599.98px) {
  [class*="FloatingButton__FloatingButtonContainer"], [class*="floating-panel__Container"] { bottom: calc(var(--safe-bottom) + 16px) !important; }
}

/* ==========================================================================
   App navigation (2026-10-02) — native-feeling per device
   phone  < 768 : bottom tab bar (5 tabs, safe-area aware)
   tablet 768–1099 : vertical rail on the left
   desktop ≥ 1100 : masthead nav only
   ========================================================================== */
.appnav { display: none; }
.appnav ul { list-style: none; margin: 0; padding: 0; }
.appnav a { text-decoration: none; color: var(--bone-3); -webkit-tap-highlight-color: transparent; transition: color var(--t-fast), background var(--t-fast); }
.appnav a:hover { color: var(--bone); }
.appnav a[aria-current="page"] { color: var(--bone); }
.appnav a[aria-current="page"] .i { color: var(--flare); }
.appnav__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.appnav a[aria-current="page"] .appnav__avatar { box-shadow: 0 0 0 2px var(--flare); }
.appnav .appnav__brand { display: none; }

@media (max-width: 767.98px) {
  :root { --tab-h: 58px; }
  .appnav {
    display: block; position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0;
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: rgba(14, 11, 11, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid var(--line);
  }
  .appnav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tab-h); }
  .appnav__extra { display: none; }
  .appnav a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
  .appnav a .i { width: 23px; height: 23px; stroke-width: 1.8; }
  .appnav a[aria-current="page"] .i { stroke-width: 2.2; }
  .app { padding-bottom: calc(var(--tab-h) + var(--safe-bottom)); }
  .toasts { bottom: calc(var(--tab-h) + var(--safe-bottom) + 14px); }
  /* the tab bar carries profile/sign-in — keep the top bar to brand, search and menu */
  .masthead .orb--me, .masthead__signin { display: none; }
  [class*="FloatingButton__FloatingButtonContainer"], [class*="floating-panel__Container"] { bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px) !important; }
}

/* tablets: any 768–1099 width, plus touch tablets up to iPad Pro landscape (no hover, coarse pointer) */
@media (min-width: 768px) and (max-width: 1099.98px), (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root { --rail-w: 84px; }
  .masthead__nav { display: none; }
  .masthead__end { margin-left: auto !important; }
  .appnav {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    position: fixed; z-index: calc(var(--z-nav) + 1); top: 0; bottom: 0; left: 0;
    width: calc(var(--rail-w) + var(--safe-left));
    padding: calc(var(--safe-top) + 14px) 0 calc(var(--safe-bottom) + 14px) var(--safe-left);
    background: rgba(14, 11, 11, 0.97); border-right: 1px solid var(--line);
  }
  .appnav .appnav__brand {
    display: grid; place-items: center; position: relative; width: 48px; height: 48px; flex: none; border-radius: 14px;
    background: var(--flare); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; text-decoration: none;
  }
  .appnav .appnav__brand:hover { background: var(--flare-hi); }
  .appnav__brand i { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
  .appnav ul { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; overflow-y: auto; scrollbar-width: none; }
  .appnav ul::-webkit-scrollbar { display: none; }
  .appnav__me { margin-top: auto; }
  .appnav a { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; padding: 10px 4px; border-radius: 16px; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.1; }
  .appnav a .i { width: 22px; height: 22px; }
  .appnav a:hover { background: var(--hover); }
  .appnav a[aria-current="page"] { background: var(--ink-3); }
  .app { padding-left: calc(var(--rail-w) + var(--safe-left)); }
  .masthead { left: calc(var(--rail-w) + var(--safe-left)); padding-left: var(--margin); }
  .masthead .wordmark { visibility: hidden; } /* brand lives in the rail */
  .masthead .orb--me, .masthead__signin { display: none; }
}
@media print { .appnav { display: none !important; } .app { padding: 0 !important; } }

/* ==========================================================================
   Navigation polish (2026-10-08)
   Top bar: a clearer edge against the page (hairline + soft drop shadow once you scroll),
   readable over the home hero. Tab bar: a deliberate active state (oxblood pill + red tick),
   heavier labels, a lit top edge. Rail: same language.
   ========================================================================== */
.masthead { border-bottom-color: rgba(239, 230, 220, 0.09); }
.masthead.is-scrolled, .has-overlay-head .masthead.is-scrolled {
  background: rgba(10, 8, 8, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(239, 230, 220, 0.12);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 32px -24px rgba(0, 0, 0, 0.95);
}
.masthead__nav a { color: rgba(239, 230, 220, 0.72); }
.masthead__nav a[aria-current="page"] { color: var(--bone); }
.has-overlay-head .masthead:not(.is-scrolled) .masthead__nav a { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

@media (max-width: 767.98px) {
  .appnav {
    background: rgba(12, 10, 10, 0.92);
    border-top: 0;
    box-shadow: 0 -1px 0 rgba(239, 230, 220, 0.08), 0 -18px 30px -22px rgba(0, 0, 0, 0.95);
  }
  .appnav::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 47, 40, 0.35), transparent); pointer-events: none; }
  .appnav li { display: flex; }
  .appnav li.appnav__extra { display: none; }
  .appnav a { position: relative; flex: 1; gap: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(239, 230, 220, 0.58); }
  .appnav a .i, .appnav__avatar { position: relative; z-index: 1; }
  .appnav a::before { content: ""; position: absolute; top: 7px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: 15px; background: rgba(217, 47, 40, 0.16); opacity: 0; transform: scale(0.7); transition: opacity var(--t-fast), transform var(--t) var(--ease-out); }
  .appnav a[aria-current="page"] { color: var(--bone); }
  .appnav a[aria-current="page"]::before { opacity: 1; transform: none; }
  .appnav a[aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 0 0 2px 2px; background: var(--flare); }
  .appnav a:active::before { opacity: 1; transform: scale(0.94); }
}
@media (min-width: 768px) and (max-width: 1099.98px), (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .appnav { box-shadow: 1px 0 0 rgba(0, 0, 0, 0.6), 18px 0 32px -26px rgba(0, 0, 0, 0.95); border-right-color: rgba(239, 230, 220, 0.1); }
  .appnav a { color: rgba(239, 230, 220, 0.6); position: relative; }
  .appnav a[aria-current="page"] { background: rgba(217, 47, 40, 0.14); color: var(--bone); }
  .appnav a[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 3px; background: var(--flare); }
}

/* tablet rail mode: the page title takes the wordmark's place in the top bar (2026-10-08) */
.masthead__title { display: none; }
@media (min-width: 768px) and (max-width: 1099.98px), (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .masthead .wordmark { display: none; }
  .masthead__title { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* Rhythm + overlay header fixes (2026-10-08) */
@media (max-width: 1099.98px) { :root { --section: clamp(3.5rem, 2.2rem + 5vw, 6rem); } }
.has-overlay-head .masthead:not(.is-scrolled) { border-bottom-color: transparent; box-shadow: none; }