/* =====================================================================
majd.css — shared design system for xinpengliu.work
Load on every page:
Pairs with assets/majd.js.
Sections
1 tokens :root custom properties
2 base + layout .wrap .sr .skip, headings
3 grain
4 nav pill .nav .navtop .brand .hamb .navmenu
5 pills + buttons .pill .bigbtn .soc
6 rolling link .roll / .arrowlink .abox
7 hairline rows .svc .svcrow .tags
8 cards .pcard .pshot / .rcard / .ncard
9 black panel .panel .facts .fact
10 footer + ghost .foot .fgrid .fbot .ghostwrap .ghost
11 content blocks .stmt (scroll-fill), .grid2 .grid3 .grid4
12 responsive
13 PAGE: home hero .hero .heroin .h1box .deco .heromid
.heroslot .herofoot + .cardwrap .card3d .face
===================================================================== */
/* ============================== 1 tokens ============================== */
:root{
--bg:#faf7f3;
--ink:#111111;
--cream:#faf7f3;
--mute:rgba(17,17,17,.62);
--hair:rgba(17,17,17,.14);
--ghost:rgba(17,17,17,.10);
--gut:clamp(20px,9.0278vw,130px); /* 130px @1440 */
--maxw:1180px;
--r:20px;
--fs-h1:clamp(52px,12.0833vw,174px); /* 174 @1440 */
--fs-h2:clamp(40px,5.2778vw,76px); /* 76 @1440 */
--fs-h2s:clamp(38px,4.7222vw,68px); /* 68 @1440 */
--fs-h3:clamp(22px,2.2222vw,32px); /* 32 @1440 */
--fs-stmt:clamp(22px,2.5vw,36px); /* 36 @1440 */
--fs-lg:clamp(19px,1.5278vw,22px); /* 22 @1440 */
--fs-md:clamp(16px,1.25vw,18px); /* 18 @1440 */
--fs-sm:clamp(14px,1.1111vw,16px); /* 16 @1440 */
--ease:cubic-bezier(.76,0,.24,1);
}
/* ============================== 2 base ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:var(--fs-md);line-height:1.4;letter-spacing:-.04em;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
/* focus must stay visible on ink surfaces (a11y audit) */
.nav :focus-visible,.foot :focus-visible,.panel :focus-visible,.rcard :focus-visible,.ncard :focus-visible{outline-color:var(--cream)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);
padding:12px 18px;border-radius:12px}
.skip:focus{left:16px;top:16px}
.wrap{width:100%;max-width:calc(var(--maxw) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1{font-size:var(--fs-h1);font-weight:800;line-height:.9;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:600;line-height:1;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.2;letter-spacing:-.02em}
/* ============================== 3 grain ============================== */
.grain{position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.42;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply}
/* ============================== 4 nav pill ============================== */
.nav{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:800;
width:min(320px,calc(100vw - 40px));height:60px;background:var(--ink);border-radius:var(--r);
padding:16px;color:var(--cream);overflow:hidden;
transition:height .45s var(--ease)}
.navtop{display:flex;align-items:center;justify-content:space-between;height:28px}
.brand{font-size:var(--fs-lg);font-weight:600;line-height:1.4;letter-spacing:-.04em}
.hamb{width:36px;height:36px;flex:none;margin:-4px -4px -4px 0;border:0;border-radius:12px;
background:var(--cream);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.hamb svg{width:18px;height:18px;display:block}
.hamb .ic-x{display:none}
.nav[data-open="true"] .hamb .ic-x{display:block}
.nav[data-open="true"] .hamb .ic-d{display:none}
.navmenu{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px}
.nav:not([data-open="true"]) .navmenu{visibility:hidden;pointer-events:none}
.no-js .nav{height:auto}
.no-js .nav .navmenu{visibility:visible;pointer-events:auto}
/* ============================== 5 pills + buttons ============================== */
.pill{display:inline-block;background:var(--cream);color:var(--ink);border-radius:10px;
padding:6px 14px;font-size:var(--fs-md);line-height:1.28;letter-spacing:-.04em}
.bigbtn{display:block;width:100%;text-align:center;margin-top:24px;background:var(--cream);
color:var(--ink);border-radius:12px;padding:16px;font-size:var(--fs-md);
transition:opacity .3s var(--ease)}
@media (hover:hover){.bigbtn:hover{opacity:.82}}
.socials{display:flex;gap:16px;margin-top:auto;padding-top:48px}
.soc{width:40px;height:40px;border-radius:10px;background:rgba(17,17,17,.07);display:grid;
place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.soc svg{width:18px;height:18px}
@media (hover:hover){.soc:hover{background:var(--ink);color:var(--cream)}}
/* ============================== 6 rolling + arrow links ============================== */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.roll > span{display:block;transition:transform .38s var(--ease)}
.roll > span:last-child{position:absolute;left:0;top:100%;width:100%}
@media (hover:hover){
a:hover .roll > span,button:hover .roll > span{transform:translateY(-100%)}
}
.arrowlink{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-md);
align-self:flex-start;margin-top:2px}
.abox{width:28px;height:28px;flex:none;border:1px solid var(--ink);border-radius:8px;
display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.abox svg{width:12px;height:12px}
@media (hover:hover){.arrowlink:hover .abox{background:var(--ink);color:var(--cream)}}
/* ============================== 7 hairline rows ============================== */
.svc{margin-top:clamp(44px,5.56vw,80px)}
.svcrow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
min-height:clamp(76px,8.33vw,120px);padding-block:14px}
.svcrow + .svcrow{margin-top:16px}
.svc li{border-bottom:1px solid var(--hair);position:relative}
.svc li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--ink);
transition:width .55s var(--ease)}
@media (hover:hover){
.svc li:hover::after{width:100%}
.svc li:hover h3{transform:translateX(8px)}
}
.svcrow h3{transition:transform .45s var(--ease)}
.tags{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 12px;
font-size:var(--fs-md);color:var(--mute);text-align:right}
.tags span + span::before{content:"\2022";margin-right:12px;color:var(--mute)}
/* ============================== 8 cards ============================== */
/* section head: heading left, arrow link right */
.workhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.workhead h2{max-width:460px}
.workhead .arrowlink{align-self:flex-end;margin-bottom:6px}
/* project card */
.pcard{display:block}
.pshot{display:block;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:582/401;
background:#e7e2da}
.pshot img{width:100%;height:116%;object-fit:cover;position:absolute;top:-8%;left:0;
transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
@media (hover:hover){.pcard:hover .pshot img{transform:scale(1.05)}}
.pcard h3{margin-top:16px;transition:transform .45s var(--ease)}
@media (hover:hover){.pcard:hover h3{transform:translateX(6px)}}
.pmeta{margin-top:4px;font-size:var(--fs-sm);line-height:1.4;letter-spacing:-.04em;color:var(--mute)}
/* recognition card (solid ink) */
.rcard{background:var(--ink);color:var(--cream);border-radius:var(--r);padding:20px;
min-height:clamp(240px,23.7vw,341px);display:flex;flex-direction:column;justify-content:space-between;
gap:32px}
.rnum{font-size:var(--fs-sm);letter-spacing:-.02em;color:rgba(250,247,243,.55)}
.rtop{display:flex;flex-direction:column;gap:16px}
.rcard p{font-size:var(--fs-md);line-height:1.4}
.rname{font-weight:600;font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.04em}
.rsub{color:rgba(250,247,243,.55);font-size:var(--fs-md)}
/* note card (image + scrim) */
.ncard{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(340px,31.9vw,460px);
display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream);background:var(--ink);
padding:20px}
.ncard .nbg{position:absolute;inset:0;z-index:0}
.ncard .nbg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.58);
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ncard .nbg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(17,17,17,.35) 0%,rgba(17,17,17,.5) 42%,rgba(17,17,17,.94) 100%)}
@media (hover:hover){.ncard:hover .nbg img{transform:scale(1.05)}}
.ncard > *{position:relative;z-index:1}
.ndate{font-size:var(--fs-sm);color:rgba(250,247,243,.7);letter-spacing:-.04em}
.ncard h3{margin-top:12px;color:var(--cream)}
.nexc{margin-top:12px;font-size:var(--fs-sm);line-height:1.4;color:rgba(250,247,243,.78)}
.ncard--text{justify-content:space-between}
.ncard--text .ntitle{font-size:var(--fs-h3);font-weight:500;line-height:1.2;letter-spacing:-.02em}
/* ============================== 9 black panel ============================== */
.panel{background:var(--ink);color:var(--cream);border-radius:var(--r);padding:24px}
.facts{display:flex;flex-direction:column}
.fact{display:flex;flex-direction:column;gap:4px;padding-block:16px;
border-bottom:1px solid rgba(250,247,243,.14)}
.fact:first-child{padding-top:0}
.fact .k{font-size:var(--fs-sm);color:rgba(250,247,243,.55);letter-spacing:-.02em}
.fact .v{font-size:var(--fs-md);line-height:1.4}
/* ============================== 10 footer + ghost ============================== */
.foot{background:var(--ink);color:var(--cream);margin-top:clamp(90px,9.03vw,130px);
position:relative;overflow:hidden;padding-top:clamp(70px,8.33vw,120px)}
.fgrid{display:grid;grid-template-columns:400fr 60fr 420fr 300fr;align-items:start;
position:relative;z-index:1}
.fstate{grid-column:1;font-size:var(--fs-h2s);font-weight:600;line-height:1;letter-spacing:-.02em;
max-width:360px}
.fcol-a{grid-column:3}
.fcol-b{grid-column:4}
.foot h4{font-size:clamp(20px,1.806vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.flinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.flinks .pill{font-size:var(--fs-md)}
.fcontact{display:flex;flex-direction:column;gap:10px;margin-top:24px;font-size:var(--fs-md)}
.fcontact a{color:rgba(250,247,243,.8);transition:color .3s var(--ease)}
@media (hover:hover){.fcontact a:hover{color:var(--cream)}}
.fbot{position:relative;z-index:1;margin-top:clamp(40px,4.17vw,60px);
display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-sm);
color:rgba(250,247,243,.5)}
.ghostwrap{position:relative;z-index:0;--gfs:clamp(60px,18.6vw,268px);
height:calc(var(--gfs) * .53);overflow:hidden;margin-top:clamp(20px,2.8vw,40px)}
.ghost{position:absolute;left:0;right:0;top:calc(var(--gfs) * -.215);font-size:var(--gfs);font-weight:700;
line-height:1;letter-spacing:-.05em;color:rgba(250,247,243,.10);text-align:center;
white-space:nowrap;will-change:transform}
/* ============================== 11 content blocks ============================== */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(44px,5.56vw,80px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(44px,5.56vw,80px)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(44px,5.56vw,80px)}
/* featured projects on the home page breathe more than the default grid */
.work .grid2{gap:clamp(40px,4.4vw,68px) clamp(20px,2.2vw,32px)}
/* notes rail — horizontal drag/scroll strip. Full-bleed: the rail runs edge to
edge of the viewport while the first card stays aligned with the wrap gutter. */
.nscroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(86vw,clamp(320px,31vw,440px));
gap:clamp(16px,1.7vw,24px);margin-top:clamp(44px,5.56vw,80px);
margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
/* scroll-padding percentages resolve against the scrollport, so the wrap
inset must be restated as a length here */
scroll-padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2));
overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
scrollbar-width:none;cursor:grab}
.nscroll>*{scroll-snap-align:start}
.nscroll:active{cursor:grabbing}
.nscroll img{-webkit-user-drag:none;user-select:none}
.nscroll a{user-select:none}
.nscroll::-webkit-scrollbar{display:none}
/* rail header: "read all" link + prev/next buttons share the right side */
.railtools{display:flex;align-items:center;gap:clamp(20px,2.5vw,36px);align-self:flex-end;margin-bottom:6px}
.railtools .arrowlink{align-self:auto;margin-bottom:0}
.nnav{display:flex;gap:10px}
.nbtn{width:44px;height:44px;border:1px solid var(--ink);border-radius:12px;display:grid;place-items:center;
background:none;color:var(--ink);cursor:pointer;
transition:background .3s var(--ease),color .3s var(--ease),opacity .3s ease}
@media (hover:hover){.nbtn:not([disabled]):hover{background:var(--ink);color:var(--cream)}}
.nbtn svg{width:14px;height:14px}
.nbtn[disabled]{opacity:.28;cursor:default}
/* global floating resume button (injected by majd.js) */
.resumefab{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:60;
display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);
border-radius:999px;padding:14px 24px;font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;
box-shadow:0 14px 36px -14px rgba(17,17,17,.45);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
/* steps aside while the footer or an end-of-page nav is on screen */
.resumefab.is-away{opacity:0;pointer-events:none;transform:translateY(10px)}
@media (hover:hover){.resumefab:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(17,17,17,.55)}}
@media (max-width:740px){.resumefab{padding:12px 18px}}
/* centred statement with the word-by-word scroll fill — opt in with [data-fill] */
.stmt{max-width:840px;margin-inline:auto;text-align:center;font-size:var(--fs-stmt);
font-weight:500;line-height:1.2;letter-spacing:-.02em}
.stmt w{display:inline-block;margin-right:.25em;color:var(--ink);
transition:color .3s linear;will-change:color}
/* two-column intro block (heading / media / copy) */
.heygrid{display:grid;grid-template-columns:300fr 90fr 400fr 30fr 360fr;align-items:stretch}
.heycol-a{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.heycol-b{grid-column:3}
.heycol-c{grid-column:5;display:flex;flex-direction:column;justify-content:flex-end;gap:20px}
.heylead{font-size:var(--fs-lg);font-weight:600;line-height:1.4;letter-spacing:-.04em}
.heycol-c p{line-height:1.4}
/* contact block */
.cgrid{display:grid;grid-template-columns:640fr 40fr 500fr;align-items:start}
.cleft{grid-column:1;display:flex;flex-direction:column;min-height:clamp(320px,29.9vw,430px)}
.cleft p{margin-top:20px;font-size:var(--fs-md);line-height:1.4;max-width:520px}
.cgrid .panel{grid-column:3}
/* vertical rhythm helpers */
.hey{padding-top:clamp(110px,18vw,260px)}
.statement{padding-block:clamp(90px,10vw,160px) clamp(100px,12vw,190px)}
.services{padding-top:clamp(60px,8vw,120px)}
.work{padding-top:clamp(70px,6.53vw,94px)}
.recog{padding-top:clamp(80px,10vw,144px)}
.notes{padding-top:clamp(80px,7.99vw,115px)}
.contact{padding-top:clamp(90px,10.4vw,150px)}
/* ============================== 12 responsive ============================== */
@media (max-width:1080px){
.heygrid{grid-template-columns:1fr;gap:40px}
.heycol-a,.heycol-b,.heycol-c{grid-column:1}
.heycol-b{max-width:400px}
.grid4{grid-template-columns:repeat(2,1fr)}
.cgrid{grid-template-columns:1fr;gap:40px}
.cleft,.cgrid .panel{grid-column:1}
.cleft{min-height:0}
.fgrid{grid-template-columns:1fr 1fr;gap:40px 24px}
.fstate,.fcol-a,.fcol-b{grid-column:auto}
.fstate{grid-column:1/-1;max-width:none}
}
@media (max-width:740px){
:root{--fs-h1:clamp(38px,14vw,60px)}
.grid2,.grid3,.grid4{grid-template-columns:1fr}
.heycol-b{max-width:280px}
.workhead{flex-direction:column;align-items:flex-start;gap:24px}
.workhead .arrowlink{align-self:flex-start;margin-bottom:0}
.railtools{align-self:flex-start;margin-bottom:0}
.nnav{display:none} /* touch devices scroll the rail by swiping */
.workhead h2{max-width:none}
.svcrow{flex-direction:column;align-items:flex-start;gap:10px;padding-block:18px}
.tags{justify-content:flex-start;text-align:left}
.fgrid{grid-template-columns:1fr}
.ghost{letter-spacing:-.05em}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* =====================================================================
13 PAGE: home hero
Everything below is specific to the home page hero. Subpages can ignore
it — no other component depends on these rules.
Geometry contract (why it holds at any aspect ratio):
.hero is a flex column in normal flow — headline, portrait slot and the
©/tagline row are siblings, never absolutely positioned, so they can
physically not overlap. The slot is sized by min(vw,vh) so a tall or
square window shrinks it the same way a short one does. Free space is
split by the auto margins on .heroin / .heromid, which keeps the
headline+portrait group optically centred while the © row stays pinned
to the bottom of the viewport.
===================================================================== */
.hero{
--slotw:clamp(110px,min(20vw,22vh),200px);
position:relative;min-height:100svh;
display:flex;flex-direction:column;gap:clamp(16px,3.5vh,44px);
padding-block:clamp(110px,14vh,150px) clamp(28px,4vh,40px);
}
.heroin{flex:none;margin-top:auto;position:relative}
.h1box{position:relative;font-size:var(--fs-h1)}
.hero h1{text-align:center;position:relative;z-index:2}
.deco{position:absolute;z-index:1;pointer-events:none}
.deco svg{width:100%;height:100%;display:block}
.deco-star{width:clamp(58px,9.72vw,140px);aspect-ratio:1;left:9.7%;top:-.345em}
.deco-bolt{width:clamp(80px,13.75vw,198px);aspect-ratio:1;left:87.6%;top:1.16em}
/* the portrait's hero resting place — an empty box the flip card flies into */
.heromid{flex:none;margin-bottom:auto;display:flex;justify-content:center;align-items:center}
.heroslot{width:var(--slotw);aspect-ratio:400/456;flex:none}
.herofoot{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.copy{font-size:var(--fs-h2s);font-weight:600;line-height:1;letter-spacing:-.02em}
.since{font-size:var(--fs-md);line-height:1.4;letter-spacing:-.04em;text-align:right}
/* flip card — lives in .heycol-b, is transformed into .heroslot by majd.js.
face-front = grayscale, visible at scroll 0 and in the no-JS fallback.
face-back = colour, revealed by the 180deg scrub as the card grows. */
.cardwrap{width:100%}
.card3d{position:relative;width:100%;aspect-ratio:400/456;transform-style:preserve-3d;
will-change:transform}
.face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;
-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#2a2724}
.face img{width:100%;height:100%;object-fit:cover}
/* user rule: the portrait stays full colour, no grading, at every scroll position */
.face-front img{filter:none}
.face-back{transform:rotateY(180deg)}
.face-back img{filter:none}
@media (max-width:740px){
.hero{min-height:92svh;padding-block:clamp(96px,13vh,130px) clamp(24px,3.5vh,36px)}
.deco-star{width:clamp(38px,11.5vw,64px);left:.5%;top:-.48em}
.deco-bolt{width:clamp(50px,15vw,84px);left:80%;top:1.45em}
.since{max-width:58%}
}
/* ===================== 14 creative headlines ===================== */
/* Serif-italic accent — one letter or word set against the grotesk.
Classes are applied by majd.js after SplitType runs (data-accent /
data-accent-words); without JS the heading is plain text. */
[data-split] .char.alt,
[data-split] .word.alt{
font-family:Georgia,"Times New Roman",serif;
font-style:italic;font-weight:600;letter-spacing:0;
}
[data-split] .char.alt{
font-size:1.06em;font-weight:700;line-height:1;
/* the pale sky stop washes out on cream — purple→pink carries the letter */
background:linear-gradient(135deg,#8b3ff0 0%,#c95cf5 55%,#f072d8 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
padding-inline:.02em;
}
/* Spinning brand star that replaces a letter (data-glyph) */
[data-split] .char.gl{
width:.72em;aspect-ratio:1;margin-inline:.04em;
vertical-align:baseline;
}
[data-split] .char.gl svg{width:100%;height:100%;display:block}
[data-split] .char.gl-dot{width:.36em;margin-left:.07em}
/* Hero letter swaps (data-swap) — one letter as a live slot flipping through
seven typographic worlds (sw-*), each with its own palette. All uppercase. */
@font-face{
font-family:"JetBrains Mono";
src:url("fonts/JetBrainsMono-var.woff2") format("woff2");
font-weight:100 800;font-display:swap;
}
[data-hero-h1] .char.swap{
display:inline-block;line-height:.62;vertical-align:baseline;
padding-inline:.015em;text-align:center;
}
/* 1 — serif italic, rose, extruded depth */
[data-hero-h1] .sw-serif{
font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;
font-size:1.06em;color:#ef5da5;
text-shadow:.022em .03em 0 #b23274,.06em .09em .09em rgba(17,17,17,.14);
}
/* 2 — pop: solid sky blue with a hard darker extrude */
[data-hero-h1] .sw-pop{
font-weight:800;font-size:1em;color:#56c8f2;
text-shadow:.045em .05em 0 #1e6fae;
}
/* 3 — comic sticker: navy speckle fill, white rim, hard extrude */
[data-hero-h1] .sw-comic{
font-weight:800;font-size:1.02em;
background-color:#2a2f52;
background-image:radial-gradient(rgba(255,255,255,.85) .016em,transparent .022em),
radial-gradient(rgba(255,255,255,.55) .012em,transparent .017em);
background-size:.13em .13em,.17em .17em;background-position:0 0,.06em .09em;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
-webkit-text-stroke:.013em #fff;
text-shadow:.05em .055em 0 #171b38;
}
/* 4 — hollow outline, ink stroke */
[data-hero-h1] .sw-outline{
font-weight:800;font-size:1em;color:transparent;
-webkit-text-stroke:.026em var(--ink);text-stroke:.026em var(--ink);
}
/* 5 — LED dot matrix, green on black, cap-height chip */
[data-hero-h1] .sw-led{
/* overflow:hidden moves the inline-block baseline to the box bottom —
without it the grid's first row donates the baseline and the chip hangs
below the line */
background:#0d1009;border-radius:.08em;padding:.045em;overflow:hidden;
}
[data-hero-h1] .sw-led .ledgrid{
display:grid;grid-template-columns:repeat(5,.068em);grid-auto-rows:.068em;
gap:.016em;
}
[data-hero-h1] .sw-led .ledgrid i{
border:.012em solid rgba(140,227,44,.14);border-radius:.02em;
}
[data-hero-h1] .sw-led .ledgrid i.on{
border-color:#8ce32c;
box-shadow:0 0 .04em rgba(140,227,44,.8),inset 0 0 .02em rgba(140,227,44,.55);
}