/* ============================================================
   BLOOM / FIRE ISLAND / VISUAL — MOBILE
   ------------------------------------------------------------
   Like sarson.html and unlike index.html or pendulo.html, these
   three pages do not rebuild the phone frame in CSS. The artwork
   IS the frame: each page swaps its <iframe> to its own 390-wide
   export — Files/bloom-mobile.svg (390 x 3667),
   Files/fire-island-mobile.svg (390 x 5137) and
   Files/visual-mobile.svg (390 x 4971) — and scales it to the
   viewport exactly as it does the 1440 one above the breakpoint.
   Nothing here can drift from the design because nothing here
   redraws it.

   Only two things need CSS:

     1. The header. Each export paints a nav (the 55.25,27.25 pill
        and four labels) and a painted nav cannot be clicked, so
        build/make-case-mobile.py strips those five elements and
        the shared HTML nav takes their place at the same
        coordinates. All three frames draw it in WHITE — these
        pages are black under the pill, unlike Sarson's pale hero.
     2. The invisible selectable-copy layer, whose boxes are
        percentages of the 1440 artboard and mean nothing against
        the phone frame.

   Sarson keeps its own sheet rather than joining this one: its
   pill sits on a photograph and is drawn as glass, which is a
   different rebuild from the hairline these three carry.

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

@media (max-width: 768px){

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

   The hairline is an inset box-shadow, not a border: a border
   shrinks the padding box the four absolute labels are positioned
   against and would drift every ink left off the frame by the
   stroke width.

   The labels are SOLVED, not carried over — the same solve as
   css/sarson-mobile.css, because it is the same painted nav. The
   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
   exports' 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 these pages load 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;
  border:0; border-radius:9.5px;
  background:transparent;
  box-shadow:inset 0 0 0 .5px var(--c-ivory);   /* the export's 0.5 stroke */
}
.navlayer--static .nav--dark a,
.navlayer--static .nav a{
  position:absolute; color:var(--c-ivory); 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 frames' own ground, so a rounding gap under the artwork reads
   as part of it rather than as a band. !important because each
   page's inline <style> is parsed after this file and sets the same
   two elements at the same specificity — a media query adds none. */
html,body{ background:var(--c-bg) !important }

/* The exports paint "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 these phone frames do not follow their
   own ink. */

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

}