/* ============================================================
   marks.css — the crit wall.

   These are rounds that lost. They go up the way losing rounds
   actually go up: overlapping, crooked, taped, half-covering each
   other, scrawled on in marker. Nothing is aligned to anything and
   the captions are on index cards someone typed and stuck down.
   ============================================================ */
/* Paper. Nothing on it. */
.mk-page{ background:#fff }

/* ---------- hero ----------
   The mark, big, on white. No paper, no tape, no shadow, no tilt. The only
   other thing on screen is type, and it is allowed to sit on top of it. */
.hero{ position:relative; padding:0 0 clamp(1rem,3vw,2rem) }
.hero__stack{ position:relative; width:100%; aspect-ratio:1536/1024 }
.hero__stack img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.hero__stack .pl{ mix-blend-mode:multiply; opacity:.85; transition:transform 1.4s cubic-bezier(.16,1,.3,1) }
.hero__stack .pl-c{ filter:url(#cyanish);    transform:translate(-2.4%, 1.8%) }
.hero__stack .pl-m{ filter:url(#magentaish); transform:translate(2.1%,-1.5%) }
.hero__stack .pl-k{ opacity:1; mix-blend-mode:normal; transform:translate(.9%,.8%) }
.hero[data-registered="true"] .pl{ transform:none }
.hero[data-registered="true"] .pl-c,
.hero[data-registered="true"] .pl-m{ opacity:0; transition:transform 1.4s cubic-bezier(.16,1,.3,1), opacity .6s .75s }
@media (prefers-reduced-motion:reduce){
  .hero__stack .pl{ transition:none } .hero__stack .pl-c,.hero__stack .pl-m{ opacity:0 }
  .hero__stack .pl-k{ transform:none }
}
.hero__type{ position:absolute; inset:0; z-index:5; pointer-events:none }
.hero__type p{ position:absolute; margin:0 }
.masthead{
  font-family:var(--anton); text-transform:uppercase; line-height:.72;
  font-size:clamp(2.6rem,13vw,12rem); letter-spacing:-.035em; mix-blend-mode:multiply;
}
.masthead em{ font-family:var(--wonk); font-style:italic; font-size:.5em;
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144 }
.hero__meta{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.7;
}

/* ---------- the wall ----------
   FRUiTS, not a corkboard. Pure white, no frames, no tape, no pins, no drop
   shadows, no rotation. Pictures butted hard against each other at wildly
   different sizes, captions crammed into their corners, and the type sitting
   straight on the white with nothing underneath it. Density does the work. */
.wall{ padding:0 }
.wall__head{
  position:relative; padding:clamp(1.4rem,4vw,3rem) var(--trim) .4rem;
  display:flex; align-items:flex-end; gap:clamp(.6rem,2vw,2rem); flex-wrap:wrap;
}
.wall__head h2{
  font-family:var(--anton); text-transform:uppercase; line-height:.74;
  font-size:clamp(3rem,17vw,15rem); letter-spacing:-.03em; margin:0;
}
.wall__head h2 em{ font-family:var(--wonk); font-style:italic; font-size:.42em;
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144; letter-spacing:-.02em }
.wall__head p{ max-width:38ch; margin-bottom:.9rem; font-size:.68rem; line-height:1.45 }

.board{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(38px,5.4vw,74px); grid-auto-flow:dense;
  gap:2px; background:#fff;
}
.print{
  position:relative; margin:0; overflow:hidden; background:#fff; cursor:zoom-in;
  transition:filter .18s;
}
.print img{ width:100%; height:100%; object-fit:cover; display:block }
.print:hover{ filter:contrast(1.15) saturate(1.2) }
.board:hover .print:not(:hover){ filter:grayscale(1) opacity(.55) }
/* the caption is crammed into the corner of the picture, not under it */
.print__cap{
  position:absolute; left:0; bottom:0; z-index:3; max-width:78%;
  background:#fff; padding:.22rem .34rem .26rem;
  font-family:var(--mono); font-size:.5rem; line-height:1.3; letter-spacing:.01em;
}
.print__cap b{ font-family:var(--anton); font-size:.86rem; letter-spacing:.02em;
  text-transform:uppercase; display:block; line-height:1 }
.print[data-killed="true"] .print__cap b::after{ content:" ✕"; color:var(--spot) }
.print[data-killed="true"]::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spot) calc(50% - 2px), var(--spot) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(to bottom left,  transparent calc(50% - 2px), var(--spot) calc(50% - 2px), var(--spot) calc(50% + 2px), transparent calc(50% + 2px));
}
/* type dropped straight onto the mosaic */
.shout{
  position:absolute; z-index:6; pointer-events:none; margin:0;
  font-family:var(--anton); text-transform:uppercase; line-height:.78;
  letter-spacing:-.02em; color:var(--ink); mix-blend-mode:multiply;
}
.shout--ko{ color:#fff; mix-blend-mode:normal }
.shout em{ font-family:var(--wonk); font-style:italic; font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144 }
.shout--red{ color:var(--spot) }
.side{
  position:absolute; z-index:6; writing-mode:vertical-rl; pointer-events:none;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
}
@media (max-width:820px){
  /* Every span on the board is written for twelve tracks. Halving the grid to six
     left `span 12` overflowing into implicit 0px columns and four of the seven
     logos rendering 6–8px wide. One column, natural heights, full bleed. */
  .board{ grid-template-columns:1fr; grid-auto-rows:auto; gap:3px }
  .board > .print{ grid-column:1 / -1 !important; grid-row:auto !important }
  .print img{ height:auto; aspect-ratio:1536/1024 }
  /* the shouted type is placed against the desktop mosaic; on one column it
     lands on nothing in particular, so it stays behind */
  .shout, .side{ display:none }
  .print__cap{ max-width:92% }
}

/* ---------- isolate ---------- */
.solo{ position:fixed; inset:0; z-index:600; display:none; place-items:center;
  background:rgba(16,15,13,.9); padding:clamp(1rem,5vw,4rem); cursor:zoom-out }
.solo[data-on="true"]{ display:grid; animation:solo-in .28s cubic-bezier(.16,1,.3,1) }
@keyframes solo-in{ from{ opacity:0; transform:scale(.98) } }
.solo img{ max-width:100%; max-height:78vh; object-fit:contain; background:#fff; padding:1.3rem;
  box-shadow:18px 22px 0 rgba(0,0,0,.45) }
.solo__cap{ position:absolute; bottom:clamp(1rem,4vh,2.4rem); left:0; right:0; text-align:center; color:#EFEDE6 }

/* ---------- strip ---------- */
.strip-marq{ overflow:hidden; border-block:5px solid var(--ink); background:#fff; padding-block:.8rem }
.strip-marq__in{ display:flex; gap:clamp(1.2rem,3.4vw,3.4rem); align-items:center; width:max-content;
  animation:strip 46s linear infinite }
.strip-marq img{ height:clamp(46px,6.5vw,88px); width:auto; display:block }
.strip-marq .ph{ height:clamp(46px,6.5vw,88px); width:132px; aspect-ratio:auto }
@keyframes strip{ to{ transform:translateX(-50%) } }
.strip-marq:hover .strip-marq__in{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .strip-marq__in{ animation:none } }

/* the mark signing off the magazine */
.signoff{ margin:0 0 1rem; max-width:min(46vw,420px) }
.signoff img{ width:100%; height:auto; display:block }
.signoff .ph{ aspect-ratio:3/2 }