/* v5 · C · round 4 · front D · the global mobile layer. Loads after every other sheet.
   The header that steps aside, the bottom bar, safe areas, touch (no marker cursor), the paper fibre without a blend
   on phones, and the spring curves the rest of the page borrows (CSS linear(), from real spring equations). */

:root {
  /* springs (stiffness / damping, mass 1): each part of the page picks its own */
  --sp-soft: linear(0, 0.031, 0.109, 0.215, 0.334, 0.456, 0.572, 0.677, 0.769, 0.847, 0.909, 0.958, 0.994, 1.02, 1.036, 1.046, 1.05, 1.049, 1.046, 1.042, 1.036, 1.03, 1.024, 1.018, 1.013, 1.009, 1.006, 1.003, 1.001, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 1);          /* 170/18 · .73s */
  --sp-snap: linear(0, 0.033, 0.115, 0.226, 0.351, 0.477, 0.597, 0.705, 0.798, 0.875, 0.936, 0.982, 1.015, 1.037, 1.05, 1.056, 1.057, 1.054, 1.048, 1.041, 1.034, 1.027, 1.021, 1.015, 1.01, 1.006, 1.003, 1, 0.999, 0.998, 0.997, 0.997, 0.997, 0.997, 0.997, 0.998, 1);            /* 220/20 · .66s */
  --sp-bouncy: linear(0, 0.046, 0.161, 0.315, 0.483, 0.645, 0.79, 0.91, 1.002, 1.067, 1.106, 1.125, 1.127, 1.118, 1.101, 1.08, 1.059, 1.038, 1.021, 1.007, 0.996, 0.989, 0.985, 0.984, 0.984, 0.986, 0.988, 0.991, 0.993, 0.996, 0.998, 1, 1.001, 1.002, 1.002, 1.002, 1);         /* 120/12 · 1.06s */
  --sp-quick: linear(0, 0.033, 0.118, 0.233, 0.363, 0.495, 0.62, 0.732, 0.828, 0.907, 0.968, 1.014, 1.045, 1.064, 1.073, 1.075, 1.072, 1.065, 1.056, 1.046, 1.037, 1.027, 1.019, 1.012, 1.006, 1.002, 0.999, 0.996, 0.995, 0.994, 0.994, 0.995, 0.995, 0.996, 0.997, 0.997, 1);        /* 300/22 · .57s */
  --sp-glide: linear(0, 0.02, 0.072, 0.146, 0.233, 0.326, 0.421, 0.513, 0.6, 0.679, 0.75, 0.812, 0.864, 0.909, 0.945, 0.974, 0.996, 1.013, 1.024, 1.032, 1.037, 1.039, 1.039, 1.037, 1.035, 1.032, 1.028, 1.024, 1.021, 1.017, 1.014, 1.011, 1.008, 1.006, 1.004, 1.003, 1);          /* 140/17 · .64s */
  --sp-firm: linear(0, 0.022, 0.079, 0.157, 0.246, 0.34, 0.434, 0.522, 0.604, 0.678, 0.743, 0.799, 0.846, 0.886, 0.918, 0.944, 0.964, 0.98, 0.992, 1, 1.006, 1.01, 1.013, 1.014, 1.014, 1.013, 1.012, 1.011, 1.01, 1.009, 1.007, 1.006, 1.005, 1.004, 1.003, 1.003, 1);           /* 260/26 · .5s */
  --mbar-h: 64px;
  /* landscape phones: keep the gutters clear of the notch (0 in portrait, so nothing changes there) */
  --gutter: max(clamp(18px, 4.6vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

/* the page's last line clears the home indicator */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ─── touch: no marker cursor, no hidden system cursor ─── */
@media (hover: none), (pointer: coarse) {
  .pen { display: none !important; }
  .has-pen body, .has-pen a, .has-pen button, .has-pen label, .has-pen summary { cursor: auto; }
}

/* ─── phones and tablets ─── */
@media (max-width: 999px) {
  /* the paper fibre: same look, no blend. On light paper multiply and normal are the same to the eye (≤ 1/255 apart),
     and a full-screen fixed layer that blends is what a phone pays for on every frame of the scroll */
  .paper::after { mix-blend-mode: normal; }

  /* header: fixed, same size in every state (so nothing reflows). At the top it is part of the hero;
     going down it slides away; coming back up it returns as a paper bar */
  /* will-change: a fixed bar must sit on its own layer, or every scroll frame repaints what passes under it
     (measured: the stamps' ink filter under a non-composited header tripled the janky frames) */
  .top { position: fixed; z-index: 60; padding: max(10px, env(safe-area-inset-top, 0px)) var(--gutter) 10px; translate: 0 0; transition: translate .57s var(--sp-quick, var(--ease-out)); will-change: translate; }
  .top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); box-shadow: 0 1px 0 var(--line-2), 0 18px 30px -28px color-mix(in srgb, var(--film) 55%, transparent); opacity: 0; transition: opacity .28s var(--ease-out); pointer-events: none; }
  .top.is-float::before { opacity: 1; }
  .top.is-hid { translate: 0 calc(-100% - 14px); transition: translate .5s var(--sp-firm, var(--ease-out)); }
  .top .wordmark { font-size: 16px; }

  /* bottom bar: a slim strip with the frame you are on and the one button; it hides at the top, while any other
     button or the form is on screen, and while the header is back (one piece of chrome at a time) */
  .mbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); translate: 0 calc(100% + 10px); transition: translate .5s var(--sp-firm, var(--ease-out)); pointer-events: none; will-change: translate; }
  .mbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); box-shadow: 0 -1px 0 var(--line-2), 0 -20px 34px -30px color-mix(in srgb, var(--film) 60%, transparent); }
  html.bar-on .mbar { translate: 0 0; pointer-events: auto; transition: translate .66s var(--sp-snap, var(--ease-out)); }
  .mbar__fr { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; font: 400 11px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--graphite); }
  .mbar__fr b { flex: none; display: inline-block; font-weight: 400; color: var(--film); padding: 3px 6px 2px; box-shadow: inset 0 0 0 1px var(--film); border-radius: 2px; }
  .mbar__fr span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar .dock { position: relative; inset: auto; flex: none; opacity: 1; translate: none; pointer-events: auto; min-height: 44px; transition: box-shadow var(--d-fast); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 40%, transparent); }
  html.bar-on .mbar .dock { animation: mbar-nudge .66s var(--sp-bouncy, var(--ease-out)) .12s both; }
  @keyframes mbar-nudge { from { translate: 0 10px; rotate: -2deg; } to { translate: 0 0; rotate: 0deg; } }
  html:not(.bar-on) .mbar .dock { animation: none; }
}
/* round 7 (perf, iPhone): the last two stamps that still blended (04 how, 09 price), same fix as 07 and 08 in round 5.
   Ink this dark multiplies to the colour it already has, and a blend on a piece that moves makes the phone composite
   everything under it again on every frame. Each stamp on its own layer: the #ink filter rasters once, the press only
   moves the layer. */
@media (max-width: 999px), (pointer: coarse) {
  .hw-st, .r4p__stamp { mix-blend-mode: normal; }
  .motion .hw-st { will-change: transform; }
}
@media (max-width: 374px) { .mbar__fr span { display: none; } }
.is-static .mbar { display: none; }
.lt-covered .mbar { visibility: hidden; } /* the light table (front A) covers the page: the bar goes with it */
@media (min-width: 1000px) { .mbar { display: contents; } .mbar__fr { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .top, .top.is-hid, .mbar, html.bar-on .mbar { transition: none; }
  html.bar-on .mbar .dock { animation: none; }
}