/* ============================================================================
   mobile-gate.css — the essays' half of the no-mobile vow.

   index.html turns phones away with "The Margin": the page IS a margin, the
   note hugs the bottom-right, tap to expand. But the essays under /essays/
   are their own documents — reachable by direct link, by the sitemap, and now
   by anyone flipping on a device frame in dev tools — so they slipped past it
   and rendered the essay anyway. This carries the same window to them.

   Styles are lifted from index.html (the .mobile-poem-overlay / .bf-margin
   block) so the two read identically. They are duplicated rather than shared
   because the essays load none of index's stylesheet; if the design there
   changes, change it here too.

   Petrona is declared locally rather than by linking ../fonts/text/
   text-fonts.css: that sheet also declares Spectral from a different path,
   and two sets of @font-face for one family would fight the essay's own.
   @font-face is lazy, so desktop never fetches this — the overlay is
   display:none there and unrendered text triggers no download.

   Markup is injected by mobile-gate.js.
   ========================================================================= */

/* Petrona · normal 400 · latin (+ latin-ext), self-hosted at the site root */
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/text/petrona-normal-latin-ext-03938e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/text/petrona-normal-latin-36e61c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The gate carries its own palette. The essays define --color-* tokens, not
   index's --bg-primary family, and essay two's tokens are mid-burn anyway —
   so these are scoped to the overlay and answer to nothing outside it.
   Values are index.html's :root and [data-theme="dark"] verbatim. */
.mobile-poem-overlay {
  --bg-primary: #e4dfd2;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --accent: #7a5230;
  --border: #d0cbbf;
}
.mobile-poem-overlay[data-theme="dark"] {
  --bg-primary: #2a3028;
  --text-primary: #f5f3ef;
  --text-secondary: #b8b5b0;
  --accent: #b88a55;
  --border: #424a3f;
}

        /* Mobile Poem Overlay */
/* ───────────────────────────────────────────────────────────
   Mobile site — "The Margin" design.
   The page IS a margin. Content hugs the bottom-right; tap to
   expand into the essay. Visible only at <= 768px (see below).
   ─────────────────────────────────────────────────────────── */
.mobile-poem-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    font-family: 'Petrona', Georgia, serif;
    color: var(--text-primary);
    overflow: hidden;
}

.bf-margin {
    position: absolute;
    inset: 0;
    padding: 60px 0 50px;
    box-sizing: border-box;
    opacity: 0;
    animation: bfMarginFade 1.4s ease-out 0.2s forwards;
}

@keyframes bfMarginFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left vertical hairline — suggests a written page */
.bf-margin-rule {
    position: absolute;
    left: 56px;
    top: 80px;
    bottom: 64px;
    width: 1px;
    background: var(--border);
    opacity: 0.65;
}

/* Vertical edge label running up the left margin */
.bf-margin-edge {
    position: absolute;
    left: 28px;
    top: 100px;
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.55;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Petrona', Georgia, serif;
}

/* Marginalia — closed state: a small block hugging bottom-right */
.bf-margin-content {
    position: absolute;
    right: 30px;
    bottom: 96px;
    width: 200px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: right;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.bf-margin-content:hover,
.bf-margin-content:focus-visible { opacity: 0.85; outline: none; }

.bf-margin-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-bottom: 8px;
    font-family: 'Petrona', Georgia, serif;
}

.bf-margin-title {
    font-family: 'Fraunces', 'Petrona', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-bottom: 8px;
    text-wrap: pretty;
}

.bf-margin-body {
    font-style: italic;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-wrap: pretty;
}

.bf-margin-cta {
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 6px;
    font-family: 'Petrona', Georgia, serif;
}

/* Tiny page-number, bottom right */
.bf-margin-pageno {
    position: absolute;
    bottom: 50px;
    right: 30px;
    font-style: italic;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.5;
    letter-spacing: 0.06em;
    transition: opacity 0.3s ease;
}

/* Marginalia — open state: essay panel */
.bf-margin-essay {
    position: absolute;
    top: 70px;
    left: 80px;
    right: 30px;
    bottom: 50px;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
.bf-margin-essay::-webkit-scrollbar { display: none; }

.bf-margin.is-open .bf-margin-content,
.bf-margin.is-open .bf-margin-pageno { opacity: 0; pointer-events: none; }

.bf-margin.is-open .bf-margin-essay {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.55s ease 0.1s;
}

.bf-margin-close {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 16px;
    cursor: pointer;
    font-family: 'Petrona', Georgia, serif;
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-secondary);
    -webkit-tap-highlight-color: transparent;
}
.bf-margin-close:hover { color: var(--text-primary); }

.bf-margin-essay-title {
    font-family: 'Fraunces', 'Petrona', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 18px;
    text-wrap: balance;
}

.bf-margin-essay-body p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 1.05em;
    text-wrap: pretty;
}
.bf-margin-essay-body p.lede {
    font-size: 15.5px;
    font-style: italic;
    color: var(--text-primary);
}

/* Slightly tighter on very small viewports */
@media (max-width: 360px) {
    .bf-margin-rule { left: 44px; }
    .bf-margin-edge { left: 20px; }
    .bf-margin-content { right: 22px; width: 184px; }
    .bf-margin-essay { left: 64px; right: 22px; }
}

/* The vow itself. Below the breakpoint the essay is not styled down — it is
   covered, whole, by the note explaining why. */
@media (max-width: 768px) {
  .mobile-poem-overlay { display: flex; }

  /* A fixed overlay doesn't stop the essay scrolling underneath it, so the
     document has to be pinned too.
     Keyed on the overlay's EXISTENCE rather than a JS-toggled class, which
     is what makes this correct in every direction with no event plumbing:
       · not embedded, JS ran  -> overlay present -> pinned
       · embedded in the reader modal -> mobile-gate.js returns before
         injecting -> no overlay -> narrow iframes on desktop scroll freely
       · JS failed entirely -> no overlay -> no pin, so a phone gets a
         readable essay instead of a blank page that won't move
     A class set at load can't do this: open at desktop width and flip on a
     device frame and the class is never added, so the gate appears while the
     essay scrolls behind it. :has() re-evaluates on its own. */
  html:has(.mobile-poem-overlay),
  html:has(.mobile-poem-overlay) body { overflow: hidden; height: 100%; }
}