/* NINE WAYS IN — Interchange Poster system. Warm paper, ink, committed red/orange/yellow. */
:root{
  --paper:#F5EFE2;
  --paper-deep:#EDE4D0;
  --ink:#181008;
  --ink-soft:#4A3B2A;
  --red:#E2001A;
  --orange:#F77F00;
  --yellow:#FFC300;
  --wine:#7A0C1E;
  --hair:rgba(24,16,8,.18);
  --disp:"Bricolage Grotesque",sans-serif;
  --mono:"Spline Sans Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:var(--disp);
  font-size:17px;line-height:1.5;overflow-x:hidden;
  background-image:
    radial-gradient(1200px 600px at 85% -5%, rgba(247,127,0,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, rgba(226,0,26,.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
::selection{background:var(--yellow);color:var(--ink)}

/* ---------- meta rows ---------- */
.meta-row{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  padding:18px 4vw;border-bottom:1.5px solid var(--ink);
}
.meta-row .spacer{flex:1}
.dot-pair{display:inline-flex}
.dot-pair i{width:13px;height:13px;border-radius:50%;display:inline-block}
.dot-pair i:first-child{background:var(--red)}
.dot-pair i:last-child{background:var(--orange);margin-left:-5px;mix-blend-mode:multiply}

/* ---------- masthead ---------- */
.mast{padding-bottom:0}
.title{
  padding:6vh 4vw 2vh;
  font-weight:800;font-optical-sizing:auto;
  font-size:clamp(64px,15.5vw,230px);
  line-height:.86;letter-spacing:-.03em;text-transform:uppercase;
}
.title .t-line{
  display:block;position:relative;
  animation:rise .7s cubic-bezier(.2,.9,.25,1) both;
  animation-delay:calc(var(--d)*.12s);
}
.title .t-line:nth-child(2){color:var(--red);margin-left:.18em}
.title .t-line:nth-child(3){margin-left:.55em}
@keyframes rise{from{opacity:0;transform:translateY(.35em) rotate(.5deg)}to{opacity:1;transform:none}}
.t-circles{display:inline-block;width:.85em;height:.42em;position:relative;vertical-align:baseline}
.t-circles::before,.t-circles::after{
  content:"";position:absolute;bottom:.02em;width:.42em;height:.42em;border-radius:50%;
}
.t-circles::before{left:.08em;background:var(--orange);mix-blend-mode:multiply}
.t-circles::after{left:.32em;background:var(--yellow);mix-blend-mode:multiply}
.thesis{
  max-width:760px;margin:3vh 4vw 6vh;
  font-size:clamp(17px,1.6vw,21px);font-weight:500;line-height:1.55;
  animation:rise .7s .4s cubic-bezier(.2,.9,.25,1) both;
}
.thesis strong{background:linear-gradient(transparent 62%,var(--yellow) 62%);font-weight:700}

/* ---------- index ---------- */
.index{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1.5px solid var(--ink);
}
.index a{
  display:flex;align-items:baseline;gap:10px;
  padding:16px 4vw 16px 2vw;text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
  font-weight:700;font-size:clamp(14px,1.35vw,18px);
  transition:background .18s,color .18s;
}
.index a:nth-child(3n){border-right:none}
.index a b{font-family:var(--mono);font-weight:500;font-size:.78em;opacity:.65}
.index a s{text-decoration:none;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-left:auto;text-align:right}
.index a:hover{background:var(--ink);color:var(--paper)}
.index a:hover s{opacity:.8}

/* ---------- plates ---------- */
.plate{
  display:grid;gap:0 4vw;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  padding:9vh 4vw 10vh;position:relative;
  border-bottom:1.5px solid var(--ink);
}
.plate.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.plate.flip .p-media{order:2}
.plate.flip .p-copy{order:1}
.p-head{
  grid-column:1/-1;display:flex;align-items:baseline;gap:2.5vw;
  margin-bottom:5vh;flex-wrap:wrap;
}
.p-num{
  font-family:var(--mono);font-size:clamp(15px,1.4vw,19px);letter-spacing:.1em;
  padding:.45em .8em;border:1.5px solid var(--ink);border-radius:999px;
  background:var(--ac);color:var(--nc);white-space:nowrap;
}
.p-title{
  font-size:clamp(44px,7vw,104px);font-weight:800;letter-spacing:-.025em;
  line-height:.95;text-transform:uppercase;
}
.p-taste{
  margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-align:right;
}
.p-taste b{display:block;color:var(--ink);font-weight:500}
.p-media{position:relative}
.p-media img,.p-media video{
  width:100%;display:block;border:2px solid var(--ink);
  box-shadow:14px 14px 0 var(--ac);
  transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s;
  background:var(--paper-deep);aspect-ratio:16/9;object-fit:cover;
}
.plate:hover .p-media img,.plate:hover .p-media video{transform:translate(-4px,-4px);box-shadow:20px 20px 0 var(--ac)}
.p-media figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:14px;display:flex;gap:14px;
}
.p-media figcaption::before{content:"";width:34px;height:1.5px;background:var(--ac);align-self:center;flex:none}
.p-copy{display:flex;flex-direction:column;gap:22px;justify-content:center;min-width:0}
.p-log{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.3}
.p-log::first-letter{color:var(--acd)}
.p-film{color:var(--ink-soft);font-weight:500;font-size:16.5px}
.p-does{
  border-left:4px solid var(--ac);padding:14px 18px;
  background:linear-gradient(90deg,rgba(24,16,8,.05),transparent 80%);
  font-size:15.5px;font-weight:600;
}
.p-does em{
  display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acd);margin-bottom:6px;
}
/* per-accent variables */
.ac-red{--ac:var(--red);--acd:var(--wine);--nc:#fff}
.ac-orange{--ac:var(--orange);--acd:#9C4A00;--nc:var(--ink)}
.ac-yellow{--ac:var(--yellow);--acd:#8A6A00;--nc:var(--ink)}
/* reveal */
.plate .p-head,.plate .p-media,.plate .p-copy{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.25,1)}
.plate.on .p-head{opacity:1;transform:none}
.plate.on .p-media{opacity:1;transform:none;transition-delay:.08s}
.plate.on .p-copy{opacity:1;transform:none;transition-delay:.16s}

/* giant ghost number */
.plate::after{
  content:attr(data-num);position:absolute;top:2vh;right:1vw;z-index:-1;
  font-weight:800;font-size:clamp(120px,22vw,340px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--hair);
  pointer-events:none;
}

.foot .meta-row{border-top:1.5px solid var(--ink);border-bottom:none;padding:26px 4vw}

@media(max-width:900px){
  .index{grid-template-columns:1fr 1fr}
  .index a:nth-child(3n){border-right:1.5px solid var(--ink)}
  .index a:nth-child(2n){border-right:none}
  .plate,.plate.flip{grid-template-columns:1fr}
  .plate.flip .p-media{order:0}.plate.flip .p-copy{order:1}
  .p-copy{margin-top:4vh}
  .p-taste{margin-left:0;text-align:left;width:100%}
}