/* Lenticular — cards on dark felt, ridged plastic over each print. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --felt: #14121a; --felt-deep: #0c0b10; --ink: #efe9df; --ink-soft: #a39c92; --card: #f4efe6; --red: #c8442e; --pitch: 5px;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--felt); }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: radial-gradient(ellipse at 50% 0%, #211d2b 0%, var(--felt) 45%, var(--felt-deep) 100%); }
button { font: inherit; color: inherit; }
.eyebrow { margin: 0 0 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.corner { position: fixed; z-index: 9; top: 12px; left: 12px; padding: 4px 8px; background: var(--felt); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner:hover, .corner:focus-visible { color: var(--ink); outline: none; }

.intro { width: min(100%, 1180px); margin: 0 auto; padding: 96px clamp(18px, 4vw, 48px) 26px; display: grid; gap: 10px; }
.intro h1 { font: 300 clamp(44px, 7vw, 96px)/.95 var(--sans); letter-spacing: -.035em; }
.lede { max-width: 640px; color: #cfc7bb; text-wrap: pretty; }
.how { font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tilt { width: max-content; margin-top: 6px; padding: 11px 16px; border: 1px solid #5a5262; border-radius: 999px; background: transparent; color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tilt:hover, .tilt:focus-visible { border-color: var(--red); outline: none; }

/* ---------- the cards ---------- */
.cards { width: min(100%, 1180px); margin: 0 auto; padding: 10px clamp(18px, 4vw, 48px) 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(22px, 3vw, 40px); perspective: 1400px; }
.card { margin: 0; display: grid; gap: 12px; }
.print { position: relative; aspect-ratio: 3 / 2; padding: 10px; background: var(--card); border-radius: 5px; box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.25) inset; transform: rotateY(var(--tilt, 0deg)); transform-style: preserve-3d; transition: transform .08s linear; cursor: ew-resize; touch-action: pan-y; outline: none; }
.print:focus-visible { box-shadow: 0 0 0 3px var(--red), 0 30px 60px rgba(0,0,0,.55); }
.print canvas { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); display: block; border-radius: 2px; background: #000; }
/* the ridged plastic: one ridge per lenticule, a highlight on its left shoulder and a shadow on its right */
.lens { position: absolute; inset: 10px; border-radius: 2px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,.03) 1px 2px, transparent 2px 3px, rgba(0,0,0,.10) 3px 4px, rgba(0,0,0,.04) 4px var(--pitch)); mix-blend-mode: soft-light; }
/* and the glossy sheen that slides as you tilt */
.sheen { position: absolute; inset: 10px; border-radius: 2px; pointer-events: none; background: linear-gradient(100deg, transparent calc(var(--sheen, .3) * 100% - 16%), rgba(255,255,255,.16) calc(var(--sheen, .3) * 100%), transparent calc(var(--sheen, .3) * 100% + 16%)); }
.card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.card .num { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; color: var(--ink-soft); }
.card h2 { font: 400 20px/1.2 var(--sans); }
.card .flip { grid-column: 2; display: flex; gap: 10px; align-items: baseline; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.card .flip b { font-weight: 500; color: var(--ink-soft); transition: color .25s; }
.card .flip b.on { color: var(--ink); }
.card .flip i { font-style: normal; color: #6c6470; }
.colophon { width: min(100%, 1180px); margin: 0 auto; padding: 10px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 760px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

@media (max-width: 860px) {
  :root { --pitch: 4px; }
  .cards { grid-template-columns: 1fr; gap: 34px; }
  .intro { padding-top: 70px; }
  .print { padding: 7px; }
  .print canvas, .lens, .sheen { inset: 7px; }
  .print canvas { width: calc(100% - 14px); height: calc(100% - 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .print { transition: none; transform: none !important; }
  .card .flip b { transition: none; }
}