/* ─────────────────────────────────────────────────────────────
   phone.css · the phone grammar (2026-09-23)

   The phone is not a narrow desktop. Rules, all under 641px:
   1. Content before apparatus. Masthead folds to one line; the
      date, clock and running tagline are desktop furniture.
   2. Navigation lives in thumb reach: one "Index" button, bottom
      right, opening a sheet (js/phone.js). No page is a dead end.
   3. Type floor. Nothing smaller than 10.5px; the mono ladder
      steps up one notch and loosens its tracking.
   4. Every tap target at least 44px tall.
   5. Images lead. Doors show their picture; details swipe.
   Linked last in <head> so it wins over page <style> blocks.
   Desktop is untouched: every rule sits inside the media query,
   except the button/sheet which are display:none above 640px.
   ───────────────────────────────────────────────────────────── */

.ph-fab, .ph-sheet, .ph-topmenu { display: none; }

@media (max-width: 640px) {

  /* ── 3. Type floor (site pages; calling4 sets its own sizes) ── */
  :root {
    --mono-a: 11.5px; --mono-a-track: 0.16em;
    --mono-b: 11px;   --mono-b-track: 0.13em;
    --mono-c: 10.5px; --mono-c-track: 0.12em;
  }

  /* ── 1. Masthead folds to one line ── */
  .masthead {
    display: flex !important;
    align-items: center; justify-content: space-between;
    gap: 0.8rem; padding: 0.35rem var(--edge, 1.1rem) !important;
    min-height: 48px;
  }
  .masthead .center, .masthead .right { display: none !important; }
  .masthead .left { gap: 0.9rem; flex-wrap: nowrap; }
  .masthead .left a { display: inline-flex; align-items: center; min-height: 44px; }
  .tape-track { padding: 0.42rem 0; }

  /* ── 4. Tap targets ── */
  /* Grow the hit area, not the box, so underlines stay tight to the words. */
  .colophon a, .masthead .breadcrumb, .quote .marg a { position: relative; }
  .colophon a::before, .quote .marg a::before {
    content: ""; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px;
  }
  .colophon .col { row-gap: 0.55rem; }

  /* The Draw toy (draw.js) moves to the left thumb so it never sits under Index. */
  html.ph-ready .rkk-draw-btn { right: auto !important; left: max(14px, env(safe-area-inset-left, 0px)) !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; min-height: 44px; }
  html.ph-ready .rkk-draw-clear { right: auto !important; left: 7.6rem !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; min-height: 44px; }
  html.ph-ready .rkk-draw-help { right: auto !important; left: 14px !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Room for the floating button at the end of every page */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ── 2. The Index button ── */
  .ph-fab {
    display: inline-flex; align-items: center; gap: 0.55rem;
    position: fixed; z-index: 9000;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: 48px; padding: 0 1.15rem 0 1rem;
    border: 0; border-radius: 999px;
    background: var(--ink, #111110); color: var(--paper, #FCFCFA);
    font: 400 1rem/1 var(--serif, Georgia, serif);
    font-variant-caps: all-small-caps; letter-spacing: 0.08em;
    box-shadow: 0 10px 28px rgba(14,14,12,0.22), 0 1px 0 rgba(14,14,12,0.1);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s;
    -webkit-tap-highlight-color: transparent;
  }
  .ph-fab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red, #E03A1F); }
  .ph-fab.is-tucked { transform: translateY(90px); opacity: 0; pointer-events: none; }
  .ph-fab:active { transform: scale(0.96); }

  /* ── The sheet ── */
  .ph-sheet {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 9500;
    overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top, 0px) var(--edge, 1.1rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper, #FCFCFA); color: var(--ink, #111110);
    opacity: 0; transform: translateY(14px);
    transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .ph-sheet[hidden] { display: none; }
  .ph-sheet.is-open { opacity: 1; transform: none; }
  html.ph-locked, html.ph-locked body { overflow: hidden; }

  .ph-head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; border-bottom: 1px solid var(--rule, #1A1A18);
  }
  .ph-kicker {
    font-family: var(--mono, monospace); font-size: 11.5px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2, #2C2B28);
  }
  .ph-close {
    width: 48px; height: 48px; margin-right: -10px;
    border: 0; background: none; color: inherit;
    font: 300 2rem/1 var(--display, Georgia, serif); cursor: pointer;
  }

  .ph-home {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 1.1rem 0 0.9rem; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--rule-soft, rgba(17,17,16,0.16));
  }
  .ph-home .ph-title { font-family: var(--display, Georgia, serif); font-style: italic; font-size: 1.5rem; }
  .ph-home-note { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 0.9rem; color: var(--ink-2, #2C2B28); }

  .ph-doors { display: flex; flex-direction: column; }
  .ph-door {
    display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline;
    padding: 0.95rem 0; min-height: 56px;
    border-bottom: 1px solid var(--rule-soft, rgba(17,17,16,0.16));
    text-decoration: none; color: inherit;
  }
  .ph-num {
    font-family: var(--mono, monospace); font-size: 11px;
    letter-spacing: 0.12em; color: var(--ink-2, #2C2B28);
  }
  .ph-door .ph-title {
    font-family: var(--display, Georgia, serif); font-weight: 400;
    font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.02; letter-spacing: -0.015em;
  }
  .ph-door:active .ph-title, .ph-home:active .ph-title { color: var(--red, #E03A1F); font-style: italic; }
  .ph-sheet [aria-current="page"] .ph-title { font-style: italic; color: var(--red, #E03A1F); }

  .ph-room {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem;
    margin-top: 1.4rem;
  }
  .ph-room a {
    display: flex; align-items: center; min-height: 46px;
    font-family: var(--serif, Georgia, serif); font-size: 1.05rem;
    font-variant-caps: all-small-caps; letter-spacing: 0.06em;
    color: var(--ink, #111110); text-decoration: none;
    border-bottom: 1px solid var(--rule-soft, rgba(17,17,16,0.16));
  }
  .ph-room a[aria-current="page"] { color: var(--red, #E03A1F); }

  .ph-foot {
    margin-top: auto; padding-top: 2rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    font-family: var(--serif, Georgia, serif); font-size: 1rem;
  }
  .ph-foot a { color: var(--ink, #111110); display: inline-flex; align-items: center; min-height: 44px; }
  .ph-social { display: flex; gap: 1.4rem; }
  .ph-social a { font-size: 0.95rem; color: var(--ink-2, #2C2B28); }

  /* ════════ HOME (index.html) ════════ */
  /* 1. No dead gap: the hero sizes to its content. */
  section.hero { min-height: 0 !important; padding-top: 1.6rem !important; padding-bottom: 2rem !important; align-content: start !important; }
  .hero-eyebrow { margin-bottom: 0.7rem; }
  .gods-counter small .open-cue { display: inline-block; padding: 0.35rem 0; }

  /* Doors come straight after the hero; the working notes follow. */
  body.ph-home-page main { display: flex; flex-direction: column; }
  body.ph-home-page main > .hero       { order: 0; }
  body.ph-home-page main > .doors-section { order: 1; }
  body.ph-home-page main > .manifesto  { order: 2; }
  body.ph-home-page main > .archive    { order: 3; }

  /* 5. Doors lead with their picture. */
  .doors-section { padding-top: 2rem !important; padding-bottom: 2.4rem !important; }
  .door-row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-areas: "pic num" "pic title" "pic spec";
    column-gap: 1rem !important; row-gap: 0.25rem !important;
    align-items: start !important;
    padding: 1.05rem 0 !important;
  }
  .door-row:hover { padding-left: 0 !important; padding-right: 0 !important; }
  .door-specimen {
    display: block !important; grid-area: pic;
    position: relative !important; right: auto !important; top: auto !important;
    width: 92px !important; padding: 0 !important;
    opacity: 1 !important; transform: none !important;
    box-shadow: none !important; background: none !important;
  }
  .door-specimen img { height: 115px !important; width: 92px !important; }
  .door-specimen::after { display: none; }
  .door-num { grid-area: num; font-size: 11px; padding-top: 0.15rem; }
  .door-title { grid-area: title; font-size: clamp(1.7rem, 7.4vw, 2.1rem) !important; line-height: 1.02 !important; }
  .door-row:hover .door-title { transform: none; font-style: normal; }
  .door-row:active .door-title { color: var(--red); font-style: italic; }
  .door-spec {
    display: block !important; grid-area: spec;
    font-size: 0.9rem !important; line-height: 1.38 !important; color: var(--ink-2) !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .door-spec .lab { display: none; }
  .door-arrow { display: none !important; }

  /* ════════ STUDIO (studio.html) ════════ */
  .tile-foot { flex-wrap: wrap; column-gap: 1rem; row-gap: 0.2rem; align-items: center; }
  .tile-foot .tile-proc { display: inline-flex; align-items: center; min-height: 32px; }
  .tile-foot .count { margin-left: auto; white-space: nowrap; }

  /* ════════ CALLING ALL GODS (calling4.html) ════════ */
  html.ph-cag .topbar nav { display: none !important; }
  .ph-topmenu {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 44px; padding: 0 0 0 1rem; border: 0; background: none; color: var(--ink, #111110);
    font: 400 11.5px/1 var(--mono, monospace); letter-spacing: 0.18em; text-transform: uppercase;
  }
  .ph-topmenu .ph-fab-dot { border-radius: 0; background: var(--red, #E03A1F); }
  html.ph-cag .topbar .in { align-items: center; min-height: 52px; }
  html.ph-cag .topbar .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

  /* Details become a swipe strip that bleeds to the screen edge. */
  html.ph-cag .details {
    flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge));
    padding: 0 var(--edge); scroll-padding: 0 var(--edge); gap: 0.7rem;
  }
  html.ph-cag .details::-webkit-scrollbar { display: none; }
  html.ph-cag .details figure { width: 78vw !important; flex: 0 0 78vw !important; scroll-snap-align: start; }
  html.ph-cag .details figure:only-child { width: 100% !important; flex-basis: 100% !important; }
  html.ph-cag .details figcaption { font-size: 11px; }

  html.ph-cag .ph-fab {
    background: var(--black, #0C0C0B); color: var(--on-black, #F4F2EC);
    font: 400 11.5px/1 var(--mono, monospace); font-variant-caps: normal;
    letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0;
  }
  html.ph-cag .ph-fab-dot { border-radius: 0; background: var(--red, #E03A1F); }
  html.ph-cag .ph-sheet { background: var(--black, #0C0C0B); color: var(--on-black, #F4F2EC); }
  html.ph-cag .ph-head { border-color: var(--on-black-mute, #8F8D86); }
  html.ph-cag .ph-kicker { font-family: var(--mono, monospace); color: var(--on-black-mute, #8F8D86); }
  html.ph-cag .ph-num { color: var(--red, #E03A1F); }
  html.ph-cag .ph-door { border-color: rgba(244,242,236,0.16); }
  html.ph-cag .ph-door .ph-title {
    font-family: var(--head, 'Arial Black', sans-serif); text-transform: uppercase;
    font-size: clamp(1.7rem, 8vw, 2.2rem); letter-spacing: 0;
  }
  html.ph-cag .ph-foot { font-family: var(--sans, Arial, sans-serif); }
  html.ph-cag .ph-foot a { color: var(--on-black, #F4F2EC); }
  html.ph-cag .ph-social a { color: var(--on-black-mute, #8F8D86); }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .ph-fab, .ph-sheet { transition: none; }
}