/* poster-preview.css — the preview component's look (B2, 2026-10-04): the style reset winner's poster and
   frame (shop/product-design/site-style/system.css "the poster + the frame", tokens from
   candidates/w-winner/tokens.css after the combined pass), scoped to .pp so the live pages' older rules and
   the winner's own system.css (when B3 / the race page v2 adopt it) never fight it. The page loads Inter
   (500 · 600 · 700 · 800: the footer's weights) — site.css declares them. */

.pp {
  --pp-frame-w: 5.5cqw;
  --pp-frame-black: #171512; --pp-frame-brown: #5A4130; --pp-frame-natural: #D8C7A4; --pp-frame-white: #F4F2EC;
  --pp-frame-lip-dark: rgba(255,255,255,.14); --pp-frame-lip-light: rgba(0,0,0,.16); --pp-frame-outline: rgba(0,0,0,.08);
  --pp-shadow-sheet: 0 1px 2px rgba(0,0,0,.10), 0 8px 18px -8px rgba(0,0,0,.16);
  --pp-shadow-frame: 0 1px 1px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.12), 0 14px 28px -12px rgba(0,0,0,.24);
  --pp-sheet-edge: rgba(0,0,0,.06);
  /* the zoom: 28–40 px, clear of the map's corner — why: drawn-route/8e2-record.md */
  --pp-paper-at: var(--pp-frame-w);
  --pp-zoom-c: calc(var(--pp-paper-at) + 22 / 300 * (100cqw - 2 * var(--pp-paper-at)));
  --pp-zoom-size: min(clamp(28px, calc(6.78cqw + 17.9px), 40px), calc(var(--pp-zoom-c) + 10px), max(calc(var(--pp-zoom-c) - 6px), calc((34px - var(--pp-zoom-c)) * 1000)));
  --pp-zoom-at: max(-12px, min(clamp(4px, 1.5cqw, 7px), calc(var(--pp-zoom-c) - var(--pp-zoom-size) - 2px)));
  container-type: inline-size; width: 100%; position: relative;
}
.pp.pp-fill { --pp-paper-at: 0px; }

/* the sheet: the face's raster under the overlay (the photo, the paper below the field, the live footer) */
.pp .pp-sheet { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.pp .pp-sheet picture, .pp .pp-sheet img { display: block; width: 100%; height: 100%; }
.pp .pp-sheet img { object-fit: cover; border: 0; box-shadow: none; background: transparent; }
.pp .pp-over { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* framed: the moulding is padding on .sheet, a share of the poster's width (a 56 px thumb to a 420 px hero) */
.pp.framed .sheet { position: relative; padding: var(--pp-frame-w); box-shadow: 0 0 0 1px var(--pp-frame-outline), var(--pp-shadow-frame); }
.pp.framed .sheet::after { content: ""; position: absolute; inset: var(--pp-frame-w); pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px var(--pp-frame-lip-light); }
.pp.framed[data-frame=black] .sheet { background: var(--pp-frame-black); }
.pp.framed[data-frame=brown] .sheet { background: var(--pp-frame-brown); }
.pp.framed[data-frame=natural] .sheet { background: var(--pp-frame-natural); }
.pp.framed[data-frame=white] .sheet { background: var(--pp-frame-white); }
.pp.framed[data-frame=black] .sheet::after, .pp.framed[data-frame=brown] .sheet::after {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px var(--pp-frame-lip-dark); }
/* the moulding as Prodigi's Classic frame (PLAN row 7b (d), his picks 2026-10-20, from Prodigi's photos): natural and brown
   in oak — fine grain lines along each rail and their flecks, the mitre read from the grain's turn; black and white painted,
   flat, the mitre a fine line; each rail lit a shade differently from above; matte, no sheen (his word 2026-10-09). Drawn
   by shop/tools/build-frames.mjs; over the flat colour, which shows while it loads and eases on a change */
.pp.framed .sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-image: var(--pp-frame-img) 5% / var(--pp-frame-w) stretch; }
.pp.framed[data-frame=black] { --pp-frame-img: url("/assets/img/frames/black.svg?v=9036496e"); }
.pp.framed[data-frame=brown] { --pp-frame-img: url("/assets/img/frames/brown.webp?v=f69c386c"); }
.pp.framed[data-frame=natural] { --pp-frame-img: url("/assets/img/frames/natural.webp?v=0ff1b575"); }
.pp.framed[data-frame=white] { --pp-frame-img: url("/assets/img/frames/white.svg?v=eb269e3c"); }
/* unframed (an unframed print, a digital file): the paper's edge and a soft shadow — at the framed sheet's size,
   so taking the frame off never makes the paper grow (the visual QA, 2026-10-04); .pp-fill lets a mount that is
   always unframed (the homepage hero) fill its width instead */
.pp.unframed:not(.pp-fill) .sheet { padding: var(--pp-frame-w); }
.pp.unframed .pp-sheet { box-shadow: 0 0 0 1px var(--pp-sheet-edge), var(--pp-shadow-sheet); }

/* the zoom: the arrow alone, a white button at the frame's top right */
.poster.pp button.pp-zoom { position: absolute; z-index: 3; top: var(--pp-zoom-at); right: var(--pp-zoom-at); left: auto;
  width: var(--pp-zoom-size); height: var(--pp-zoom-size); box-sizing: border-box; display: grid; place-items: center; padding: 0;
  color: #171717; background: #fff;
  border: 1px solid #B8B7B1; border-radius: calc(var(--pp-zoom-size) * .16); box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: zoom-in; }

/* the tag (8e2): a flat dark tab let into the map's corner */
.pp .pp-tag { position: absolute; z-index: 1; top: 5.5%; left: 8%; box-sizing: border-box; width: max-content;
  max-width: var(--pp-tag-max, 84%);
  font: 500 12.5px/1.18 "Inter", system-ui, sans-serif; letter-spacing: .005em; color: #fff;
  background: rgba(22,21,19,.82); padding: .5em .64em .58em; border-radius: 0 0 .48em 0; text-wrap: balance;
  overflow-wrap: break-word; pointer-events: none; }
.pp .pp-tag[data-at=right] { left: auto; right: 8%; border-radius: 0 0 0 .48em; }
@container (max-width: 120px) { .pp .pp-tag { display: none; } }
.pp .pp-tag[data-at=bottom] { top: auto; left: auto; right: 8%; bottom: calc(119 / 400 * 100%); border-radius: .48em 0 0 0; }
@container (max-width: 300px) { .pp .pp-tag { font-size: 10px; } .pp .pp-tag[data-narrow] { font-size: 8px; } }
@container (max-width: 190px) { .pp .pp-tag { font-size: 8px; } .pp .pp-tag[data-narrow] { font-size: 7px; } }
@container (max-width: 130px) { .pp .pp-tag { font-size: 7px; } }
.pp-zoomdlg .pp .pp-tag { font-size: 15px; }   /* the zoom, at the desk and on a phone (his picked r3-a-phone-zoom) */
.pp-zoomdlg .pp .pp-tag[data-narrow] { font-size: 12.5px; }

/* a slot that holds the preview's space before it mounts (no layout shift): the framed sheet's proportion —
   the 3 : 4 paper inside a moulding of 5.5 % of the width on each side */
.pp-slot { aspect-ratio: 1 / 1.2967; width: 100%; }
.poster.pp button.pp-zoom svg { width: 64%; height: 64%; display: block; }
.poster.pp button.pp-zoom::before { content: ""; position: absolute; inset: -6px; }
.poster.pp button.pp-zoom:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }

.pp-zoomdlg { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.pp-zoomdlg::backdrop { background: rgba(16,16,16,.82); }
.pp-zoomdlg .pp { width: min(92vw, calc(90vh * 3 / 4)); }
.pp-zoomdlg .pp.framed { width: min(92vw, calc(90vh / 1.2967)); }   /* in its frame (his look 2026-10-20): the moulding's proportion */
.pp-zoomdlg .pp-close { position: fixed; right: 16px; top: 16px; font: 500 14px/1 "Inter", system-ui, sans-serif; color: #171717;
  background: #fff; border: 0; border-radius: 3px; padding: 9px 12px; cursor: pointer; }
.pp-zoomdlg .pp-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }