/* Red Letter — Atelier edition. Tokens, type and treatments from the Design System artifact (README + tokens). */
@font-face { font-family: "Italiana"; src: url("fonts/Italiana-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archive Magno Script"; src: url("fonts/ArchiveMagnoScript.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ground: #ece6d6; --ground-band: #8b1a1a; --ink: #8b1a1a; --ink-on-band: #ece6d6; --ink-soft: #a04a4a; --hairline: #c9a4a4;
  --oxblood: #8b1a1a; --cream: #ece6d6; --black: #141414; --accent-pale: #e9b3b3;
  --space-1: 8px; --space-2: 12px; --space-3: 24px; --space-4: 40px; --space-5: 100px; --measure: 560px; --wrap: 960px; --frame-offset: 6px;
  --font-display: "Italiana", "Didot", serif; --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "Courier New", monospace; --font-script: "Archive Magno Script", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground) url("plates/silk-cream.jpg") center top / 100% auto no-repeat; color: var(--ink); font: 300 15px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; background: url("plates/grain-fine.png") repeat; background-size: 256px; opacity: .4; pointer-events: none; z-index: 20; }
img, iframe { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 var(--space-2); }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
section { padding: var(--space-5) 0; }
@media (max-width: 767px) { section { padding: 64px 0; } }

/* type */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
.poster-title { font: 400 34px/1.15 var(--font-display); letter-spacing: .01em; }
.broadside { font: 400 clamp(36px, 6vw, 64px)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.section-name { font: 400 26px/1.2 var(--font-display); }
.price { font: 400 34px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.spread { text-align: justify; text-align-last: left; word-spacing: .4em; max-width: var(--measure); }
.spread.center { text-align-last: center; margin-inline: auto; }
.body { font-weight: 300; max-width: var(--measure); }
.caption { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.caption b { display: block; font-weight: 500; color: var(--ink); font-size: 14px; }
.label { font: 500 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; }
.label.soft { color: var(--ink-soft); }
.script { font: 400 34px/1 var(--font-script); }
.letters { display: flex; justify-content: space-between; font: 400 12px/1 var(--font-mono); letter-spacing: .3em; }
@media (max-width: 767px) { .spread { word-spacing: .25em; } .poster-title { font-size: 28px; } }

/* frames and rules */
.frame { border: 1px solid currentColor; outline: 1px solid currentColor; outline-offset: var(--frame-offset); padding: 18px 22px; display: inline-block; }
.hair { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.rule { display: block; width: 240px; height: auto; margin: 0 auto; filter: none; }
.marks { position: relative; }
.marks::before, .marks::after { content: "+"; position: absolute; top: -18px; font: 14px/1 var(--font-mono); color: var(--hairline); }
.marks::before { left: 0; } .marks::after { right: 0; }

/* buttons */
.btn { display: inline-block; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); padding: 13px 18px; color: var(--ink); background: transparent; }
.btn.fill { background: var(--ink); color: var(--cream); }
.on-band .btn, .on-black .btn { border-color: var(--cream); color: var(--cream); }

/* nav + footer */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.nav img { width: 220px; filter: none; }
.nav .links a { text-decoration: none; margin-left: 28px; }
.nav .links a.now { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 767px) { .nav img { width: 170px; } .nav .links a:not(.k) { display: none; } }
/* the closing section already carries its own bottom padding; don't stack the footer's margin on top */
section + .wrap > footer { margin-top: 0; }
section.on-black + .wrap > footer, section.on-band + .wrap > footer { margin-top: 48px; }
body > section:last-of-type:not(.on-black):not(.on-band) { padding-bottom: 48px; }
footer { margin-top: 80px; padding: 28px 0 40px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
footer .links a { text-decoration: none; margin-right: 18px; }
footer .foot-mark { width: 200px; filter: none; }
@media (max-width: 767px) { footer { grid-template-columns: 1fr; } }

/* grounds */
.on-band { background: var(--ground-band) url("plates/band-red-emulsion.jpg") center / cover; color: var(--ink-on-band); }
.on-black { background: var(--black) url("plates/band-black-grain.jpg") center / cover; color: var(--cream); }
.on-band .caption, .on-black .caption { color: inherit; opacity: .8; }
.on-band .broadside { text-shadow: 0 0 22px rgba(240,110,110,.45); }

/* stills and players */
.still { object-fit: cover; filter: grayscale(1) contrast(1.05); }
.vimeo { position: relative; background: var(--black); overflow: hidden; }
.vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.r32 { aspect-ratio: 3 / 2; } .r169 { aspect-ratio: 16 / 9; } .r43 { aspect-ratio: 4 / 3; } .r23 { aspect-ratio: 2 / 3; } .r34 { aspect-ratio: 3 / 4; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 767px) { .three, .two { grid-template-columns: 1fr; } }

/* collections on black */
.coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(236,230,214,.25); }
.coll-grid .c { padding: 36px 28px 40px; border-left: 1px solid rgba(236,230,214,.25); }
.coll-grid .c:first-child { border-left: 0; }
.coll-grid .n { font: 400 26px/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.coll-grid .p { margin: 10px 0 18px; }
.coll-grid .p small { display: block; font: 500 11px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.coll-grid .d { font-size: 14px; opacity: .9; margin-top: 14px; }
.coll-grid .tag { margin-top: 16px; font: 500 11px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-pale); }
@media (max-width: 767px) { .coll-grid { grid-template-columns: 1fr; } .coll-grid .c { border-left: 0; border-top: 1px solid rgba(236,230,214,.25); } .coll-grid .c:first-child { border-top: 0; } }

/* letterpress moment: one per screen, display only */
.press { filter: url(#press); }

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .m-load { opacity: 0; transform: translateY(14px); animation: m-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .m-load.d1 { animation-delay: .15s } .m-load.d2 { animation-delay: .35s } .m-load.d3 { animation-delay: .55s } .m-load.d4 { animation-delay: .75s }
  .m-scroll { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .m-scroll.is-in { opacity: 1; transform: none; }
  .m-scroll.d1 { transition-delay: .12s } .m-scroll.d2 { transition-delay: .24s }
  .btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
  .btn:hover { background: var(--ink); color: var(--cream); }
  .btn.fill:hover { background: var(--black); border-color: var(--black); }
  .on-band .btn:hover, .on-black .btn:hover { background: var(--cream); color: var(--black); }
  .vimeo iframe, .hov img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .hov:hover img { transform: scale(1.02); }
}
@keyframes m-in { to { opacity: 1; transform: none; } }