/* Mercenary Magnetics .nl — design study.
   One rule: twelve columns, flat ink, lowercase display type. The M's slant (35.4deg) is the only ornament. */
@font-face{font-family:'Archivo Black';font-weight:400;font-display:swap;src:url(fonts/archivo-black-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(fonts/space-mono-700.woff2) format('woff2')}

:root{
  --paper:#F9DAB5; --ink:#1B1C1F; --orange:#F45205; --mustard:#FFAA16; --tan:#EBC89C;
  --head:"Archivo Black","Arial Black",Impact,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,3.3vw,56px);      /* page margin */
  --g:clamp(10px,1.67vw,28px);       /* gutter */
  --rule:2px;
  --slant:-35.4deg;
  --both:linear-gradient(125.4deg,var(--orange) 50%,var(--mustard) 50%); /* recorded + mixed: both inks, split on the M's angle */                  /* the angle of the M */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14px/1.55 var(--mono);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:var(--rule)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{padding-inline:var(--pad)}

/* the grid, made visible: one tick per column edge */
.ticks{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);height:12px;border-top:var(--rule) solid var(--ink)}
.ticks i{border-left:var(--rule) solid var(--ink)}

/* study ribbon (review aid only) */
.ribbon{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:7px var(--pad);background:var(--ink);color:var(--paper);font-size:11px}
.ribbon a{text-decoration:none;opacity:.7}
.ribbon a:hover,.ribbon a[aria-current]{opacity:1;text-decoration:underline}

/* ---------- top navigation ---------- */
.top{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);height:60px;font-weight:700;font-size:13px;overflow-x:auto;scrollbar-width:none}
.top::-webkit-scrollbar{display:none}
.top a{text-decoration:none;white-space:nowrap;padding-block:6px;border-bottom:var(--rule) solid transparent}
.top a:hover{border-bottom-color:var(--ink)}
.top .home{margin-right:auto;border:0;flex:none}
.top .home img{width:54px;height:auto}

/* ---------- hero A: the approved collage, set flat ---------- */
#stage{position:relative;width:100%;aspect-ratio:1731/909;overflow:hidden;background:var(--paper);border-block:var(--rule) solid var(--ink)}
#stage .shapes{position:absolute;inset:0;width:100%;height:100%}
#stage .lockup{position:absolute;left:10.6%;top:20.4%;width:39.6%}
#col{position:absolute;inset:0;z-index:2;mix-blend-mode:multiply}
#col img{position:absolute}
#core,#front{left:55.459%;top:0;width:44.541%}
#core{z-index:5}#front{z-index:6}
.ink{position:absolute;inset:0;z-index:1;mix-blend-mode:color;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.ink.a{background:var(--orange);-webkit-mask-image:url(img/mask-a.webp);mask-image:url(img/mask-a.webp)}
.ink.b{background:var(--mustard);-webkit-mask-image:url(img/mask-b.webp);mask-image:url(img/mask-b.webp)}
.s{opacity:0;z-index:8;transform-origin:50% 100%;transform:translateY(46%) rotate(var(--r)) scale(.96);transition:transform 2.4s cubic-bezier(.5,0,.75,.5),opacity .9s ease 1.5s}
.s.top{z-index:9}
.s.on{opacity:1;transform:translateY(0) rotate(var(--r)) scale(1);transition:transform 3.4s cubic-bezier(.2,1.12,.4,1),opacity .6s ease}
.m-lockup{display:none}

/* ---------- hero B: through the M ---------- */
.poster{border-block:var(--rule) solid var(--ink);padding-block:clamp(28px,5vw,84px) clamp(24px,4vw,64px)}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:clamp(18px,2.6vw,40px);align-items:end}
.mwin{grid-column:1/9;grid-row:1;position:relative;aspect-ratio:537.8/262;background:var(--orange);
  -webkit-mask:url(logo/mark-black.svg) center/100% 100% no-repeat;mask:url(logo/mark-black.svg) center/100% 100% no-repeat}
.mwin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(1.45);mix-blend-mode:multiply;opacity:0;transition:opacity 1.6s ease}
.mwin img.on{opacity:1}
.poster .word{grid-column:1/8;grid-row:2;width:100%;height:auto}
.claim{grid-column:9/13;grid-row:1;align-self:start;margin:0;font:400 clamp(26px,3.5vw,60px)/.96 var(--head);letter-spacing:-.025em}
.claim sup{font-size:.35em;vertical-align:top;position:relative;top:.5em}
.next{grid-column:9/13;grid-row:2;margin:0;font:400 clamp(26px,3.5vw,60px)/.96 var(--head);letter-spacing:-.025em;color:var(--orange)}

/* ---------- shared: lockup + claim column (D, E) ---------- */
.sheet-hero,.reels-hero{border-block:var(--rule) solid var(--ink);padding-block:clamp(28px,4.4vw,72px)}
.sheet-hero .pgrid,.reels-hero .pgrid{align-items:stretch}
.sheet-side{grid-column:1/5;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,36px)}
.sheet-side>img{width:100%;height:auto}
.sheet-side .claim,.sheet-side .next{font-size:clamp(22px,2.5vw,42px)}
.sheet-side .next{margin-top:auto}

/* ---------- hero C: the field ---------- */
.field{position:relative;background:var(--orange);border-block:var(--rule) solid var(--ink);padding:clamp(20px,3vw,48px) var(--pad) clamp(20px,2.6vw,40px);overflow:hidden}
.field .lines{position:absolute;inset:0 var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);pointer-events:none}
.field .lines i{border-inline:1px solid rgb(27 28 31/.28)}
.shout{position:relative;margin:0 0 0 -.05em;font:400 clamp(44px,13.3vw,250px)/.8 var(--head);letter-spacing:-.05em;white-space:nowrap}
.shout sup{font-size:.2em;letter-spacing:0;vertical-align:top;position:relative;top:.9em}
.field-foot{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;margin-top:clamp(40px,7vw,120px)}
.field-foot img{grid-column:1/4;width:100%;height:auto}
.field-foot p{grid-column:9/13;margin:0;font:400 clamp(22px,2.5vw,42px)/.96 var(--head);letter-spacing:-.025em;color:var(--paper)}

/* ---------- hero D: the sheet ---------- */
.sheet{grid-column:6/13;--r:4px;--t:13px}
.selvage{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 10px;font-size:11px;font-weight:700}
.reg{display:flex;gap:5px}
.reg i{width:11px;height:11px;border-radius:50%;background:var(--ink)}
.reg i:nth-child(2){background:var(--orange)}.reg i:nth-child(3){background:var(--mustard)}.reg i:nth-child(4){background:var(--tan);outline:1px solid var(--ink);outline-offset:-1px}
.stamps{display:grid;grid-template-columns:repeat(6,1fr);filter:drop-shadow(0 1px 0 rgb(27 28 31/.35))}
.stamp{margin:0;padding:calc(var(--r) + 6px);background:#FFF1DC;min-width:0;
  -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)) no-repeat,radial-gradient(circle,#0000 var(--r),#000 calc(var(--r) + .6px)) calc(var(--t)/-2) calc(var(--t)/-2)/var(--t) var(--t) round;
  mask:linear-gradient(#000 0 0) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)) no-repeat,radial-gradient(circle,#0000 var(--r),#000 calc(var(--r) + .6px)) calc(var(--t)/-2) calc(var(--t)/-2)/var(--t) var(--t) round}
.stamp figcaption{padding-top:5px;font-size:9px;line-height:1.2;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- hero E: the reels ----------
   Each reel turns; the photograph inside counter-turns so it stays still and is seen through the moving holes. */
.reels{grid-column:5/13;position:relative;aspect-ratio:1000/640;overflow:hidden}   /* clip the turning squares: their corners must never widen the page */
.reel{position:absolute;top:3.1%;width:60%;aspect-ratio:1;mix-blend-mode:multiply;transform:rotate(var(--a,0deg));cursor:grab;touch-action:pan-y;
  -webkit-mask:url(logo/reel.svg) center/100% 100% no-repeat;mask:url(logo/reel.svg) center/100% 100% no-repeat}
.r1{left:3%}
.r1 .still{background:var(--orange)}
.r2{left:39%}
.r2 .still{background:var(--mustard)}
.reel .still{position:absolute;inset:0;transform:rotate(calc(var(--a,0deg)*-1))}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(1.45);mix-blend-mode:multiply;opacity:0;transition:opacity 1.6s ease}
.reel img.on{opacity:1}
/* where the reels overlap, show only the left reel's photograph (overprinted with the right reel's ink) */
.r2 img{-webkit-mask:radial-gradient(ellipse 50% 50% at -10% 50%,#0000 99.6%,#000 100%);mask:radial-gradient(ellipse 50% 50% at -10% 50%,#0000 99.6%,#000 100%)}
@keyframes turn{to{transform:rotate(-360deg)}}

/* ---------- the cities line (Pop Muzik, plus one) ---------- */
.cities{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-block:clamp(14px,1.9vw,30px);font:400 clamp(13px,3.05vw,56px)/1 var(--head);letter-spacing:-.02em;white-space:nowrap}
.cities i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:.6em;opacity:.55}
.cities .add{color:var(--orange)}

.reel.grabbing{cursor:grabbing}

/* ---------- colophon: the poster's information band ---------- */
.colophon{padding-block:0 clamp(40px,6vw,96px)}
.colophon .cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:28px;padding-top:18px}
.colophon .cols>div{grid-column:span 3}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon p{margin:0;max-width:34ch}
.colophon sup{font-size:.6em}
.colophon .out a{display:block}
.label{margin:0 0 10px;font:700 13px/1.2 var(--mono);display:flex;align-items:center;gap:10px}
.label::before{content:"";width:9px;height:13px;background:var(--orange);transform:skewX(var(--slant));flex:none;margin-left:4px}

/* ---------- work ---------- */
#work{padding-bottom:clamp(60px,9vw,140px)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;padding-block:clamp(10px,1.4vw,22px) clamp(28px,4vw,60px)}
.giant{grid-column:1/8;margin:0;font:400 clamp(92px,19.5vw,340px)/.74 var(--head);letter-spacing:-.045em;margin-left:-.045em;padding-bottom:.06em}
.sec-side{grid-column:9/13;padding-bottom:1.2em}
.lead{margin:0 0 20px;font-size:clamp(14px,1.15vw,17px);max-width:44ch}
.key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12px}
.key li{display:flex;align-items:center;gap:8px}
.key li::before{content:"";width:14px;height:14px;border:var(--rule) solid var(--ink)}
.k-rec::before{background:var(--orange)}.k-mix::before{background:var(--mustard)}.k-both::before{background:var(--both)}

.records{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,2.6vw,44px) var(--g);grid-auto-flow:dense}
.rec-card{grid-column:span 2;margin:0;min-width:0}
.rec-card.feature{grid-column:span 4;grid-row:span 2}
.art{aspect-ratio:1;overflow:hidden}
.ink-rec .art{background:var(--orange)}
.ink-mix .art{background:var(--mustard)}
.ink-both .art{background:var(--both)}
.ink-none .art{background:var(--tan)}
.art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25);mix-blend-mode:multiply;transition:filter .25s ease}
.rec-card:hover .art img,.rec-card:focus-within .art img{filter:none;mix-blend-mode:normal}
.rec-card figcaption{display:grid;gap:1px;padding-top:9px;border-top:var(--rule) solid var(--ink);margin-top:9px;font-size:12px;line-height:1.4}
.rec-card b{font-weight:700}
.rec-card .role{color:#A83600;font-weight:700}
.rec-card .role.tbc{color:inherit;font-weight:400;opacity:.5}
.rec-card .note{font-size:11px}
.rec-card .listen{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:5px;font-size:11px}
.rec-card.feature figcaption{font-size:14px}
.rec-card.feature b{font:400 clamp(20px,2.2vw,34px)/1 var(--head);letter-spacing:-.02em;margin-bottom:4px}

/* ---------- credits sheet ---------- */
.sheetpage main{padding-block:var(--pad) 120px}
.sheetpage .giant{font-size:clamp(64px,13vw,200px);padding-block:.14em .1em}
.tally{position:sticky;top:0;z-index:2;margin:0 0 14px;padding:10px 0;background:var(--paper);border-bottom:var(--rule) solid var(--ink);font-weight:700}
.tally[data-err="1"]{color:#B00020}
.crow{display:grid;grid-template-columns:64px minmax(180px,1fr) minmax(0,2.2fr) minmax(110px,.8fr);gap:10px 18px;align-items:center;padding:12px 0;border-bottom:1px solid rgb(27 28 31/.3)}
.crow img{width:64px;height:64px;object-fit:cover}
.who{display:grid;font-size:13px;line-height:1.35}
.who em{font-style:normal;font-size:11px;opacity:.6}
.crow.ok .who em{opacity:1;color:#1B6B2F;font-weight:700}
.who small{font-size:11px;line-height:1.35;opacity:.7;margin-top:3px;max-width:46ch}
.okbtn{justify-self:start;margin-top:7px;font:700 12px/1 var(--mono);padding:8px 12px;background:var(--orange);color:var(--ink);border:var(--rule) solid var(--ink);cursor:pointer}
.crow:not(.ok) .chips button[aria-pressed=true]{background:none;color:var(--ink);box-shadow:inset 0 0 0 3px var(--orange)}
.picks{display:grid;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chips>span{width:74px;font-size:12px;font-weight:700}
.toggle{font-weight:700;cursor:pointer}.toggle input{width:16px;height:16px;accent-color:var(--ink);vertical-align:-2px;margin-right:6px}
.hint{font-size:12px;opacity:.65}
.crow.ok .who em{color:#A83600}
.chips button{font:700 12px/1 var(--mono);padding:9px 11px;background:none;color:var(--ink);border:var(--rule) solid var(--ink);border-radius:0;cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.crow input{font:400 12px var(--mono);padding:8px;border:0;border-bottom:var(--rule) solid var(--ink);background:none;color:var(--ink);min-width:0;width:100%}
@media (max-width:980px){.crow{grid-template-columns:64px 1fr}.crow .picks,.crow input{grid-column:1/3}}

/* ---------- compare page ---------- */
.cmp main{padding-block:var(--pad)}
.cmp .giant{font-size:clamp(72px,15vw,240px);line-height:.8;padding-block:.12em .1em}
.choices{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--g)}
.choices a{display:block;height:100%;padding:18px 0 28px;border-top:var(--rule) solid var(--ink);text-decoration:none}
.choices b{display:block;font:400 clamp(20px,2.2vw,32px)/1.05 var(--head);letter-spacing:-.02em;margin-bottom:10px}
.choices a:hover b{color:var(--orange)}
.choices span{display:block;max-width:34ch}

/* ---------- phone ---------- */
@media (max-width:820px){
  .top{height:52px;font-size:12px}
  .m-lockup{display:block;padding-block:22px 26px}
  .m-lockup img{width:min(78%,360px);height:auto}
  #stage{width:225vw;margin-left:-125vw}
  #stage .lockup{display:none}
  .mwin{grid-column:1/13}
  .poster .word{grid-column:1/11}
  .claim{grid-column:1/13;grid-row:3;font-size:clamp(34px,10.5vw,60px)}
  .next{grid-column:1/13;grid-row:4;font-size:clamp(34px,10.5vw,60px)}
  .sheet-side,.sheet,.reels{grid-column:1/13}
  .sheet-side>img{width:min(78%,360px)}
  .sheet-side .claim,.sheet-side .next{font-size:clamp(30px,9vw,52px)}
  .sheet-side .next{margin-top:0}
  .stamps{grid-template-columns:repeat(3,1fr)}
  .stamp:nth-child(n+13){display:none}
  .field-foot img{grid-column:1/7}.field-foot p{grid-column:7/13;font-size:clamp(20px,6vw,36px)}
  .colophon .cols>div{grid-column:span 6}
  .sec-head{align-items:start}
  .giant{grid-column:1/13}
  .sec-side{grid-column:1/13;padding-top:22px}
  .rec-card{grid-column:span 6}
  .rec-card.feature{grid-column:span 12;grid-row:auto}
  .choices{grid-template-columns:1fr}
}
@media (max-width:480px){.colophon .cols>div{grid-column:span 12}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.s,.s.on,.mwin img,.art img{transition:none}.reel.grabbing{cursor:grabbing}.reel img{transition:none}}