/* ============================================================
   THE PANTRY
   Page layout only. Every colour, font and shape token comes from juq.css.
   ============================================================ */

.pg-head { padding: var(--s-9) 0 var(--s-2); }
.pg-title { font-size: clamp(38px, 7vw, 76px); }
.pg-title em { color: var(--accent); font-style: italic; }
.pg-sub { color: var(--muted); font-size: var(--t-md); max-width: 60ch; margin-top: var(--s-5); line-height: 1.5; }

/* ---------- toolbar ---------- */
.pt-bar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-8) 0 var(--s-1); }
.pt-search {
  flex: 1; min-width: 220px; height: 40px; padding: 0 var(--s-5);
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--f-mono); font-size: var(--t-sm); letter-spacing: 0.02em;
}
.pt-search::placeholder { color: var(--muted); }
.pt-search:focus { outline: none; border-color: var(--accent); }
.pt-seg { display: inline-flex; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.pt-seg button {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0 var(--s-5); height: 40px; cursor: pointer;
  background: var(--surface); color: var(--muted); border: none;
  border-left: var(--bw) solid var(--line-strong);
}
.pt-seg button:first-child { border-left: none; }
.pt-seg button.on { background: var(--accent); color: var(--btn-ink); }
.pt-count { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: var(--s-6) 0 var(--s-5); }

/* ---------- grid ---------- */
.pt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bw);
  background: var(--line-strong); border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 860px) { .pt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pt-grid { grid-template-columns: 1fr; } }

.pt-card {
  position: relative; background: var(--surface); cursor: pointer; text-align: left;
  border: none; padding: 0; display: flex; flex-direction: column; overflow: hidden;
  transition: background 0.18s;
}
.pt-card:hover { background: var(--surface-2); }
.pt-shot { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.pt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-shot.empty { display: grid; place-items: center; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pt-body { padding: var(--s-6) var(--s-6) var(--s-5); display: flex; flex-direction: column; flex: 1; }
.pt-name { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.08; }
.pt-excerpt { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; margin-top: var(--s-2); flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pt-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
.pt-date { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pt-score { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-lg); color: var(--accent); font-variant-numeric: tabular-nums; }
.pt-score span { font-size: var(--t-mono); color: var(--muted); }
/* Stamp sits top-right ON the photo. The backing plate stops it vanishing into
   a busy shot, which is exactly what happened against the burger bun. */
.pt-stamp {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; padding: var(--s-1) var(--s-3);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  backdrop-filter: blur(5px);
}
.pt-stamp img { height: 38px; width: auto; display: block; }
.pt-stamp.big { top: 14px; right: 14px; padding: var(--s-2) var(--s-4); }
.pt-stamp.big img { height: 54px; }
.pt-stamp.inline { position: static; padding: var(--s-1) var(--s-3); }
.pt-stamp.inline img { height: 40px; }
.pt-vodflag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: var(--btn-ink); border-radius: var(--radius); padding: var(--s-1) var(--s-2);
}

/* ---------- vault reveal ----------
   Two slabs closed over THE POPUP, parting like a mouth onto the review.
   Bounded by .pt-stage, so it never takes over the whole screen. */
/* The reveal. The popup's own accent border is the leading edge as it unfolds,
   so no separate slabs are needed. Clip-path does not affect layout, so the
   sheet keeps its real size while the content opens out from the seam. */
.pt-clip { clip-path: inset(0 0 0 0); will-change: clip-path; }

/* The lit leading edge.

   clip-path clips an element's BORDER too, so while the sheet was opening its
   own top and bottom edges were simply not drawn - the orange outline appeared
   only once the reveal finished. This frame sits outside the clip and opens on
   the same curve, so the seam is a bright line from the first frame and the two
   halves look like they are being pushed apart rather than wiped in.

   It lands exactly on the sheet's own border, same width and colour, so at rest
   the two are indistinguishable. */
.pt-frame {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  border: 3px solid var(--accent);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
}
[data-skin="sweet"] .pt-frame { border-color: transparent; }

/* ---------- detail: stamp + vod ---------- */
.pt-sheet-shot { position: relative; }
.pt-sheet-right { display: flex; align-items: center; gap: var(--s-5); flex-shrink: 0; }
.pt-vod { position: relative; padding-top: 56.25%; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.pt-vod iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pt-vod-link {
  display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5);
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.pt-vod-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- detail ---------- */
.pt-detail {
  position: fixed; inset: 0; z-index: 85; display: none;
  align-items: center; justify-content: center; padding: var(--s-7);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
/* Fade the backdrop rather than letting it snap on under the opening doors. */
.pt-detail.open { display: flex; animation: ptBackdrop 0.34s ease both; }
@keyframes ptBackdrop { from { background-color: transparent; } }
/* And back out again on close, or the dimming snaps off while the doors are
   still shutting. Higher specificity than the rule above, so it takes the
   animation property outright instead of fighting it. */
.pt-detail.open.closing { animation: ptBackdropOut 0.42s ease both; }
@keyframes ptBackdropOut { to { background-color: transparent; } }
/* The stage is exactly the popup's box, so the vault doors below can be sized
   to it instead of covering the whole screen. */
.pt-stage { position: relative; width: 760px; max-width: 100%; }
/* NO box-shadow here, deliberately.

   It used to carry `9px 9px 0 var(--ink)`, which on the dark skin is a NEAR-WHITE
   slab. clip-path clips a shadow along with everything else, so it was never
   actually visible - except for the roughly one pixel that subpixel rounding let
   through along the bottom edge, which read as a thin white bar under the popup.
   A shadow that can only ever show as an artifact is not a shadow.

   Definition comes from the accent frame instead, which lives outside the clip.
   Sweet, which draws no border, gets its soft shadow there too. */
.pt-sheet {
  width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 3px solid var(--accent); border-radius: var(--radius);
}
[data-skin="sweet"] .pt-sheet { border-color: transparent; }
[data-skin="sweet"] .pt-frame { box-shadow: 0 22px 60px var(--shadow); }
.pt-sheet-shot { aspect-ratio: 21 / 9; background: var(--surface-2); overflow: hidden; }
.pt-sheet-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-sheet-in { padding: var(--s-7) var(--s-8) var(--s-8); }
.pt-sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); }
.pt-sheet-name { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.02; }
.pt-sheet-x { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); font-size: var(--t-lg); }
.pt-sheet-x:hover { border-color: var(--accent); color: var(--accent); }
.pt-sheet-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.pt-chip { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); padding: var(--s-2) var(--s-4); }
.pt-chip b { color: var(--accent); font-size: var(--t-sm); }
.pt-text { margin-top: var(--s-6); font-size: var(--t-md); line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.pt-sec { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: var(--s-7) 0 var(--s-4); }
.pt-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-4); }
.pt-cat { border: var(--bw) solid var(--line); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.pt-cat-k { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pt-cat-v { font-weight: 900; font-style: italic; font-size: var(--t-h3); color: var(--accent); margin-top: var(--s-1); }

.pt-empty { border: var(--bw) dashed var(--line-strong); border-radius: var(--radius); padding: var(--s-9) var(--s-7); text-align: center; }
.pt-empty .t { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); }
.pt-empty .s { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-3); }

/* ---------- the writer's way in ----------
   Shown only to somebody who can actually write one. It sits with the page
   heading rather than in the toolbar below, because it is not a filter: it is
   the one thing on this page that changes what is here. */
.pt-new {
  display: inline-block; margin-top: var(--s-5);
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: var(--s-3) var(--s-5);
  color: var(--accent-ink); background: var(--accent);
  border: var(--bw) solid var(--accent); border-radius: var(--radius);
}
.pt-new:hover { background: transparent; color: var(--accent); }
/* An explicit rule, because any class setting display beats [hidden]. */
.pt-new[hidden] { display: none; }