/* No Ads! Only Art! — site styles.
   Identity: vermilion as a full field (carried from the sponsor deck), true stencil black,
   paste-white paper, and buff grey (the paint the city rolls over graffiti).
   Type: Saira Stencil One for display, Overpass (Highway Gothic lineage) for text.
   Kept distinct from every other site we run: see memory reference_site_design_inventory. */

@font-face{font-family:"Saira Stencil One";src:url("fonts/saira-stencil-one.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Overpass";src:url("fonts/overpass-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Overpass";src:url("fonts/overpass-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Overpass";src:url("fonts/overpass-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Overpass";src:url("fonts/overpass-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --red:#E63419;
  --red-deep:#B8260F;
  --ink:#000;
  --paper:#F6F6F3;
  --buff:#8E908B;
  --buff-dark:#4A4C48;
  --concrete:#CDCBC5;
  --display:"Saira Stencil One",Impact,"Arial Narrow",sans-serif;
  --text:"Overpass","Helvetica Neue",Arial,sans-serif;
  /* Major-third scale on an 18px body */
  --s-1:.8rem;--s0:1rem;--s1:1.25rem;--s2:1.5625rem;--s3:1.953rem;--s4:2.441rem;--s5:3.052rem;--s6:3.815rem;--s7:4.768rem;--s8:5.96rem;
  --wrap:min(100% - 2rem,74rem);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--s0)/1.6 var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.foot :focus-visible{outline-color:var(--paper)}
.wrap{width:var(--wrap);margin-inline:auto}
.prose{max-width:62ch}
.prose p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{top:1rem}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.98;margin:0 0 .5em;letter-spacing:.005em}
h2{font-size:clamp(var(--s4),5vw,var(--s6))}
h3{font-size:var(--s2)}

/* ---- preview ribbon (preview builds only) */
.ribbon{background:var(--ink);color:var(--paper);font:600 var(--s-1)/1.4 var(--text);text-align:center;padding:.45rem 1rem}

/* ---- header */
.head{background:var(--paper);border-bottom:3px solid var(--ink)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:.8rem 0}
.mark{font-family:var(--display);font-size:var(--s2);line-height:1;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;font-weight:600}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:3px solid transparent;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--red)}

/* ---- buttons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn{display:inline-block;font:800 var(--s0)/1 var(--text);text-decoration:none;padding:1rem 1.35rem .85rem;
  background:var(--ink);color:var(--paper);border:3px solid var(--ink);border-radius:2px}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .btn:hover{background:transparent;color:var(--paper)}

/* ---- home hero: the ad panel */
.hero{background:var(--red);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:url("img/grain.webp") center/900px;opacity:.55;pointer-events:none;mix-blend-mode:multiply}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center;
  padding:clamp(2.5rem,7vw,6rem) 0}
.lockup{font-size:clamp(3.4rem,9.2vw,8.6rem);line-height:.86;margin:0;letter-spacing:-.01em}
.lockup span{display:block}
.hero p.lede{font-size:var(--s1);font-weight:600;max-width:30ch;margin:1.4rem 0 0;line-height:1.35}

/* The hero piece: art pasted straight onto the red wall (no ad frame, no "space
   available" sheet -- it's called No Ads! Only Art!, Ian 9 Oct). One load moment:
   the grey buff patches land, ONLY then ART spray in out of a blur, the drips run,
   the sticker slaps on. Static for prefers-reduced-motion. */
.panel{position:relative;aspect-ratio:4/5.6;transform:rotate(-1.6deg);
  box-shadow:0 2px 0 rgba(0,0,0,.15),0 28px 46px -26px rgba(0,0,0,.6)}
.panel-inner{position:relative;height:100%;overflow:hidden;background:var(--concrete) url("img/concrete.webp") center/420px}
.panel-inner::after{content:"";position:absolute;inset:0;background:url("img/grain.webp") center/520px;opacity:.45;pointer-events:none}
.panel-inner > svg{width:100%;height:100%}
.patch{opacity:0;animation:land .5s ease-out forwards}
.patch:nth-of-type(2){animation-delay:.15s}.patch:nth-of-type(3){animation-delay:.3s}
@keyframes land{from{opacity:0}to{opacity:1}}
.spray{opacity:0;filter:blur(7px);animation:spray .9s ease-out forwards}
.spray:nth-of-type(1){animation-delay:.6s}.spray:nth-of-type(2){animation-delay:1.1s}
@keyframes spray{to{opacity:1;filter:blur(0)}}
.sticker{opacity:0;transform-box:fill-box;transform-origin:center;animation:slap .35s cubic-bezier(.3,1.6,.5,1) 2.9s forwards}
@keyframes slap{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.patch,.spray,.sticker{animation:none;opacity:1;filter:none;transform:none}}

/* ---- sections */
.band{padding:clamp(3.5rem,8vw,6.5rem) 0}
.band.paper{background:var(--paper)}
.band.tight-top{padding-top:0}
.band.buff{background:var(--buff);color:var(--ink)}
.band.ink{background:var(--ink);color:var(--paper)}
.band.wall{background:var(--concrete) url("img/concrete.webp") center/700px;position:relative}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2.5rem 4rem;align-items:start}
.big-line{font-family:var(--display);font-size:clamp(var(--s4),5.4vw,var(--s7));line-height:.95;margin:0}
.lead{font-size:var(--s1);line-height:1.5}

/* ---- the seven posters (a true sequence: weeks 1-7) */
.posters{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.2rem}
.poster{position:relative;background:var(--paper);padding:1.3rem 1.2rem 2.2rem;min-height:15rem;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 14px 24px -18px rgba(0,0,0,.6)}
.poster::before{content:"";position:absolute;inset:0;background:url("img/grain.webp") center/500px;opacity:.7;pointer-events:none}
.poster > *{position:relative}
.poster .wk{font-family:var(--display);font-size:var(--s6);line-height:.8;color:var(--red);display:block;margin-bottom:.6rem}
.poster h3{margin:0 0 .5rem}
.poster p{margin:0;font-size:var(--s-1);line-height:1.5}
.poster.spot{background:var(--red)}
.poster:nth-child(1){transform:rotate(-1.6deg)}.poster:nth-child(2){transform:rotate(1.2deg)}.poster:nth-child(3){transform:rotate(-.6deg)}
.poster:nth-child(4){transform:rotate(1.8deg)}.poster:nth-child(5){transform:rotate(-1.2deg)}.poster:nth-child(6){transform:rotate(.8deg)}
.poster:nth-child(7){transform:rotate(-1.9deg)}
/* Slot 8: a patch of city buff-grey where a poster was painted over. Decorative only. */
.posters::after{content:"";background:var(--buff);min-height:15rem;transform:rotate(1.1deg);opacity:.85}
.poster.spot .wk{color:var(--ink)}

/* ---- week detail list (show page) */
.weeks{list-style:none;margin:0;padding:0}
.week{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.5rem;padding:2.2rem 0;border-top:3px solid var(--ink)}
.week:last-child{border-bottom:3px solid var(--ink)}
.week .n{font-family:var(--display);font-size:var(--s7);line-height:.8;color:var(--red)}
.week h2{font-size:var(--s4);margin-bottom:.25rem}
.week .q{font-size:var(--s1);font-weight:600;margin:0 0 .75rem}
.week p{margin:0;max-width:60ch}

/* ---- page hero (sub pages) */
.page-hero{background:var(--red);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:url("img/grain.webp") center/900px;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;padding:clamp(2.5rem,6vw,4.5rem) 0}
.page-hero h1{font-size:clamp(var(--s5),8vw,var(--s8));margin:0}
.page-hero p{font-size:var(--s1);font-weight:600;max-width:40ch;margin:1rem 0 0;line-height:1.4}

/* ---- lists of roles, offers */
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem 2rem}
.ticks li{border-left:6px solid var(--red);padding:.15rem 0 .15rem .9rem;font-weight:600}
.on-dark .ticks li{border-left-color:var(--paper)}

/* ---- facts (visit) */
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.6rem 2rem;margin:0}
.facts dt{font-weight:800}
.facts dd{margin:0}

/* ---- questions (visible copy of the FAQPage data) */
.faq{margin:0;display:grid;gap:0;max-width:62ch}
.faq dt{font-weight:800;font-size:var(--s1);padding-top:1.1rem;border-top:3px solid var(--ink)}
.faq dd{margin:.35rem 0 1.1rem}

/* ---- forms */
.form{display:grid;gap:1rem;max-width:36rem}
.form label{font-weight:600;display:grid;gap:.35rem}
.form input,.form select,.form textarea{font:inherit;padding:.8rem .9rem;border:3px solid var(--ink);border-radius:2px;background:#fff;color:var(--ink)}
.form textarea{min-height:8rem;resize:vertical}
.form .row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:end}
.form .row input{flex:1 1 16rem}
.form .grow{flex:1 1 16rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:var(--s-1);color:inherit;opacity:.85;margin:.25rem 0 0}
.on-dark .form input{border-color:var(--paper)}
.form button[disabled]{opacity:.55;cursor:not-allowed}

/* ---- art blocks on sub pages */
.art{border:3px solid var(--ink);background:var(--concrete)}

/* ---- footer */
.foot{background:var(--ink);color:var(--paper);padding:3rem 0 2.5rem}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2rem}
.foot .mark{font-size:var(--s3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}  /* 44px tap targets */
.foot small{display:block;margin-top:1.2rem;opacity:.75}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .panel{max-width:26rem;width:100%;justify-self:center}
  .split{grid-template-columns:1fr}
  .posters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .posters{grid-template-columns:1fr}
  .posters::after{display:none}
  .week{grid-template-columns:1fr;gap:.4rem}
  .facts{grid-template-columns:1fr;gap:.1rem}
  .facts dd{margin-bottom:.8rem}
  .foot .wrap{grid-template-columns:1fr}
}

/* ---- motion (9 Oct: "each site should have active motion")
   1. Drips run down the stencil once ART has sprayed in.
   2. A stencil ticker crawls between the hero and the story, like a paste-up strip.
   Both stop for visitors who ask their device for reduced motion. */
.drip{stroke-dasharray:1;stroke-dashoffset:1;animation:drip 1.1s cubic-bezier(.4,0,.2,1) forwards}
.drip:nth-of-type(1){animation-delay:1.8s}.drip:nth-of-type(2){animation-delay:2s}.drip:nth-of-type(3){animation-delay:2.2s}
.drip:nth-of-type(4){animation-delay:2.4s}.drip:nth-of-type(5){animation-delay:2.6s}.drip:nth-of-type(6){animation-delay:2.8s}
@keyframes drip{to{stroke-dashoffset:0}}
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-block:3px solid var(--ink);white-space:nowrap}
.ticker-track{display:inline-flex;animation:crawl 38s linear infinite}
.ticker span{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1;padding:.75rem 0;display:inline-flex;align-items:center}
.ticker span::after{content:"";width:.55em;height:.55em;background:var(--red);margin:0 1.1rem;transform:rotate(45deg)}
@keyframes crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .drip{animation:none;stroke-dashoffset:0}
  .ticker-track{animation:none}
}