/* ─────────────────────────────────────────────────────────────
   Minisites — the contact sheet
   A real contact sheet prints the film's clear rebate as solid
   black, so the sheet is black and every scrap of colour comes
   from the frames themselves. Annotations are grease pencil.
   ───────────────────────────────────────────────────────────── */

:root{
  --sheet:#0E0D0C;
  --rebate:#181716;
  --edge:#3A3630;
  --paper:#E9E4D8;
  --muted:#8B857A;
  --faint:#59544C;
  --grease:#F0B429;      /* chinagraph yellow — the keeper mark */
  --grease-red:#D24B36;  /* the reject mark */

  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;

  --gutter:clamp(18px,4vw,44px);
  --frame-w:900px;       /* the width each preview is rendered at */
  --s:.30;               /* preview scale; refined by sheet.js */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--sheet);
  color:var(--paper);
  font-family:var(--display);
  line-height:1.5;
  padding:var(--gutter) var(--gutter) 64px;
  min-height:100vh;
}

/* ————— masthead ————— */

.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--edge);
}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand-mark{
  width:16px;height:11px;background:var(--grease);
  align-self:center;flex:none;border-radius:1px;
}
.wordmark{
  font-size:1.05rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;
}
.tagline{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  letter-spacing:.02em;
}
.tally{
  font-family:var(--mono);font-size:.7rem;color:var(--faint);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

/* ————— the find line, set like a pencilled note ————— */

.filter-row{
  display:flex;align-items:center;gap:10px;
  margin:20px 0 30px;
}
.filter-label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);flex:none;
}
.filter{
  flex:1;min-width:0;max-width:340px;
  background:none;border:none;border-bottom:1px solid var(--edge);
  color:var(--grease);font-family:var(--mono);font-size:.85rem;
  padding:4px 2px;transition:border-color .16s;
}
.filter::placeholder{color:var(--faint)}
.filter:focus{outline:none;border-bottom-color:var(--grease)}
.filter::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.hint{
  font-family:var(--mono);font-size:.62rem;color:var(--faint);
  border:1px solid var(--edge);border-radius:3px;padding:1px 5px;
}
.filter:focus ~ .hint{opacity:0}

/* ————— the sheet ————— */

.sheet{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(24px,3.4vw,42px) clamp(18px,2.4vw,30px);
}
.frame{min-width:0}   /* grid items default to min-width:auto and blow the track out */
.frame[hidden]{display:none}

/* ————— one frame ————— */

.frame-window{
  display:block;position:relative;
  aspect-ratio:4/3;overflow:hidden;
  background:var(--rebate);
  border:1px solid var(--edge);
  text-decoration:none;
}
/* absolute, so the preview's 900px never contributes to layout — in flow it
   drags the whole grid track out to its own width */
.frame-window iframe{
  position:absolute;top:0;left:0;
  width:var(--frame-w);
  height:calc(var(--frame-w) * 3 / 4);
  border:0;
  transform-origin:top left;
  transform:scale(var(--s));
  pointer-events:none;
}
/* the preview is scenery, not a target — this eats every event */
.shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(14,13,12,.55));
  opacity:.9;transition:opacity .2s;
}
.frame-window:hover .shade,
.frame-window:focus-visible .shade{opacity:.35}
.frame-window:focus-visible{outline:none}

/* the grease-pencil ring — drawn on hover, kept on keyboard focus */
.ring{
  position:absolute;inset:-2%;width:104%;height:104%;
  pointer-events:none;overflow:visible;
}
.ring path{
  fill:none;stroke:var(--grease);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
  /* the path carries pathLength="1", so the dash maths is normalised */
  stroke-dasharray:1;stroke-dashoffset:1;
}
.frame-window:hover .ring path,
.frame-window:focus-visible .ring path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .55s cubic-bezier(.4,.1,.3,1);
}
.frame:nth-child(3n) .ring{transform:rotate(-1.4deg)}
.frame:nth-child(3n+1) .ring{transform:rotate(.9deg)}
.frame:nth-child(4n) .ring{transform:rotate(1.6deg) scale(1.01)}

/* struck out: stays on this machine, never deploys */
.strike{position:absolute;inset:0;pointer-events:none;overflow:visible}
.strike line{
  stroke:var(--grease-red);stroke-width:2.5;stroke-linecap:round;opacity:.78;
}

/* ————— rebate: the annotations between frames ————— */

.rebate{
  display:flex;align-items:baseline;gap:8px;
  margin-top:9px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
}
.num{color:var(--grease);font-weight:700;flex:none}
.slug{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rebate time{color:var(--faint);margin-left:auto;flex:none}

.frame h2{
  font-size:.98rem;font-weight:500;letter-spacing:-.01em;
  margin-top:5px;
}
.frame h2 a{color:var(--paper);text-decoration:none}
.frame h2 a:hover{color:var(--grease)}
.frame h2 a:focus-visible{outline:2px solid var(--grease);outline-offset:3px}
.frame p{
  font-size:.8rem;color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.local{
  display:inline-block;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--grease-red);border:1px solid currentColor;
  border-radius:2px;padding:0 4px;margin-top:7px;
}

/* ————— odds and ends ————— */

.no-match{
  font-family:var(--mono);font-size:.8rem;color:var(--faint);
  padding:40px 0;
}
.empty{
  grid-column:1/-1;padding:56px 0;
  font-family:var(--mono);font-size:.85rem;color:var(--muted);
}
.empty code{color:var(--grease)}

.colophon{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:56px;padding-top:14px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:.62rem;color:var(--faint);
  letter-spacing:.04em;
}
.sep{opacity:.5}

/* On a phone, two columns of a scaled-down desktop render is unreadable mush.
   One column, and the preview renders at phone width so each frame shows the
   minisite's own responsive layout at near full size. */
@media (max-width:560px){
  :root{--frame-w:420px}
  .sheet{grid-template-columns:1fr;gap:30px}
  .masthead{align-items:flex-start;flex-direction:column;gap:6px}
  .filter{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .ring path{transition:none}
  .frame-window:hover .ring path,
  .frame-window:focus-visible .ring path{stroke-dashoffset:0}
  .shade{transition:none}
}