/* ========================================================================== Heru, main stylesheet. Tokens live in critical.css (inlined in ). Sections: fonts · base · layout · nav · localnav · tiles · cards · rails · chips · streams · product pages · release · video · blog · about · contact · shop · footer · forms · legacy apps · motion · utilities ========================================================================== */ /* ---------- base ---------- */ h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.1} p{margin:0 0 1em} button{font:inherit;color:inherit} ::selection{background:var(--gold);color:#000} :focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .wrap--narrow{max-width:760px} .wrap--wide{max-width:1440px} main{display:block;padding-top:var(--nav-h)} .is-home main{padding-top:0} .eyebrow{font-size:19px;line-height:1.19;font-weight:600;letter-spacing:.011em;color:var(--text-2);margin:0 0 6px} .eyebrow--accent{color:var(--gold)} .section-title{font-size:clamp(1.75rem,1.1rem + 2.4vw,3rem);line-height:1.08;letter-spacing:-.015em;font-weight:600} .section-title em{font-style:normal;color:var(--text-2)} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 28px} .link-more{display:inline-flex;align-items:center;gap:1px;color:var(--gold-hi);font-size:17px;letter-spacing:-.022em;white-space:nowrap} .link-more .icon{width:16px;height:16px;transition:transform var(--dur)}.link-more:hover .icon{transform:translateX(2px)}.link-more:hover{text-decoration:underline;text-underline-offset:3px} .badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);color:var(--gold);font-size:12px;font-weight:600;letter-spacing:-.01em;padding:5px 11px;border-radius:var(--pill)} .icon{width:24px;height:24px;flex:none} .hp{position:absolute;left:-9999px;opacity:0} /* ---------- nav (mobile menu) ---------- */ .nav__panel{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:99;background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:28px var(--gutter) 40px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);overflow:auto} .nav.is-open+.nav__panel{transform:none;opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} .nav__burger .icon-close{display:none}.nav.is-open .nav__burger .icon-menu{display:none}.nav.is-open .nav__burger .icon-close{display:block} .nav__panel ul{list-style:none;margin:0;padding:0} .nav__panel li a{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)} .nav__panel .pill{margin-top:24px} .nav__panel .socials{margin-top:32px} .nav__search{margin-top:20px} .nav__cart{position:relative}.nav__cart b{position:absolute;top:-6px;right:-8px;background:var(--gold);color:#000;font-size:10px;border-radius:10px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px} body.menu-open{overflow:hidden} @media (min-width:834px){.nav__panel{display:none}} /* ---------- local nav (product pages) ---------- */ .localnav{position:sticky;top:var(--nav-h);z-index:90;background:var(--localnav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)} .localnav__in{max-width:1024px;margin:0 auto;display:flex;align-items:center;gap:24px;height:52px;padding:0 var(--gutter)} .localnav__title{font-size:21px;font-weight:600;letter-spacing:.011em;margin-right:auto;white-space:nowrap} .localnav__links{display:flex;gap:24px;list-style:none;margin:0;padding:0} .localnav__links a{font-size:12px;color:var(--text-2)}.localnav__links a:hover{color:var(--text)} .localnav .pill{font-size:12px;padding:5px 12px} @media (max-width:833px){.localnav__links{display:none}} /* ---------- breadcrumbs ---------- */ .crumbs{padding:18px 0 0}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:12px;color:var(--text-2)} .crumbs li+li::before{content:"›";margin-right:6px;color:var(--text-3)}.crumbs a:hover{color:var(--text)} /* ---------- hero extras ---------- */ .hero__socials{position:absolute;right:var(--gutter);bottom:48px;display:none} .hero__latest{display:inline-flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:10px 14px 10px 10px;margin-bottom:28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .hero__latest img{width:56px;height:56px;border-radius:8px;object-fit:cover} .hero__latest small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .hero__latest b{font-size:15px;font-weight:600} .hero__scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:22px;height:34px;border:1.5px solid var(--line);border-radius:12px} .hero__scroll::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:scrollhint 1.8s infinite} @keyframes scrollhint{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}} @media (min-width:1069px){.hero__socials{display:block}} @media (max-width:833px){.hero__scroll{display:none}} /* ---------- tiles: an Apple-style mosaic ---------- */ .tiles{display:grid;gap:var(--gap);padding:0 var(--gap) var(--gap)} .tiles--2{grid-template-columns:1fr 1fr} .tile{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);overflow:hidden;background:var(--tile-bg);color:var(--text);min-height:clamp(440px,58vh,620px);isolation:isolate;text-align:center} .tile--promo{min-height:clamp(400px,50vh,560px)} /* every tile follows the page mode: black grounds in dark, white grounds in light */ .tile--darker,.tile--light{background:var(--tile-bg-alt)} .tile--gold{background:var(--tile-gold)} .tile .eyebrow{color:var(--text-2)} .tile .eyebrow--accent{color:var(--gold)} :root[data-theme="light"] .tile .eyebrow--accent{color:var(--gold-deep)} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tile .eyebrow--accent{color:var(--gold-deep)}} .tile .tile__sub,.tile .tile__kicker{color:var(--text-2)} .tile .pill--secondary{border-color:var(--btn-outline);color:var(--text)} .tile .pill--secondary:hover{background:var(--btn-soft);border-color:var(--btn-outline-hi)} .tile .link-more{color:var(--accent)} /* a tile sitting on artwork keeps light text whatever the mode */ .tile--bg,.tile--bg .tile__title{color:var(--text)} .tile--bg .tile__sub,.tile--bg .tile__kicker,.tile--bg .eyebrow{color:var(--text-2)} .tile--bg .pill--secondary{border-color:var(--btn-outline);color:var(--text)} .tile--bg .pill--secondary:hover{background:var(--btn-soft);border-color:var(--btn-outline-hi)} .tile--bg .link-more{color:var(--accent)} .tile__copy{position:relative;z-index:3;padding:clamp(38px,5vw,58px) clamp(20px,3vw,40px) 0;max-width:640px;margin:0 auto} .tile__kicker{font-size:14px;line-height:1.4;letter-spacing:-.016em;color:var(--on-dark-2);margin:12px 0 0} .tile__ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px} .tile__media{position:relative;z-index:2;align-self:end;display:grid;justify-items:center;align-items:end;min-height:0;width:100%} .tile__media img{width:100%;height:100%;object-fit:contain;object-position:bottom} /* image treatments */ .tile--cover .tile__media{padding:clamp(20px,3vw,40px) 0 0} .tile--cover .tile__media img{width:min(64%,340px);height:auto;border-radius:10px 10px 0 0;box-shadow:var(--shadow-card)} .tile--icon .tile__media{padding:clamp(18px,2.6vw,34px) 0 clamp(24px,3vw,40px)} .tile--icon .tile__media img{width:min(46%,220px);height:auto;border-radius:23%;box-shadow:0 20px 50px rgba(0,0,0,.4)} .tile--book .tile__media{padding:clamp(20px,3vw,36px) 0 0} .tile--book .tile__media img{width:min(52%,290px);height:auto;border-radius:4px 4px 0 0;box-shadow:var(--shadow-card)} .tile--shot .tile__media{padding:clamp(20px,3vw,36px) clamp(20px,4vw,48px) 0} .tile--shot .tile__media img{width:100%;height:auto;border-radius:12px 12px 0 0;box-shadow:var(--shadow-card)} /* The backdrop layer must span every grid row, otherwise its containing block is a single auto-sized grid area and a tall image stretches the tile. */ .tile--bg .tile__media{position:absolute;inset:0;grid-row:1/-1;grid-column:1/-1;align-self:stretch;justify-self:stretch;z-index:0;padding:0;display:block} .tile--bg .tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;box-shadow:none;opacity:var(--art-op)} .tile--bg::after{content:"";position:absolute;inset:0;z-index:1;background:var(--scrim);pointer-events:none} .tile--bg .tile__copy{padding-top:clamp(44px,6vw,72px)} /* a tile with no artwork centres its copy instead of leaving a hole */ .tile--plain{grid-template-rows:1fr} .tile--plain .tile__copy{align-self:center;padding-block:clamp(40px,6vw,64px)} .tile a.tile__hit{position:absolute;inset:0;z-index:4} .tile:has(.tile__hit:hover) .tile__media img{transform:scale(1.015)} .tile__media img{transition:transform .7s var(--ease)} @media (max-width:833px){ .tiles--2{grid-template-columns:1fr} .tiles{padding:0 8px 8px;gap:8px} .tile,.tile--promo{min-height:clamp(400px,64vh,520px)} } /* ---------- cards ---------- */ /* Catalogs are dense walls that reflow by available width, not by breakpoint. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(136px,16vw,196px),1fr));gap:clamp(22px,2.6vw,34px) clamp(12px,1.4vw,20px)} .grid--wide,.video-wall{grid-template-columns:repeat(auto-fill,minmax(clamp(260px,30vw,420px),1fr))} .grid--roomy{grid-template-columns:repeat(auto-fill,minmax(clamp(190px,23vw,290px),1fr))} .grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))} @media (max-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(min(46%,150px),1fr));gap:20px 12px}.card--post{grid-column:1/-1}} .card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0} .card__frame{position:relative;display:block} .card__media{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--bg-2);aspect-ratio:1} .card--wide .card__media{aspect-ratio:16/9}.card--portrait .card__media{aspect-ratio:5/8;background:transparent} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .card--portrait .card__media img{object-fit:contain} .card--app .card__media{border-radius:22%;aspect-ratio:1} .card:hover .card__media img{transform:scale(1.03)} .card__title{font-size:17px;font-weight:600;letter-spacing:-.022em;line-height:1.23536} .card__title a:hover{color:var(--gold-hi)} .card__meta{font-size:14px;line-height:1.4;letter-spacing:-.016em;color:var(--text-2);margin:2px 0 0} .card__play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#000;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity var(--dur),transform var(--dur),background var(--dur);box-shadow:0 6px 20px rgba(0,0,0,.4)} .card:hover .card__play,.card:focus-within .card__play,.card.is-playing .card__play{opacity:1;transform:none} .card--wide .card__frame,.card--portrait .card__frame{display:block} .card.is-playing .card__play{background:var(--gold-hi)} .card__play--static{opacity:1;transform:none;background:rgba(0,0,0,.66);color:#fff;left:50%;top:50%;right:auto;bottom:auto;margin:-26px 0 0 -26px;width:52px;height:52px;border:1px solid rgba(255,255,255,.25)} .card:hover .card__play--static{background:var(--gold);color:#000} .card__play .icon{width:20px;height:20px} @media (hover:none){.card__play{opacity:1;transform:none}} .card.is-hidden{display:none} .card--post .card__media{aspect-ratio:3/1} .card--product .card__media{background:#fff} /* ---------- rails ---------- */ .rail{padding:clamp(48px,8vw,96px) 0 0} .rail .section-head{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--gutter)} .rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,22vw,260px);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px var(--gutter) 24px;scrollbar-width:none;scroll-padding-inline:var(--gutter)} .rail__track::-webkit-scrollbar{display:none} .rail__track>.card{scroll-snap-align:start} .rail__track>.card--wide{grid-column:span 1;width:clamp(280px,36vw,440px)} .rail__track>.card--portrait{width:clamp(160px,18vw,220px)} @media (min-width:1480px){.rail__track{padding-left:calc((100vw - var(--wrap)) / 2 + var(--gutter));padding-right:calc((100vw - var(--wrap)) / 2 + var(--gutter))}} /* ---------- archive pages ---------- */ .archive-head{padding:clamp(40px,6vw,72px) 0 24px} .archive-head h1{font-size:clamp(2.5rem,1.4rem + 4vw,4.5rem);line-height:1.05;letter-spacing:-.015em;font-weight:600} .archive-head p{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);color:var(--text-2);max-width:60ch;margin:14px 0 0} .archive-body{padding-bottom:clamp(64px,8vw,120px)} .archive-count{font-size:13px;color:var(--text-3);margin:0 0 18px} .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 28px;position:sticky;top:var(--nav-h);z-index:50;padding:12px 0;background:linear-gradient(var(--bg) 80%,transparent)} .chip{border:1px solid var(--line);background:transparent;color:var(--text-2);border-radius:var(--pill);padding:7px 14px;font-size:14px;cursor:pointer;transition:all var(--dur)} .chip:hover{color:var(--text);border-color:var(--btn-outline-hi)} .chip.is-active{background:var(--text);color:var(--bg);border-color:var(--text)} .chips__search{margin-left:auto;position:relative;display:flex;align-items:center} .chips__search input{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:var(--pill);padding:8px 36px 8px 14px;font-size:14px;width:min(260px,50vw)} .chips__search .icon{position:absolute;right:10px;width:16px;height:16px;color:var(--text-2);pointer-events:none} .empty{color:var(--text-2);padding:40px 0;display:none}.empty.is-visible{display:block} .year-head{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text-3);margin:30px 0 -8px} .year-head::after{content:"";flex:1;height:1px;background:var(--line-2)} .year-head:first-child{margin-top:0} .grid.is-filtered .year-head{display:none!important} /* ---------- streams (platform buttons) ---------- */ .streams{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0} .streams a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--pill);padding:9px 16px 9px 12px;font-size:14px;color:var(--text);background:var(--soft);transition:all var(--dur)} .streams a:hover{border-color:var(--gold);color:var(--gold-hi)} .streams .icon{width:18px;height:18px} .streams--compact a span{display:none}.streams--compact a{padding:9px} /* ---------- product pages (app / game / book / release) ---------- */ .product-hero{position:relative;display:grid;gap:32px;align-items:center;padding:clamp(40px,7vw,96px) 0 clamp(32px,5vw,64px)} .product-hero--split{grid-template-columns:1.1fr .9fr} .product-hero__copy{text-align:center;max-width:720px;margin:0 auto} .product-hero--split .product-hero__copy{text-align:left;margin:0} .product-hero h1{font-size:clamp(2.5rem,1.4rem + 4.2vw,4.75rem);line-height:1.05;letter-spacing:-.015em;font-weight:600} .product-hero .lede{font-size:clamp(1.1875rem,1rem + 1vw,1.75rem);line-height:1.2;color:var(--text-2);margin:16px 0 0;font-weight:400} .product-hero .price{display:inline-block;font-size:14px;color:var(--gold-hi);margin:14px 0 0;letter-spacing:.04em} .product-hero .stores{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .product-hero--split .stores{justify-content:flex-start} .product-hero__media img{border-radius:18px;margin:0 auto} .product-hero__media--icon img{width:min(60%,280px);border-radius:22%;box-shadow:var(--shadow-lift)} .product-hero__media--cover img{width:min(100%,520px);box-shadow:var(--shadow-lift);border-radius:10px} .product-hero__media--book img{width:min(72%,380px);box-shadow:var(--shadow-lift);border-radius:6px} .product-hero__media--banner img{width:100%} .platforms{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;justify-content:center} .product-hero--split .platforms{justify-content:flex-start} .platforms span{font-size:12px;letter-spacing:-.01em;color:var(--text-2);border:1px solid var(--line);border-radius:7px;padding:5px 10px} @media (max-width:834px){.product-hero--split{grid-template-columns:1fr}.product-hero--split .product-hero__copy,.product-hero--split .stores,.product-hero--split .platforms{text-align:center;justify-content:center}.product-hero--split .product-hero__copy{margin:0 auto}} .section{padding:clamp(48px,7vw,96px) 0} .section--alt{background:var(--bg-2)} .section--tight{padding:clamp(28px,4vw,48px) 0} .prose{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--text);max-width:72ch} .prose p{margin:0 0 1.2em}.prose a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px} .prose h2,.prose h3{margin:1.6em 0 .6em}.prose h2{font-size:1.6em}.prose h3{font-size:1.25em} .prose img{border-radius:12px;margin:1.5em 0}.prose figure{margin:1.5em 0}.prose figcaption{font-size:14px;color:var(--text-2);margin-top:8px} .prose blockquote{border-left:3px solid var(--gold);margin:1.5em 0;padding:4px 0 4px 22px;color:var(--text-2);font-style:italic} .prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.3em 0} .prose table{border-collapse:collapse;width:100%;font-size:.95em}.prose td,.prose th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left} .prose code{background:var(--bg-3);padding:2px 6px;border-radius:4px;font-size:.9em} .prose .wp-block-embed,.prose iframe{max-width:100%} .prose .wp-block-image img{height:auto} .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 32px;margin:0} .features>div{border-top:1px solid var(--line);padding-top:18px} .features dt{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px} .features dd{margin:0;color:var(--text-2);font-size:16px;line-height:1.5} .features--numbered>div{counter-increment:f}.features--numbered dt::before{content:counter(f,decimal-leading-zero);display:block;font-family:var(--font);font-weight:600;color:var(--gold);font-size:12px;letter-spacing:.2em;margin-bottom:10px} .shots{display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 24px;scrollbar-width:none} .shots::-webkit-scrollbar{display:none} .shots img{scroll-snap-align:start;border-radius:22px;border:1px solid var(--line);width:100%;height:auto} .shots--wide{grid-auto-columns:min(90vw,760px)}.shots--wide img{border-radius:14px} .specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:0} .specs div{border-top:1px solid var(--line);padding-top:14px}.specs dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}.specs dd{margin:6px 0 0;font-size:17px} .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0} .controls div{background:var(--bg-2);border-radius:12px;padding:14px 16px}.controls dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.controls dd{margin:6px 0 0;font-size:16px} .story{counter-reset:s;display:grid;gap:24px} .story>div{display:grid;grid-template-columns:minmax(64px,200px) 1fr;gap:20px;border-top:1px solid var(--line);padding-top:22px;counter-increment:s} .story dt{font-family:var(--font);color:var(--gold);letter-spacing:.1em;font-size:15px;overflow-wrap:anywhere}.story dd{margin:0;color:var(--text-2);font-size:18px;line-height:1.5} .story dt::before{content:"Act " counter(s,upper-roman);display:block;font-size:11px;letter-spacing:.2em;color:var(--text-3);margin-bottom:6px} @media (max-width:734px){.story>div{grid-template-columns:1fr}} .play-frame{position:relative;background:var(--ink-dark);border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9} .play-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .play-frame__start{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(212,175,55,.18),rgba(0,0,0,.82));cursor:pointer;border:0;width:100%;color:#f5f5f7} .play-frame__start span{display:grid;gap:12px;justify-items:center;font-size:17px;font-weight:500;letter-spacing:-.01em;color:#f5f5f7} .play-frame__start .icon{width:64px;height:64px;background:var(--gold);color:#000;border-radius:50%;padding:16px} .play-frame.is-fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;aspect-ratio:auto} .play-tools{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0} .play-tools .pill{font-size:14px;padding:8px 16px} .play-tools .stores{display:contents} .callout{border:1px solid rgba(212,175,55,.3);background:linear-gradient(160deg,rgba(212,175,55,.08),transparent);border-radius:16px;padding:24px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap} .callout h3{font-size:21px}.callout p{margin:4px 0 0;color:var(--text-2)}.callout .pill{margin-left:auto} /* ---------- release page ---------- */ .release{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(40px,6vw,72px) 0} .release__cover{position:sticky;top:calc(var(--nav-h) + 24px)} .release__cover img{width:100%;border-radius:12px;box-shadow:var(--shadow-lift)} .release__cover .streams{margin-top:20px} .release h1{font-size:clamp(2rem,1.3rem + 3vw,3.5rem);line-height:1.06;letter-spacing:-.015em;font-weight:600} .release__meta{color:var(--text-2);font-size:17px;margin:12px 0 22px} .release__meta b{color:var(--text);font-weight:500} .tracks{list-style:none;margin:0;padding:0;counter-reset:t} .tracks li{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);border-radius:8px;transition:background var(--dur)} .tracks li:hover{background:var(--soft)} .tracks .n{color:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums;text-align:right} .tracks .t{font-size:16px}.tracks .t small{display:block;color:var(--text-2);font-size:13px} .tracks .d{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums} .tracks li.has-preview{cursor:pointer}.tracks li.has-preview .n{position:relative} .tracks li.has-preview:hover .n,.tracks li.is-playing .n{color:transparent} .tracks li.has-preview:hover .n::after,.tracks li.is-playing .n::after{content:"▶";position:absolute;right:0;top:0;color:var(--gold)} .tracks li.is-playing .n::after{content:"❚❚"} .tracks li.is-playing .t{color:var(--gold-hi)} .release__credits{margin-top:28px;color:var(--text-2);font-size:14px;white-space:pre-line} .release__embed{margin-top:28px;border-radius:14px;overflow:hidden;border:1px solid var(--line)} .release__embed iframe{width:100%;height:450px;border:0;background:transparent} .release__more{margin-top:36px} @media (max-width:834px){.release{grid-template-columns:1fr}.release__cover{position:static;max-width:420px;margin:0 auto}} .preview-note{font-size:12px;color:var(--text-3);margin:10px 0 0} /* ---------- video ---------- */ .yt{position:relative;aspect-ratio:16/9;background:var(--ink-dark);border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid var(--line)} .yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity var(--dur)}.yt:hover img{opacity:1} .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .yt__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--gold);color:#000;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform var(--dur),background var(--dur)} .yt__play .icon{width:32px;height:32px}.yt:hover .yt__play{transform:translate(-50%,-50%) scale(1.06);background:var(--gold-hi)} .video-page{padding:clamp(28px,4vw,48px) 0} .video-page h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.02em;margin:22px 0 8px} .video-page .meta{color:var(--text-2);font-size:14px;margin:0 0 18px} .video-wall .card--wide{grid-column:auto} /* ---------- watch (single feature video) ---------- */ .watch .yt{border-radius:clamp(12px,1.6vw,20px)} .watch__meta{margin:16px 0 0;font-size:13px;letter-spacing:.02em;color:var(--text-3)} /* ---------- blog ---------- */ .post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px} @media (max-width:1068px){.post-list{grid-template-columns:1fr 1fr}}@media (max-width:734px){.post-list{grid-template-columns:1fr}} .post-card{display:grid;gap:12px} .post-card__media{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-2)} .post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .post-card:hover .post-card__media img{transform:scale(1.03)} .post-card .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .post-card h2{font-size:21px;line-height:1.25;letter-spacing:-.015em}.post-card h2 a:hover{color:var(--gold-hi)} .post-card p{color:var(--text-2);font-size:15px;margin:0}.post-card time{font-size:13px;color:var(--text-3)} .post-card--feature{grid-column:1/-1;grid-template-columns:1.3fr 1fr;align-items:center;gap:32px} .post-card--feature h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem)} @media (max-width:734px){.post-card--feature{grid-template-columns:1fr}} .post-hero{padding:clamp(32px,5vw,64px) 0 24px;text-align:center;max-width:820px;margin:0 auto} .post-hero .cat{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:var(--font)} .post-hero h1{font-size:clamp(2rem,1.3rem + 3vw,3.25rem);line-height:1.08;letter-spacing:-.015em;font-weight:600;margin:14px 0} .post-hero .byline{color:var(--text-2);font-size:15px} .post-hero__media{max-width:1120px;margin:28px auto 0;border-radius:16px;overflow:hidden} .post-body{padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,96px)} .post-body .prose{margin:0 auto} .post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}.post-tags a{font-size:13px;border:1px solid var(--line);border-radius:var(--pill);padding:5px 12px;color:var(--text-2)} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;border-top:1px solid var(--line);padding-top:24px} .post-nav a{display:grid;gap:4px}.post-nav small{color:var(--text-3);font-size:12px;letter-spacing:.1em;text-transform:uppercase}.post-nav b{font-size:17px}.post-nav .next{text-align:right} .author-box{display:flex;gap:18px;align-items:center;margin-top:48px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)} .author-box img{width:64px;height:64px;border-radius:50%} .author-box h3{font-size:17px}.author-box p{margin:4px 0 0;color:var(--text-2);font-size:14px} .comments{max-width:760px;margin:48px auto 0}.comments h2{font-size:21px;margin-bottom:16px} .comment-list{list-style:none;padding:0;margin:0}.comment{border-top:1px solid var(--line);padding:18px 0}.comment-meta{font-size:13px;color:var(--text-2)}.comment-content{font-size:15px} .comment-form label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px} .comment-form input,.comment-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit;margin-bottom:14px} .comment-form .submit{background:var(--gold);color:#000;border:0;border-radius:var(--pill);padding:10px 20px;font-weight:500;cursor:pointer} .pagination{display:flex;gap:8px;justify-content:center;margin:48px 0 0}.pagination .page-numbers{border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;font-size:14px;color:var(--text-2)}.pagination .current{background:var(--text);color:var(--bg);border-color:var(--text)} /* ---------- about ---------- */ .about-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,6vw,80px) 0} .about-hero:has(>:only-child){grid-template-columns:1fr;max-width:820px} .about-hero h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.5rem);line-height:1.05;letter-spacing:-.015em;font-weight:600} .about-hero img{border-radius:18px;box-shadow:var(--shadow-lift)} .heru-roles{font-size:14px;line-height:2;color:var(--text-2);letter-spacing:.02em} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:0;text-align:center} .stats div{border-top:1px solid var(--line);padding-top:18px}.stats dt{font-size:clamp(2rem,1.5rem + 2vw,3rem);font-weight:600;letter-spacing:-.015em;color:var(--text)}.stats dd{margin:4px 0 0;color:var(--text-2);font-size:14px} @media (max-width:834px){.about-hero{grid-template-columns:1fr}} /* ---------- contact / forms ---------- */ .form{display:grid;gap:16px;max-width:640px} .form label{display:grid;gap:6px;font-size:13px;color:var(--text-2)} .form input,.form textarea,.form select{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 14px;font:inherit;font-size:16px;width:100%} .form input:focus,.form textarea:focus{border-color:var(--gold);outline:none} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:600px){.form .row{grid-template-columns:1fr}} .form button{justify-self:start;border:0;cursor:pointer} .form__msg{font-size:15px;color:var(--gold-hi);min-height:1.4em} .contact-aside{display:grid;gap:18px;align-content:start} .contact-aside h3{font-size:17px}.contact-aside p{color:var(--text-2);margin:0} .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px)}@media (max-width:834px){.contact-grid{grid-template-columns:1fr}} .notify{padding:clamp(48px,7vw,88px) 0 0} .notify__in{max-width:var(--wrap);margin:0 auto;padding:clamp(30px,4vw,44px) var(--gutter);border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr auto;gap:26px 48px;align-items:end} .notify h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.25rem);line-height:1.08;letter-spacing:-.015em;font-weight:600} .notify p{color:var(--text-2);margin:8px 0 0;max-width:44ch} .notify__copy{max-width:46ch} .notify__form{display:flex;gap:10px;min-width:min(100%,420px)} @media (max-width:800px){.notify__in{grid-template-columns:1fr;align-items:start}} .notify__form input[type=email]{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--pill);color:var(--text);padding:11px 18px;font:inherit;font-size:16px} .notify__form button{border:0;cursor:pointer} .notify__msg{grid-column:1/-1;margin:0;color:var(--gold-hi);font-size:15px;min-height:1.4em} @media (max-width:480px){.notify__form{flex-direction:column}} /* ---------- shop (WooCommerce) ---------- */ .shop{padding-bottom:clamp(64px,8vw,120px)} .shop h1.page-title,.shop .woocommerce-products-header h1{font-family:var(--font);font-weight:800;font-size:clamp(2.6rem,1.5rem + 4.4vw,5rem);letter-spacing:-.04em;padding:clamp(40px,6vw,72px) 0 10px} .shop .woocommerce-result-count{color:var(--text-3);font-size:13px} .shop .woocommerce-ordering select{background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px} .shop ul.products{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px} @media (max-width:1068px){.shop ul.products{grid-template-columns:1fr 1fr}}@media (max-width:734px){.shop ul.products{grid-template-columns:1fr 1fr;gap:20px 12px}} .shop ul.products li.product{display:flex;flex-direction:column;gap:10px} .shop ul.products li.product img{border-radius:14px;background:#fff;aspect-ratio:1;object-fit:cover;width:100%} .shop ul.products li.product .woocommerce-loop-product__title{font-size:17px;font-weight:600} .shop ul.products li.product .price{color:var(--text-2);font-size:14px} .shop .button,.shop button.button,.shop .single_add_to_cart_button{background:var(--gold);color:#000;border:0;border-radius:var(--pill);padding:11px 21px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px} .shop .button:hover{background:var(--gold-hi)} .shop ul.products li.product .button{align-self:flex-start;font-size:14px;padding:8px 16px} .shop .onsale{position:absolute;background:var(--gold);color:#000;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--pill);margin:12px} .shop div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);padding:clamp(28px,5vw,64px) 0} @media (max-width:834px){.shop div.product{grid-template-columns:1fr}} .shop div.product .woocommerce-product-gallery img{border-radius:16px;background:#fff} .shop div.product .product_title{font-family:var(--font);font-weight:800;font-size:clamp(1.9rem,1.3rem + 2.2vw,3.25rem);letter-spacing:-.04em} .shop div.product .price{font-size:21px;color:var(--gold-hi);margin:12px 0} .shop div.product .woocommerce-product-details__short-description{color:var(--text-2)} .shop div.product form.cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0} .shop div.product .variations td{padding:6px 0}.shop div.product select{background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 12px} .shop div.product .quantity input{width:70px;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px} .shop .woocommerce-tabs{grid-column:1/-1}.shop .woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:20px;padding:0;margin:0 0 18px;border-bottom:1px solid var(--line)} .shop .woocommerce-tabs ul.tabs a{display:block;padding:10px 0;color:var(--text-2);font-size:14px}.shop .woocommerce-tabs ul.tabs li.active a{color:var(--text);border-bottom:2px solid var(--gold)} .shop .related.products,.shop .upsells.products{grid-column:1/-1}.shop .related h2,.shop .upsells h2{font-size:24px;margin:24px 0} .shop table.shop_table{width:100%;border-collapse:collapse}.shop table.shop_table td,.shop table.shop_table th{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left} .shop .woocommerce-message,.shop .woocommerce-info,.shop .woocommerce-error{border:1px solid var(--line);border-left:3px solid var(--gold);padding:12px 16px;border-radius:10px;margin:0 0 20px;list-style:none} .shop input.input-text,.shop .select2-container .select2-selection{background:var(--bg-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:10px 12px;height:auto!important} .shop .woocommerce-checkout #payment{background:var(--bg-2);border-radius:14px;padding:16px} .shop-empty{text-align:center;padding:80px 0;color:var(--text-2)} /* ---------- footer ---------- */ .footer{margin-top:clamp(72px,9vw,130px);border-top:1px solid var(--line-2);background:var(--bg);font-size:14px;color:var(--text-2)} .footer a:hover{color:var(--text)} .footer__top{max-width:var(--wrap);margin:0 auto;padding:clamp(44px,6vw,72px) var(--gutter) clamp(30px,4vw,48px);display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:clamp(32px,5vw,72px)} .footer__mark{display:inline-flex;align-items:center;gap:11px} .footer__mark img{height:24px;width:auto} .footer__mark span{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--text)} .footer__motto{margin:16px 0 0;max-width:30ch;color:var(--text-3);font-size:13px;line-height:1.6} .footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px} .footer__col h3{font-size:12px;letter-spacing:-.01em;color:var(--text-3);font-weight:600;margin-bottom:12px} .footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .footer__col a{color:var(--text-2);font-size:14px} .footer__handles{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-2)} @media (max-width:860px){.footer__handles{grid-template-columns:repeat(3,1fr)}} .footer__handles li{border-right:1px solid var(--line-2)} .footer__handles li:last-child{border-right:0} .footer__handles li{position:relative;overflow:hidden} .footer__handles a{position:relative;display:grid;gap:3px;padding:22px 16px 22px 0;color:var(--text-2);z-index:1} .footer__handles i{position:absolute;right:14px;top:50%;translate:0 -50%;display:block;color:var(--text);opacity:.07;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:0} .footer__handles i .icon{width:54px;height:54px} .footer__handles a:hover i{opacity:.16;transform:scale(1.08) rotate(-4deg)} .footer__handles span{font-size:12px;letter-spacing:-.01em;color:var(--text-3)} .footer__handles b{font-weight:500;font-size:14px;color:var(--text)} .footer__handles a:hover b{color:var(--gold-hi)} .footer__bottom{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter) 44px;border-top:1px solid var(--line-2);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:12px;color:var(--text-3)} .footer__bottom ul{display:flex;gap:18px;list-style:none;margin:0;padding:0} @media (max-width:900px){.footer__top{grid-template-columns:1fr;gap:34px}.footer__cols{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer__handles{grid-template-columns:1fr 1fr}.footer__handles li{border-bottom:1px solid var(--line-2)}.footer__handles li:nth-child(2n){border-right:0}} /* social icon row (used in the mobile menu and hero, not the footer) */ .socials{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0} .socials a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--text-2);transition:all var(--dur)} .socials a:hover{color:#000;background:var(--gold);border-color:var(--gold)} .socials .icon{width:18px;height:18px} .socials--labels a{width:auto;height:auto;border-radius:var(--pill);padding:8px 14px;gap:8px;display:inline-flex} /* ---------- search ---------- */ .heru-search{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--pill);padding:6px 8px 6px 16px} .heru-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:16px;outline:none} .heru-search button{background:var(--gold);color:#000;border:0;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer} .heru-search .icon{width:16px;height:16px} .search-results{display:grid;gap:18px;margin:28px 0 0} .search-results article{border-top:1px solid var(--line);padding-top:18px}.search-results .kind{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .search-results h2{font-size:21px;margin:4px 0 6px}.search-results p{color:var(--text-2);margin:0;font-size:15px} /* ---------- legacy inline apps (Donate, Order, Mix Tools) ---------- */ .heru-legacy-app{margin:24px 0 0;border-radius:16px;overflow:hidden} .heru-legacy-app>*{max-width:100%} /* ---------- page (generic) ---------- */ .page-head{padding:clamp(40px,6vw,72px) 0 20px} .page-head h1{font-size:clamp(2.25rem,1.4rem + 3.2vw,4rem);line-height:1.05;letter-spacing:-.015em;font-weight:600} .page-body{padding-bottom:clamp(48px,7vw,96px)} .press-kit img{border-radius:12px} .error-page{text-align:center;padding:120px 0}.error-page h1{font-size:clamp(4rem,10vw,8rem);color:var(--gold);font-family:var(--font);font-weight:800;} /* ---------- motion ---------- */ @media (prefers-reduced-motion:no-preference){ [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} .grid>[data-reveal]:nth-child(2),.rail__track>[data-reveal]:nth-child(2){transition-delay:.06s} .grid>[data-reveal]:nth-child(3),.rail__track>[data-reveal]:nth-child(3){transition-delay:.12s} .grid>[data-reveal]:nth-child(4){transition-delay:.18s} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__scroll{display:none}*{animation:none!important;transition-duration:.01ms!important}} /* ---------- utilities ---------- */ .mt-0{margin-top:0}.center{text-align:center}.muted{color:var(--text-2)}.gold{color:var(--gold-hi)} .stack{display:grid;gap:16px} .admin-bar .nav{top:32px}@media (max-width:782px){.admin-bar .nav{top:46px}} /* ---------- videos (archive feature + single extras), appended by the Videos templates ---------- */ .archive-head .pill{margin-top:22px} .video-feature{padding:8px 0 clamp(32px,5vw,56px)} .video-feature__copy{margin-top:18px;max-width:72ch} .video-feature__copy h2{font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);letter-spacing:-.02em;line-height:1.1;margin:6px 0 0} .video-feature__copy h2 a:hover{color:var(--gold-hi)} .video-feature__copy p:not(.eyebrow){color:var(--text-2);font-size:clamp(1rem,.95rem + .3vw,1.125rem);margin:10px 0 0} .video-page .crumbs{padding:0 0 18px} .video-page .prose{margin-top:8px} .video-page__release{margin-top:32px;border-top:1px solid var(--line);padding-top:24px} .video-page__release h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);letter-spacing:-.02em;margin:6px 0 16px} .video-page__release h2 a:hover{color:var(--gold-hi)} .video-page__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px} /* ---------- games: play-frame poster (single-heru_game.php) ---------- */ .play-frame__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8} .play-frame:hover .play-frame__poster{opacity:.9} /* ---------- book pages (appended for archive-heru_book.php / single-heru_book.php) ---------- */ .features--numbered{counter-reset:f} .prose+.features{margin-top:clamp(32px,5vw,56px)} .quotes{display:grid;gap:24px;margin-top:clamp(32px,5vw,56px)} blockquote.prose{margin:0;border-left:3px solid var(--gold);padding:6px 0 6px 24px;font-style:italic;color:var(--text-2)} blockquote.prose p{margin:0} blockquote.prose cite{display:block;margin-top:10px;font-style:normal;font-size:14px;letter-spacing:.04em;color:var(--gold-hi)} .callout__icon{width:72px;height:72px;border-radius:22%;flex:none;object-fit:cover} .get-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .get-actions .stores{display:contents} .section>.notify{padding:clamp(24px,4vw,48px) var(--gutter) 0} /* ---------- music archive ("Listen everywhere" row under the archive lede), appended by the Music templates ---------- */ .archive-head .archive-listen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:26px} .archive-head .archive-listen>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .archive-head .archive-listen .streams a{font-size:13px;padding:7px 14px 7px 10px} /* ---------- blog chips · shows · about lede · 404 actions, appended by the Blog / pages / misc templates ---------- */ .cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .cat-chips .chip{display:inline-block} .post-pages{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;font-size:14px;color:var(--text-2)} .post-pages a{color:var(--gold-hi)} .comment-reply-title{font-size:21px;margin:32px 0 16px} .comments .comment-navigation{display:flex;justify-content:space-between;gap:16px;margin:18px 0 0;font-size:14px} .comments .comment-navigation a{color:var(--gold-hi)} .comments .comment-navigation h2{display:none} .page-head .eyebrow{margin-bottom:10px} .page-head p.muted{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);max-width:60ch;margin:14px 0 0} .about-hero .lede{font-size:clamp(1.1875rem,1rem + .8vw,1.5rem);line-height:1.3;color:var(--text-2);margin:18px 0 0} .about-hero .heru-roles{margin:16px 0 0} .shows__head{font-family:var(--font);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:13px;margin:32px 0 8px} .shows__head:first-child{margin-top:0} .shows{list-style:none;margin:0 0 8px;padding:0} .show{display:grid;grid-template-columns:88px 1fr auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--line)} .show:last-child{border-bottom:1px solid var(--line)} .show__date{display:grid;line-height:1.05} .show__date b{font-size:28px;font-weight:600;letter-spacing:-.03em} .show__date span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)} .show__venue{font-size:19px;font-weight:600;letter-spacing:-.015em} .show__venue a:hover{color:var(--gold-hi)} .show__city{color:var(--text-2);font-size:15px;margin:2px 0 0} .show--past{opacity:.6} .show .pill{font-size:14px;padding:8px 16px} @media (max-width:600px){.show{grid-template-columns:72px 1fr}.show .pill{grid-column:2;justify-self:start}} .error-page p{color:var(--text-2);font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);margin:12px 0 28px} .error-page .heru-search{max-width:480px;margin:0 auto} .error-page__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px} .archive-body .error-page__actions{justify-content:flex-start;margin-top:8px} .archive-head .heru-search{max-width:560px;margin-top:22px} /* ---------- cover wall (full-bleed marquee of real album art) ---------- */ .wall{padding:clamp(56px,9vw,110px) 0 clamp(44px,7vw,88px);overflow:hidden;position:relative} .wall .section-head{max-width:var(--wrap);margin:0 auto clamp(28px,4vw,44px);padding:0 var(--gutter)} .wall__rows{display:grid;gap:clamp(10px,1.4vw,18px)} .wall__row{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;will-change:transform} .wall__row--a{animation:wall-a 78s linear infinite} .wall__row--b{animation:wall-b 94s linear infinite} .wall__row a{display:block;position:relative;flex:none;width:clamp(112px,13vw,176px);aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--bg-2);transition:transform .45s var(--ease)} .wall__row img{width:100%;height:100%;object-fit:cover} .wall__row a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border-radius:9px} .wall__row a:hover{transform:translateY(-6px) scale(1.03);z-index:2} .wall:hover .wall__row{animation-play-state:paused} .wall::before,.wall::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,10vw,160px);z-index:3;pointer-events:none} .wall::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .wall::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)} @keyframes wall-a{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes wall-b{from{transform:translateX(-50%)}to{transform:translateX(0)}} @media (prefers-reduced-motion:reduce){.wall__row{animation:none}.wall__rows{overflow-x:auto;scrollbar-width:none}} /* ---------- a section band that follows the mode ---------- */ .band{background:var(--tile-bg-alt);color:var(--text)} .band .link-more{color:var(--accent)} /* ---------- split tile (copy one side, art the other) ---------- */ .tile--split{grid-template-columns:1fr 1fr;align-items:center;text-align:left;min-height:clamp(460px,58vh,640px)} .tile--split .tile__copy{text-align:left;margin:0;padding:clamp(36px,4vw,64px) clamp(24px,3vw,56px)} .tile--split .tile__ctas{justify-content:flex-start} .tile--split .tile__media{align-self:center;margin:0;padding:0 clamp(20px,3vw,48px) 0 0} .tile--split .tile__media img{border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.45);max-height:min(74vh,600px);width:auto;max-width:100%;margin-inline:auto} .tile--split .tile__media{padding:clamp(28px,4vw,56px) clamp(24px,3vw,52px)} .tile--split.tile--icon .tile__media img{width:min(70%,290px);height:auto;border-radius:23%;margin:0 auto} .tile--split.tile--book .tile__media img{border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.35)} @media (max-width:833px){.tile--split{grid-template-columns:1fr;text-align:center;min-height:0}.tile--split .tile__copy{text-align:center;padding-bottom:0}.tile--split .tile__ctas{justify-content:center}.tile--split .tile__media{padding:0 clamp(20px,6vw,40px) clamp(30px,5vw,44px)}} /* ---------- stat strip ---------- */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border-block:1px solid var(--line-2)} .strip div{background:var(--bg);padding:clamp(26px,4vw,44px) clamp(14px,2vw,24px);text-align:center} .strip b{display:block;font-family:var(--font);font-weight:800;font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);letter-spacing:-.04em;color:var(--text)} .strip span{display:block;margin-top:6px;font-size:13px;letter-spacing:.02em;color:var(--text-2)} @media (max-width:640px){.strip{grid-template-columns:1fr 1fr}} /* ---------- light mode adjustments ---------- */ .theme-toggle{line-height:0} .theme-toggle .icon{width:16px;height:16px} /* the cover wall fades into whatever the page ground is */ .wall::before{background:linear-gradient(90deg,var(--bg),transparent)} .wall::after{background:linear-gradient(270deg,var(--bg),transparent)} /* badges sit on artwork, so they stay dark in both modes */ .badge{background:rgba(0,0,0,.72);color:var(--gold)} /* chips row scrim follows the ground */ .chips{background:linear-gradient(var(--bg) 80%,transparent)} /* prose links */ .prose a{color:var(--accent)} .link-more{color:var(--accent)} .rail .link-more,.section-head .link-more{color:var(--accent)} .footer__handles a:hover b{color:var(--accent)} /* WooCommerce surfaces */ .shop .button,.shop button.button,.shop .single_add_to_cart_button{color:#000} .shop div.product .price{color:var(--accent)} .notify__msg{color:var(--accent)} .form__msg{color:var(--accent)} /* ---------- pixel sprite standing in a tile ---------- */ .tile__sprite{position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:2;width:auto;height:clamp(96px,11vw,132px);image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));pointer-events:none;transition:transform .5s var(--ease)} .tile--sprite:hover .tile__sprite{transform:translateY(-8px)} .tile--sprite .tile__copy{padding-bottom:clamp(10px,2vw,20px)} @media (prefers-reduced-motion:reduce){.tile--sprite:hover .tile__sprite{transform:none}} /* ---------- device mock inside a tile ---------- */ .tile--device .tile__media{position:relative;justify-items:center;align-items:end;padding:0} .tile--device .tile__media img{width:min(30%,132px);margin:0 0 clamp(20px,5%,44px);position:relative;z-index:3; translate:calc(-1 * clamp(52px,7.5vw,78px)) 0;rotate:-4deg; filter:drop-shadow(0 18px 38px rgba(0,0,0,.42));transition:translate .6s var(--ease),rotate .6s var(--ease),filter .5s var(--ease)} .tile__phone{position:absolute;left:50%;bottom:0;translate:calc(-50% + clamp(32px,4.6vw,52px)) 0;rotate:3deg;transform-origin:50% 100%; width:min(40%,188px);z-index:1;border-radius:clamp(17px,2.3vw,27px) clamp(17px,2.3vw,27px) 0 0;overflow:hidden;padding:5px 5px 0; background:#0b0b0d;box-shadow:0 -14px 48px rgba(0,0,0,.42),0 0 0 1px var(--line); transition:translate .6s var(--ease),rotate .6s var(--ease),box-shadow .6s var(--ease)} .tile__phone img{width:100%;height:auto;display:block;border-radius:clamp(13px,1.8vw,22px) clamp(13px,1.8vw,22px) 0 0} .tile--device .tile__copy{padding-bottom:clamp(10px,2vw,22px)} @media (max-width:833px){.tile__phone{width:min(46%,166px)}.tile--device .tile__media img{width:min(34%,116px)}} /* ========================================================================== Editorial: long-form reading, and the legacy markup inside older posts ========================================================================== */ /* ---------- measure and rhythm ---------- */ .post-body .prose{font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.6;letter-spacing:-.011em;max-width:none} .post-body .wrap--narrow{max-width:720px} .prose>p:first-of-type{font-size:1.18em;line-height:1.5;color:var(--text);letter-spacing:-.014em} .prose h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.125rem);line-height:1.12;letter-spacing:-.018em;margin:2em 0 .5em} .prose h3{font-size:clamp(1.25rem,1rem + .8vw,1.5rem);line-height:1.2;letter-spacing:-.014em;margin:1.7em 0 .4em} .prose h4{font-size:1.125em;margin:1.5em 0 .35em} .prose p{margin:0 0 1.15em} .prose strong{font-weight:600} .prose hr{border:0;border-top:1px solid var(--line-2);margin:2.4em 0} .prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em} .prose li{margin:.35em 0} .prose li::marker{color:var(--text-3)} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)} .prose a:hover{text-decoration-color:var(--accent)} /* ---------- figures, images, galleries ---------- */ .prose figure,.prose .wp-block-image{margin:2em 0} .prose img{border-radius:12px;height:auto} .prose figcaption,.prose .wp-element-caption{font-size:.8em;line-height:1.5;color:var(--text-3);margin-top:.7em;text-align:left} .prose .aligncenter{margin-inline:auto;text-align:center} .prose .alignwide{width:min(100vw - 2 * var(--gutter),980px);margin-inline:calc(50% - min(50vw - var(--gutter),490px))} .prose .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:2em 0} .prose .wp-block-gallery figure{margin:0} .prose .wp-block-embed{margin:2em 0} .prose .wp-block-embed__wrapper{position:relative} .prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px} /* media + text blocks (used heavily in the older posts) */ .prose .wp-block-media-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px);align-items:center;margin:2.2em 0} .prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2} .prose .wp-block-media-text__media img{width:100%;border-radius:12px} .prose .wp-block-media-text__content{padding:0} .prose .wp-block-media-text__content p:last-child{margin-bottom:0} @media (max-width:640px){.prose .wp-block-media-text{grid-template-columns:1fr}.prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:0}} /* ---------- quotes, code, tables ---------- */ .prose blockquote{margin:1.8em 0;padding:0 0 0 1.1em;border-left:3px solid var(--gold);color:var(--text);font-size:1.1em;line-height:1.45;letter-spacing:-.014em} .prose blockquote p:last-child{margin-bottom:0} .prose blockquote cite{display:block;margin-top:.6em;font-size:.8em;font-style:normal;color:var(--text-3)} .prose pre,.prose .wp-block-code{background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:.85em;line-height:1.5;margin:1.6em 0} .prose code{background:var(--bg-2);border-radius:5px;padding:.12em .38em;font-size:.88em} .prose pre code{background:none;padding:0} .prose table{width:100%;border-collapse:collapse;font-size:.9em;margin:1.8em 0;display:block;overflow-x:auto} .prose th,.prose td{border-bottom:1px solid var(--line-2);padding:11px 10px;text-align:left;vertical-align:top} .prose th{font-weight:600;color:var(--text)} /* ---------- legacy blocks carried over from the old theme ---------- Older posts ship hardcoded colours (dark panels, gold text) that only worked on a dark page. These map them onto the current palette so posts read in both modes. */ .prose .eh-sec{background:var(--bg-2)!important;color:var(--text)!important;border:1px solid var(--line-2);border-radius:14px;padding:clamp(20px,3vw,30px)!important;margin:1.6em 0!important} .prose .eh-sec *{color:inherit} .prose .eh-sec a{color:var(--accent)} .prose .eh-num{background:var(--gold)!important;color:#1a1a1a!important;flex:none} .prose .ehn{border-left:3px solid var(--gold);padding:2px 0 2px 20px;margin:0 0 2em} .prose .ehn .k{display:block;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.5em} .prose .ehkey{border:1px solid var(--line);border-radius:12px;padding:clamp(16px,2.4vw,24px);margin:1.8em 0;background:var(--bg-2)} .prose .ehfig{margin:2em 0} .prose .ehfig img{width:100%;border-radius:12px} .prose .ehfig figcaption{font-size:.82em;line-height:1.6;color:var(--text-2);margin-top:.7em;padding-left:12px;border-left:2px solid var(--gold)} .prose .yr{color:var(--gold);font-weight:600} /* gold text baked into old inline styles: keep the intent, fix the contrast */ .prose [style*="#ff9900"],.prose [style*="#C9A227"],.prose [style*="#c9a227"], .prose [style*="#d8b45a"],.prose [style*="#f0d68a"],.prose [style*="#b9b1a0"]{color:var(--accent)!important} .prose [style*="background:#2c2c2c"],.prose [style*="background-color:#2c2c2c"]{background:var(--bg-2)!important;color:var(--text)!important} /* ---------- related reading ---------- */ .post-related{margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line-2);padding-top:clamp(28px,4vw,44px)} .post-related h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:20px} .post-related .post-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 18px} .post-related .post-card h2{font-size:17px;margin:0} /* ---------- blog index: a real feature slot ---------- */ .post-card--feature{grid-column:1/-1;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(20px,4vw,44px);padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line-2);margin-bottom:clamp(8px,1.5vw,16px)} .post-card--feature .post-card__media{aspect-ratio:4/3;border-radius:16px} .post-card--feature h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem);line-height:1.1;letter-spacing:-.02em} .post-card--feature p{font-size:1.0625rem;line-height:1.5} @media (max-width:734px){.post-card--feature{grid-template-columns:1fr}} .post-card .cat{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--accent);text-transform:none} .post-card time{font-size:13px;color:var(--text-3)} .post-card h2{letter-spacing:-.018em} /* ========================================================================== Range, quote, and the game tile that comes alive ========================================================================== */ /* ---------- disciplines: the range of the work, said once, plainly ---------- */ .disciplines{padding:clamp(64px,10vw,132px) 0 clamp(56px,8vw,110px);text-align:center} .disciplines .eyebrow{margin-bottom:8px} .disciplines__title{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);line-height:1.06;letter-spacing:-.018em;font-weight:600;margin:0 0 clamp(28px,4vw,48px);text-wrap:balance} .disciplines__title em{font-style:normal;color:var(--text-2)} .disciplines__list{list-style:none;margin:0 auto;padding:0;max-width:min(100%,1040px);text-align:center; font-size:clamp(1.0625rem,.85rem + .8vw,1.5rem);line-height:1.55;letter-spacing:-.016em;font-weight:600;color:var(--text)} .disciplines__list li{display:inline-block;white-space:nowrap} .disciplines__list i{display:inline-block;vertical-align:-.08em;margin:0 .34em;color:var(--gold);opacity:.75} .disciplines__list i .icon{width:.72em;height:.72em} @media (max-width:600px){.disciplines__list{line-height:1.6}.disciplines__list i{margin:0 .26em}} /* ---------- pull quote ---------- */ .quoteband{padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--line-2)} .quoteband figure{margin:0 auto;max-width:min(100%,900px);text-align:center} .quoteband blockquote{margin:0;border:0;padding:0} .quoteband blockquote p{font-size:clamp(1.375rem,.95rem + 1.7vw,2.375rem);line-height:1.22;letter-spacing:-.02em;font-weight:600;color:var(--text);margin:0;text-wrap:balance} .quoteband figcaption{margin-top:clamp(14px,1.6vw,22px);font-size:15px;letter-spacing:-.01em;color:var(--gold)} /* ---------- the game tile comes alive on hover ---------- */ /* The sprite strolls and hops; the key art drifts and warms behind it. */ .tile--sprite .tile__media img,.tile--sprite .tile__media picture{transition:transform 1.2s var(--ease),filter .6s var(--ease)} .tile--sprite::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;z-index:2;opacity:0;transition:opacity .55s var(--ease);background:radial-gradient(60% 100% at 50% 100%,rgba(240,214,138,.34) 0%,rgba(240,214,138,.09) 45%,transparent 72%)} .tile--sprite .tile__sprite{z-index:2;transition:filter .4s var(--ease);will-change:transform} .tile--sprite:hover::before,.tile--sprite:focus-within::before{opacity:1} .tile--sprite:hover .tile__media img,.tile--sprite:focus-within .tile__media img{transform:scale(1.045)} .tile--sprite:hover .tile__sprite,.tile--sprite:focus-within .tile__sprite{ animation:heru-stroll 7.5s cubic-bezier(.42,0,.58,1) infinite,heru-face 7.5s steps(1,end) infinite,heru-hop .44s ease-in-out infinite; filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))} /* Three separate properties so three animations can run at once: `translate` walks it, `scale` turns it around at each end, `transform` gives it the hop. */ @keyframes heru-stroll{ 0%{translate:calc(-50% - 9vw) 0} 50%{translate:calc(-50% + 9vw) 0} 100%{translate:calc(-50% - 9vw) 0}} @keyframes heru-face{0%{scale:1 1}50%{scale:-1 1}100%{scale:1 1}} @keyframes heru-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}} @media (prefers-reduced-motion:reduce){ .tile--sprite:hover .tile__sprite,.tile--sprite:focus-within .tile__sprite{animation:none} .tile--sprite:hover .tile__media img{transform:none}} /* ---------- footer creed: the motto, centred, on its own line ---------- */ .footer__creed{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,3.4vw,40px) var(--gutter);border-top:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .footer__creed .icon{width:18px;height:18px;color:var(--gold);opacity:.8} .footer__creed p{margin:0;font-size:clamp(15px,.9rem + .35vw,19px);line-height:1.4;letter-spacing:-.015em;color:var(--text-2);max-width:34ch;text-wrap:balance} /* ========================================================================== Reading: the blog gets its own wider page ========================================================================== */ .wrap--reading{max-width:1080px} /* progress bar, pinned under the global nav */ .readbar{position:fixed;top:var(--nav-h);left:0;right:0;height:2px;z-index:99;pointer-events:none;background:transparent} .readbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));transition:width .12s linear} /* hero */ .post-hero{padding:clamp(34px,5.5vw,72px) 0 clamp(18px,2.6vw,30px);text-align:center;max-width:860px;margin:0 auto} .post-hero h1{font-size:clamp(2.125rem,1.3rem + 3.4vw,3.5rem);line-height:1.06;letter-spacing:-.02em;font-weight:600;margin:14px 0 0;text-wrap:balance} .post-hero__lede{font-size:clamp(1.125rem,1rem + .7vw,1.4375rem);line-height:1.36;letter-spacing:-.014em;color:var(--text-2);margin:16px auto 0;max-width:44ch;text-wrap:pretty} .post-hero .byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin:22px 0 0;font-size:14px;color:var(--text-2)} .post-hero .byline img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none} .post-hero .byline > span:first-of-type{color:var(--text);font-weight:500} .post-hero .byline time::before,.post-hero .byline span + span::before,.post-hero .byline time + span::before{content:"·";margin-right:10px;color:var(--text-3)} .post-hero__media{margin:clamp(18px,3vw,34px) auto 0;border-radius:clamp(12px,1.6vw,20px);overflow:hidden;max-width:100%} .post-hero__media img{width:100%} /* the two-column reading grid */ .post-body{padding:clamp(28px,4vw,54px) 0 clamp(56px,7vw,104px)} .reading{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center} .reading__main{min-width:0;max-width:min(100%,760px);margin-inline:auto;width:100%} @media (min-width:1069px){ .reading--toc{grid-template-columns:216px minmax(0,1fr);gap:clamp(36px,4.4vw,72px)} .reading--toc .reading__main{margin-inline:0} } /* outline rail */ .toc{min-width:0} .toc__box{border:0} .toc__box summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text-3);padding:0 0 12px} .toc__box summary::-webkit-details-marker{display:none} .toc__box summary .icon{width:14px;height:14px;transition:transform var(--dur) var(--ease)} .toc__box[open] summary .icon{transform:rotate(90deg)} .toc__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-left:1px solid var(--line-2)} .toc__list a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;line-height:1.35;letter-spacing:-.01em;color:var(--text-2);transition:color .25s var(--ease),border-color .25s var(--ease)} .toc__list a:hover{color:var(--text)} .toc__l3 a{padding-left:26px;font-size:13px;color:var(--text-3)} .toc__list .is-current a{color:var(--gold-hi);border-left-color:var(--gold)} @media (min-width:1069px){ .toc{position:sticky;top:calc(var(--nav-h) + 26px);align-self:start;max-height:calc(100svh - var(--nav-h) - 60px);overflow-y:auto;scrollbar-width:thin} .toc__box summary{pointer-events:none} .toc__box summary .icon{display:none} } @media (max-width:1068px){ .toc{margin:0 auto clamp(24px,4vw,36px);max-width:760px;width:100%;border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;background:var(--soft)} .toc__box summary{padding-bottom:0} .toc__box[open] summary{padding-bottom:12px} } /* a wider page, but the line length stays readable; media is free to break out */ .post-body .prose{font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.62;letter-spacing:-.011em;max-width:none} .post-body .prose > p,.post-body .prose > ul,.post-body .prose > ol, .post-body .prose > h2,.post-body .prose > h3,.post-body .prose > h4, .post-body .prose > blockquote,.post-body .prose > .ehn,.post-body .prose > .ehkey{max-width:68ch} .post-body .prose h2{scroll-margin-top:calc(var(--nav-h) + 26px)} .post-body .prose h3{scroll-margin-top:calc(var(--nav-h) + 26px)} .post-body .prose > figure,.post-body .prose > .wp-block-image,.post-body .prose > .ehfig, .post-body .prose > .wp-block-gallery,.post-body .prose > .wp-block-embed,.post-body .prose > .eh-sec, .post-body .prose > table,.post-body .prose > pre{max-width:none} .post-body .prose > h2:first-child,.post-body .prose > h3:first-child{margin-top:0} .post-updated{margin:2em 0 0;font-size:13px;color:var(--text-3)} /* author box gains an action */ .author-box{gap:18px} .author-box > div{flex:1;min-width:0} .author-box .pill{flex:none;font-size:14px;padding:8px 16px} @media (max-width:520px){.author-box{flex-wrap:wrap}.author-box .pill{width:100%;justify-content:center}} /* comments follow the text column instead of re-centring themselves */ .reading__main .comments{max-width:none;margin-left:0;margin-right:0} /* ========================================================================== Donate ========================================================================== */ .donate-hero{text-align:center;max-width:760px;margin:0 auto;padding:clamp(38px,6vw,86px) 0 clamp(8px,1.5vw,20px)} .donate-hero__mark{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;margin-bottom:20px;color:var(--gold);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--gold) 26%,transparent) 0%,transparent 70%)} .donate-hero__mark .icon{width:34px;height:34px;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--gold) 55%,transparent))} .donate-hero h1{font-size:clamp(2.25rem,1.3rem + 3.8vw,3.75rem);line-height:1.05;letter-spacing:-.02em;font-weight:600;margin:0} .donate-hero .lede{font-size:clamp(1.0625rem,1rem + .55vw,1.375rem);line-height:1.44;letter-spacing:-.014em;color:var(--text-2);margin:18px auto 0;max-width:56ch;text-wrap:pretty} .give{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,20px)} .give__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:clamp(22px,2.6vw,30px);border:1px solid var(--line-2);border-radius:20px;background:var(--bg-2);transition:border-color .3s var(--ease),transform .45s var(--ease)} .give__card:hover{border-color:color-mix(in srgb,var(--gold) 42%,transparent);transform:translateY(-3px)} .give__head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:20px} .give__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)} .give__mark .icon{width:21px;height:21px} .give__head h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0} .give__head p{margin:2px 0 0;font-size:12.5px;color:var(--text-3)} .give__qr{background:#fff;border-radius:14px;padding:12px;line-height:0;box-shadow:0 6px 22px rgba(0,0,0,.14)} .give__qr img{width:132px;height:132px;image-rendering:pixelated;shape-rendering:crispEdges} .give__qr--lg img{width:172px;height:172px} .give__label{margin:18px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)} .give__value{margin:7px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;letter-spacing:0;color:var(--text);word-break:break-all;max-width:30ch} .give__value--tag{font-size:16px;letter-spacing:.06em} .give__copy{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:9px 18px;border-radius:var(--pill);border:1px solid var(--btn-outline);background:none;color:var(--text);font-size:14px;cursor:pointer;transition:background .3s,border-color .3s,color .3s} .give__copy:hover{background:var(--btn-soft);border-color:var(--btn-outline-hi)} .give__copy .icon{width:15px;height:15px} .give__copy.is-copied{background:var(--gold);border-color:var(--gold);color:#000} .give__tag{width:100%;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)} .give__tag .give__label{margin-top:0;color:var(--gold)} .give__note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3);max-width:34ch;margin-inline:auto} .cashapp{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center} .cashapp__copy p{color:var(--text-2);margin:14px 0 0;max-width:44ch} .cashapp .section-title{margin-top:2px} .cashapp__tag{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:600;letter-spacing:-.02em;color:var(--gold);margin:16px 0 0!important} .cashapp__ctas{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px} .cashapp__ctas .give__copy{margin-top:0} @media (max-width:734px){.cashapp{grid-template-columns:1fr;justify-items:center;text-align:center}.cashapp__copy p,.give__note{margin-inline:auto}.cashapp__ctas{justify-content:center}} .give-alt{display:grid;border-top:1px solid var(--line-2)} .give-alt__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line-2);transition:padding-left .35s var(--ease)} .give-alt__row:hover{padding-left:12px} .give-alt__row h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0} .give-alt__row p{margin:4px 0 0;color:var(--text-2);font-size:15px} .give-alt__row .icon{width:18px;height:18px;flex:none;color:var(--text-3);transition:color .3s,transform .35s var(--ease)} .give-alt__row:hover .icon{color:var(--gold);transform:translateX(3px)} .gratitude{text-align:center;display:grid;justify-items:center;gap:16px} .gratitude__mark .icon{width:26px;height:26px;color:var(--gold);opacity:.75} .gratitude p{margin:0;font-size:clamp(1rem,1rem + .35vw,1.1875rem);line-height:1.55;color:var(--text-2);max-width:52ch;text-wrap:pretty} /* ---------- press photos ---------- */ .press-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,26px)} .press-photos figure{margin:0} .press-photos figure > a{display:block;border-radius:14px;overflow:hidden;background:var(--bg-2)} .press-photos img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)} .press-photos figure:hover img{transform:scale(1.03)} .press-photos figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;color:var(--text-3)} .press-photos figcaption a{display:inline-flex;align-items:center;gap:6px;color:var(--accent)} .press-photos figcaption a:hover{text-decoration:underline;text-underline-offset:3px} .press-photos figcaption .icon{width:15px;height:15px} .press-photos__note{margin:22px 0 0;font-size:14px;color:var(--text-3);max-width:60ch} /* ---------- book editions ---------- */ .editions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.5vw,18px);margin:0 0 clamp(24px,3vw,36px);padding:0;list-style:none} .editions li{border:1px solid var(--line-2);border-radius:16px;padding:22px;background:var(--bg-2);display:grid;gap:6px;align-content:start} .editions b{font-size:19px;font-weight:600;letter-spacing:-.015em} .editions span{font-size:14px;color:var(--text-2)} .editions em{font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--gold);font-weight:600} /* ========================================================================== Tile hovers: each thing moves the way that thing would move ========================================================================== */ /* A wash that follows the cursor, on every tile. --mx/--my/--px/--py come from JS. */ .tile{--mx:50%;--my:50%;--px:0;--py:0;--spring:cubic-bezier(.34,1.56,.64,1)} .tile__glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s var(--ease); background:radial-gradient(460px circle at var(--mx) var(--my),color-mix(in srgb,var(--gold) 20%,transparent) 0%,transparent 68%)} @media (hover:hover) and (pointer:fine){ .tile:hover .tile__glow{opacity:1} /* the whole mosaic lifts a little under the cursor */ .tile{transition:box-shadow .5s var(--ease),transform .5s var(--ease)} .tile:hover{box-shadow:0 26px 70px rgba(0,0,0,.24)} /* discrete objects tilt toward the cursor */ .tile--icon .tile__media,.tile--book .tile__media,.tile--shot .tile__media{ transition:transform .6s var(--ease)} .tile--icon:hover .tile__media,.tile--book:hover .tile__media,.tile--shot:hover .tile__media{ transform:perspective(1100px) rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -5deg))} /* app icons hop and land with a little squash */ .tile--icon .tile__media img{transform-origin:50% 100%;transition:filter .45s var(--ease),box-shadow .45s var(--ease)} .tile--icon:hover .tile__media img{animation:heru-hop-icon .82s var(--spring) 1;box-shadow:0 34px 70px rgba(0,0,0,.5)} @keyframes heru-hop-icon{ 0%{transform:translateY(0) scale(1,1)} 16%{transform:translateY(-22px) scale(.955,1.055)} 38%{transform:translateY(0) scale(1.065,.94)} 56%{transform:translateY(-9px) scale(.985,1.025)} 76%{transform:translateY(0) scale(1.035,.968)} 100%{transform:translateY(0) scale(1,1)}} /* the app and its phone fan apart, and drift with the cursor */ .tile--device:hover .tile__media img{translate:calc(-1 * clamp(72px,10vw,112px) + var(--px) * 9px) -8px;rotate:-7deg; filter:drop-shadow(0 26px 48px rgba(0,0,0,.5))} .tile--device:hover .tile__phone{translate:calc(-50% + clamp(48px,6.6vw,76px) + var(--px) * 16px) -10px;rotate:5deg; box-shadow:0 -22px 64px rgba(0,0,0,.5),0 0 0 1px var(--line)} /* the book tips open on its spine and catches the light */ .tile--book .tile__media{perspective:1500px;position:relative} .tile--book .tile__media img{transform-origin:0% 50%;transition:transform .7s var(--spring),box-shadow .7s var(--ease),filter .7s var(--ease)} .tile--book:hover .tile__media img{transform:rotateY(-14deg) translateZ(20px) translateY(-10px); box-shadow:-32px 28px 72px rgba(0,0,0,.44);filter:brightness(1.05)} /* the video pushes in slowly and the play mark breathes a ring */ .tile--video .tile__media img{transition:transform 1.6s var(--ease),opacity .6s var(--ease),filter .8s var(--ease)} .tile--video:hover .tile__media img{transform:scale(1.07);opacity:calc(var(--art-op) + .06);filter:saturate(1.12)} .tile__playmark{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:grid;place-items:center; width:clamp(58px,7vw,80px);height:clamp(58px,7vw,80px);border-radius:50%;pointer-events:none; background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.34);color:#fff;opacity:.9;transition:opacity .4s var(--ease),transform .5s var(--spring)} .tile__playmark .icon{width:44%;height:44%;translate:6% 0} .tile__playmark::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.5);opacity:0} .tile--video:hover .tile__playmark{opacity:1;transform:scale(1.12)} .tile--video:hover .tile__playmark::after{animation:heru-ring 1.9s var(--ease) infinite} @keyframes heru-ring{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}} /* the post pushes in and draws a rule under its headline */ .tile--post .tile__media img{transition:transform 1.4s var(--ease)} .tile--post:hover .tile__media img{transform:scale(1.06)} .tile--post .tile__title{display:inline-block} .tile--post .tile__title::after{content:"";display:block;height:2px;margin-top:.18em;border-radius:2px;background:var(--gold); transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)} .tile--post:hover .tile__title::after{transform:scaleX(1)} /* merch floats up off the tile floor */ .tile--shot .tile__media img{transition:transform .6s var(--spring),box-shadow .6s var(--ease)} .tile--shot:hover .tile__media img{transform:translateY(-14px) scale(1.02);box-shadow:0 -24px 64px rgba(0,0,0,.32)} /* the support tile warms, like a sun coming up behind it */ .tile--sun::before{content:"";position:absolute;left:50%;bottom:-38%;translate:-50% 0;z-index:0;pointer-events:none; width:min(120%,860px);aspect-ratio:1;border-radius:50%;opacity:0; background:radial-gradient(circle,color-mix(in srgb,var(--gold) 30%,transparent) 0%,transparent 66%); transition:opacity .7s var(--ease),transform .9s var(--ease)} .tile--sun:hover::before{opacity:1;animation:heru-breathe 4.6s ease-in-out infinite} @keyframes heru-breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.09)}} /* the game tile: sprite strolls, art drifts, gold rises off the floor */ .tile--sprite .tile__media img{transition:transform 1.2s var(--ease),filter .6s var(--ease)} .tile--sprite::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;z-index:2;opacity:0; transition:opacity .55s var(--ease); background:radial-gradient(60% 100% at 50% 100%,rgba(240,214,138,.34) 0%,rgba(240,214,138,.09) 45%,transparent 72%)} .tile--sprite .tile__sprite{z-index:2;transition:filter .4s var(--ease);will-change:transform} .tile--sprite:hover::before,.tile--sprite:focus-within::before{opacity:1} .tile--sprite:hover .tile__media img,.tile--sprite:focus-within .tile__media img{transform:scale(1.045)} .tile--sprite:hover .tile__sprite,.tile--sprite:focus-within .tile__sprite{ animation:heru-stroll 7.5s cubic-bezier(.42,0,.58,1) infinite,heru-face 7.5s steps(1,end) infinite,heru-hop .44s ease-in-out infinite; filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))} } /* Three separate properties so three animations can run at once: `translate` walks it, `scale` turns it around at each end, `transform` gives it the hop. */ @keyframes heru-stroll{ 0%{translate:calc(-50% - 9vw) 0} 50%{translate:calc(-50% + 9vw) 0} 100%{translate:calc(-50% - 9vw) 0}} @keyframes heru-face{0%{scale:1 1}50%{scale:-1 1}100%{scale:1 1}} @keyframes heru-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}} @media (prefers-reduced-motion:reduce){ .tile__glow{display:none} .tile--icon:hover .tile__media img,.tile--video:hover .tile__playmark::after, .tile--sun:hover::before,.tile--book:hover .tile__media::after, .tile--sprite:hover .tile__sprite,.tile--sprite:focus-within .tile__sprite{animation:none} .tile--book:hover .tile__media img,.tile--device:hover .tile__phone,.tile--device:hover .tile__media img, .tile--video:hover .tile__media img,.tile--post:hover .tile__media img, .tile--shot:hover .tile__media img,.tile--icon:hover .tile__media, .tile--book:hover .tile__media,.tile--shot:hover .tile__media{transform:none;translate:none;rotate:none} } /* ---------- footer social marks take their brand colour on hover ---------- */ .footer__handles a:hover i{opacity:.5;transform:scale(1.06)} .footer__handles a:hover .icon-instagram{color:#e1306c} .footer__handles a:hover .icon-tiktok{color:#25f4ee} .footer__handles a:hover .icon-youtube{color:#ff0000} .footer__handles a:hover .icon-cashapp{color:#00d632} .footer__handles a:hover .icon-spotify{color:#1db954} .footer__handles a:hover .icon-facebook{color:#1877f2} .footer__handles a:hover .icon-apple,.footer__handles a:hover .icon-x, .footer__handles a:hover .icon-threads{color:var(--text)} .footer__handles a{transition:background .45s var(--ease)} .footer__handles a:hover{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 8%,transparent))} /* ---------- about: the mark, not a portrait ---------- */ .about-hero__mark{display:grid;place-items:center;position:relative;padding:clamp(20px,4vw,52px)} .about-hero__mark::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--gold) 22%,transparent) 0%,transparent 62%)} .about-hero__mark img{position:relative;width:min(78%,380px);height:auto;border-radius:0;box-shadow:none; filter:drop-shadow(0 22px 44px rgba(0,0,0,.32))} @media (max-width:834px){.about-hero__mark{padding-top:0}.about-hero__mark img{width:min(62%,300px)}}