/* ============================================================
   CONCEPTO P — A FRAME'S FILE (rooms/file.js)
   On the Members white. On the left, 62 % of the page, a larger light (the
   register's own: an aluminium case round an opal): a gate with the film
   drawn through it, the frame in the middle and its neighbours at the
   edges, then the roll's frames as a scrubber and Negative · Positive. On
   the right, 34 %, the frame's entry (filing.css .ac), what it made and its
   materials. Air between things, never a rule; the frame on the scrubber is
   told by its light, never a ring. The page begins under the keychain's band
   (--kc-band, filing.css).

   NOT TWO HALVES: the light is a slab of opal with no case and no rim, and on a wide
   screen it runs off the left edge of the screen (--lb-bleed past it), the mirror of the register's
   light; the frame's words are a nearer plane that comes in from the right. Below a wide screen the
   file is one column, as on a phone.

   Only the house's tokens move here: settle, breath and lift; touch, slow,
   slower. No colour but the ink, the film's own base and the light.
   ============================================================ */
.nf{
  --kc-band:120px;
  --lb-bleed:clamp(40px, 6vw, 120px);
  position:relative; box-sizing:border-box;
  padding:calc(var(--nav-h) + var(--kc-band)) var(--gutter) clamp(96px, 16vh, 180px);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  color:var(--mb-ink, #1A1814);
}
.nf-grid{ display:grid; grid-template-columns:minmax(0, 62fr) minmax(0, 34fr); column-gap:4%; align-items:start; }
.nf-light{ position:sticky; top:calc(var(--nav-h) + var(--kc-band)); min-width:0; }

/* ---------- the light: bezel, lit opal, and a gate the film runs across ---------- */
.nf-lb{
  position:relative; margin:0; box-sizing:border-box;
  width:min(100%, calc((100svh - var(--nav-h) - var(--kc-band) - 150px) * 1.36));
  padding:0;
  border-radius:3px;
  background:#FFFFFF;
  box-shadow:
    0 1px 3px -1px rgba(20,24,30,.12),
    0 26px 46px -26px rgba(20,24,30,.30),
    0 64px 110px -60px rgba(20,24,30,.26);
  opacity:1; transition:opacity var(--slower) var(--breath);
}
.nf.is-carrying:not(.is-lit) .nf-lb{ opacity:0; transition:none; }
.nf-lit{
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(130% 120% at 50% 44%, #FFFFFF 0%, #FFFFFF 46%, #FCFCFC 70%, #F3F4F5 92%, #ECEEF0 100%);
}
.nf-lit::after{ content:""; position:absolute; inset:0; border-radius:inherit; background-image:var(--fibre); background-size:160px 160px; opacity:.5; mix-blend-mode:multiply; }
.nf-bed{ position:relative; padding:4.5% 0; }
.nf-gate{ position:relative; width:100%; aspect-ratio:1.2925; overflow:hidden; touch-action:pan-y; }
.nf-track{ display:flex; width:100%; height:100%; will-change:transform; }

/* a frame of 35 mm film in the gate: 38 by 35 mm of base, the 36 by 24 picture, eight holes on each edge */
.nf-fr{ position:relative; flex:0 0 84%; height:100%; box-sizing:border-box; container-type:inline-size; background:var(--base, #B9B8B4); }
.nf-fr.is-blank{ background:none; }
.nf-win{ position:absolute; left:2.63%; width:94.74%; top:15.71%; height:68.57%; overflow:hidden; background:rgba(0,0,0,.08); }
.nf-win.is-empty{ background:rgba(0,0,0,.05); }
.nf-im{ display:block; width:100%; height:100%; object-fit:cover; transition:filter var(--slow) var(--settle); }
/* a frame shot upright lies on its side on its film, whole, as the light table's contact print lays it */
.nf-im.is-turned{ position:absolute; left:50%; top:50%; width:66.667%; height:150%; max-width:none; transform:translate(-50%, -50%) rotate(-90deg); }
.nf-carry .nf-im.is-turned{ width:66.667%; height:150%; }
.nf-im.is-inv{ filter:invert(1); }
.nf.is-pos .nf-im, .nf-carry.is-pos .nf-im{ filter:invert(1); }
.nf.is-pos .nf-im.is-inv, .nf-carry.is-pos .nf-im.is-inv{ filter:none; }
/* the holes: 1.98 mm along the film, 2.79 mm across it, 2 mm in from each edge, eight to a frame; their
   corners rounded as the cutter leaves them (KS, 0.5 mm), the light of the opal behind them, a hair of the
   base's own shadow on the edge the light comes through */
.nf-perf{
  position:absolute; left:0; right:0; height:7.97%; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138.5' width='198' height='279' rx='50' fill='%23FCFDFF'/%3E%3Crect x='138.5' width='198' height='279' rx='50' fill='none' stroke='%23000' stroke-opacity='.10' stroke-width='10'/%3E%3C/svg%3E");
  background-size:12.5% 100%; background-repeat:repeat-x;
}
.nf-perf-t{ top:5.71%; }
.nf-perf-b{ bottom:5.71%; }
/* the edge print, between the holes and the frame */
.nf-ep{
  position:absolute; left:4%; bottom:13.7%; height:2%; display:flex; align-items:center;
  font-family:var(--mono); font-size:clamp(6px, 1.25cqw, 10px); letter-spacing:.1em; white-space:nowrap;
  color:rgba(255,250,240,.78); pointer-events:none;
}
.nf-lb[style*="#C6C6C3"] .nf-ep, .nf-lb[style*="#B9B8B4"] .nf-ep{ color:rgba(26,24,20,.52); }
/* a digital negative is a transparency on the light; the soup's photographs are prints */
.nf.is-digital .nf-fr, .nf.is-prints .nf-fr{ background:none; padding:0 1.2%; }
.nf.is-digital .nf-win{ position:relative; left:auto; top:auto; width:100%; height:100%; box-sizing:border-box; padding:4%; background:rgba(233,236,239,.6); box-shadow:0 1px 3px rgba(26,24,20,.14); }
.nf.is-digital .nf-im, .nf-carry.is-digital .nf-im{ object-fit:contain; mix-blend-mode:multiply; }
.nf.is-pos.is-digital .nf-im, .nf-carry.is-pos.is-digital .nf-im{ mix-blend-mode:normal; }
.nf.is-prints .nf-win{ position:relative; left:auto; top:auto; width:100%; height:100%; box-sizing:border-box; padding:3.5%; background:#FBFBF9; box-shadow:0 1px 2px rgba(26,24,20,.18), 0 10px 22px -14px rgba(26,24,20,.4); }
.nf.is-prints .nf-im{ object-fit:contain; }
/* the neighbours are seen a little at the gate's edges; before it lands the copy stands for the frame */
.nf-track > :not(:nth-child(2)){ opacity:.86; }
.nf:not(.is-landed) .nf-track > :nth-child(2) .nf-win > *{ visibility:hidden; }

/* the copy in flight: lifted, its shadow grows */
.nf-carry{ overflow:hidden; background:rgba(0,0,0,.08); box-shadow:0 0 0 rgba(26,24,20,0); }
.nf-carry.is-digital{ background:rgba(233,236,239,.6); }
.nf-carry{ position:relative; }
.nf-carry .nf-im{ width:100%; height:100%; object-fit:cover; }
.nf-carry.is-lifted{ box-shadow:0 18px 38px -16px rgba(26,24,20,.42), 0 2px 6px rgba(26,24,20,.16); }

/* ---------- under the light: the scrubber, then Negative · Positive ---------- */
.nf-under{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:min(100%, calc((100svh - var(--nav-h) - var(--kc-band) - 150px) * 1.36)); margin:20px 0 0;
  opacity:1; transition:opacity var(--touch) var(--settle);
}
.nf:not(.is-arrived) .nf-under{ opacity:0; }
/* the scrubber is the roll itself, short: its frames on its own base, the one in the gate at full light */
.nf-scrub{
  display:flex; gap:3px; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden;
  padding:7px 6px; box-sizing:border-box; background:var(--base, #B9B8B4);
  box-shadow:0 1px 2px rgba(26,24,20,.14);
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.nf-scrub::-webkit-scrollbar{ display:none; }
.nf-sc{
  flex:0 0 64px; width:64px; height:43px; padding:0; margin:0; border:0; cursor:pointer;
  background:none; overflow:hidden; opacity:.5;
  transition:opacity var(--touch) var(--settle);
}
/* the frame is the picture: the cell is drawn as nothing, its window as the film's own dark until the picture comes */
.nf-sc-cut{ display:block; width:100%; height:100%; background-color:rgba(0,0,0,.1); background-repeat:no-repeat; transition:filter var(--slow) var(--settle); }
.nf-sc.is-empty::before{ content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.06); }
.nf-sc-cut.is-inv{ filter:invert(1); }
.nf.is-pos .nf-sc-cut{ filter:invert(1); }
.nf.is-pos .nf-sc-cut.is-inv{ filter:none; }
.nf.is-digital .nf-sc{ flex-basis:46px; width:46px; height:64px; }
.nf.is-digital .nf-sc img{ background:#E9ECEF; }
.nf-sc img{ display:block; width:100%; height:100%; object-fit:cover; transition:filter var(--slow) var(--settle); }
.nf.is-digital .nf-sc img{ object-fit:contain; mix-blend-mode:multiply; }
.nf-sc img.is-inv{ filter:invert(1); }
.nf.is-pos .nf-sc img{ filter:invert(1); }
.nf.is-pos .nf-sc img.is-inv{ filter:none; }
.nf-sc.is-here{ opacity:1; }
@media (hover:hover){ .nf-sc:not(.is-here):hover{ opacity:.82; } }
/* the keyboard's frame on the scrubber is told by its light, as the frame in the gate is: full, never ringed */
.nf-sc:focus-visible{ outline:none; opacity:1; }
.nf-read{ flex:0 0 auto; }

/* ---------- the side: the card, then what it made and its materials ---------- */
.nf-side{ min-width:0; opacity:1; transition:opacity var(--touch) var(--settle); }
.nf-side.is-changing{ opacity:0; transition:opacity var(--touch) var(--lift); }
.nf .ac{ padding:0; }
.nf .ac-h{ margin:0; }
.nf .ac-no.num-display{ font-size:clamp(96px, 9vw, 150px); line-height:.86; }
.nf .ac-trio{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:18px; }
.nf .ac-fs{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; }
/* the card's body and what follows arrive as one block once the number's letters are in */
.nf .nf-side .ac > :not(.ac-h), .nf .nf-side > :not(.ac), .nf .nf-side .ac-id{
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.nf:not(.is-headed) .nf-side .ac > :not(.ac-h), .nf:not(.is-headed) .nf-side > :not(.ac), .nf:not(.is-headed) .nf-side .ac-id{ opacity:0; transform:translate3d(28px, 0, 0); }
.nf.is-folding .nf-side, .nf.is-folding .nf-under{ opacity:0; transition:opacity var(--touch) var(--lift); }

.nf-ch{ margin:44px 0 0; }
.nf-ch-h{ margin:0 0 16px; line-height:1.2; color:var(--mb-ink); }
.nf-works{ display:flex; flex-direction:column; }
.nf-work{ display:grid; grid-template-columns:88px minmax(0, 1fr); gap:18px; align-items:start; padding:12px 0; }
.nf-work-pic{ display:block; width:88px; aspect-ratio:3 / 4; background:var(--mb-press, #F0F0EE); overflow:hidden; }
.nf-work-pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.nf-work-w{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.nf-work-id{ color:var(--mb-ink-2); }
.nf-work-said{ line-height:1.25; color:var(--mb-ink); }
.nf-work-ways{ display:flex; flex-wrap:wrap; gap:0 24px; }
.nf-way.act-label{ color:var(--mb-ink); -webkit-text-fill-color:currentColor; text-decoration:none; }
.nf-mats{ margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.nf-mat{ display:grid; grid-template-columns:minmax(0, 1fr); gap:2px; padding:8px 0; color:var(--mb-ink); -webkit-text-fill-color:currentColor; text-decoration:none; }
.nf-mat-r{ line-height:1.3; color:var(--mb-ink-2); }
.nf-mat-n{ line-height:1.2; }
.nf-mat-k{ color:var(--mb-ink-2); }
.nf-mat:focus-visible{ outline:none; }
.nf-mats:has(.nf-mat:focus-visible) .nf-mat:not(:focus-visible){ opacity:.5; }

/* ---------- a wide screen: the light runs off the left edge, the words a nearer plane at the right ---------- */
@media (min-width:1100px){
  .nf{ --lb-top:calc(var(--nav-h) + 22px); }
  .nf-grid{ grid-template-columns:minmax(0, 64fr) minmax(0, 30fr); column-gap:6%; }
  .nf-light{
    top:var(--lb-top);
    margin-top:calc(var(--lb-top) - var(--nav-h) - var(--kc-band));
    margin-left:calc(-1 * (max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed)));
  }
  .nf-lb{ width:min(100%, calc((100svh - var(--lb-top) - 150px) * 1.36 + var(--gutter) + var(--lb-bleed))); }
  .nf-bed{ padding-left:calc(max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed)); }
  .nf-under{
    width:min(calc(100% - var(--gutter) - var(--lb-bleed)), calc((100svh - var(--lb-top) - 150px) * 1.36));
    margin-left:calc(max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed));
  }
}
/* ---------- below a wide screen: one column, the light from the left edge of the screen ---------- */
@media (min-width:760px) and (max-width:1099px){
  .nf-grid{ grid-template-columns:minmax(0, 1fr); row-gap:44px; }
  .nf-light{ position:relative; top:auto; margin-left:calc(-1 * (max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed))); }
  .nf-lb{ width:min(100%, calc((100svh - var(--nav-h) - var(--kc-band) - 150px) * 1.36 + var(--gutter) + var(--lb-bleed))); }
  .nf-bed{ padding-left:calc(max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed)); }
  .nf-under{ width:auto; margin-left:calc(max(var(--gutter), env(safe-area-inset-left)) + var(--lb-bleed)); }
  .nf-side{ max-width:40em; }
}
/* ---------- phone: one column, the frame full width, the scrubber under it, the card below ---------- */
@media (max-width:759px){
  .nf{ --kc-band:96px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .nf-grid{ grid-template-columns:minmax(0, 1fr); row-gap:36px; }
  .nf-light{ position:relative; top:auto; }
  .nf-lb, .nf-under{ width:100%; }
  .nf-under{ flex-direction:column; align-items:flex-start; gap:12px; }
  .nf-lb{ border-radius:2px; }
  .nf .ac-no.num-display{ font-size:clamp(84px, 24vw, 108px); }
  .nf .ac-fs{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@media (pointer:coarse){
  .nf-sc{ height:44px; }
  .nf-way{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (prefers-reduced-motion:reduce){
  .nf-lb, .nf-track, .nf-under, .nf-side, .nf-im, .nf-sc, .nf-sc img,
  .nf .nf-side .ac > *, .nf .nf-side > *, .nf .nf-side .ac-id{ transition:none !important; }
}