/* Filmsim — craft layer: press response, focus, materials, accessibility.
   Loaded after each page's own styles; only adds what the pages don't define. */

/* ---- 1. Response: feedback on pointer-down, never only on release ---- */
.btn,.nbtn,.cart,.acct,.chip,.tab,.add,.p .add,.qty button,.lnk,.clear,.unsave,.newcol,
.rc,.cc,.oc,.cm,.cr,.st,.si,.big,.sh,.cl,.fr,.fbig,.md,.cg,.cam,.pc,.t3,.fs-burger,.fs-x,
.dots i,.cs a,.gal .g,.my .del,.ob,.store,.nvb{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:active,.nbtn:active,.cart:active,.acct:active,.chip:active,.tab:active,
.qty button:active,.clear:active,.unsave:active,.ob:active,.store:active,
.fs-burger:active,.fs-x:active,.my .del:active,.nvb:active{
  transform:scale(.97);
  transition:transform 90ms ease-out;
}
.car .nvb:active{transform:translateY(-50%) scale(.94)}
/* cards: a smaller press, they are large surfaces */
.rc:active,.cc:active,.oc:active,.cm:active,.cr:active,.si:active,.fr:active,
.md:active,.cg:active,.cam:active,.pc:active,.t3:active,.cl:active,.newcol:active{
  transform:scale(.992);
  transition:transform 90ms ease-out;
}
.cs a:active,.gal .g:active,.sh:active{transform:scale(.985);transition:transform 90ms ease-out}
.dots i:active{transform:scale(.8);transition:transform 90ms ease-out}

/* ---- 2. Craft: a visible, consistent focus ring (keyboard only) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red,#d71f2e);
  outline-offset:3px;
  border-radius:6px;
}
.rc:focus-visible,.cc:focus-visible,.cl:focus-visible,.fbig:focus-visible,.big:focus-visible{outline-offset:4px}
nav.fsnav.over a:focus-visible,nav.fsnav.over button:focus-visible{outline-color:#fff}

/* ---- 3. Material: chrome floats over content, edge fades instead of a hard rule ---- */
nav.fsnav:not(.over){
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* the separation only appears once content is actually underneath the bar */
nav.fsnav:not(.over).fs-scrolled{
  background:rgba(255,255,255,.82);
  border-bottom-color:var(--hair,#E4E0D8);
  box-shadow:0 12px 24px -22px rgba(15,15,14,.5);
}
/* bigger surfaces read thicker */
.fs-drawer{backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);background:rgba(255,255,255,.94);box-shadow:-30px 0 60px -30px rgba(15,15,14,.4)}

/* ---- 4. Typography: optical sizing, size-specific tracking ---- */
html{font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1,h2,.h2,.hcap h1,.head h1{font-optical-sizing:auto}
/* mono labels are small and all-caps: they need positive tracking, already set per page */
/* body copy sits near 0 — do not add global letter-spacing */

/* ---- 5. Accessibility: three independent user signals ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .btn:active,.rc:active,.cc:active,.nbtn:active,.acct:active,.chip:active,.tab:active{transform:none}
  .fs-drawer{transition:opacity .18s ease}
}
@media (prefers-reduced-transparency:reduce){
  nav.fsnav:not(.over),.fs-drawer,.car .nvb,.rc .sv,.sh .cam,.my .tag,.cl .tt,.gate .im .lb{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  nav.fsnav:not(.over){background:#fff;border-bottom-color:var(--hair,#E4E0D8)}
  .fs-drawer{background:#fff}
  .car .nvb{background:#fff}
}
@media (prefers-contrast:more){
  nav.fsnav:not(.over){background:#fff;border-bottom-color:var(--ink,#0F0F0E)}
  .fs-drawer{background:#fff;border-left-color:var(--ink,#0F0F0E)}
  .btn.g,.chip,.sel,.inp,.oc,.rc,.cc,.kit,.facts{border-color:var(--ink,#0F0F0E)}
  a:focus-visible,button:focus-visible{outline-width:3px}
  .lede,.sub,.stat p.body,.rc .s{color:var(--ink,#0F0F0E)}
}