/* ============================================================
   MONTEREY STUDIO — mobile.css
   All responsive overrides. Loaded last.
   Owner: mobile specialist
   Direction: design/direction.md §10 — touch primary, day rail,
   shadow cap 48px, headline on the horizon with its reflection.

   Round-3 composition: portrait gives the frame to the SEA and
   the viewport closes with PROOF. Two-deck header only (brand +
   talk, then the services line — the coordinates row is gone).
   Headline stands on a 35vh horizon with opened word gaps; its
   reflection is hard-capped to a ~4vh chromatic whisper by a
   screen-blend glare burn. The lower half is no longer haze:
   the evidence deck — the site's best material — is set large
   at ~66vh as a three-line instrument block, seated on darkened
   near water, with the scroll cue at the foot. The day rail is
   a drawn gauge (ticked track, sun fully inside the edge), and
   TALK TO US carries a real 44px touch target.
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --gutter: clamp(1.1rem, 5vw, 2rem);
    /* Shadow cap 48px is enforced in motion.js; default here too */
    --shadow-len: 8px;
    /* Portrait horizon: the sea owns ~65% of the frame and the
       headline — kept ON the horizon per §10 — rises into the
       upper third. ocean.js reads this var, so the WebGL
       waterline, camera pitch and reflection all follow. */
    --horizon: 35vh;
    --horizon-b: 65vh;
  }

  /* Re-anchor the painted sky to the mobile horizon (the desktop
     gradient hard-codes 62% stops). Same recipe, var-driven. */
  #backdrop {
    background: linear-gradient(
      to bottom,
      var(--sky-top) 0%,
      var(--sky-mid) calc(var(--horizon) * 0.56),
      var(--sky-hor) calc(var(--horizon) - 0.6vh),
      color-mix(in srgb, var(--sky-hor) 55%, var(--sea-far)) var(--horizon),
      var(--sea-far) calc(var(--horizon) + 7vh),
      var(--sea-near) 100%
    );
  }

  /* ----------------------------------------------------------
     Chrome — TWO decks, like the bar: brand row (wordmark left,
     TALK TO US right), then one positioning line. The clock and
     the coordinates rows are gone on mobile — the day rail
     carries the sun, and nothing decorative steals header space.
     ---------------------------------------------------------- */
  #chrome {
    display: block;
    padding: calc(0.9rem + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  }
  /* Day-lit scrim: content scrolling under the fixed chrome dims
     into the sky instead of colliding with the wordmark. Mixed
     from --sky-top, so it tracks the hour. */
  #chrome::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4.8rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--sky-top) 94%, transparent),
      color-mix(in srgb, var(--sky-top) 62%, transparent) 55%,
      transparent
    );
  }
  /* The brand yields a little at this width: the header now
     carries two controls, and a collision with the sound toggle
     costs more than a few px of wordmark. NOTE the #chrome
     prefix — hero.css sets `#chrome .wordmark` at 1.02rem, which
     outranks a bare `.wordmark` here no matter the load order
     (the old rule below never applied). */
  #chrome .wordmark {
    display: inline-block;
    font-size: 0.86rem;
    letter-spacing: 0.13em;
  }
  .chrome-right {
    display: block;
    margin: 0;
    max-width: none;
    text-align: left;
  }
  .skyline { display: none; }        /* the day rail is the sun gauge */
  /* TALK TO US — a real thumb target (≥44px tall), optics kept:
     the underline hugs the text via text-decoration, not the
     padded border box. */
  /* The action row — sound toggle + TALK TO US — rides the top
     right corner as one unit, so the pill no longer positions
     itself. Both carry real thumb targets. */
  .chrome-actions {
    position: absolute;
    top: calc(0.05rem + env(safe-area-inset-top, 0px));
    right: calc(var(--gutter) - 0.55em);
    align-items: center;
    gap: 0.45rem;
  }
  .soundbtn {
    width: 2.6rem;
    height: 2.6rem;
  }
  .talk {
    position: static;
    font-size: 0.72rem;
    padding: 1.1em 0.9em 1em;
    border-bottom: 0;
    /* integration pass: .talk is now a solid Ember CTA site-wide;
       the old underline treatment is redundant on the filled pill */
    text-decoration: none;
  }
  #dial { display: none; }           /* replaced by the day rail */
  #ghbadge { font-size: 0.6rem; margin: 0.35rem 0 0; }

  /* Day rail — the §10 right-edge sun-height gauge, drawn as an
     instrument: a hairline track with end ticks, and the sun a
     ringed dot riding fully INSIDE the viewport. Nothing clips. */
  #dayrail {
    display: block;
    position: fixed;
    right: 12px;
    top: 13vh;
    bottom: 13vh;
    width: 2px;
    z-index: 21;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--offshore) 62%, transparent),
      color-mix(in srgb, var(--offshore) 38%, transparent)
    );
    pointer-events: none;
  }
  /* end ticks: noon at the top of the track, sunset at the foot */
  #dayrail::before,
  #dayrail::after {
    content: '';
    position: absolute;
    left: -3px;
    width: 8px;
    height: 2px;
    background: color-mix(in srgb, var(--offshore) 72%, transparent);
  }
  #dayrail::before { top: -2px; }
  #dayrail::after { bottom: -2px; }
  #dayrail .rail-sun {
    position: absolute;
    left: 50%;
    top: calc((1 - var(--sun-elev)) * 100%);
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: var(--r-full);
    background: var(--low-sun);
    /* a sky-colored ring seats the dot ON the track, gauge-style */
    box-shadow:
      0 0 0 2.5px color-mix(in srgb, var(--sky-top) 92%, transparent),
      0 0 6px 1px color-mix(in srgb, var(--low-sun) 45%, transparent);
  }

  /* ----------------------------------------------------------
     Hero — §5 recomposed for portrait. Brand deck, services
     subhead, sun bloom, then the headline standing on a high
     horizon with a whisper of reflection — and the evidence
     figures riding the open water above the fold.
     ---------------------------------------------------------- */
  /* Word gaps OPENED: at 900-weight caps with negative tracking
     the space glyph collapses and GOLDEN HOUR scans as one word.
     A hair off the size pays for real air between words. */
  #headline {
    font-size: clamp(2.5rem, 10.55vw, 6.8rem);
    font-variation-settings: 'wght' 900, 'wdth' 101;
    letter-spacing: -0.026em;
    word-spacing: 0.16em;
  }

  /* Live shadow, mobile grade: same §2 recipe, same sun vector.
     The tight layer is a soft low grounding — the face reads lit
     by the sky, never outlined by a default drop shadow. */
  .display {
    word-spacing: 0.12em;
    text-shadow:
      calc(var(--shadow-dx) * 0.28) calc(var(--shadow-dy) * 0.3) 4px
        color-mix(in srgb, var(--afterglow-ink) 14%, transparent),
      var(--shadow-dx) var(--shadow-dy) calc(var(--shadow-len) * 1.2)
        color-mix(in srgb, var(--ember) 12%, transparent);
  }

  /* The sun made visible where the header data points: a white-
     hot bloom high in the short sky, wash pouring toward the
     waterline — and a HARD REFLECTION CAP: the glitter path's
     glare burns out the mirrored headline past ~4vh, so only a
     chromatic whisper survives at the waterline, never a second
     legible headline. Screen blend: it can only add light. */
  .hero-glare {
    --gx: calc(50% + var(--sun-x) * 30%);
    --gy: calc(11% + (1 - var(--sun-elev)) * 40%);
    background:
      /* the sun's core — a white-hot center inside the noon
         glare, so the sky owns a real focal source, no ring */
      radial-gradient(11vw 11vw at var(--gx) var(--gy),
        color-mix(in srgb, var(--noon-haze) 88%, var(--low-sun)) 0%,
        color-mix(in srgb, var(--noon-haze) 72%, var(--low-sun)) 45%,
        transparent 100%),
      radial-gradient(30vw 30vw at var(--gx) var(--gy),
        color-mix(in srgb, var(--noon-haze) 66%, var(--low-sun)) 0%,
        color-mix(in srgb, var(--noon-haze) 45%, var(--low-sun)) 22%,
        color-mix(in srgb, var(--golden-hour) 52%, transparent) 50%,
        transparent 74%),
      /* broad atmospheric wash pouring down toward the horizon */
      radial-gradient(120vw 88vh at var(--gx) calc(var(--gy) + 15%),
        color-mix(in srgb, var(--golden-hour) 38%, transparent) 0%,
        color-mix(in srgb, var(--golden-hour) 13%, transparent) 45%,
        transparent 75%),
      /* haze bloom hugging the waterline under the sun */
      radial-gradient(70vw 13vh at var(--gx) var(--horizon),
        color-mix(in srgb, var(--noon-haze) 50%, transparent) 0%,
        transparent 70%),
      /* warm glare pool riding the mirror zone under the sun —
         the burn is brightest where the glitter path lands */
      radial-gradient(95vw 12vh at var(--gx) calc(var(--horizon) + 8vh),
        color-mix(in srgb, var(--noon-haze) 55%, transparent) 0%,
        color-mix(in srgb, var(--golden-hour) 34%, transparent) 55%,
        transparent 80%),
      /* full-width burn band: lets ~4vh of ripple-broken ink
         ghost through at the line, then washes the rest out */
      linear-gradient(to bottom,
        transparent calc(var(--horizon) + 1vh),
        color-mix(in srgb, var(--sky-hor) 38%, transparent) calc(var(--horizon) + 2.8vh),
        color-mix(in srgb, var(--noon-haze) 86%, transparent) calc(var(--horizon) + 5.2vh),
        var(--noon-haze) calc(var(--horizon) + 8vh),
        color-mix(in srgb, var(--noon-haze) 90%, transparent) calc(var(--horizon) + 12vh),
        color-mix(in srgb, var(--noon-haze) 52%, transparent) calc(var(--horizon) + 17vh),
        color-mix(in srgb, var(--golden-hour) 24%, transparent) calc(var(--horizon) + 22vh),
        transparent calc(var(--horizon) + 28vh));
    mix-blend-mode: screen;
    opacity: calc(0.78 + var(--sun-warmth) * 0.22);
  }

  /* The services line is deck two of the header — the position
     statement, set directly under the brand, dark and quiet. */
  .hero-services {
    top: calc(2.62rem + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: var(--gutter);
    max-width: none;
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--kelp);
    text-shadow: none;
  }

  /* THE EVIDENCE DECK — the site's strongest figures close the
     first viewport, set as a three-line instrument block on the
     darkened near water. Presentation only: the real, selectable
     records live in #evidence below. */
  #hero::before {
    content: 'Bookings tripled for a Cannery Row inn\A Page 2 → #1 on the search that fills the boats\A Recommended by ChatGPT, Claude & Grok';
    white-space: pre-line;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 66vh;
    z-index: 2;
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 2.05;
    /* engraved in ink inside its own pool of haze — the same
       veil treatment the stanzas use, so it reads as one system */
    color: color-mix(in srgb, var(--afterglow-ink) 90%, transparent);
    text-shadow:
      0 0 10px color-mix(in srgb, var(--noon-haze) 85%, transparent),
      0 1px 24px color-mix(in srgb, var(--noon-haze) 60%, transparent);
    padding: 0.9rem 0 1rem;
    border-top: 1px solid color-mix(in srgb, var(--afterglow-ink) 30%, transparent);
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--sky-mid) 52%, transparent),
      color-mix(in srgb, var(--sky-mid) 34%, transparent) 70%,
      transparent
    );
  }

  /* One centered cue at the foot, like an instrument reading */
  .hero-scroll {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  /* The sea gathers real depth across the lower third so the
     evidence deck and the cue rest on still, darkening water —
     no empty bright haze band at the fold. */
  #hero::after { height: 44vh; }

  /* ----------------------------------------------------------
     Stanza rhythm — clear the chrome, keep one thought per view
     ---------------------------------------------------------- */
  .stanza { padding-top: 19vh; }
  #evidence { padding-top: 16vh; }

  .display { font-size: clamp(3rem, 15vw, 8rem); }
  .display-2 { font-size: clamp(2.2rem, 10.2vw, 4.2rem); }

  /* Marine-haze veil: with the high horizon most stanza text now
     stands in the water, so the feathered wash — mixed live from
     --sky-mid — carries more of the legibility. Reads as haze,
     not as a card. */
  .stanza .stanza-inner,
  #studio .manifesto,
  #evidence .proof-rows {
    position: relative;
  }
  .stanza .stanza-inner::before,
  #studio .manifesto::before,
  #evidence .proof-rows::before {
    content: '';
    position: absolute;
    inset: -6vh calc(-1 * var(--gutter)) -10vh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--sky-mid) 60%, transparent) 10%,
      color-mix(in srgb, var(--sky-mid) 80%, transparent) 45% 92%,
      transparent
    );
  }

  #studio .manifesto { font-size: 1.15rem; }

  .proof-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .figure-mono { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .proof-row .clause { font-size: 1rem; }

  /* ----------------------------------------------------------
     Demos — fat touch targets (§10), instrument text that reads
     over water
     ---------------------------------------------------------- */
  .demo { margin-top: var(--s-4); gap: var(--s-2) var(--s-4); }
  #wind {
    width: 100%;
    height: 28px;                  /* 28px hit area… */
    padding: 13px 0;               /* …with a 2px visible track */
    background: color-mix(in srgb, var(--kelp) 42%, transparent);
    background-clip: content-box;
  }
  #wind::-webkit-slider-thumb { width: 28px; height: 28px; }
  #wind::-moz-range-thumb { width: 28px; height: 28px; }
  #askform { max-width: none; }     /* the one full-width element */
  #askform button { padding: 0.8em 0.2em 0.8em 0.9em; }

  /* Buoys ride the darker near water with the high horizon —
     keep the default light ink and push them below the stanza. */
  .buoys {
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    justify-content: flex-start;
    top: calc(var(--horizon) + 46vh);
  }

  /* The machine echo sits at the waterline here — dark ink */
  .machine-echo {
    color: color-mix(in srgb, var(--kelp) 88%, var(--noon-haze));
    text-shadow: none;
  }


  .pull { font-size: 1.12rem; margin-top: var(--s-4); }

  /* Compass card starts deeper in the water so it never covers
     the pull-quote or the stanza list */
  .compass {
    left: var(--gutter);
    top: calc(var(--horizon) + 53vh);
  }

  .contact-lines a { padding: 0.3em 0; }

  .tide-table th { padding-right: 1.2em; }
  .tide-table { font-size: 0.68rem; }
  .tide-table td { line-height: 2; }   /* tappable link rows */
  .colophon { font-size: 0.62rem; }
}

@media (min-width: 901px) {
  #dayrail { display: none; }
}

@media (max-width: 520px) {
  .buoys li:nth-child(n+4) { display: none; }
  .contact-lines a { font-size: 1.1rem; }
  .display-2 { font-size: clamp(2.3rem, 10.8vw, 3.6rem); }
}

/* ------------------------------------------------------------
   Reduced motion (§8.6): static painted scene, fully composed.
   The clock, badge, green flash (simple fade) and lighthouse
   survive. No cursor-sun.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sea, html.gl #sea { display: none; }
  html.gl #backdrop::after { opacity: 0.85; }
  html.js .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .buoys li { animation: none; }
  #wake { display: none; }
  #flash.go { animation: none; opacity: 0.5; transition: opacity 600ms linear; }
  * { animation-duration: 0.001s !important; }
  #lighthouse .lamp { animation: occult 4s step-end infinite !important;
    animation-duration: 4s !important; } /* the lighthouse survives */
}