/* ПрАТ «Дрогобицький хлібокомбінат» — site styles (poster / avant-garde direction, packaging palette) */ :root{ --paper:#F2E6CC;--paper2:#E3D3AE;--ink:#5A2E14;--ink2:#3E1F0E;--red:#E8891C;--red2:#A8471E;--orange:#C8322B;--kraft:#B9A88A; --font-d:'Unbounded','Rubik Mono One',Impact,sans-serif; --font-m:'Rubik Mono One','Unbounded',sans-serif; --font-b:'IBM Plex Sans',Helvetica,Arial,sans-serif; --pad:clamp(16px,5vw,72px);color-scheme:light; } /* dark theme: tokens swap; 'system' follows the OS, the nav switch stores light/dark in localStorage (data-theme on ) */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#1C120C;--paper2:#2B1B12;--ink:#F2E6CC;--ink2:#FBF4E4;--red:#E8891C;--red2:#E1A26A;--orange:#D9463A;--kraft:#7B6A50;color-scheme:dark}} :root[data-theme="dark"]{--paper:#1C120C;--paper2:#2B1B12;--ink:#F2E6CC;--ink2:#FBF4E4;--red:#E8891C;--red2:#E1A26A;--orange:#D9463A;--kraft:#7B6A50;color-scheme:dark} /* the 'black' posters paint with the ink token, which is cream in the dark theme; give them their own local pair so they stay near-black */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av-poster.black{--ink:#0E0805;--ink2:#000;--paper:#F2E6CC;--paper2:#E3D3AE}} :root[data-theme="dark"] .av-poster.black{--ink:#0E0805;--ink2:#000;--paper:#F2E6CC;--paper2:#E3D3AE} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:70px} body{background:var(--paper);color:var(--ink);font-family:var(--font-b);overflow-x:hidden;line-height:1.35} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.09;mix-blend-mode:multiply; background-image:radial-gradient(#000 .6px,transparent .7px);background-size:4px 4px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;background-image:radial-gradient(#fff .6px,transparent .7px);opacity:.05}} :root[data-theme="dark"] body::before{mix-blend-mode:screen;background-image:radial-gradient(#fff .6px,transparent .7px);opacity:.05} img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--font-d);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em} strong{font-weight:600} /* ---------- header / nav ---------- */ .site-head{position:fixed;top:0;left:0;right:0;z-index:98;display:flex;align-items:flex-start;justify-content:space-between;padding:12px;pointer-events:none} .site-head>*{pointer-events:auto} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--ink);color:var(--paper);padding:6px 12px 6px 8px;transform:rotate(-3deg);transform-origin:left center; font-family:var(--font-b);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em;transition:transform .2s,background .2s} .brand:hover{background:var(--red);transform:rotate(0)} .brand img{width:28px;height:28px;filter:brightness(0) invert(1) sepia(1) saturate(.4) hue-rotate(10deg)} .brand span b{display:block;font-size:9px;letter-spacing:.2em;opacity:.8} .site-nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end} .site-nav a{font-family:var(--font-b);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none; padding:6px 10px;background:var(--paper);border:2px solid var(--ink);color:var(--ink)} .site-nav .theme{background:none;border:0;padding:0 2px 0 8px;margin-left:4px;color:var(--ink);opacity:.45;cursor:pointer;line-height:0;align-self:center;transition:opacity .2s,transform .3s} .site-nav .theme:hover{opacity:1;transform:rotate(30deg)} .site-nav .theme svg>g{display:none}.site-nav .theme[data-mode=system] .i-sys,.site-nav .theme[data-mode=light] .i-sun,.site-nav .theme[data-mode=dark] .i-moon{display:block} .site-nav a:hover{background:var(--ink);color:var(--paper);border-color:var(--paper)} .site-nav a.on{background:var(--red);color:var(--paper);border-color:var(--red)} .site-nav a.on:hover{background:var(--red2);border-color:var(--red2)} .menu-btn{display:none;font:600 11px/1 var(--font-b);text-transform:uppercase;letter-spacing:.1em;padding:9px 12px;background:var(--ink);color:var(--paper);border:0;cursor:pointer} @media (max-width:760px){ .menu-btn{display:block} .site-nav{display:none;position:absolute;right:12px;top:52px;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);padding:6px;width:min(260px,calc(100vw - 24px))} .site-nav a{border-color:var(--ink);text-align:right;padding:12px} .site-head.open .site-nav{display:flex} } /* ---------- poster base ---------- */ .av-poster{position:relative;overflow:hidden;border-bottom:6px solid var(--ink);padding:clamp(72px,10vw,120px) var(--pad) clamp(56px,8vw,100px)} .av-poster.tall{min-height:100svh} .av-poster.red{background:var(--red);color:var(--paper)} .av-poster.black{background:var(--ink);color:var(--paper)} .av-poster.paper2{background:var(--paper2)} .av-num{display:block;position:relative;z-index:2;margin:-24px 0 22px;font-family:var(--font-m);font-size:12px;letter-spacing:.2em;opacity:.7;text-transform:uppercase} .av-slog{font-family:var(--font-m);text-transform:uppercase;letter-spacing:.02em} .h-xl{font-size:clamp(44px,9vw,150px)} .h-lg{font-size:clamp(36px,7vw,110px)} .h-md{font-size:clamp(28px,5vw,72px)} .lead{max-width:560px;font-size:17px;font-weight:500;border-left:8px solid var(--red);padding-left:16px} .lead b{display:block;font-family:var(--font-m);font-size:12px;letter-spacing:.2em;margin-bottom:8px;font-weight:400} .red .lead,.black .lead{border-color:var(--paper)} .prose{max-width:720px;font-size:17px} .prose p+p,.prose ul+p,.prose p+ul{margin-top:14px} .prose ul{padding-left:1.2em} .prose li+li{margin-top:6px} .prose h3{font-size:clamp(22px,3vw,34px);margin:32px 0 14px} .btn{display:inline-block;font-family:var(--font-d);font-weight:900;font-size:16px;text-transform:uppercase;text-decoration:none;padding:14px 20px; background:var(--ink);color:var(--paper);border:0;cursor:pointer;transform:rotate(-2deg);transition:transform .2s,background .2s} .btn:hover{transform:rotate(0);background:var(--red);color:var(--paper)} .btn.alt{background:var(--orange)} .red .btn{background:var(--ink)}.red .btn:hover{background:var(--paper);color:var(--red)} .black .btn{background:var(--red)}.black .btn:hover{background:var(--paper);color:var(--ink)} .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;position:relative;z-index:2} /* geometry */ .g{position:absolute;pointer-events:none} .g-circle{border-radius:50%} .g-wedge{clip-path:polygon(0 0,100% 50%,0 100%)} .g-tri{clip-path:polygon(0 100%,50% 0,100% 100%)} .bg-red{background:var(--red)}.bg-ink{background:var(--ink)}.bg-paper{background:var(--paper)}.bg-orange{background:var(--orange)} .g-bar{height:14px} /* reveal along diagonals */ .rv{opacity:0;transform:translate(-80px,80px) rotate(-3deg);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s} .rv.r2{transform:translate(80px,-80px) rotate(3deg)} .rv.r3{transform:translate(0,120px) rotate(-8deg)} .rv.r4{transform:translate(-120px,0) rotate(6deg)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.22s}.rv.d3{transition-delay:.34s}.rv.d4{transition-delay:.46s}.rv.d5{transition-delay:.58s} /* ---------- hero ---------- */ .av-hero{display:grid;grid-template-columns:1fr;align-items:center} .av-hero .av-num{display:flex;align-items:center;gap:16px} .av-hero h1{font-size:clamp(44px,9.5vw,170px);position:relative;z-index:2} .av-hero h1 span{display:block} .av-hero h1 .tilt{transform:rotate(-8deg) translateX(6vw);transform-origin:left;color:var(--red)} .av-hero h1 .out{-webkit-text-stroke:3px var(--ink);color:transparent} .av-hero .lead{position:relative;z-index:2;margin-top:24px;max-width:520px} .hero-photo{position:absolute;right:-6vw;top:8vh;width:clamp(240px,42vw,620px);aspect-ratio:1;border-radius:50%; transform:rotate(8deg);border:10px solid var(--ink);z-index:1} .hero-photo img{width:100%;height:100%;object-fit:contain;transform:scale(1.2) rotate(-8deg)} .hero-sq{position:absolute;right:30vw;top:56vh;width:clamp(120px,18vw,260px);aspect-ratio:1;transform:rotate(-14deg);border:8px solid var(--red);z-index:1} .hero-sq img{width:100%;height:100%;object-fit:contain;transform:scale(1.25) rotate(14deg)} .hero-wedge{right:-10vw;bottom:-6vh;width:60vw;height:50vh;transform:rotate(-24deg)} .av-badge{position:absolute;left:var(--pad);bottom:24px;z-index:3;display:flex;gap:14px;align-items:center;font-family:var(--font-m);font-size:12px;letter-spacing:.15em;text-transform:uppercase} .av-badge .dot{width:22px;height:22px;background:var(--red);border-radius:50%;animation:pulse 1.6s infinite;flex:none} @keyframes pulse{50%{transform:scale(.6)}} .emblem{width:clamp(56px,6vw,80px);flex:none;filter:drop-shadow(3px 3px 0 var(--red))} /* page hero (inner pages) */ .pg-hero{padding-bottom:clamp(40px,6vw,80px)} .pg-hero h1{position:relative;z-index:2} .pg-hero h1 .tilt{display:inline-block;transform:rotate(-6deg);color:var(--red)} .black .pg-hero h1 .tilt,.pg-hero.black h1 .tilt{color:var(--red)} .red .pg-hero h1 .tilt,.pg-hero.red h1 .tilt{color:var(--ink)} .pg-hero .lead{position:relative;z-index:2;margin-top:28px} .pg-hero h1:has(.tilt)+*{margin-top:max(28px,6vw - 10px)} /* the tilted title word dips below its line box; the dip grows with viewport width */ .pg-photo{position:absolute;right:-4vw;top:10vh;width:clamp(200px,34vw,520px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:10px solid var(--ink);transform:rotate(6deg);z-index:1;background:var(--paper2)} .pg-photo.prod{overflow:visible;background:transparent} .pg-photo img{width:100%;height:100%;object-fit:cover} .pg-photo.prod img{object-fit:contain;transform:scale(1.15) rotate(-6deg)} .pg-photo.sq{border-radius:0;transform:rotate(-5deg);border-color:var(--red)} .crumbs{position:relative;z-index:2;font-family:var(--font-m);font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:clamp(24px,3vw,44px);display:flex;flex-wrap:wrap;gap:6px 10px} .crumbs a{text-decoration:none;border-bottom:2px solid currentColor} .crumbs a:hover{color:var(--red)} .crumbs span::before{content:"◆";color:var(--orange);margin-right:10px;font-size:9px} /* ---------- numbers ---------- */ .av-man{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:stretch} .man-card{border:6px solid currentColor;padding:24px;position:relative;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;text-decoration:none} .man-card .big{font-family:var(--font-d);font-weight:900;font-size:clamp(64px,9vw,150px);line-height:.85;letter-spacing:-.04em} .man-card .big small{font-size:.35em;display:block;letter-spacing:0} .man-card .lab{font-family:var(--font-m);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:14px} .man-card .shape{position:absolute;right:-30px;top:-30px;width:150px;height:150px;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .man-card:hover .shape{transform:rotate(120deg)} .man-card:nth-child(2){transform:rotate(1.5deg)} .man-card:nth-child(3){transform:rotate(-1.5deg)} .man-title{font-size:clamp(40px,7vw,110px);margin-bottom:40px} .man-title em{font-style:normal;background:var(--paper);color:var(--red);padding:0 .12em;display:inline-block;transform:rotate(-2deg)} /* ---------- products ---------- */ .av-prod .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:48px;position:relative;z-index:2} .av-prod h2 .red,.av-prod h1 .red{color:var(--red)} .cats{font-family:var(--font-m);font-size:12px;letter-spacing:.15em;text-transform:uppercase;display:grid;gap:6px;min-width:260px} .cats a{text-decoration:none;display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid transparent} .cats a:hover{border-color:var(--red)} .cats a b{color:var(--red)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:36px 28px;position:relative;z-index:2} .pc{position:relative;padding-top:20px;text-decoration:none;color:inherit;display:block} .pc .ph{width:100%;aspect-ratio:1;border:8px solid var(--ink);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .pc .ph img{width:100%;height:100%;object-fit:contain;transform:scale(1.08)} .pc.c .ph{border-radius:50%} .pc.t1 .ph{transform:rotate(-6deg)}.pc.t2 .ph{transform:rotate(5deg)}.pc.t3 .ph{transform:rotate(-3deg)}.pc.t4 .ph{transform:rotate(9deg)} .pc:hover .ph{transform:rotate(0) scale(1.03)} .pc .w{position:absolute;top:0;right:0;width:70px;height:70px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%);transition:transform .5s;z-index:2} .pc:hover .w{transform:rotate(180deg)} .pc .nm{font-family:var(--font-d);font-weight:800;font-size:clamp(15px,1.4vw,19px);text-transform:uppercase;line-height:1;margin-top:20px} .pc .meta{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;color:var(--red)} .pc .nut{font-size:13px;margin-top:8px;opacity:.85} .tape{margin-top:64px;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink);overflow:hidden;white-space:nowrap;padding:10px 0;font-family:var(--font-m);font-size:clamp(18px,3vw,34px);text-transform:uppercase} .tape .tr{display:inline-block;animation:tape 40s linear infinite} @keyframes tape{to{transform:translateX(-50%)}} .tape .tr span{margin-right:40px} .tape .tr span::after{content:"◆";color:var(--orange);margin-left:40px} /* catalog tabs & chips */ .tabs{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2;margin-bottom:16px} .tabs a{font-family:var(--font-d);font-weight:800;font-size:clamp(13px,1.5vw,18px);text-transform:uppercase;text-decoration:none;padding:10px 16px;border:4px solid var(--ink);background:var(--paper);color:var(--ink)} .tabs a b{font-family:var(--font-m);font-weight:400;font-size:.7em;color:var(--red);margin-left:8px} .tabs a:hover{background:var(--paper2)} .tabs a.on{background:var(--ink);color:var(--paper)} .tabs a.on b{color:var(--red)} .chips{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2;margin-bottom:40px} .chips a{font-family:var(--font-b);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:6px 10px;border:2px solid var(--ink);color:var(--ink);background:transparent} .chips a b{color:var(--red);margin-left:6px;font-weight:600} .chips a:hover{background:var(--paper2)} .chips a.on{background:var(--red);border-color:var(--red);color:var(--paper)} .chips a.on b{color:var(--ink)} .count{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:40px} .grp-title{font-size:clamp(28px,5vw,64px);margin:56px 0 28px;position:relative;z-index:2} .grp-title small{display:block;font-family:var(--font-m);font-weight:400;font-size:11px;letter-spacing:.2em;margin-top:8px;color:var(--red)} /* product page */ .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;position:relative;z-index:2;margin-top:40px} .card{border:6px solid var(--ink);padding:22px;background:var(--paper);position:relative;overflow:hidden} .card .k{font-family:var(--font-m);font-size:11px;letter-spacing:.25em;text-transform:uppercase;border-bottom:3px solid currentColor;padding-bottom:6px;margin-bottom:14px} .card .shape{position:absolute;right:-20px;bottom:-20px;width:64px;height:64px;background:var(--red);opacity:.9} .card p{font-size:15px} .card.ing strong{background:var(--paper2);padding:0 .15em;font-weight:600} .nut-t{width:100%;border-collapse:collapse;font-size:15px} .nut-t td{padding:7px 0;border-top:2px solid var(--paper2);vertical-align:top} .nut-t td:last-child{text-align:right;font-family:var(--font-m);font-size:12px;white-space:nowrap} .nut-t td small{display:block;font-size:12px;opacity:.7} .nut-t tr:first-child td{border-top:0} .nut-t .e td{font-family:var(--font-d);font-weight:800;font-size:18px;text-transform:uppercase} .life{display:grid;gap:10px} .life .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;font-size:15px} .life .row b{font-family:var(--font-d);font-weight:800;font-size:18px;text-transform:uppercase;white-space:nowrap} .life .bar{grid-column:1/-1;height:10px;background:var(--paper2);overflow:hidden} .life .bar i{display:block;height:100%;background:var(--red)} .weight{font-family:var(--font-d);font-weight:900;font-size:clamp(28px,4vw,48px);text-transform:uppercase;line-height:1} .al{margin-top:14px;font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)} .prod-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;position:relative;z-index:2} /* ---------- history ---------- */ .av-hist{isolation:isolate} .av-hist h2{margin-bottom:40px} .tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;position:relative} .tl .yr{position:relative;padding:32px 24px 32px 0;border-top:8px solid var(--paper)} .tl .yr .y{font-family:var(--font-d);font-weight:900;font-size:clamp(72px,11vw,180px);line-height:.85;letter-spacing:-.05em} .tl .yr:first-child .y{color:var(--orange)} .tl .yr:nth-child(2) .y{transform:rotate(-6deg);display:inline-block;color:var(--red)} .tl .yr:nth-child(3) .y{-webkit-text-stroke:3px var(--paper);color:transparent} .tl .yr p{max-width:340px;margin-top:20px;font-size:16px} .tl .yr .k{font-family:var(--font-m);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:10px} .tl .yr:nth-child(3) .k{color:var(--paper)} .hist-vid{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .hist-vid video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.9)} .hist-vid::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.68} .hist-vid::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ink) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 100%)} .hist-circle{width:38vw;height:38vw;right:-14vw;bottom:-14vw;opacity:.95} .hist-quote{margin-top:64px;font-family:var(--font-m);font-size:clamp(20px,4vw,52px);text-transform:uppercase;line-height:1.05;max-width:1000px;position:relative;z-index:2} .hist-quote span{background:var(--red);padding:0 .1em} .black .prose{position:relative;z-index:2} /* ---------- standards ---------- */ .av-std{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} .av-std h2{position:relative;z-index:2} .av-std h2 span{display:inline-block} .av-std h2 .r{transform:rotate(-6deg);color:var(--paper);background:var(--ink);padding:0 .15em} .stamps{display:flex;flex-wrap:wrap;gap:24px;position:relative;z-index:2} .stamp{width:200px;height:200px;border-radius:50%;border:8px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; font-family:var(--font-d);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1;transition:transform .6s cubic-bezier(.2,.8,.2,1);background:var(--paper);color:var(--ink);padding:10px} .stamp small{font-family:var(--font-m);font-size:10px;letter-spacing:.2em;margin-top:8px;font-weight:400} .stamp.sq{border-radius:0;transform:rotate(6deg);background:var(--orange);color:var(--ink);border-color:var(--orange)} .stamp.sq2{border-radius:0;transform:rotate(-8deg);background:var(--ink);color:var(--paper)} .stamp:hover{transform:rotate(360deg)} .std-text{max-width:560px;font-size:17px;position:relative;z-index:2} .std-text p+p{margin-top:12px} .std-wedge{left:55%;top:-10%;width:60vw;height:120%;transform:rotate(10deg);opacity:.9} /* value cards (about) */ .vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;position:relative;z-index:2;margin-top:40px} .val{border:6px solid var(--ink);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:var(--paper)} .val .n{font-family:var(--font-d);font-weight:900;font-size:64px;line-height:.8;color:var(--red);margin-bottom:18px} .val p{font-size:16px} .val:nth-child(2){transform:rotate(1.5deg)}.val:nth-child(3){transform:rotate(-1.5deg)} /* ---------- shareholders ---------- */ .docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border:6px solid var(--paper);position:relative;z-index:2} .doc{border:3px solid var(--paper);padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;position:relative;overflow:hidden;transition:background .2s,color .2s} .doc .i{font-family:var(--font-m);font-size:11px;letter-spacing:.2em} .doc .t{font-family:var(--font-d);font-weight:800;font-size:18px;text-transform:uppercase;line-height:1.05;margin-top:14px} .doc .shape{position:absolute;right:-20px;bottom:-20px;width:64px;height:64px;background:var(--red);transition:transform .5s} .doc:nth-child(5) .shape{background:var(--orange)} .doc:hover{background:var(--paper);color:var(--ink)} .doc:hover .shape{transform:rotate(90deg) scale(1.6)} .sh-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px;position:relative;z-index:2;margin-top:32px;max-width:1100px} .sh-toc a{font-family:var(--font-b);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:8px 10px;border:2px solid var(--ink);display:flex;gap:10px} .sh-toc a:hover{background:var(--ink);color:var(--paper)} .sh-toc a i{font-style:normal;font-family:var(--font-m);color:var(--red);flex:none} .sh-sec{position:relative;z-index:2;border-top:6px solid var(--ink);padding:36px 0 44px;display:grid;grid-template-columns:120px 1fr;gap:20px 32px;max-width:1100px} .sh-sec .n{font-family:var(--font-d);font-weight:900;font-size:clamp(48px,7vw,96px);line-height:.8;color:var(--red);letter-spacing:-.04em} .sh-sec h2{font-size:clamp(20px,2.6vw,32px);line-height:1.05;text-transform:none;letter-spacing:0;font-weight:800} .sh-sec .note{margin-top:14px;font-family:var(--font-m);font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.7} .sh-sec .grp{margin-top:22px} .sh-sec .yr{font-family:var(--font-d);font-weight:900;font-size:28px;color:var(--red2);margin-bottom:8px;transform:rotate(-3deg);display:inline-block;background:var(--paper2);padding:0 .2em} .sh-sec ul{list-style:none} .sh-sec li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:10px 0;border-top:2px solid var(--paper2);font-size:15px} .sh-sec li .f{display:flex;flex-wrap:wrap;gap:4px} .fl{font-family:var(--font-m);font-size:10px;letter-spacing:.15em;text-decoration:none;padding:4px 8px;background:var(--ink);color:var(--paper);white-space:nowrap} .fl:hover{background:var(--red)} .fl.sig{background:var(--red2)} @media (max-width:600px){.sh-sec{grid-template-columns:1fr}.sh-sec .n{font-size:48px}} /* ---------- video ---------- */ .vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 32px;position:relative;z-index:2} .vid{position:relative} .vid video{width:100%;aspect-ratio:4/3;background:var(--ink2);border:8px solid var(--ink);display:block;transform:rotate(-1.5deg)} .vid:nth-child(2n) video{transform:rotate(1.5deg);border-color:var(--red)} .vid h3{font-size:clamp(20px,2.4vw,30px);margin-top:22px} .vid .k{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:8px;color:var(--red)} .vid .k a{text-decoration:none;border-bottom:2px solid currentColor} /* ---------- contacts ---------- */ .av-con{display:grid;grid-template-columns:1fr;gap:40px} .av-con h2,.av-con h1{font-size:clamp(48px,11vw,180px);line-height:.85;position:relative;z-index:2} .av-con h2 .a,.av-con h1 .a{display:block;transform:rotate(-5deg) translateX(3vw);color:var(--paper)} .av-con h2+*,.av-con h1+*{margin-top:max(0px,4vw - 44px)} /* the tilted second line dips into the grid on wide screens */ .con-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;position:relative;z-index:2} .con-grid .b .k{font-family:var(--font-m);font-size:11px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px;border-bottom:3px solid currentColor;padding-bottom:6px} .con-grid .b a{text-decoration:none;font-family:var(--font-d);font-weight:800;font-size:clamp(18px,1.8vw,26px);display:block;line-height:1.1;margin:4px 0;word-break:break-word} .con-grid .b a:hover{background:var(--ink);color:var(--paper)} .red .con-grid .b a:hover{background:var(--ink)} .paper2 .con-grid .b a:hover,.av-poster:not(.red):not(.black) .con-grid .b a:hover{background:var(--ink);color:var(--paper)} .con-grid .b p{font-size:16px;margin-top:6px} .con-grid .b .sm{font-family:var(--font-m);font-size:11px;letter-spacing:.1em} .map{position:relative;z-index:2;border:8px solid var(--ink);transform:rotate(-1deg);background:var(--paper2);margin-top:40px} .map iframe{display:block;width:100%;height:min(60vh,480px);border:0} .con-tri{right:-10vw;bottom:-10vh;width:50vw;height:60vh;transform:rotate(18deg);opacity:.95} /* ---------- form ---------- */ .form{display:grid;gap:12px;max-width:560px;position:relative;z-index:2} .form label{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:6px} .form input[type=text],.form input[type=email],.form textarea{width:100%;border:4px solid var(--paper);background:transparent;color:var(--paper);padding:12px;font:inherit;font-size:15px} .form input::placeholder,.form textarea::placeholder{color:color-mix(in srgb,var(--paper) 70%,transparent)} .form .radios{display:flex;flex-wrap:wrap;gap:8px} .form .radios label{display:inline-flex;align-items:center;gap:8px;border:4px solid var(--paper);padding:10px 14px;cursor:pointer;margin:0;font-size:12px} .form .radios label:has(input:checked){background:var(--paper);color:var(--red)} .form .radios input{accent-color:var(--red)} .form button{background:var(--orange);color:var(--paper);border:0;padding:16px;font-family:var(--font-d);font-weight:900;font-size:18px;text-transform:uppercase;cursor:pointer;transform:rotate(-2deg);transition:transform .2s,background .2s} .form button:hover{transform:rotate(0);background:var(--paper);color:var(--red)} .form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .msg{display:none;position:relative;z-index:2;max-width:560px;margin-bottom:24px;padding:16px 20px;border:6px solid var(--paper);font-family:var(--font-d);font-weight:800;font-size:18px;text-transform:uppercase} .msg.show{display:block} /* ---------- announcement ---------- */ .tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:40px;position:relative;z-index:2} .tip{border:6px solid var(--ink);background:var(--paper);padding:24px;font-size:16px;position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end} .tip .shape{position:absolute;right:-24px;top:-24px;width:90px;height:90px;background:var(--red)} .tip:nth-child(2){transform:rotate(1.5deg)}.tip:nth-child(2) .shape{border-radius:50%;background:var(--orange)} .tip:nth-child(3){transform:rotate(-1.5deg)}.tip:nth-child(3) .shape{clip-path:polygon(0 100%,50% 0,100% 100%)} /* partners */ .partner{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;align-items:center;position:relative;z-index:2} .partner .lg{border:8px solid var(--ink);background:#fff;padding:24px;transform:rotate(-2deg);max-width:520px} .partner .lg img{width:100%} /* ---------- footer ---------- */ .av-foot{background:var(--ink);color:var(--paper);padding:40px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;font-size:13px} .av-foot .k{font-family:var(--font-m);font-size:11px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:12px;opacity:.7} .av-foot a{text-decoration:none} .av-foot a:hover{color:var(--red)} .av-foot ul{list-style:none} .av-foot li{margin:4px 0} .av-foot .l{display:flex;gap:16px;align-items:flex-start} .av-foot .l img{width:64px;filter:brightness(0) invert(1) sepia(1) saturate(.4) hue-rotate(10deg);flex:none} .av-foot .slog{font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;color:var(--red)} /* partner logo: no box; painted paper-light on the brown footer, and left in its own dark red once the footer turns cream in the dark theme */ .av-foot .bk{width:150px;transform:rotate(2deg)} .av-foot .bk img{width:100%;filter:brightness(0) invert(1) sepia(1) saturate(.4) hue-rotate(10deg)} .av-foot .gm{display:inline-block;margin-top:14px;font-family:var(--font-m);font-size:11px;letter-spacing:.15em;text-transform:uppercase} .av-foot .copy{grid-column:1/-1;border-top:2px solid color-mix(in srgb,var(--paper) 25%,transparent);padding-top:16px;font-family:var(--font-m);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.7} @media (max-width:760px){ .hero-photo{width:70vw;right:-20vw;top:4vh} .hero-sq{right:4vw;top:70vh;width:34vw} .av-hero h1 .tilt{transform:rotate(-6deg) translateX(3vw)} .stamp{width:150px;height:150px;font-size:20px} .pg-photo{width:52vw;right:-14vw;top:6vh;opacity:.9} } @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .tape .tr{animation:none} .av-badge .dot{animation:none} .hist-vid{display:none} *{transition:none!important} } /* narrow screens: inner-page photo flows above the title instead of overlapping text */ @media (max-width:1000px){ .pg-photo{position:relative;right:auto;top:auto;width:min(60vw,320px);margin:0 0 24px auto;transform:rotate(4deg)} } .av-foot .bk{display:block} .nut-t .e td:first-child{font-family:var(--font-b);font-weight:600;font-size:14px;text-transform:none} .nut-t{table-layout:fixed} .nut-t td:last-child{white-space:normal;width:38%} .nut-t .e td:last-child{font-size:14px} @media (max-width:760px){ .hero-sq{display:none} .av-badge{position:static;margin-top:28px} .hist-quote span{color:var(--paper)} } /* accent words in page titles get a paper outline so they never merge with the orange geometry behind them */ .pg-hero h1 .tilt,.pg-hero h1 .red{-webkit-text-stroke:.05em var(--paper);paint-order:stroke fill} .black .pg-hero h1 .tilt,.pg-hero.black h1 .tilt{-webkit-text-stroke-color:var(--ink)} .red .pg-hero h1 .tilt,.pg-hero.red h1 .tilt{-webkit-text-stroke-color:var(--red)} .paper2 .pg-hero h1 .tilt,.pg-hero.paper2 h1 .tilt{-webkit-text-stroke-color:var(--paper2)} /* mobile: geometry must never sit under text; hero photo goes into the flow */ @media (max-width:760px){ .hero-wedge,.std-wedge,.con-tri{display:none} .av-poster{padding-top:92px} .hero-photo{position:relative;right:auto;top:auto;width:46vw;margin:0 0 8px auto;transform:rotate(6deg)} .hist-circle{width:60vw;height:60vw;right:-30vw;bottom:-30vw} /* a full-screen hero on a phone is mostly empty: let short ones end at their content so the next section shows */ .av-poster.tall{min-height:0} .av-hero{display:flex;flex-direction:column;align-items:stretch} /* the buttons go straight under the headline: on a phone six lines of lead would push them past the fold */ .av-hero .hero-txt{width:100%;display:flex;flex-direction:column} .av-hero .hero-txt .btns{order:1;margin-top:20px} .av-hero .hero-txt .lead{order:2;margin-top:22px} } /* ---------- interaction states: hover must always differ from rest AND from selected ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px} .tabs a.on:hover{background:var(--ink2)} .chips a.on:hover{background:var(--red2);border-color:var(--red2)} .black .sh-toc a{border-color:var(--paper)} .black .sh-toc a:hover{background:var(--paper);color:var(--ink)} .form .radios label{transition:background .2s} .form .radios label:hover{background:color-mix(in srgb,var(--paper) 15%,transparent)} .stamp{cursor:default} /* game link: a playful orange tag that stands apart from the "serious" nav */ .site-nav a.game{margin-left:10px;background:var(--red);color:var(--ink);border-color:var(--ink);font-family:var(--font-d);font-weight:900;letter-spacing:0;transform:rotate(-5deg);animation:wiggle 6s ease-in-out infinite;transition:transform .2s,background .2s} .site-nav a.game:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(0) scale(1.08);animation:none} @keyframes wiggle{0%,90%,100%{transform:rotate(-5deg)}93%{transform:rotate(3deg)}96%{transform:rotate(-8deg)}} @media (prefers-reduced-motion:reduce){.site-nav a.game{animation:none}} @media (max-width:760px){.site-nav a.game{margin:6px 0 0;transform:none;animation:none;text-align:center}} /* dark theme details the tokens don't cover */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img,:root:not([data-theme="light"]) .av-foot .l img{filter:brightness(0) invert(.12) sepia(1) saturate(4) brightness(.6)}} :root[data-theme="dark"] .brand img,:root[data-theme="dark"] .av-foot .l img{filter:brightness(0) invert(.12) sepia(1) saturate(4) brightness(.6)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av-foot .bk img{filter:none}} :root[data-theme="dark"] .av-foot .bk img{filter:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vid video{background:#000}} :root[data-theme="dark"] .vid video{background:#000} @media (max-width:760px){.site-nav .theme{color:var(--paper);opacity:.7;padding:12px;margin:0;align-self:flex-end}}