/* NIGHT PRESS — print shop look: newsprint paper, two riso inks, posters hung on a line with pegs */
:root { --paper: #efe6d2; --paper2: #e6dbc3; --card: #f7f0e1; --ink: #17130e; --mute: #6f6553; --line: #cbbd9f; --red: #e4412f; --blue: #2747b8; --gold: #c99a1c; --mono: 'IBM Plex Mono', ui-monospace, monospace; --head: 'Anton', 'Impact', sans-serif; --body: 'Libre Franklin', system-ui, sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

/* paper grain + faint riso misregistration blobs */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 88% 8%, rgba(228, 65, 47, .10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 6% 92%, rgba(39, 71, 184, .09), transparent 70%),
    var(--paper); }
.bg::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- masthead ---------- */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 12px 34px; background: rgba(239, 230, 210, .9); backdrop-filter: blur(8px); border-bottom: 3px double var(--ink); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo svg { color: var(--ink); }
.logo b { font: 400 26px/1 var(--head); letter-spacing: .02em; text-transform: uppercase; }
.logo em { font: 500 10.5px var(--mono); font-style: normal; color: var(--mute); letter-spacing: .1em; text-transform: uppercase; padding-left: 12px; border-left: 1px solid var(--ink); }
.sp { flex: 1; }
nav { display: flex; gap: 22px; }
nav a { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; }
nav a:hover { border-color: var(--red); color: var(--red); }
.btn { padding: 9px 16px; background: var(--card); color: var(--ink); font: 600 12.5px var(--mono); letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 3px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.pill span { font-size: 10px; color: var(--mute); }
.btn.pill code { font: 600 12px var(--mono); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.primary { background: var(--red); color: #fff7ea; border-color: var(--ink); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }

section { max-width: 1360px; margin: 0 auto; padding: 70px 34px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; align-items: end; padding-top: 64px; padding-bottom: 30px; }
.kick { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.kick b { color: var(--ink); }
h1 { font: 400 clamp(56px, 7.4vw, 128px)/.88 var(--head); white-space: nowrap; text-transform: uppercase; letter-spacing: -.005em; margin: 18px 0 0; position: relative; }
h1 .r { color: var(--red); display: inline-block; position: relative; white-space: nowrap; isolation: isolate; }
/* riso misregistration: a blue ghost of the red word, slightly offset */
h1 .r::before { content: attr(data-t); position: absolute; left: 5px; top: 4px; white-space: nowrap; color: var(--blue); mix-blend-mode: multiply; z-index: -1; opacity: .85; }
.lede { font-size: 17.5px; line-height: 1.6; color: #3d3427; max-width: 560px; }
.lede b { color: var(--ink); }
.stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 46px 0 0; grid-column: 1 / -1; }
.stamps > div { border: 2px solid var(--ink); background: var(--card); padding: 14px 16px 12px; position: relative; }
.stamps > div:nth-child(2) { transform: rotate(-.6deg); }
.stamps > div:nth-child(3) { transform: rotate(.5deg); }
.stamps span { display: block; font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.stamps b { display: block; font: 400 40px/1.05 var(--head); margin-top: 6px; }
.stamps small { font: 500 11px var(--mono); color: var(--mute); }
.stamps .hot b { color: var(--red); }

/* ---------- the line: rope + pegs + swinging posters ---------- */
.line { padding-top: 10px; }
.rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 14px; }
.rk { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.rk b { font: 400 34px var(--head); margin-right: 10px; letter-spacing: .01em; }
.rt { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.rt b { font: 400 34px var(--head); color: var(--red); letter-spacing: .02em; }
.rope-wrap { position: relative; margin-top: 30px; }
.rope { position: absolute; left: -34px; right: -34px; top: 0; height: 60px; width: calc(100% + 68px); pointer-events: none; }
.posters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; position: relative; padding-top: 18px; }
.p { position: relative; display: flex; flex-direction: column; align-items: stretch; cursor: pointer; transform-origin: 50% -14px; animation: swing 5.5s ease-in-out infinite; }
.p:nth-child(2n) { animation-duration: 6.3s; animation-delay: -1.2s; }
.p:nth-child(3n) { animation-duration: 4.9s; animation-delay: -2.4s; }
@keyframes swing { 0%, 100% { transform: rotate(var(--r, -1.2deg)); } 50% { transform: rotate(calc(var(--r, -1.2deg) * -1)); } }
.p:hover { animation-play-state: paused; }
.peg { position: absolute; top: -22px; left: 50%; width: 14px; height: 34px; margin-left: -7px; z-index: 2; border-radius: 2px;
  background: linear-gradient(90deg, #b07a43, #d9a66b 45%, #9c6936); box-shadow: 1px 2px 2px rgba(0, 0, 0, .25); }
.peg::after { content: ''; position: absolute; left: 3px; right: 3px; top: 13px; height: 3px; background: #6d6e70; border-radius: 1px; }
.pImg { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--card); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 22px -8px rgba(40, 28, 10, .45); transition: box-shadow .2s, transform .2s; }
.p:hover .pImg { box-shadow: 0 18px 32px -10px rgba(40, 28, 10, .55); transform: translateY(-3px); }
.tagcard { margin: 12px auto 0; width: 92%; background: var(--card); border: 1px solid var(--line); padding: 8px 10px 9px; position: relative; text-align: left; transform: rotate(.6deg); }
.tagcard::before { content: ''; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--paper2); border: 1px solid var(--line); }
.pCap b { display: block; font: 400 19px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.pCap small { display: block; font: 500 10px var(--mono); color: var(--mute); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.pBid { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); font: 600 11px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.pBid b { color: var(--red); font-size: 13px; }
.stamp { position: absolute; top: 18%; left: 50%; transform: translateX(-50%) rotate(-12deg); font: 400 26px var(--head); letter-spacing: .08em; color: var(--red); border: 3px solid var(--red); padding: 2px 12px; background: rgba(247, 240, 225, .65); mix-blend-mode: multiply; pointer-events: none; }

.hprog { height: 6px; background: var(--paper2); border: 1px solid var(--ink); margin-top: 40px; overflow: hidden; }
.hprog i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--red) 0 8px, #c93624 8px 16px); transition: width .5s; }

/* ---------- mint window ---------- */
.window { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(228, 65, 47, .05) 22px 44px); max-width: none; }
.window > * { max-width: 1292px; margin-left: auto; margin-right: auto; }

/* ---------- section heads ---------- */
.sh { margin-bottom: 34px; max-width: 820px; }
.sh .kick { color: var(--blue); }
.sh .kick i { background: var(--blue); }
.sh h2 { font: 400 clamp(46px, 6vw, 88px)/.92 var(--head); text-transform: uppercase; margin: 12px 0 14px; }
.sh p { color: #3d3427; font-size: 16.5px; max-width: 620px; }

/* ---------- the edition: flat file, posters taped down ---------- */
.edition { border-top: 2px solid var(--ink); }
.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 26px 20px; }
.g { position: relative; cursor: pointer; aspect-ratio: 3/4; transform: rotate(var(--r, 0deg)); transition: transform .2s; }
.g:hover { transform: rotate(0deg) scale(1.06); z-index: 2; }
.g img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 6px 14px -6px rgba(40, 28, 10, .45); }
.g::before, .g::after { content: ''; position: absolute; width: 38%; height: 14px; background: rgba(240, 226, 180, .78); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); z-index: 1; }
.g::before { top: -6px; left: -8px; transform: rotate(-32deg); }
.g::after { top: -6px; right: -8px; transform: rotate(32deg); }
.g .tag { position: absolute; bottom: -9px; left: 8px; font: 600 9.5px var(--mono); letter-spacing: .1em; padding: 2px 6px; background: var(--card); border: 1px solid var(--ink); z-index: 1; }
.g .num { display: none; }
.g.taken .tag { background: var(--red); color: #fff7ea; border-color: var(--red); }
.g.taken img { filter: saturate(1.05); }
.g.taken .seal { position: absolute; right: 6px; top: 10px; transform: rotate(14deg); font: 400 13px var(--head); letter-spacing: .1em; color: var(--red); border: 2px solid var(--red); padding: 1px 6px; background: rgba(247, 240, 225, .75); }

/* ---------- press room: receipt tape + you ---------- */
.feed { border-top: 2px solid var(--ink); }
.feedgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.card { background: var(--card); border: 1.5px solid var(--ink); padding: 22px; min-height: 320px; position: relative; box-shadow: 6px 6px 0 rgba(23, 19, 14, .12); }
.card:first-child { box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 95% 100%, 90% calc(100% - 10px), 85% 100%, 80% calc(100% - 10px), 75% 100%, 70% calc(100% - 10px), 65% 100%, 60% calc(100% - 10px), 55% 100%, 50% calc(100% - 10px), 45% 100%, 40% calc(100% - 10px), 35% 100%, 30% calc(100% - 10px), 25% 100%, 20% calc(100% - 10px), 15% 100%, 10% calc(100% - 10px), 5% 100%, 0 calc(100% - 10px)); padding-bottom: 32px; }
.ch { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.ch b { font: 400 26px var(--head); text-transform: uppercase; letter-spacing: .02em; }
.ch span { font: 500 11px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
#events { max-height: 400px; overflow-y: auto; font-family: var(--mono); }
.ev { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ev small { color: var(--mute); font-size: 10.5px; display: block; margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.ev.mint { color: var(--red); font-weight: 600; }
.ev.bid::before { content: '› '; color: var(--blue); }
.ev.mint::before { content: '★ '; }
#you .yk { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font: 500 13px var(--mono); color: var(--mute); }
#you .yk b { color: var(--ink); }
#you .yposters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }

/* ---------- how ---------- */
.how { border-top: 2px solid var(--ink); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px solid var(--ink); background: var(--card); }
.steps > div { padding: 24px 22px 26px; border-right: 1px solid var(--ink); }
.steps > div:last-child { border-right: 0; }
.n { font: 400 54px/1 var(--head); color: var(--red); margin-bottom: 8px; }
.steps > div:nth-child(even) .n { color: var(--blue); }
.steps h3 { font: 400 22px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.steps p { color: #3d3427; font-size: 14.5px; }
.honest { margin-top: 26px; padding: 14px 18px; border-left: 4px solid var(--blue); background: rgba(39, 71, 184, .06); color: #3d3427; font-size: 14.5px; max-width: 860px; }

footer { max-width: 1360px; margin: 0 auto; padding: 26px 34px 54px; border-top: 3px double var(--ink); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font: 500 12px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
footer b, footer a { color: var(--ink); }
footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- modal: a proof sheet ---------- */
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(23, 19, 14, .62); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.box { background: var(--card); border: 2px solid var(--ink); width: min(940px, 100%); max-height: 92vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; position: relative; box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); }
.x { position: absolute; top: 10px; right: 12px; font: 400 26px/1 var(--head); width: 34px; height: 34px; z-index: 2; border: 1.5px solid var(--ink); background: var(--card); }
.mImg { width: 100%; height: 100%; object-fit: cover; min-height: 420px; display: block; background: var(--paper2); border-right: 2px solid var(--ink); }
.mb { padding: 30px 30px 26px; overflow-y: auto; }
.mb .k { font: 600 11px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .14em; }
.mb .k b { color: var(--red); }
.mb h3 { font: 400 52px/.95 var(--head); text-transform: uppercase; margin: 10px 0 8px; }
.mmeta { font: 500 12px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; }
.bidbox { border-top: 2px solid var(--ink); padding-top: 16px; }
.row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font: 500 13px var(--mono); color: var(--mute); }
.row b { color: var(--ink); }
#mAmt { width: 100%; margin: 16px 0 12px; padding: 13px 14px; background: #fffaf0; border: 1.5px solid var(--ink); color: var(--ink); font: 600 16px var(--mono); outline: 0; border-radius: 2px; }
#mAmt:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(228, 65, 47, .15); }
.mbtns { display: flex; gap: 10px; }
.mbtns .btn { flex: 1; justify-content: center; padding: 12px; }
.bids { margin-top: 18px; max-height: 150px; overflow-y: auto; }
.bids .b { display: flex; justify-content: space-between; padding: 6px 0; font: 500 12.5px var(--mono); color: var(--mute); border-bottom: 1px dotted var(--line); }
.bids .b b { color: var(--ink); }
.bids .b.you { color: var(--red); }
.msg { margin-top: 14px; font: 500 13px var(--mono); color: var(--mute); min-height: 20px; }
.msg.err { color: var(--red); }
.msg.ok { color: #2d7a3e; }

.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -12px); z-index: 40; background: var(--ink); color: var(--paper); font: 600 13px var(--mono); padding: 11px 20px; opacity: 0; transition: all .35s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .stamps { grid-template-columns: 1fr 1fr; }
  .posters { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .grid { grid-template-columns: repeat(5, 1fr); }
  .feedgrid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps > div:nth-child(2) { border-right: 0; }
  .steps > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .box { grid-template-columns: 1fr; overflow-y: auto; }
  .mImg { min-height: 300px; max-height: 44vh; border-right: 0; border-bottom: 2px solid var(--ink); }
}
@media (max-width: 640px) {
  header { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .logo em, nav { display: none; }
  section { padding-left: 18px; padding-right: 18px; }
  .posters { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .steps > div { border-right: 0; border-bottom: 1px solid var(--ink); }
  .mb h3 { font-size: 40px; }
}