@font-face{font-family:DrukCyr;src:url('assets/fonts/drukcondensedcyrsuper.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Golos;src:url('assets/fonts/golos-text.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/fonts/caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--surface:#c6c6c6;--ink:#171717;--red:#c60c18;--red-dark:#9e0913;--button-ink:#f7f7f7;--display:DrukCyr,'Arial Narrow',sans-serif;--body:Golos,Arial,sans-serif;--hand:Caveat,cursive;--gutter:clamp(22px,4.7vw,88px);--content-max:1320px;--section-title:clamp(64px,7.8vw,112px);--reading-size:clamp(18px,1.72vw,22px);--rule:#17171730;--layer-art:0;--layer-content:1;--layer-front:2;--layer-controls:3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--red) var(--surface)}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;color-scheme:light}h1,h2,p{margin:0}h1,h2{text-wrap:balance}a{color:inherit;text-decoration:none;text-underline-offset:6px}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:7px}::selection{background:var(--red);color:var(--button-ink)}[hidden]{display:none!important}img{display:block;width:100%}.skip-link{position:fixed;left:16px;top:16px;z-index:5;padding:13px 18px;background:var(--button-ink);transform:translateY(-160%)}.skip-link:focus{transform:none}
main{background:var(--surface) url('assets/concrete-reference-v4.webp') left top/1440px auto repeat}
.campaign-scene{position:relative;isolation:isolate;overflow:clip}
.campaign-hero{min-height:100svh;min-height:100dvh;height:max(650px,100svh);background:transparent}
.hero-art{position:absolute;inset:0;z-index:var(--layer-art);pointer-events:none;overflow:hidden}
.hero-art picture{display:block;height:100%}
.hero-art img{height:100%;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(180deg,transparent calc(100% - 56.25vw),#000 calc(100% - 56.25vw + 72px))}
.campaign-header{position:absolute;top:0;left:0;right:0;z-index:var(--layer-controls);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px var(--gutter);height:88px}
.author-name{display:inline-flex;align-items:center;min-height:44px;font-size:18px;letter-spacing:.18em;white-space:nowrap}
.motion-link{font-size:13px;font-weight:550;border-bottom:1px solid currentColor;padding:7px 0;min-height:40px}
.hero-lettering{position:absolute;top:19.4%;left:var(--gutter);z-index:var(--layer-content);width:57%}
.hero-lettering h1{font-family:var(--display);font-weight:900;font-synthesis:none;font-kerning:none;font-size:clamp(144px,18vw,300px);line-height:.85;letter-spacing:.035em;color:var(--red);white-space:nowrap}
.hero-subtitle{position:relative;display:table;max-width:590px;font-size:clamp(26px,2.45vw,36px);font-weight:750;line-height:1.18;margin-top:26px;text-wrap:balance}
.hero-description{max-width:510px;margin-top:28px;font-family:var(--body);font-size:clamp(18px,1.55vw,22px);font-weight:400;line-height:1.45;text-wrap:pretty}
.red-underline{position:absolute;left:-1%;bottom:-12px;width:100%;height:8px;background:var(--red);border-radius:60% 25% 55% 10%;transform:rotate(-1deg);transform-origin:left center}
.hero-action{margin-top:24px;max-width:370px}
.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 29px;border:0;border-radius:0;background:var(--red);color:var(--button-ink);font-size:15px;font-weight:650;line-height:1.4;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.primary-button:hover{background:var(--red-dark);transform:translateY(-2px)}.primary-button:active{transform:translateY(0) scale(.98)}.primary-button:focus-visible{outline-color:var(--ink)}
.course-status{margin-top:12px;padding:10px 12px;background:#dededee8;color:var(--ink);font-size:13px;max-width:300px}
.wall-ink-filter{position:absolute;width:0;height:0;pointer-events:none}
.wall-note{position:relative;display:table;width:250px;max-width:calc(100% - clamp(50px,15vw,200px));margin:39px 0 20px clamp(50px,15vw,200px);font-family:var(--hand);font-weight:400;font-size:32px;line-height:1.08;letter-spacing:-.015em;color:#4b4b48;transform:rotate(-7deg);transform-origin:left center;mix-blend-mode:multiply;filter:url(#campaign-wall-ink);opacity:.8;padding-bottom:22px}
.wall-note span{display:block}
.wall-note::before,.wall-note::after{content:'';position:absolute;background:currentColor;height:2px;border-radius:55% 20% 60% 12%;opacity:.75;transform:rotate(-3deg)}
.wall-note::before{left:4px;bottom:12px;width:80%}
.wall-note::after{right:10px;bottom:0;width:35%;transform:rotate(-8deg)}
.hero-tagline{position:absolute;left:var(--gutter);bottom:3%;z-index:var(--layer-content);font-size:12px;letter-spacing:.24em}
.campaign-about{z-index:var(--layer-content);padding:78px var(--gutter) 78px;background:transparent}
.about-layout{position:relative;z-index:var(--layer-content);max-width:var(--content-max);margin:auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);column-gap:6%;row-gap:48px;align-items:center}
.about-heading{font-family:var(--display);font-weight:900;font-synthesis:none;font-kerning:none;font-size:clamp(82px,9.5vw,150px);line-height:.97;letter-spacing:.035em;text-transform:uppercase;color:var(--red)}
.about-heading-line{display:block;white-space:nowrap}
.about-description{font-size:clamp(21px,1.85vw,28px);font-weight:450;line-height:1.5;max-width:25ch}
.about-audience{grid-column:1/-1;justify-self:end;width:76%;max-width:800px;font-size:clamp(21px,2.2vw,32px);font-weight:500;line-height:1.45;text-wrap:pretty}
.marked-phrase{position:relative;display:inline-block;color:var(--red);white-space:nowrap}
.marked-phrase::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-5px;height:4px;background:currentColor;border-radius:40% 25% 50% 10%;transform:rotate(-1.5deg);transform-origin:left center}
.about-scrawl{position:absolute;left:-3%;bottom:22px;width:min(40%,540px);height:auto;color:var(--red);opacity:.6;pointer-events:none;transform:rotate(-5deg)}
.campaign-program{z-index:var(--layer-front);padding:64px var(--gutter) 60px;background:transparent}
.program-layout{position:relative;isolation:isolate;max-width:var(--content-max);margin:auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:5%;row-gap:28px;align-items:start}
.program-heading{grid-column:1/-1;font-family:var(--display);font-weight:900;font-synthesis:none;font-kerning:none;font-size:var(--section-title);line-height:1.04;letter-spacing:.025em;text-transform:uppercase;color:var(--red)}
.program-heading-break{display:none}
.program-list{grid-column:1;grid-row:2;list-style:none;padding:0;margin:0}
.program-list li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--rule)}
.program-list li::before{content:'';width:6px;height:6px;margin-top:.65em;border-radius:50%;background:var(--ink)}
.program-list li:first-child{padding-top:0}
.program-list li:last-child{border-bottom:0;padding-bottom:0}
.program-list p{font-size:var(--reading-size);line-height:1.55;font-weight:400;text-wrap:pretty}
.program-art{position:relative;grid-column:2;grid-row:2/4;align-self:end;justify-self:center;width:100%;aspect-ratio:4/5;max-height:580px;isolation:isolate;pointer-events:none}
.program-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.program-subject{z-index:2}
.program-crowd{opacity:.75}
.program-crowd-back{z-index:1;clip-path:inset(0 0 0 50%)}
.program-crowd-front{z-index:3;clip-path:inset(0 50% 0 0)}
.program-ground{position:absolute;left:33%;bottom:5%;width:34%;height:1.3%;border-radius:50%;background:#17171726;z-index:0}
.program-art.is-moving .program-crowd{will-change:transform}
.program-note{position:relative;isolation:isolate;grid-column:1;grid-row:3;padding:18px 22px 22px;font-family:var(--hand);font-weight:400;font-size:clamp(22px,2.1vw,25px);line-height:1.18;max-width:650px;color:#4b4b48;mix-blend-mode:multiply;transform:translateY(52px)}
.program-note p{max-width:410px;transform:rotate(-5deg);transform-origin:left center;text-wrap:pretty}
.motion-quote{min-height:100svh;min-height:100dvh;display:grid;align-items:center;padding:80px var(--gutter);background:var(--surface) url('assets/campaign-wall-v1.webp') center/cover}
.motion-demo .motion-quote{mask-image:linear-gradient(transparent,#000 64px)}
.quote-content{position:relative;z-index:var(--layer-content);max-width:1150px}
.quote-content h2{font-family:var(--display);font-weight:900;font-kerning:none;font-size:clamp(90px,12.5vw,180px);line-height:.9;letter-spacing:.035em}.quote-content h2 span{color:var(--red)}
.demo-note{font-size:15px;max-width:40ch;margin-top:35px}
.text-link{display:inline-flex;font-size:14px;font-weight:550;padding:12px 0;min-height:44px;text-decoration:underline}
.edge-tear{position:absolute;right:0;top:32%;width:7%;height:22%;pointer-events:none;z-index:var(--layer-art);overflow:hidden}
.edge-tear span{display:block;height:100%;width:100%;background:var(--surface) url('assets/campaign-wall-v1.webp') right center/auto 100svh}
@media(min-width:1600px){.campaign-hero{height:max(800px,100svh)}}
@media(max-width:1023px) and (min-width:768px){.campaign-header{padding-top:23px;padding-bottom:23px}.author-name{font-size:15px}.hero-lettering{top:20%;width:64%}.hero-lettering h1{font-size:19.5vw}.hero-subtitle{font-size:28px;margin-top:25px}}
@media(max-width:767px){
  :root{--gutter:22px;--section-title:clamp(56px,17vw,100px);--reading-size:18px}
  .campaign-hero{height:max(890px,100svh);min-height:100dvh}
  .campaign-header{height:72px;padding:20px var(--gutter);gap:12px}
  .author-name{font-size:13px;letter-spacing:.07em}
  .motion-link{font-size:11px;min-height:44px;display:flex;align-items:center;white-space:nowrap}
  .hero-art{top:auto;height:350px;bottom:0}
  .hero-art img{object-fit:cover;object-position:right bottom;mask-image:linear-gradient(180deg,transparent,#000 48px)}
  .hero-lettering{top:110px;left:var(--gutter);width:calc(100% - 44px)}
  .hero-lettering h1{font-size:27vw;line-height:.85;letter-spacing:.035em}
  .hero-subtitle{font-size:24px;margin-top:26px}
  .hero-description{font-size:18px;line-height:1.45;margin-top:26px;max-width:330px}
  .red-underline{height:7px;bottom:-8px;width:100%}
  .hero-action{margin-top:24px}
  .primary-button{min-height:50px;padding:13px 24px;font-size:14px}
  .course-status{max-width:270px}
  .wall-note{width:250px;font-size:29px;margin-left:50px;max-width:calc(100% - 50px);margin-top:39px}
  .hero-tagline{display:none}
  .campaign-about{padding:58px var(--gutter) 62px}
  .about-layout{grid-template-columns:minmax(0,1fr);gap:35px}
  .about-heading{font-size:14.5vw;line-height:1.02;letter-spacing:.025em}
  .about-description{font-size:20px;line-height:1.5;max-width:30ch}
  .about-audience{grid-column:auto;justify-self:start;width:100%;font-size:22px;line-height:1.45}
  .about-scrawl{width:60%;bottom:18px;opacity:.45}
  .campaign-program{padding:50px var(--gutter) 52px}
  .program-layout{grid-template-columns:minmax(0,1fr);gap:27px}
  .program-heading{grid-column:1;font-size:var(--section-title);line-height:1.04}
  .program-heading-break{display:block}
  .program-art{grid-column:1;grid-row:2;justify-self:center;width:min(84%,290px);max-height:none}
  .program-list{grid-column:1;grid-row:3}
  .program-list li{grid-template-columns:8px minmax(0,1fr);gap:15px;padding:16px 0}
  .program-list p{font-size:var(--reading-size);line-height:1.55}
  .program-note{grid-column:1;grid-row:4;font-size:23px;line-height:1.18;padding:19px 12px 25px;transform:translateY(36px)}
  .motion-quote{padding:60px 24px}
  .quote-content h2{font-size:23vw;line-height:.98}
  .demo-note{font-size:14px;margin-top:30px}
}
@media(max-width:359px){:root{--gutter:18px}.author-name{font-size:12px}.motion-link{font-size:10px}.hero-lettering{width:calc(100% - 36px)}.hero-lettering h1{font-size:26.5vw}.hero-subtitle{font-size:23px}.campaign-hero{height:max(910px,100svh)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.primary-button:hover{transform:none}}
@media(forced-colors:active){main{background:Canvas}.hero-art,.edge-tear,.about-scrawl,.program-art,.program-note::before,.program-note::after{display:none}.wall-note{color:CanvasText;mix-blend-mode:normal;filter:none;opacity:1}.wall-note::before,.wall-note::after{background:CanvasText}.primary-button{border:1px solid ButtonText}.hero-lettering h1,.quote-content h2 span,.about-heading,.marked-phrase,.program-heading{color:CanvasText}.campaign-scene,.program-note{background:Canvas}.program-note{color:CanvasText;border:1px solid CanvasText}.program-list li::before{background:CanvasText}.red-underline,.marked-phrase::after{background:CanvasText}}