/* ============================================================
   phone.css — the handset layer
   path: /lib/phone.css
   purpose: These pages are mostly read on a phone, and the type
            scale that reads as "editorial" on a 27-inch display
            bottoms out around 9px on a 360px screen. This file
            raises the small-caps/mono floor to something you can
            actually read at arm's length, gives every control a
            44px touch box, and stops iOS zooming the page when a
            form field takes focus.

            Loaded after each direction's own <style>, so it wins
            without any of them needing to know it exists.
   ============================================================ */

/* lib/nav.js always appends the book bar, on every viewport — it is
   only ever meant to be seen on a handset. Without this, a visitor
   on a desktop or tablet gets a raw, unstyled "Book → Call" line
   dropped at the end of the document. */
.bookbar { display: none; }

@media (max-width: 640px) {

  /* ----------------------------------------------------------
     1. TYPE FLOOR

     Nothing on a handset reads below 12px. The declarations are
     marked !important on purpose: this is a device layer whose
     whole job is to have the last word over three hand-written
     stylesheets, several of which set these sizes from nested
     selectors that would otherwise win on specificity. The scope
     is deliberately narrow — size and tracking only, inside one
     media query.

     Letterspaced uppercase grows wider as it grows taller, so the
     tracking comes down as the size goes up; without that these
     labels wrap or push the page sideways.
     ---------------------------------------------------------- */

  /* micro labels: eyebrows, tags, table keys, meta */
  .eyebrow, .lab, .kx, .tag, .sub, .strip-label,
  .net, .m, .st, .c, .kind, .yr, .no, .n, .fr,
  .post-meta, .stop-dates, .stop-status, .stop-no,
  .form-note, .f-note, .live, .avail, .stars, .specline,
  .digitals-note, .sheet-note, .hero-roles, .roles,
  .who span, .by span, .stat span, .index a, .index .c,
  .agegate-mark,
  dt, small, cite, label, h4, figcaption, legend, th {
    font-size: .75rem !important;
    letter-spacing: .12em !important;
  }

  /* the same family, but sentences rather than labels — tracking
     off, and a line-height that lets them breathe */
  cite, figcaption, .stop-note, .post-ex,
  .disc, .disclaimer, .fineprint, .f-fine, .note, .help {
    letter-spacing: 0 !important;
    line-height: 1.6;
  }

  /* Five lines of letterspaced capitals is a wall, not fine print —
     on a phone the disclaimer goes back to being a sentence. */
  .disc, .disclaimer, .fineprint, .f-fine {
    text-transform: none !important;
    letter-spacing: .005em !important;
    line-height: 1.65;
  }

  /* fine print and footers */
  .foot, .foot-b, .foot-bottom, .footer,
  .disc, .disclaimer, .fineprint, .f-fine {
    font-size: .78rem !important;
    letter-spacing: .01em !important;
  }
  .foot .mono, .foot-b .mono, .foot-bottom .mono,
  .foot small, .foot-b small, .foot-bottom small {
    letter-spacing: .1em !important;
  }

  /* running copy */
  .lede, .note, .post-ex, .stop-note, .about-copy p, .bio p {
    font-size: .95rem !important;
    letter-spacing: 0 !important;
  }

  /* terms and rate cards read as headings again */
  h4, .terms h4, .term h4 {
    font-size: .82rem !important;
    letter-spacing: .1em !important;
  }

  /* form labels sit right above their field — they need to be read,
     not decoded */
  label, .field label, .f label {
    font-size: .75rem !important;
    letter-spacing: .1em !important;
  }

  /* a section numeral is a marker on a phone, not a poster */
  .sec-index, .kn {
    font-size: clamp(2.2rem, 12vw, 3.2rem) !important;
  }

  /* ----------------------------------------------------------
     2. TOUCH TARGETS
     44px is the floor a thumb can hit reliably.
     ---------------------------------------------------------- */
  .btn,
  .cta,
  .solid,
  .link,
  .lnk,
  .chip,
  .index a,
  .nav-burger,
  .burger,
  .imgbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-size: .78rem;
    letter-spacing: .14em;
  }

  .btn,
  .cta,
  .solid {
    padding-inline: 1.25em;
  }

  /* number, destination, then the thing worth knowing — three
     columns, not three things pushed to the corners */
  .index a{
    display: grid;
    grid-template-columns: 2.4rem minmax(0,1fr) auto;
    align-items: center;
    justify-content: stretch;
    text-align: left;
    width: 100%;
    gap: .6rem;
  }
  .index a .c{ text-align: right; }

  /* the wordmark is a link home — give it a real box */
  /* inline-flex drops the whitespace between the two name parts, so
     the gap comes back as a real gap. Scoped to the bars a phone
     actually shows — a bare .rail-mark rule would out-rank the
     `.rail > *{display:none}` that collapses the desktop rail and
     bring a second wordmark back onto the screen. */
  .nav .brand,
  .nav .mark,
  .topbar .rail-mark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .28em;
  }

  /* contact rows, channel rows and footer links are all thumb
     targets, not prose */
  .chan a,
  .social,
  .socials a,
  .contact-list a,
  .foot a,
  .f-links a,
  .bk a[href^="mailto"],
  .bk a[href^="tel"],
  .book a[href^="mailto"],
  .book a[href^="tel"],
  a[href^="mailto"],
  a[href^="tel"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ----------------------------------------------------------
     3. FORMS
     iOS zooms the whole page when a focused field is under 16px.
     ---------------------------------------------------------- */
  /* 16px exactly — anything smaller and iOS zooms the whole page
     the moment the field takes focus, and the reader has to pinch
     their way back out */
  input, textarea, select,
  .field input, .field textarea, .field select,
  .f input, .f textarea, .f select {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea {
    min-height: 7.5rem;
    line-height: 1.55;
  }
  button[type="submit"],
  .btn[type="submit"] {
    width: 100%;
  }

  /* ----------------------------------------------------------
     4. BREATHING ROOM
     ---------------------------------------------------------- */
  .railstrip {
    --railstrip-item: clamp(150px, 46vw, 190px);
    scroll-padding-left: var(--pad, 1.15rem);
  }

  .stop {
    padding-block: 1.15rem;
    row-gap: .5rem;
  }

  .post {
    padding: 1.15rem 1.1rem 1.3rem;
  }

  /* Stacked hero actions get equal weight and full width. The
     secondary one gains an outline: a bare centred text link in a
     column of full-width buttons reads as stray text, not a choice. */
  .hero-actions > a,
  .hero-actions > button,
  .mast-actions > a,
  .acts > a {
    flex: 1 1 100%;
    width: 100%;
  }
  .mast-actions .link,
  .hero-actions .lnk,
  .hero-actions .link,
  .acts .lnk {
    border: 1px solid rgba(255,255,255,.22);
  }

  /* ----------------------------------------------------------
     5. BOOK BAR
     A booking site on a phone should never be more than a thumb
     away from the enquiry form. Injected by lib/nav.js from the
     nav's own Book link, so it carries whatever that says.
     ---------------------------------------------------------- */
  .bookbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: flex;
    gap: .6rem;
    padding: .6rem var(--pad, 1.15rem) calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bookbar-ground, #08080c) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid var(--bookbar-line, rgba(255,255,255,.12));
    transform: translateY(110%);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
  }
  .bookbar.is-up { transform: none; }
  [data-nav-open] .bookbar { transform: translateY(110%); }

  .bookbar a {
    flex: 1 1 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .bookbar .bookbar-go {
    background: var(--bookbar-accent, #FF3D68);
    color: var(--bookbar-accent-ink, #12040A);
    border-radius: var(--bookbar-radius, 999px);
  }
  .bookbar .bookbar-call {
    flex: 0 0 auto;
    padding-inline: 1.1em;
    border: 1px solid var(--bookbar-line, rgba(255,255,255,.18));
    border-radius: var(--bookbar-radius, 999px);
    color: inherit;
  }

  /* the bar sits over the footer — give the page somewhere to end */
  body { padding-bottom: 4.5rem; }
}

/* Landscape phones are short: the fixed bar and the drawer would
   eat the whole screen, so the bar stands down. */
@media (max-width: 900px) and (max-height: 460px) {
  .bookbar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bookbar { transition: none; }
}