/* desk.responsive.css — a layout for every screen size, for index.html.
   Loads LAST (after css/night.css) and only ever ADDS: css/style.css, css/desk.css and every js file are untouched,
   the same way night.css sits on top of the day styles. Delete this file and the site is exactly what it was.

   Every block is scoped to its own range, so the desktop layout (861px – 1920px wide) is not changed by anything below.

     ≥ 1921px        big monitors, ultrawide, TV: everything scales up, hero lines up with the column
     861 – 1920px    desktop: exactly as before
     ≤ 860px         tablets in portrait + phones (the site's own switch point)
       700 – 860px     tablet portrait: hello letter and portrait sit side by side, 3-column prints
       ≤ 560px         phones: full-width wordmark, 2-column prints, one column of pins
       ≤ 380px         small phones
       ≤ 340px         tiny phones / folded foldables
     landscape ≤ 520px tall   phones on their side: shorter hero, scrolling overlays
     (pointer: coarse)        44px touch targets            (hover: none)   no sticky :hover, hints always visible */


/* ───────────────────────── 0 · safety nets (every size) ─────────────────────────
   body already had overflow-x:hidden, but on a real phone that doesn't stop the page from being panned sideways
   when something pokes out by a few px (it widens the layout viewport, and the fixed nav stretches with it).
   overflow-x:clip on BOTH html and body actually clips it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
/* dragging the music player by its header must not scroll the page on touch */
.player-header { touch-action: none; }


/* ───────────────────────── 1 · big screens (≥ 1921px) ─────────────────────────
   Everything is in rem, so scaling the root scales the whole page. The scale follows the 16:9 width the screen can
   really show (so a 3440×1440 ultrawide scales like 2560×1440, not like a 3440-tall-and-wide TV):
   1920 → 16px · 2560 → 20px · 3200 → 24px · 3840 → 28px. */
@media (min-width: 1921px) {
    html { font-size: clamp(16px, calc(16px + (min(100vw, 177.78vh) - 1920px) * .00625), 32px); }
    body { font-size: 1.0625rem; }                                   /* the 17px of desk.css, in rem */
    .nav-inner { max-width: 90rem; }                                 /* 1440px */
    .wrap, #dossier, footer { max-width: 77.5rem; }                  /* 1240px */
    /* the hero used to hug the screen edges while everything else sits in the column: line it up with the column */
    .h { padding-left: max(2.4rem, calc((100% - 77.5rem) / 2 + 2.4rem)); padding-right: max(2.4rem, calc((100% - 77.5rem) / 2 + 2.4rem)); }
    .h-hint { right: max(2.4rem, calc((100% - 77.5rem) / 2 + 2.4rem)); }
    .h-arrow { width: 3.375rem; height: 3.375rem; }                  /* 54px */
    .polaroid { max-width: 23.75rem; }                               /* 380px */
    #dossier .letter .meo-mark { --meo-sink: 3.625rem; width: 7.375rem; }   /* 58px / 118px: Meo grows with the letter */
}


/* ───────────────────────── 2 · tablets in portrait + phones (≤ 860px) ───────────────────────── */
@media (max-width: 860px) {

    /* nav: a 44px menu button, and a logo you can actually hit (padding + equal negative margin = bigger target, same layout) */
    .nav-inner { padding: .55rem 1.2rem; }
    .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 8px; }
    .nav-inner .mark, footer .mark { padding: .8rem .6rem; margin: -.8rem -.6rem; }

    /* full-screen menu: sits ABOVE the nav bar (before, the hamburger was drawn on top of the ✕), the ✕ takes the hamburger's exact spot,
       and it scrolls if the links don't fit. margin:auto on the first/last link centres them without cutting off the top when it overflows. */
    .mobile-menu { z-index: 5100; justify-content: flex-start; gap: .4rem; padding: 5rem 1.5rem 2.5rem; overflow-y: auto; overscroll-behavior: contain; }
    .mobile-menu > a:first-of-type { margin-top: auto; }
    .mobile-menu > a:last-of-type { margin-bottom: auto; }
    .mobile-menu a { display: flex; align-items: center; min-height: 52px; }
    .mobile-menu-close { top: .55rem; right: 1.2rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 8px; }

    /* hero: the wordmark fills the width instead of using ~60% of it (2.16em = the measured width of "Ritual" at this letter-spacing) */
    .h-title { font-size: min(26rem, calc((100vw - 2.4rem) / 2.4), 44vh); }

    /* section rhythm */
    .s-head { margin-bottom: 2.2rem; }
    .repeat { padding: 5.5rem 1.2rem; }
    .bye-hand { margin-bottom: 2.4rem; }

    /* prints: 3 columns on a tablet, 2 on a big phone (the gallery page does the same on phones) */
    .frame-grid { columns: 3 190px; column-gap: 1.3rem; }
    .frame-cell { margin-bottom: 1.3rem; }

    /* overlays */
    .lightbox-frame { max-width: 96vw; max-height: none; padding: 1rem; gap: .7rem; }
    .lightbox-img { max-width: 100%; max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
    .lightbox-caption { font-size: .72rem; letter-spacing: .12em; }
    .lightbox-close { top: .55rem; right: .7rem; min-width: 44px; min-height: 44px; padding: 0 .8rem; font-size: .72rem; opacity: .85; }
    .lightbox-nav { width: 44px; height: 44px; font-size: .95rem; opacity: .8; }
    .overlay-close { top: .3rem; right: .4rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
    .poem-title { padding-right: 2.4rem; }
    .card-overlay .card-scene { width: min(285px, 92vw); }

    /* toast: wrap instead of running off the screen; clear the home indicator */
    #toast-stack { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 2rem); }
    #toast-stack .toast { white-space: normal; text-align: center; }
    #back-to-top { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

/* a poem is 12 lines that wrap to ~24 on a phone: the card scrolls inside itself (label + title stay put, ✕ stays reachable) */
@media (max-width: 860px), (max-height: 720px) {
    .poem-card { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
    .poem-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: .5rem; }
}


/* ───────────────────────── 3 · tablet portrait (700 – 860px) ─────────────────────────
   Room for the letter and the portrait side by side instead of one long column. */
@media (min-width: 700px) and (max-width: 860px) {
    #dossier { grid-template-columns: 1.1fr .9fr; gap: 2.4rem; padding: 4.5rem 1.6rem; }
    .letter { padding: 2.4rem 2rem; }
    .polaroid { max-width: 300px; }
}


/* ───────────────────────── 4 · phones (≤ 560px) ───────────────────────── */
@media (max-width: 560px) {
    .h-note { font-size: 1.5rem; }
    /* the tape on the portrait used to stick out past the screen edge and widen the whole page */
    .tape-l { left: -4px; }
    .tape-r { right: -4px; }
    /* prints: 2 columns like the gallery page (1 column of full-width prints was a lot of scrolling) */
    .frame-grid { columns: 2 130px; column-gap: 1rem; }
    .frame-cell { margin-bottom: 1rem; padding: .5rem .5rem 0; }
    .frame-cap { font-size: 1.1rem; padding: .5rem .1rem .7rem; }
    .notes-panel { padding: 1.6rem 1.25rem; }
    .foot-row { gap: 1rem; }
}
@media (max-width: 380px) {
    .h-note { font-size: 1.35rem; }
    .h-sub { font-size: 1.2rem; }
    .letter { padding: 2rem 1.3rem; }
    .pin { padding: 2rem 1.3rem 1.6rem; }
    .pin-t { font-size: 1.55rem; }
    .drawer-n { font-size: 1.9rem; }
}
@media (max-width: 340px) {
    .h-note { font-size: 1.2rem; }
    .frame-filters { gap: .1rem 1rem; }
}


/* ───────────────────────── 5 · phones on their side (landscape, ≤ 520px tall) ─────────────────────────
   The wordmark used to be 27vw = a 230px-tall word on a 390px-tall screen. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    .h { padding: 4.5rem 1.4rem 2rem; }
    .h-title { font-size: min(calc((100vw - 2.8rem) / 2.4), 38vh); }
    .h-note { font-size: 1.4rem; margin-bottom: .3rem; }
    .h-sub { min-height: 1.7em; max-width: 42rem; margin-top: .9rem; font-size: 1.2rem; }
    .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    /* menu: links in rows so all six fit without scrolling */
    .mobile-menu { flex-flow: row wrap; align-content: center; justify-content: center; gap: .2rem 2.4rem; padding: 3.5rem 5rem 1.5rem 2rem; }
    .mobile-menu > a:first-of-type, .mobile-menu > a:last-of-type { margin: 0; }
    .mobile-menu a { font-size: 1.7rem; min-height: 48px; }
    /* lightbox: the picture takes the height, the arrows sit on the sides */
    .lightbox-frame { padding: .6rem; gap: .4rem; }
    .lightbox-img { max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); }
    .lightbox-nav { top: 50%; bottom: auto; }
    .card-overlay .card-scene { width: min(285px, 60vw); }
}


/* ───────────────────────── 6 · touch: 44px targets (every screen size) ───────────────────────── */
@media (max-width: 860px), (pointer: coarse) {
    .frame-filters { flex-wrap: wrap; gap: .2rem 1.4rem; }
    .frame-filter, .frame-filter:hover, .frame-filter.active { padding: .6rem .1rem; }    /* same selector list as desk.css so active/hover can't change the height */
    .notes-tab { min-height: 44px; padding-top: .8rem; }
    .read-more-btn { min-height: 44px; }
    .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .footer-links { column-gap: 1.5rem; row-gap: 0; }
    /* the on-repeat dots are 16×5px: keep them as they look, make the tappable area bigger */
    .whisper-dot { position: relative; }
    .whisper-dot::before { content: ''; position: absolute; inset: -20px -4px; }
}
@media (pointer: coarse) {
    .nav-links a { padding-top: .82rem; padding-bottom: .82rem; }                      /* tablets in landscape still get the desktop nav */
    .nav-inner .mark, footer .mark { padding: .8rem .6rem; margin: -.8rem -.6rem; }
    .lightbox-nav { width: 44px; height: 44px; }
    /* card: the two "tap to copy" rows are 20px tall. Padding + equal negative margin = 44px target, layout unchanged */
    .card-overlay .card-back .detail.copyable { padding: 12px 4px; margin: -12px -4px; }
    /* player: bigger buttons and a fat sliders' hit area (the track itself still draws 4px) */
    .player-btn { width: 44px; height: 44px; font-size: 1.05rem; opacity: .75; }
    .play-btn { font-size: 1.35rem; }
    .player-controls { gap: .4rem; }
    .player-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.6rem -.5rem -.6rem 0; }
    .player-progress, .player-volume { height: 28px; padding: 12px 0; background-clip: content-box; }
    .player-progress::-webkit-slider-thumb, .player-volume::-webkit-slider-thumb { width: 20px; height: 20px; }
}


/* ───────────────────────── 7 · no hover (touch): no sticky :hover, hidden hints become visible ───────────────────────── */
@media (hover: none) {
    .pin:not(.urgent):hover { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .65); z-index: auto; }
    .pin.urgent:hover { transform: rotate(var(--tilt, 0deg)); z-index: auto; }
    .frame-cell:hover { transform: rotate(var(--tilt, 0deg)); }
    .drawer-a { opacity: 1; }                                                 /* "open" / "play" / "flip" were only ever shown on hover */
    .drawer:active::after { transform: scaleX(1); }
    .card-overlay .card-back .detail-action { opacity: 1; transform: none; }  /* the "Copy" chip */
}