/* ============================================================
   SARSON CASE STUDY — MOBILE
   ------------------------------------------------------------
   Unlike index.html and pendulo.html, this page does not rebuild
   the phone frame in CSS. The artwork IS the frame: sarson.html
   swaps its <iframe> to Files/sarson-mobile.svg — the 390 x 4870
   export, byte-for-byte his drawing — and scales it to the
   viewport, exactly as it does with the 1440 x 7706 one above the
   breakpoint. Nothing here can drift from the design because
   nothing here redraws it.

   Two things do need CSS:

     1. The header. The export paints a nav (a 55.25,27.25 pill and
        four black labels) and a painted nav cannot be clicked, so
        build/make-sarson-mobile.py strips those five elements and
        the shared HTML nav takes their place at the same
        coordinates — in BLACK here, because on this frame the pill
        sits on the pale hero, not on a dark plate.

     2. The invisible selectable-copy layer, whose boxes are
        percentages of the 1440 artboard and mean nothing against
        the phone frame.

   Loaded AFTER css/nav.css. Breakpoint 768px.
   ============================================================ */

@media (max-width: 768px){

/* ---------- nav ----------
   Geometry is the export's own rect: x=55.25 y=27.25 w=279.5 h=18.5
   rx=9.25 with a 0.5 black stroke. A stroke paints from the centre,
   so the border box is 280x19 at 55,27 with r=9.5.

   The labels are SOLVED, not carried over. The export's four ink
   boxes start at 89.096 / 148.042 / 205.444 / 278.228 and the type
   is Neue Montreal REGULAR at 6px — at 6px the Regular ink widths
   are 13.500 / 15.354 / 28.332 / 20.124 against the export's
   13.500 / 15.347 / 28.338 / 20.130, while Book misses by ten times
   as much. Subtracting each word's left side bearing (0.096 / 0.042
   / 0.444 / 0.228) gives text origins of exactly 89 / 148 / 205 /
   278, i.e. 34 / 93 / 150 / 223 inside the pill.

   Vertically the cap tops sit at 34.710 and Regular's cap is 4.29
   above the baseline at 6px, so the baseline is exactly 39. In a
   6px/6px line box the baseline sits 5.15 below the box top
   (half-leading -0.6 plus a 5.75 ascent), so the box top is 33.85
   — 6.85 inside the pill.

   Regular has to be declared here: css/nav.css ships only the Book
   (350) face, and this page loads no other stylesheet, so asking
   for 400 without this would quietly fall back to Book.

   Every selector carries `.navlayer--static`, matching the
   specificity of css/nav.css's own `@media (max-width:768px)`
   block. A bare `.nav` loses that cascade and the pill comes back
   as nav.css's generic 44px flex bar.
   ------------------------------------------------------------ */
@font-face{
  font-family:'PP Neue Montreal';
  src:url('../assets/fonts/PPNeueMontreal-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:block;
}
.navlayer.navlayer--static{
  position:absolute; left:0; top:0;
  width:100%; height:0; z-index:80;
}
.navlayer--static .navlayer__scale{
  position:relative; left:0; top:0;
  width:390px !important; height:0 !important; padding:0;
  transform-origin:0 0; transform:scale(var(--km)) !important;
}
.navlayer--static .nav{
  position:absolute; left:55px; top:27px;
  width:280px; height:19px;
  display:block; padding:0; margin:0;
  /* no border: a border would move the padding box the four absolute
     labels are positioned against and drift every ink left off the
     frame by the stroke width. The rims are gradient stops instead. */
  border:0; border-radius:9.5px;

  /* ---- glass ----
     Figma's SVG export cannot carry a background blur or a layer
     effect, so the export flattened this pill to a 0.5 black stroke
     and that outline is what the site shipped. This rebuilds the
     drawing.

     The gradient is not eyeballed. Measured off Vishal's reference
     crop (4.166 image px per design px) down a text-free column over
     the flat #F5F5F5 ground, the pill runs:

        0.0-1.5   +9   a hard white rim
        1.5-6.4   +8 -> 0   white falling away
        6.4-7.8    0   the ground shows through untinted
        7.8-18.0  -1 -> -11 a shadow gathering at the foot
       18.4-19.2   +9   a second white rim along the bottom edge

     Solving each delta back to an alpha over 245 (white can only add
     10, so +9 is .90; -11 is black at .045) gives the stops below;
     recomposited they land within 1.2/255 of the measurement at every
     height. Percentages are of 19.3px, the rim-to-rim height.

     The blur is the one value that is NOT measured — a single
     screenshot cannot separate the radius from the backdrop it
     sampled. 7px is read off how far the rock smears behind the
     right-hand end. */
  background:linear-gradient(180deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.90) 7%,
    rgba(255,255,255,.78) 10%,
    rgba(255,255,255,.55) 14%,
    rgba(255,255,255,.35) 19%,
    rgba(255,255,255,.18) 26%,
    rgba(255,255,255,0)   34%,
    rgba(0,0,0,.004) 42%,
    rgba(0,0,0,.012) 67%,
    rgba(0,0,0,.022) 76%,
    rgba(0,0,0,.033) 86%,
    rgba(0,0,0,.045) 94%,
    rgba(0,0,0,.045) 95.5%,
    rgba(255,255,255,.92) 96%,
    rgba(255,255,255,.92) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);
  backdrop-filter:blur(7px) saturate(1.05);
}
/* black, not the shared --dark white: this pill is drawn over the
   hero photograph's pale top edge. */
.navlayer--static .nav--dark a,
.navlayer--static .nav a{
  position:absolute; color:var(--c-charcoal); white-space:nowrap;
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:400; font-size:6px; line-height:6px;
}
.navlayer--static .nav a .roll{
  display:block; height:auto; overflow:visible;
  padding-right:0; transform:none !important;
}
.navlayer--static .nav a .roll i{ display:none; font-style:normal }
.navlayer--static .nav a .roll i:first-child{ display:block; position:static }
.navlayer--static .nav a .roll i:last-child{ display:none }
.navlayer--static .nav a:hover .roll i{ transform:none }
.navlayer--static .nav a{ top:6.85px !important }
.navlayer--static .nav a:nth-child(1){ left:34px !important }
.navlayer--static .nav a:nth-child(2){ left:93px !important }
.navlayer--static .nav a:nth-child(3){ left:150px !important }
.navlayer--static .nav a:nth-child(4){ left:223px !important }

/* ---------- page ---------- */
/* The frame's own ground, so a rounding gap under the artwork reads as
   part of it rather than as a black band. !important because sarson.html's
   inline <style> is parsed after this file and sets the same two elements
   to #000 at the same specificity — a media query adds none. */
html,body{ background:var(--c-bg) !important }

/* The export paints "Work" as the first label; the site says "Home"
   at every width, on every page. Deliberate — Vishal asked for one
   word. It is the one place this phone frame does not follow its
   own ink. */

/* the selection layer is authored in percentages of the 1440
   artboard — on the phone frame those land nowhere near their words */
.selectable-copy{ display:none !important }

}