/* soyoki-mobile-sheet.css — THE MOBILE SHEET, one owner.

   Extracted from index.html's mobile block 2026-09-22, on the operator's
   fourth telling that the sk-01 authed page must use "the exact same page
   layout" as the public page. It was being re-described per page instead of
   shared, which is the forked-source-of-truth failure the codification names:
   a second copy drifts, and the drift is invisible until someone looks at the
   rendered surface.

   CONSUMERS: _deploy/index.html (the single page) and _deploy/sk-01/index.html
   (the authed page). Both <link> this before their own mobile blocks, so a
   page can still override a value — but the LAYOUT is stated once, here.

   Everything is gated ≤980. Desktop and iPad never see any of it. */

/* THE DESKTOP DEFAULT LIVES HERE TOO, AND IT HAS TO (2026-09-22): the
   consuming page used to carry `#mground{display:none}` inline as the
   ≥981 default. Left there it sits LATER in the cascade than this file's
   `display:block` — and a media query adds no specificity — so the later
   rule won and the ground rig was hidden at every width: no plates, no
   parallax. Both states are stated here, in order, so the pair cannot be
   split again. */
#mground{display:none}

@media (max-width:980px){

  /* ═══ THE SCROLL OWNER ═══════════════════════════════════════════════
     The family ships html,body{height:100%;overflow:hidden}
     (soyoki-shared.css l.3). A sheet page IS the document, so the document
     scrolls. BODY STAYS VISIBLE: overflow-y:auto on body makes BODY a
     scroll container, and the sheets' snap areas then bind to body — which
     carries no snap-type — so the viewport's snap governs nothing. */
  html{overflow-y:auto!important;height:auto!important}
  body{overflow:visible!important;height:auto!important}

  /* ═══ THE SNAP ═══════════════════════════════════════════════════════
     Native mandatory, the hairline seated by scroll-padding — the state the
     operator approved. Two alternatives were tried and rejected on his
     screen: proximity (never engages on the iOS root scroller) and a JS
     scroll-end seam assist. Known cost, weighed and accepted: near a long
     sheet's end the next seam can pull before the tail is read. */
  html{scroll-snap-type:y mandatory;scroll-padding-top:10svh}
  .msec,.msec-home{scroll-snap-align:start}

  /* ═══ THE SHEET ══════════════════════════════════════════════════════
     Air above the title (12svh below its hairline), 20svh after the
     content, at least one viewport tall. The hairline is drawn by ::before
     from the 56px content edge to the 22px right inset — never border-top,
     which would span the box and run under the left rail. */
  .msec{min-height:100lvh;box-sizing:border-box;position:relative;padding:12svh 22px 20svh 56px}
  .msec::before{content:'';position:absolute;top:0;left:56px;right:22px;height:1px;background:var(--hair)}
  .msec .mh1{margin:0;font-family:'Cheee',var(--grotesk);font-weight:400;font-size:30px;line-height:1;letter-spacing:.01em;color:var(--ink);text-shadow:var(--shadow)}
  .msec .mst{margin:6px 0 0;font:400 15px/1.3 var(--serif);color:var(--ink-dim)}

  /* the filled sheet: intro at the top, the note following at a generous
     fixed interval. (A 61svh forced seat was tried — a desktop value that
     becomes a hole on a scrolling sheet.) */
  .msec-t{display:block}
  .msec-t .mtop{align-self:start}
  .msec-t .mnote{align-self:start;margin-top:14svh}

  /* the measure: the sheet pads right 22, the copy carries the other 34 */
  .msec .mcopy,.msec .mnote{margin-right:34px;font:400 16px/1.55 var(--serif);color:rgba(236,231,221,.92)}
  .msec .mcopy{margin-top:18px}
  .msec .mcopy p,.msec .mnote p{margin:0 0 .9em}

  /* the margin-note register — aexis's own .c.note values, verbatim */
  .msec .mfine{font:italic 400 12.5px/1.55 var(--serif);color:rgba(236,231,221,.60)}

  /* the fact line and the one door, the family's own values */
  .msec .fx{font-size:12px;line-height:1.5;color:rgba(236,231,221,.48);margin-top:10px}
  .msec .k3link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,231,221,.35);padding-bottom:1px;transition:border-color .35s ease}
  .msec .k3link:hover{border-color:rgba(236,231,221,.85)}
  .msec .k3link:focus-visible{outline:1px solid rgba(236,231,221,.6);outline-offset:3px}
  .msec a.wk{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,231,221,.30);padding-bottom:1px}
  .msec a.wk:hover{color:rgba(236,231,221,1);border-bottom-color:rgba(236,231,221,.62)}
  .msec a.wk:focus-visible{outline:1px solid rgba(236,231,221,.9);outline-offset:3px;border-bottom-color:transparent}
  .msec a.wk span{margin-left:.3em}

  /* ═══ THE GROUND ═════════════════════════════════════════════════════
     The page sits on the family dark and its own plate carries the ground;
     the nebula steps aside. Plates are sized in lvh, NOT svh: with Safari's
     bars collapsed the real viewport is taller than 100svh, so an svh-sized
     plate shows its bottom edge. */
  #gl{display:none!important}
  html,body{background:#08090d!important}
  #mground{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  #mground video{position:absolute;left:0;top:-8lvh;width:100%;height:116lvh;object-fit:cover;opacity:0}

  /* ═══ THE EDGE SCRIMS (moved here from index.html 2026-09-25 — this file's
     charter IS the pair of pages that carry them; one owner, both consumers).
     Real elements, never html pseudos: the html::before scrims compute as
     painting and paint in neither engine on a root-scrolling page. The seam
     is solved at FULL OPACITY in the bars' own ink (#08090d): the page's
     edge row and the bar are the same pixel, so there is no line. Eased
     cubic falloff below the hold. z4 — over the plates (1) and any canvas
     (2), under the copy (5). Each page carries the two divs in markup. */
  html::before,html::after{display:none!important}
  #medge-t,#medge-b{display:block;position:fixed;left:0;right:0;z-index:4;pointer-events:none}
  #medge-t{top:0;height:max(24vh,210px);background:linear-gradient(180deg,
    rgb(8,9,13) 0%, rgb(8,9,13) 5%, rgba(8,9,13,.93) 12%, rgba(8,9,13,.82) 21%,
    rgba(8,9,13,.68) 31%, rgba(8,9,13,.53) 42%, rgba(8,9,13,.38) 53%, rgba(8,9,13,.24) 65%,
    rgba(8,9,13,.13) 76%, rgba(8,9,13,.05) 87%, rgba(8,9,13,.01) 95%, rgba(8,9,13,0) 100%)}
  #medge-b{bottom:0;height:max(28vh,240px);background:linear-gradient(0deg,
    rgb(8,9,13) 0%, rgb(8,9,13) 5%, rgba(8,9,13,.93) 12%, rgba(8,9,13,.82) 21%,
    rgba(8,9,13,.68) 31%, rgba(8,9,13,.53) 42%, rgba(8,9,13,.38) 53%, rgba(8,9,13,.24) 65%,
    rgba(8,9,13,.13) 76%, rgba(8,9,13,.05) 87%, rgba(8,9,13,.01) 95%, rgba(8,9,13,0) 100%)}
}