/* Cartel inner pages: the homepage's night street, newsprint slips and two riso inks, without the scroll film.
   Tokens match index.html; change them together. */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin.woff2) format("woff2");font-weight:400 800;font-stretch:62% 125%;font-display:swap}
:root{
  color-scheme:dark;
  --night:#0b0f2a;
  --cobalt:#1f3dff;
  --pink:#ff3ea5;
  --paper:#f3eee2;
  --paper-ink:#1a2a9e;
  --body-ink:#22243a;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --text:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4.5vw,72px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --rule:2px solid rgba(26,42,158,.85);
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--text);font-size:clamp(16px,1rem + .15vw,18px);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.skip{position:absolute;left:-9999px;z-index:20}
.skip:focus{left:16px;top:16px;background:var(--paper);color:var(--paper-ink);padding:8px 12px}

/* ---------- header (same mark and links as the homepage) ---------- */
.top{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) max(var(--gutter),env(safe-area-inset-right,0px)) 16px max(var(--gutter),env(safe-area-inset-left,0px))}
.top .mark{font-family:var(--display);font-size:26px;line-height:1;text-decoration:none;letter-spacing:.005em;background:var(--cobalt);color:var(--paper);padding:5px 10px 7px;text-shadow:.06em .05em 0 var(--pink);flex:none}
.top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px clamp(14px,2.6vw,34px);font-weight:600;font-size:15px;font-stretch:88%}
.top nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--pink)}
.top nav a[aria-current="page"]{border-bottom-color:var(--pink)}

/* ---------- printed type ---------- */
.ink{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:.003em;margin:0;text-wrap:balance;color:var(--paper-ink);text-shadow:.045em .035em 0 var(--pink)}
h1.ink{font-size:clamp(44px,1.4rem + 5.2vw,104px);color:var(--cobalt)}
h2.ink{font-size:clamp(28px,1rem + 2vw,52px)}
h3.ink{font-size:clamp(22px,1rem + .8vw,30px);line-height:1}

/* ---------- newsprint slips ---------- */
.slip{position:relative;background:var(--paper) var(--grain);color:var(--body-ink);padding:clamp(20px,2.4vw,36px) clamp(18px,2.6vw,40px);
  transform:rotate(var(--r,-.6deg));box-shadow:0 1px 0 rgba(0,0,0,.25),0 22px 36px -20px rgba(0,0,0,.85)}
.slip > :first-child{margin-top:0}
.slip p{margin:.8em 0 0;max-width:60ch}
.slip .lede{font-size:clamp(18px,1rem + .45vw,23px);font-weight:700;font-stretch:84%;line-height:1.3;color:var(--night)}
.slip a{color:var(--paper-ink);font-weight:700}
.slip a:hover{color:var(--cobalt)}

/* ruled lists, printed like a handbill's small print */
.ruled{list-style:none;margin:18px 0 0;padding:0}
.ruled li{border-top:var(--rule);padding:10px 0;line-height:1.4}
.ruled li:last-child{border-bottom:var(--rule)}
.ruled b{font-weight:800;font-stretch:84%;color:var(--paper-ink)}
.pair{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:4px 18px;align-items:baseline}
.pair > :first-child{font-family:var(--display);font-weight:400;font-size:clamp(21px,1rem + .5vw,26px);line-height:1;color:var(--paper-ink)}

/* the address, the one call to action on every page */
.contact{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:20px}
.addr{font-family:var(--display);font-size:clamp(28px,1rem + 1.8vw,46px);line-height:1;color:var(--cobalt);text-decoration:none;text-shadow:.045em .035em 0 var(--pink);overflow-wrap:anywhere}
.slip a.addr{color:var(--cobalt);font-weight:400}
.addr:hover{text-decoration:underline}
.copy{font:inherit;font-weight:700;font-size:14px;font-stretch:85%;color:var(--paper);background:var(--cobalt);border:0;padding:10px 14px;cursor:pointer}
.copy:hover{background:var(--paper-ink)}

/* ---------- page frame ---------- */
.page{padding:8px max(var(--gutter),env(safe-area-inset-right,0px)) clamp(48px,8vw,120px) max(var(--gutter),env(safe-area-inset-left,0px));max-width:1500px;margin:0 auto}
.crumbs{font-size:13px;font-weight:600;font-stretch:88%;margin:0 0 18px;color:rgba(243,238,226,.75)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--pink)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--pink)}
.stack{display:grid;gap:clamp(28px,4vw,52px)}
.stack > .slip:nth-child(3n+1){--r:-.7deg}
.stack > .slip:nth-child(3n+2){--r:.5deg}
.stack > .slip:nth-child(3n){--r:-.3deg}

/* a poster pasted on the hoarding */
.poster{margin:0;position:relative;transform:rotate(var(--r,-1.2deg));box-shadow:0 2px 0 rgba(0,0,0,.3),0 30px 50px -24px rgba(0,0,0,.9);background:var(--paper)}
.poster img{width:100%;aspect-ratio:1792/2400;object-fit:cover}

/* sector page: poster pasted on the left, slips run down the right */
.sector{display:grid;gap:clamp(28px,4vw,56px)}
.sector .poster{max-width:560px;width:100%;justify-self:center}
@media (min-width:900px){
  .sector{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .sector .poster{position:sticky;top:28px;justify-self:stretch;max-width:none}
}
.sector h1.ink{font-size:clamp(42px,1.2rem + 4.2vw,92px)}
.partner{background:var(--cobalt) none;color:var(--paper)}
.partner .ink{color:var(--paper);text-shadow:.045em .035em 0 var(--pink)}
.partner p{color:var(--paper)}
.slip.partner a{color:var(--paper)}
.slip.partner a:hover{color:#fff}
.partner a.addr{color:var(--paper)}
.partner .copy{background:var(--paper);color:var(--cobalt)}
.partner .copy:hover{background:#fff}

/* sector links at the foot of a sector page and on /sectors/ */
.others{margin-top:clamp(40px,6vw,72px)}
.others h2{margin-bottom:16px}
.others > h2.ink{color:var(--paper)}
.tabs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tabs a{display:block;font-family:var(--display);font-size:clamp(20px,1rem + .6vw,26px);line-height:1;text-decoration:none;background:var(--paper) var(--grain);color:var(--paper-ink);padding:12px 16px 14px;transform:rotate(var(--r,-.8deg));box-shadow:0 14px 24px -16px rgba(0,0,0,.9)}
.tabs li:nth-child(even) a{--r:.7deg}
.tabs a:hover{color:var(--cobalt);text-shadow:.05em .04em 0 var(--pink)}

/* /sectors/: five posters on the hoarding */
.intro{max-width:52rem;margin-bottom:clamp(36px,5vw,64px)}
.wall{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,4vw,56px) clamp(20px,3vw,44px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.wall li:nth-child(odd){--r:-1deg}
.wall li:nth-child(even){--r:.8deg}
.wall a{display:grid;gap:0;text-decoration:none;color:inherit}
.wall .poster{--r:inherit}
.wall .slip{margin:-28px 14px 0;padding:16px 18px 18px;z-index:1}
.wall .slip p{font-size:15px;line-height:1.4;margin-top:6px}
.wall a:hover .ink{color:var(--cobalt)}

/* about / partners / contact: a wide paper stack beside a narrow one */
.sheet{display:grid;gap:clamp(28px,4vw,52px)}
@media (min-width:900px){
  .sheet{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .sheet .aside{position:sticky;top:28px}
}
.lead-slip h1.ink{font-size:clamp(46px,1.2rem + 5vw,108px)}
.rules{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.rules li{border-top:var(--rule);padding:10px 0;line-height:1.4}
.who{display:grid;gap:0;margin:18px 0 0}
.who div{border-top:var(--rule);padding:12px 0}
.who div:last-child{border-bottom:var(--rule)}
.who dt{font-family:var(--display);font-size:clamp(21px,1rem + .5vw,26px);line-height:1;color:var(--paper-ink)}
.who dd{margin:6px 0 0;line-height:1.4}
.big-addr{font-size:clamp(34px,1rem + 4.4vw,84px)}

/* ---------- footer (same as the homepage) ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;font-size:13px;font-weight:600;font-stretch:88%;
  padding:22px max(var(--gutter),env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));border-top:1px solid rgba(243,238,226,.14)}
.foot nav{display:flex;gap:18px}

/* ---------- paste-on motion: only with JS, never with reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .paste .slip.wait,.paste .poster.wait{opacity:0;transform:rotate(calc(var(--r,-.6deg) + 2.4deg)) translateY(18px) scale(1.03)}
  .paste .slip,.paste .poster{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1.15)}
}

@media (max-width:899px){
  .top .mark{font-size:24px}
  .top nav{font-size:14px;gap:4px 14px}
  .pair{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
}
@media (max-width:420px){
  .top{padding-top:calc(env(safe-area-inset-top,0px) + 12px);gap:10px}
  .top nav{gap:2px 11px;font-size:13.5px}
  .top .mark{font-size:22px;padding:4px 8px 6px}
  .slip{padding:18px 16px}
  .wall .slip{margin:-22px 10px 0}
}