/* epk.mrsealz.com — the press kit.
 *
 * Tokens lifted verbatim from qr/site/assets/css/qr.css so all three public
 * surfaces read as one object. Two stylesheets, one document: this one is the
 * scrolling page, print.css re-lays the SAME markup as a single A4 sheet.
 * Nothing here may be `display:none`-d for print without checking print.css —
 * the PDF is generated from this exact file, not from a second document.
 */
:root{
  color-scheme: dark;
  --ink:#05090a;
  --ink-2:#0a1214;
  --fog:#8fa3a4;
  --fog-dim:#5d6f70;
  --paper:#dfe8e5;
  --teal:#0ea87b;
  --teal-lit:#3fdcaa;
  --amber:#ffd9a0;
  --line:rgba(143,163,164,.18);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(22px, 6vw, 48px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;
}

/* The drawing behind the whole page, off the right edge.
 *
 * The line-art seal, NOT the AI render on the QR page's "who you found" block.
 * Its source (Logo/Iconlogo/Mr. Sealz.svg) is a FILLED drawing: all 87 paths
 * carry their own `stroke="none"` plus `fill ="#000000"` — with a space before
 * the '=', which is why a grep for 'fill="' reports the file as having none. So
 * the root's stroke and stroke-width are inert, and recolouring them does
 * nothing; black fill on a #05090a page is simply invisible. seal-drawing.svg
 * recolours all 87 FILLS to white. If the seal disappears, check the fill.
 *
 * Fixed to the viewport rather than to .sheet so it stays put while the page
 * scrolls past it. print.css switches it off and hangs its own copy inside the
 * A4 — a `fixed` backdrop in a print context repeats per page. */
body::before{
  content:"";position:fixed;z-index:0;pointer-events:none;
  /* Pulled in off the right edge rather than bleeding past it (Dave,
     2026-09-01): the whole figure now sits on the page instead of half of it. */
  top:50%;right:6vw;transform:translateY(-50%);
  width:min(42vw,470px);height:min(92vh,1200px);
  background:url(../img/seal-drawing.svg) right center/contain no-repeat;
  /* White ink at a low alpha. It came down from .14 once the release list moved
     into the right column: the figure's flipper lands exactly on the dates, and
     a backdrop that competes with the one table a promoter reads is worth less
     than the effect costs. Position stays as asked. */
  opacity:.09;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.sheet{position:relative;z-index:1;width:100%;max-width:1000px;margin:0 auto;padding:clamp(20px,4vh,44px) var(--gutter) 90px}

/* ---------- shared type ---------- */
.tele{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fog-dim);margin:0;font-weight:400;
}
.tele-teal{color:var(--teal-lit)}
.display{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.9;margin:0 0 14px;
  font-size:clamp(34px,8vw,62px);text-wrap:balance;
}
/* The catch phrase is the h1's own size; the rest of the sentence is a
   sub-head under it. Sized in em so it tracks the clamp on screen and the
   28pt in print without a second rule. */
.display .sub{display:block;font-size:.6em;letter-spacing:-.022em;
  color:#c9d6d3;margin-top:.2em;line-height:.98}

.narr{font-size:clamp(15px,2.6vw,17.5px);line-height:1.62;color:#c9d6d3;max-width:36em;margin:0 0 .85em}
.narr strong{color:var(--paper);font-weight:400;font-style:italic}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.mark{width:132px;height:auto;flex:none}

/* ---------- photos ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 30px;
  height:clamp(240px,33vw,400px)}
.strip figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2);border-radius:2px}
.strip img{display:block;width:100%;height:100%;object-fit:cover}
.strip figure:first-child{grid-column:span 2}

/* ---------- blocks ---------- */
.block{margin:0 0 30px}

/* The zig-zag. Media and text swap sides row by row: .rev flips the column
   order, and because the text column is a grid item rather than a float, the
   flip is one line and nothing has to be reordered in the markup. */
.zig{display:grid;gap:clamp(24px,4vw,44px)}
/* Explicit column placement rather than `order`, because the two rows want
   DIFFERENT media widths — a 3:4 photo and a 9:16 video cannot share a track
   size without one of them towering over its own paragraph. Half of a 1000px
   sheet made the photo 600px tall beside four lines of text. */
.zrow{display:grid;grid-template-columns:minmax(0,360px) 1fr;
  gap:clamp(20px,4vw,42px);align-items:center}
.zrow.rev{grid-template-columns:1fr minmax(0,290px)}
.zrow.rev .zmedia{grid-column:2;grid-row:1}
.zrow.rev .ztext{grid-column:1;grid-row:1}
.zmedia{margin:0;overflow:hidden;border-radius:2px;background:var(--ink-2)}
.zmedia img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.zmedia video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#000}
.ztext h2{margin:0 0 12px}
.ztext .rel,.ztext .facts{margin:0}
.ztext .narr{margin:0 0 .5em}
@media (max-width:620px){
  .zrow,.zrow.rev{grid-template-columns:1fr}
  .zrow.rev .zmedia,.zrow.rev .ztext{grid-column:1}
  .zrow.rev .zmedia{grid-row:auto}
  .zrow.rev .ztext{grid-row:auto}
}
.fine{font-size:12.5px;line-height:1.5;color:var(--fog-dim);margin:8px 0 0}
.fine a{color:var(--teal-lit)}
.print-only{display:none}
.vid .poster{display:none}

.block > h2{margin:0 0 12px}
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:30px}
@media (max-width:620px){
  .cols{grid-template-columns:1fr;gap:26px}
  .strip{grid-template-columns:1fr 1fr;height:auto}
  .strip img{aspect-ratio:3/4}
  .strip figure:first-child{grid-column:span 2}
  .strip figure:first-child img{aspect-ratio:3/2}
  body::before{width:72vw;right:2vw;opacity:.10}
}

/* releases */
.rel{list-style:none;margin:0;padding:0}
.rel li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.rel li:last-child{border-bottom:0}
.rel .t{flex:1;min-width:0}
.rel .t b{font-weight:400;color:var(--paper)}
/* Only the listenable releases are links; the rest are plain text, so the
   underline is the affordance that says which two a booker can click. */
.rel .t a{color:var(--teal-lit);text-decoration:none;border-bottom:1px solid rgba(63,220,170,.35)}
.rel .t a b{color:inherit}
.rel .t a:hover{border-bottom-color:var(--teal-lit)}
.rel .t span{color:var(--fog);font-size:13.5px}
.rel .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--fog-dim);white-space:nowrap}
.rel li.next .d{color:var(--amber)}

/* facts */
.facts{list-style:none;margin:0;padding:0;font-size:15px}
.facts li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.facts li:last-child{border-bottom:0}
.facts b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog-dim);font-weight:400;flex:none;width:82px;padding-top:3px}

/* links */
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.links a{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line);
  border-radius:999px;color:var(--fog)}
.links a:hover{border-color:var(--teal);color:var(--teal-lit)}

/* contact */
.contact{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.contact .mail{font-family:var(--sans);font-weight:800;font-size:clamp(19px,4vw,26px);
  letter-spacing:-.02em;text-decoration:none;color:var(--teal-lit);display:inline-block;margin:6px 0 4px}

/* language switch */
.lang{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fog-dim);text-decoration:none}
.lang b{color:var(--teal-lit);font-weight:400}

/* the PDF button is screen-only; print.css hides it */
.dl{display:inline-flex;align-items:center;gap:8px;margin-top:16px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--teal);border-radius:999px;color:var(--teal-lit)}
.dl:hover{background:rgba(14,168,123,.12)}