/* ============================================================
   無用 In Utile — Mobile / Touch layer
   Phone-first overrides (≤760). Loaded AFTER styles.css so it
   wins the cascade. Tablet (761–1024) gets lighter reflow only.
   ============================================================ */

/* ─────────────────────────────────────────────
   LIGHTBOX (tap-to-enlarge — Praxis drawings)
   ───────────────────────────────────────────── */
.mlb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 13, 12, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: mlbIn 240ms var(--ease-standard) both;
}
@keyframes mlbIn { from { opacity: 0; } to { opacity: 1; } }
.mlb__close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: 0; color: rgba(246,243,236,0.8);
  font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.1em;
  cursor: pointer; padding: 8px; z-index: 2;
}
.mlb__stage { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.mlb__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #1A1816; border: 1px solid rgba(246,243,236,0.14); overflow: hidden;
  animation: mlbZoom 280ms var(--ease-standard) both;
}
@keyframes mlbZoom { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mlb__frame img { width: 100%; height: 100%; object-fit: contain; }
.mlb__frame .cine { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.mlb__cap {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(246,243,236,0.7);
}
.mlb__hint {
  text-align: center; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(246,243,236,0.42);
}

/* ─────────────────────────────────────────────
   Shared tap hint cue
   ───────────────────────────────────────────── */
.m-hint {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ghost-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.m-hint::before { content: '＋'; font-size: 11px; color: var(--crimson); }
.m-hint--open::before { content: '→'; }

/* Mobile-only chrome is hidden on desktop by default */
.m-ark-bar { display: none; }
.m-header { display: none; }
/* Language toggle lives in the header on desktop, in the overlay on mobile */
.menu-pop__lang { display: none; }

@media (max-width: 760px) {

  /* Finer graph-paper grid for small screens — grid-snap.js reads --grid-cell
     live, so both the visible grid AND every snapped rule follow this down. */
  :root { --grid-cell: 16px; --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }

  /* ── Global frame: fixed contextual header, tightened page ── */
  .m-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 46;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    /* sit below the phone status bar / notch */
    height: calc(60px + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: max(var(--page-margin), env(safe-area-inset-left));
    padding-right: max(var(--page-margin), env(safe-area-inset-right));
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--rule);
  }
  .m-header__where {
    display: inline-flex; align-items: baseline; gap: 11px; min-width: 0;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    text-align: left; -webkit-tap-highlight-color: transparent;
  }
  .m-header__cjk {
    font-family: var(--f-cjk); font-weight: var(--cjk-weight, 700);
    font-size: 22px; color: var(--crimson); letter-spacing: 0.04em; line-height: 1.2;
  }
  .m-header__label {
    font-family: var(--f-serif); font-size: 25px; font-weight: 500;
    letter-spacing: 0.005em; line-height: 1.3; color: var(--charcoal);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* line-height + a hair of room so Latin descenders (y, g, p) aren't clipped */
    padding-bottom: 2px;
  }
  html[lang="ko"] .m-header__label { font-family: var(--f-serif-kr); }
  /* menu button: match the desktop hairline two-bar mark */
  .m-header__menu {
    flex: 0 0 auto; width: 44px; height: 44px; margin-right: -4px;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
    background: none; border: 0; cursor: pointer; padding: 6px 4px;
  }
  .m-header__menu span {
    width: 24px; height: 1px; background: var(--charcoal);
    transition: width 240ms ease, background 240ms ease;
  }
  .m-header__menu span:nth-child(2) { width: 16px; }
  .m-header__menu:hover span,
  .m-header__menu:active span { background: var(--crimson); }
  .m-header__menu:hover span:nth-child(2),
  .m-header__menu:active span:nth-child(2) { width: 24px; }

  /* old floating controls + big in-flow page title are replaced by .m-header */
  .header-ctrl { display: none !important; }
  .page-head { display: none !important; }
  /* Home: the centred wordmark already states the title, so the header is bare —
     transparent, no rule/blur — leaving just the menu button */
  .m-header--bare {
    background: transparent; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  .page { padding: calc(96px + var(--safe-top)) var(--page-margin) 64px; }
  .signage { display: none; }
  /* faint corner glyphs read as clutter on a small screen.
     position:fixed pins them to the viewport so they NEVER slide when an
     accordion (Theory) or drawer expands and the page grows taller. */
  .page-glyph { opacity: 0.5 !important; position: fixed !important; }

  /* ─────────────────────────────────────────────
     FULL-SCREEN OVERLAY MENU (large serif)
     ───────────────────────────────────────────── */
  .menu-pop {
    width: 100vw; max-width: 100vw; border-left: 0;
    padding: calc(16px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
    display: flex; flex-direction: column;
    /* bound to the viewport so the social footer is always reachable */
    height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    transition: transform 380ms cubic-bezier(0.7, 0, 0.2, 1);
  }
  .menu-pop.is-open { transform: translateY(0); }
  .menu-pop__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  }
  .menu-pop__lang {
    display: inline-flex; align-items: baseline; gap: 10px;
    font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em;
  }
  .menu-pop__lang .lang__opt { font-size: 12px; padding: 6px 2px; }
  .menu-pop__close { font-size: 20px; padding: 8px; min-width: 44px; min-height: 44px; }
  .menu-pop__list { gap: 0; margin-top: 2px; flex: 1 1 auto; justify-content: center; min-height: 0; }
  .menu-pop__item {
    font-size: clamp(24px, 7.4vw, 34px);
    padding: 7px 0; gap: 14px; align-items: baseline;
    border-bottom: 1px solid var(--rule);
  }
  .menu-pop__item .num { font-size: 11px; width: 26px; }
  .menu-pop__item .cjk { font-size: clamp(17px, 5vw, 22px); }
  .menu-pop__foot { margin-top: 16px; flex: 0 0 auto; }
  .menu-pop__social { gap: 18px; font-size: 12px; flex-wrap: wrap; }

  /* ─────────────────────────────────────────────
     ESSAYS — vertical list, two-stage tap
     ───────────────────────────────────────────── */
  .m-essays { margin-top: 10px; border-top: 1px solid var(--rule); }
  .m-essay {
    border-bottom: 1px solid var(--rule);
    /* closed rows ride a 5-cell (80px) rhythm so every divider lands on a grid line */
    min-height: calc(var(--grid-cell) * 5);
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding: 10px 0; cursor: pointer; transition: padding 220ms ease;
  }
  .m-essay.is-open {
    background: var(--hover-fill); padding-left: 10px; padding-right: 10px;
    justify-content: flex-start; padding-top: calc(var(--grid-cell) - 1px);
  }
  .m-essay__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
  .m-essay__head > div { min-width: 0; }   /* allow the title column to shrink so the ellipsis engages instead of pushing the num off-screen */
  .m-essay__num {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: var(--ghost-2); white-space: nowrap; padding-top: 4px;
  }
  .m-essay__title {
    font-size: 19px; line-height: 1.25; color: var(--charcoal);
    font-weight: 500; letter-spacing: -0.005em; margin: 0;
    transition: color 220ms ease;
    /* closed rows show one line (ellipsis) so every row is exactly 5 cells tall;
       the full title appears once the row is expanded */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-essay.is-open .m-essay__title { color: var(--crimson); white-space: normal; overflow: visible; word-break: keep-all; }
  .m-essay__sub { font-family: var(--f-mono); font-size: 11px; color: var(--ghost-2); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* expanding drawer */
  .m-essay__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 320ms var(--ease-standard);
  }
  .m-essay.is-open .m-essay__panel { grid-template-rows: 1fr; }
  .m-essay__panel-in { overflow: hidden; min-height: 0; }
  .m-essay__poster {
    position: relative; aspect-ratio: 3 / 4; margin: 14px 0 0; overflow: hidden;
    background: var(--charcoal);
  }
  .m-essay__lead {
    font-family: var(--f-serif-body); font-style: italic; font-size: 15px;
    line-height: 1.7; color: var(--charcoal-soft); margin: 14px 0 0; text-wrap: pretty;
  }
  html[lang="ko"] .m-essay__lead { font-family: var(--f-serif-kr); font-style: normal; }
  .m-essay__go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    font-family: var(--f-sans); font-size: 13px; color: var(--crimson);
    border-bottom: 1px solid var(--crimson); padding-bottom: 3px;
  }
  .m-essay__go span { font-family: var(--f-mono); }

  /* Essays filter chips: horizontal scroll strip */
  .m-chip-strip {
    display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px;
    margin: 0 calc(-1 * var(--pad-x)); padding-left: var(--pad-x); padding-right: var(--pad-x);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-chip-strip::-webkit-scrollbar { display: none; }
  .m-chip-strip .chip { white-space: nowrap; flex: 0 0 auto; }

  /* ─────────────────────────────────────────────
     ISSUES — stacked book covers → detail
     ───────────────────────────────────────────── */
  .m-issues { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
  .m-issue-card { cursor: pointer; text-decoration: none; color: inherit; display: block; padding-bottom: var(--grid-cell); }
  .m-issue-card__cover {
    position: relative; aspect-ratio: var(--m-cover-ar, 3 / 4); overflow: hidden;
    background: #EDE9E0; border: 1px solid var(--rule);
  }
  .m-issue-card__cover .cine,
  .m-issue-card__cover .poster {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  }
  .m-issue-card__num {
    position: absolute; top: 12px; left: 14px; z-index: 3;
    font-family: var(--f-num); font-variation-settings: 'opsz' 24, 'wght' 600;
    font-size: 34px; line-height: 1; color: var(--on-dark);
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  }
  .m-issue-card__badge {
    position: absolute; top: 16px; right: 14px; z-index: 3;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--on-dark);
    background: var(--crimson); padding: 4px 8px;
  }
  /* meta block: border rule lands ON a grid line; text drops to the next line.
     padding = cell-1 keeps BOTH the rule and the text-top on grid lines at any cell. */
  .m-issue-card__body { border-top: 1px solid var(--rule); padding-top: calc(var(--grid-cell) - 1px); }
  .m-issue-card__meta { display: flex; align-items: baseline; gap: 10px; }
  .m-issue-card__cjk {
    font-family: var(--f-cjk); font-weight: var(--cjk-weight, 700);
    font-size: 16px; line-height: var(--grid-cell); letter-spacing: 0.06em; color: var(--crimson);
  }
  .m-issue-card__theme {
    font-size: 18px; line-height: var(--grid-cell); color: var(--charcoal); font-weight: 500;
    word-break: keep-all; flex: 1;
  }
  .m-issue-card__date {
    font-family: var(--f-mono); font-size: 10px; line-height: var(--grid-cell); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ghost-2);
  }

  /* ─────────────────────────────────────────────
     PRAXIS — full-bleed stack with overlaid meta
     ───────────────────────────────────────────── */
  .m-praxis { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
  .m-prx-group {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ghost-2);
    padding: 22px 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 16px;
  }
  .m-prx-group:first-child { padding-top: 4px; }
  .m-prx-card {
    position: relative; aspect-ratio: var(--m-fb-ar, 4 / 5); overflow: hidden;
    background: #1A1816; cursor: pointer; margin-bottom: 18px;
    display: block; text-decoration: none; color: var(--on-dark);
  }
  .m-prx-card .cine, .m-prx-card .poster {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  }
  .m-prx-card__scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.72) 100%);
  }
  .m-prx-card__num {
    position: absolute; top: 14px; left: 16px; z-index: 3;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
    color: rgba(246,243,236,0.82); text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  }
  .m-prx-card__foot { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; }
  .m-prx-card__name {
    font-size: 24px; line-height: 1.08; font-weight: 500; color: var(--on-dark);
    word-break: keep-all; text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  }
  .m-prx-card__loc {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(246,243,236,0.78); margin-top: 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  }

  /* ─────────────────────────────────────────────
     THEORY — accordion, definitions only (no image)
     ───────────────────────────────────────────── */
  .m-theory { margin-top: 10px; border-top: 1px solid var(--rule); }
  .m-thy-row { border-bottom: 1px solid var(--rule); }
  .m-thy-head {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
    display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
    min-height: calc(var(--grid-cell) * 3 - 1px); padding: 4px 0; box-sizing: border-box;
    color: var(--charcoal); transition: padding 220ms ease;
  }
  /* let the title column shrink so a long word wraps to a 2nd line (not overflow) */
  .m-thy-head > span { min-width: 0; }
  .m-thy-kr { word-break: keep-all; overflow-wrap: anywhere; }
  .m-thy-row.is-open .m-thy-head { padding-left: 10px; }
  .m-thy-num { font-family: var(--f-mono); font-size: 11px; color: var(--ghost-2); }
  .m-thy-kr { font-family: var(--f-serif-kr); font-weight: 500; font-size: 21px; color: var(--charcoal); }
  .m-thy-row.is-open .m-thy-kr { color: var(--crimson); }
  .m-thy-en { font-family: var(--f-serif); font-style: italic; font-size: 13px; color: var(--ghost-2); margin-left: 9px; }
  html[lang="en"] .m-thy-en { font-style: normal; font-weight: 600; font-family: var(--f-serif-kr); }
  .m-thy-cjk { font-family: var(--f-cjk); font-weight: 700; font-size: 14px; color: var(--ghost); }
  .m-thy-row.is-open .m-thy-cjk { color: var(--crimson); }
  .m-thy-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-standard); }
  .m-thy-row.is-open .m-thy-panel { grid-template-rows: 1fr; }
  .m-thy-panel-in { overflow: hidden; min-height: 0; }
  .m-thy-def {
    font-family: var(--f-serif-kr); font-weight: 300; font-size: 17px; line-height: 1.8;
    color: var(--charcoal); margin: 0 0 16px; padding-left: 38px;
    text-align: justify; word-break: break-all;
  }
  .m-thy-def--en { font-family: var(--f-serif); text-justify: inter-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
  .m-thy-rel { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 38px; margin-bottom: 16px; }
  .m-thy-chip {
    font-family: var(--f-serif-kr); font-size: 14px; color: var(--charcoal);
    border: 1px solid var(--rule); background: none; padding: 6px 12px; cursor: pointer;
    display: inline-flex; align-items: baseline; gap: 6px;
  }
  .m-thy-chip i { font-family: var(--f-cjk); font-style: normal; font-size: 10px; color: var(--ghost-2); }
  .m-thy-read { padding-left: 38px; margin-bottom: 18px; }

  /* ─────────────────────────────────────────────
     ARTICLE — body + images only (rails hidden)
     ───────────────────────────────────────────── */
  .art-read-grid { display: block !important; margin-top: 8px !important; }
  .art-rail-left, .art-rail-right { display: none !important; }
  .art-read-grid > article { max-width: 100% !important; }
  /* article hero is authored 3:4 (CMS) — show it at source ratio so it isn't
     cropped to a thin band like the desktop 16:9 reading layout */
  .art-hero-fig > div { aspect-ratio: 3 / 4 !important; }
  .article-body {
    max-width: 100% !important;
    text-align: justify !important;
    text-justify: inter-character;
    hyphens: auto; -webkit-hyphens: auto;
    word-break: keep-all;
  }
  html[lang="ko"] .article-body { word-break: break-all; }
  .article-body[style] { text-align: justify !important; }

  /* ─────────────────────────────────────────────
     ISSUE DETAIL — drop cover, description + ToC only
     ───────────────────────────────────────────── */
  .iss-detail-grid { display: block !important; }
  .iss-detail-grid .iss-detail-cover { display: none !important; }
  .iss-detail-grid > div:last-child { margin-top: 28px; }
  /* editor's letter: fill the column cleanly instead of a ragged left block.
     Target the STABLE .iss-intro class so BOTH languages get the treatment
     (KR adds .serif-kr, EN adds .iss-intro--en — a class-only selector would
     miss whichever variant isn't named). */
  .iss-detail-grid p.iss-intro { text-align: justify; word-break: break-all; max-width: 100% !important; }
  html[lang="en"] .iss-detail-grid p.iss-intro { word-break: normal; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; font-size: 16px; line-height: 1.85; }
  /* fixed 5-cell (80px) rows so every divider lands on the grid; titles 2-line clamp */
  .toc-row { height: calc(var(--grid-cell) * 5); min-height: 0; padding: 0; grid-template-columns: 30px 1fr 20px; gap: 14px; }
  .toc-row__meta { display: none; }

  /* ─────────────────────────────────────────────
     PRAXIS DETAIL — single column + drawing thumbs
     ───────────────────────────────────────────── */
  /* tighten the desktop rhythm so the hero doesn't leave a big void before the body */
  .prx-opening { margin-bottom: 20px; }
  /* topmost eyebrow (PRJ-num) collides with the header controls → drop it */
  .prx-opening__eyebrow { display: none !important; }
  /* hero: shorter so it doesn't swallow the screen, minimal gap to the body */
  .prx-atmos { margin-bottom: 16px; }
  .prx-atmos--bleed .prx-atmos__frame { height: clamp(300px, 46vh, 460px); }
  .prx-atmos__caption { margin-top: 8px; }
  .prx-meta-section {
    grid-template-columns: 1fr; gap: 18px;
    margin-bottom: 22px; padding: 16px 0;
  }
  .prx-meta-cat { text-align: left; }
  .prx-meta-cat > div:first-child { font-size: clamp(56px, 18vw, 84px) !important; }
  .prx-title-block { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  /* the divider before the research note carries a 56px inline margin — trim it hard */
  .hr:has(+ .prx-essay) { margin-bottom: 16px !important; }
  .prx-essay { grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; }
  /* research-note body: justified so it fills the column edge-to-edge */
  .prx-essay__para { text-align: justify; word-break: break-all; }
  .prx-essay__para--en { word-break: normal; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
  /* Concepts metadata is hidden on mobile (same as the article rails) */
  .prx-essay__concepts { display: none !important; }
  .prx-essay__rail { position: static; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .prx-essay__rail .vtext { writing-mode: horizontal-tb !important; }
  .prx-drawings__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .prx-drawing-card { gap: 8px; }
  .prx-drawing-card__frame { aspect-ratio: 1 / 1; cursor: pointer; }
  .prx-drawing-card__frame::after {
    content: '⤢'; position: absolute; right: 6px; bottom: 5px; z-index: 4;
    font-size: 12px; color: rgba(246,243,236,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  }
  .prx-drawing-card__info { display: none; }
  .prx-foot-nav { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prx-foot-nav__center { display: none; }
  .prx-foot-nav__side strong { font-size: 14px; }
  .prx-foot-nav__side small { font-size: 9px; }
  .prx-foot-nav__side--right { text-align: right; align-items: flex-end; }

  /* ── ARCHIVE — collapsed filter (left-aligned) + 1-up grid ── */
  .m-ark-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    justify-content: flex-start;
    margin: 2px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  }
  .m-ark-toggle {
    order: 0;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--charcoal); color: var(--paper); border: 0;
    padding: 9px 14px; cursor: pointer; min-height: 40px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .m-ark-bar__reset {
    order: 1;
    background: none; border: 0; cursor: pointer; padding: 6px 4px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--crimson);
  }
  .m-ark-bar__state {
    order: 2; flex-basis: 100%;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--ghost-2); text-transform: uppercase; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-ark-toggle__count {
    background: var(--crimson); color: #fff; border-radius: 999px;
    min-width: 17px; height: 17px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 10px; padding: 0 5px;
  }
  .m-ark-toggle__chev { font-size: 8px; opacity: 0.7; }
  /* filters collapse into the toggle; posters surface immediately */
  .ark-filters {
    display: block !important; max-height: 0; overflow: hidden;
    gap: 0 !important; margin-bottom: 0 !important;
    transition: max-height 360ms var(--ease-standard), margin 360ms ease;
  }
  .ark-filters.is-open { max-height: 1400px; margin-bottom: 22px !important; }
  .ark-filters > div { padding-top: 2px; margin-bottom: 12px; }
  .ark-filters > div > .mono { margin-bottom: 6px !important; }
  /* each filter group is a single horizontal row that scrolls left↔right */
  .ark-filters .chips {
    display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto;
    margin: 0 calc(-1 * var(--page-margin)); padding: 2px var(--page-margin);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ark-filters .chips::-webkit-scrollbar { display: none; }
  .ark-filters .chip { flex: 0 0 auto; white-space: nowrap; }
  /* neutralise grid-snap's inline margin-top here — the desktop chips snap their
     underbar to the 24px grid, but on mobile these rows live in a tight
     collapsible panel where that margin would break the rhythm. */
  .ark-filters .chips { margin-top: 0 !important; }
  .ark-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .ark-grid .card__poster { aspect-ratio: 3 / 4; }
  /* touch-and-hold reveals the title + colour wash; tap navigates. No lock. */
  .ark-grid .card:active .card__hover,
  .ark-grid .card:hover .card__hover { opacity: 1 !important; }
  .ark-grid .card__hover { padding: 18px; justify-content: flex-end; }
  .ark-grid .card__hover .t-title { font-size: 24px; line-height: 1.12; }
  .ark-grid .card__hover .t-meta { font-size: 11px; margin-top: 8px; }

  /* ── CONTACT — single column ── */
  .contact-grid { display: block !important; }
  .contact-grid > aside { margin-bottom: 36px; }
  .contact-grid form { padding-top: 28px !important; }
  /* social/link strip is duplicated in the menu overlay → drop it here */
  .contact-links { display: none !important; }

  /* ─────────────────────────────────────────────
     HOME — scale the wordmark as ONE locked unit
     (font-sizes/ratios stay exactly as designed; the
      whole 450px block is uniformly scaled to fit)
     ───────────────────────────────────────────── */
  .home-wm {
    /* keep the centring translate, add a uniform (proportion-locked) downscale.
       scale() must be UNITLESS — vw/number is a length and would void the rule. */
    transform: translate(-50%, -50%) scale(0.74) !important;
    transform-origin: center center;
  }
  /* corner stamps clear the fixed header; both keep the diagonal-mirror offset */
  .home-stamp-tl {
    font-size: 10px !important; max-width: 60vw !important;
    top: calc(var(--safe-top) + 16px) !important;
  }
  .home-stamp-br { font-size: 10px !important; max-width: 60vw !important; }
  /* the wordmark is scaled down on mobile, so pull the rule + epigraph up to
     sit just beneath it (the fixed 150px desktop offset leaves too big a gap) */
  .home-rule-block { margin-top: 112px !important; }
}

/* ─────────────────────────────────────────────
   TABLET (761–1024) — lighter reflow
   ───────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1024px) {
  /* tablet uses the DESKTOP layout, whose rhythm (rows/rules) is tuned to the
     24px grid — so keep --grid-cell at its 24px base here (don't shrink it, or
     the fixed 24-multiple rules drift off the background grid) */
  .art-read-grid { grid-template-columns: 132px minmax(0, 1fr) !important; gap: 36px !important; }
  .art-rail-right { display: none !important; }
  .iss-detail-grid { grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1fr) !important; gap: 48px !important; }
  .contact-grid { gap: 56px !important; }
}

/* Narrow phones — shrink the locked wordmark another notch so it keeps margins */
@media (max-width: 384px) {
  .home-wm { transform: translate(-50%, -50%) scale(0.66) !important; }
  .home-rule-block { margin-top: 96px !important; }
}
@media (max-width: 344px) {
  .home-wm { transform: translate(-50%, -50%) scale(0.58) !important; }
  .home-rule-block { margin-top: 84px !important; }
}

/* ─────────────────────────────────────────────
   EDITOR (#admin CMS) — make the dense forms usable on touch.
   The editor injects its <style> at runtime (after this file), so the base
   .ed-grid rules sit LATER in the cascade — we win with a `.ed `-prefixed
   selector (higher specificity) instead of !important, which also leaves the
   inline grid-template on the diagram-layer rows intact.
   ───────────────────────────────────────────── */
@media (max-width: 760px) {
  /* one column: 94px-wide inputs in a 3-up grid are unusable on a phone */
  .ed .ed-grid,
  .ed .ed-grid--3,
  .ed .ed-pair { grid-template-columns: 1fr; gap: 12px; }
  /* tabs become a single swipeable strip rather than 3 wrapped rows */
  .ed .ed__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 4px; padding-bottom: 8px; margin-bottom: 18px; scrollbar-width: none; }
  .ed .ed__tabs::-webkit-scrollbar { display: none; }
  .ed .ed__tab { flex: 0 0 auto; white-space: nowrap; }
  /* image picker: stack the preview above its controls */
  .ed .ed-img { flex-direction: column; }
  .ed .ed-img__frame { width: 100% !important; max-width: 240px; }
  .ed .ed-card { padding: 18px 16px; }
  .ed .ed__title { font-size: 27px; }
  /* keep the form's sticky-feeling action row (Save / Preview) from crowding */
  .ed .ed__bar { gap: 14px; }
}

/* Tablet — 3-up grids stay (≈220px inputs are workable) but pad the shell in */
@media (min-width: 761px) and (max-width: 1024px) {
  .ed { padding-left: 8px; padding-right: 8px; }
}