/* Publo site stylesheet. One file for every template; a template picks its parts with classes and body data-attributes. */
:root{
--bg:#ffffff;--surface:#f5f5f7;--text:#111113;--muted:#6e6e73;--line:#e5e5ea;  --accent:#ff014f;--on-accent:#ffffff;
  --radius:12px;--maxw:1180px;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-heading:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"PubloFa",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --pad:clamp(4.5rem,9vw,7.5rem);--h1:clamp(2.6rem,6.6vw,5.4rem);--h2:clamp(1.9rem,3.8vw,3rem);
  --glass:color-mix(in srgb,var(--bg) 58%,transparent);
  color-scheme:light;
}
[data-theme="dark"]{ --bg:#0a0a0b;--surface:#161618;--text:#f5f5f7;--muted:#a1a1a6;--line:#2a2a2e;color-scheme:dark; }
[data-density="compact"]{--pad:clamp(3rem,6vw,4.5rem)}
[data-density="airy"]{--pad:clamp(6rem,12vw,10rem)}
[data-scale="large"]{--h1:clamp(3rem,8vw,6.6rem);--h2:clamp(2.1rem,4.4vw,3.5rem)}
[data-scale="huge"]{--h1:clamp(3.4rem,11vw,9rem);--h2:clamp(2.3rem,5.4vw,4.2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .35s,color .35s}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.25;margin:0 0 .4em;font-weight:800;overflow-wrap:anywhere;text-wrap:balance}
h3{font-weight:700;line-height:1.4}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.narrow{max-width:760px}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.mono{font-family:var(--mono)}
.ltr{direction:ltr;unicode-bidi:isolate}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted);font-weight:500}
.kicker::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.h1{font-size:var(--h1);line-height:1.1;letter-spacing:-.015em}
.h2{font-size:var(--h2);line-height:1.2}
.h1 .muted,.h2 .muted{font-weight:700}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--muted);line-height:2;max-width:640px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem 1.45rem;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;transition:opacity .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
[data-btn="square"] .btn{border-radius:calc(var(--radius) / 2)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{opacity:.86}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface)}
.btn svg{width:1rem;height:1rem}
.actions{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .85rem;border-radius:999px;border:1px solid var(--line);font-size:.85rem;white-space:nowrap}
.chip-accent{border-color:transparent;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.socials{display:flex;flex-wrap:wrap;gap:.4rem}
.socials a{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s,transform .2s}
.socials a:hover{color:var(--text);border-color:var(--text);transform:translateY(-2px)}
.socials svg{width:1.1rem;height:1.1rem}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:.1rem;transition:border-color .2s,gap .2s}
.link:hover{border-color:var(--accent);gap:.65rem}
.link svg{width:1rem;height:1rem}
[dir="rtl"] .flip{transform:scaleX(-1)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* Cards: one look per template */
.c{border-radius:var(--radius);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s;position:relative}
[data-card="filled"] .c{background:var(--surface)}
[data-card="outline"] .c{border:1px solid var(--line)}
[data-card="elevated"] .c{background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.08)}
[data-theme="dark"][data-card="elevated"] .c,[data-theme="dark"] [data-card="elevated"] .c{background:var(--surface);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
[data-card="glass"] .c{background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.c.pad{padding:clamp(1.4rem,3vw,2.2rem)}
a.c:hover,.hover-lift:hover{transform:translateY(-4px)}

/* Decorations behind the page */
.deco{position:fixed;inset:0;z-index:-1;pointer-events:none}
[data-deco="grid"] .deco{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);opacity:.7}
[data-deco="dots"] .deco{background-image:radial-gradient(var(--line) 1.2px,transparent 1.4px);background-size:22px 22px;mask-image:linear-gradient(#000,transparent 70%)}
[data-deco="glow"] .deco::before,[data-deco="glow"] .deco::after{content:"";position:absolute;width:48vmax;height:48vmax;border-radius:50%;filter:blur(110px);opacity:.22;background:var(--accent)}
[data-deco="glow"] .deco::before{top:-22vmax;inset-inline-start:-14vmax}
[data-deco="glow"] .deco::after{bottom:-26vmax;inset-inline-end:-16vmax;opacity:.12}
[data-deco="grain"] .deco{opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"][data-deco="grain"] .deco{opacity:.11}

/* Navigation: always glass */
.glass{background:var(--glass);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:800;white-space:nowrap;line-height:1}
.brand .mark{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:calc(var(--radius) / 2 + 4px);background:var(--text);color:var(--bg);font-size:.95rem}
.navlinks{display:flex;align-items:center;gap:.3rem;font-size:.9rem}
.navlinks a{padding:.4rem .85rem;border-radius:999px;color:var(--muted);transition:color .2s,background-color .2s}
.navlinks a:hover{color:var(--text)}
.navlinks a[aria-current]{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
.iconbtn{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:999px;border:0;background:transparent;color:var(--text)}
.iconbtn:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.iconbtn svg{width:1.15rem;height:1.15rem}
[data-theme="dark"] .i-moon,[data-theme="light"] .i-sun{display:none}
.nav-pill{position:fixed;top:.9rem;inset-inline:0;z-index:40;padding:0 1rem}
.nav-pill .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:940px;height:3.4rem;margin:auto;padding:0 .5rem 0 1rem;border-radius:22px}
.nav-bar{position:sticky;top:0;z-index:40;border-width:0 0 1px}
.nav-bar .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.nav-burger{position:fixed;top:0;inset-inline:0;z-index:40;border-width:0 0 1px}
.nav-burger .in{display:flex;align-items:center;justify-content:space-between;height:4rem}
.nav-dock{position:fixed;bottom:1rem;inset-inline:0;z-index:40;display:flex;justify-content:center;padding:0 1rem;pointer-events:none}
.nav-dock .in{pointer-events:auto;display:flex;align-items:center;gap:.2rem;padding:.35rem;border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.nav-dock .navlinks a{display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:.72rem;padding:.4rem .7rem;border-radius:16px}
.nav-dock .navlinks svg{width:1.2rem;height:1.2rem}
.dock-top{position:absolute;top:0;inset-inline:0;z-index:30}
.dock-top .in{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
.menu-btn{display:none}
.overlay{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;justify-content:center;gap:.4rem;padding:2rem clamp(1.5rem,8vw,6rem);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%)}
.overlay.open{display:flex;animation:fade .35s ease}
.overlay a{font-family:var(--font-heading);font-size:clamp(2rem,7vw,3.6rem);font-weight:800;line-height:1.4}
.overlay a:hover{color:var(--accent)}
.overlay .close{position:absolute;top:1.2rem;inset-inline-end:1.2rem}
@keyframes fade{from{opacity:0}to{opacity:1}}
.top-gap{height:6.2rem}
.nav-bar+.top-gap{height:1rem}
@media (max-width:860px){.nav-pill .navlinks,.nav-bar .navlinks{display:none}.menu-btn{display:inline-grid}.nav-dock .navlinks span{display:none}}

/* Sidebar shell */
.shell-side{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;padding:2.2rem 1.6rem;display:flex;flex-direction:column;gap:1.6rem;border-inline-end:1px solid var(--line)}
.side .navlinks{flex-direction:column;align-items:stretch;gap:.15rem}
.side .navlinks a{border-radius:12px}
.side .side-av{width:56px;height:56px;flex:none}
.side-mobile{display:none}
@media (max-width:900px){.shell-side{grid-template-columns:1fr}.side{display:none}.side-mobile{display:block}}

/* Sections */
.sec{padding:var(--pad) 0}
.sec+.sec{border-top:1px solid var(--line)}
[data-density="airy"] .sec+.sec{border-top:0}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head .kicker{margin-bottom:.8rem}
.sec-head h2{margin:0}
.page-head{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.5rem)}
.page-head .lead{margin-top:1rem}
.crumbs{display:flex;gap:.5rem;font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.crumbs a:hover{color:var(--text)}

/* Art: generated covers when there is no image */
.art{width:100%;height:100%;aspect-ratio:4/3;display:block;background:var(--surface);border-radius:inherit;overflow:hidden}
.art svg{width:100%;height:100%}
.media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.media img,.media .art{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.media:hover img,.media:hover .art,a:hover .media img,a:hover .media .art{transform:scale(1.035)}
.avatar{display:block;border-radius:50%;overflow:hidden;background:var(--surface)}
.avatar img,.avatar .art{width:100%;height:100%;object-fit:cover;aspect-ratio:1}

/* Heroes */
.hero{position:relative;padding:clamp(3rem,8vw,6.5rem) 0 var(--pad)}
.hero .lead{margin-top:1.3rem}
.hero .actions{margin-top:2rem}
.hero .socials{margin-top:1.6rem}
.h-center{text-align:center}
.h-center .lead,.h-center .actions,.h-center .socials{margin-inline:auto;justify-content:center}
.h-center .avatar{width:104px;height:104px;margin:0 auto 1.6rem;box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--line)}
.h-split .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.h-split .media{aspect-ratio:4/5}.h-split .media img,.h-split .media .art{aspect-ratio:4/5}
.h-split .badge{position:absolute;bottom:1rem;inset-inline-start:1rem;padding:.6rem .9rem;border-radius:16px;font-size:.85rem;display:flex;gap:.5rem;align-items:center}
.h-split .badge i{width:.5rem;height:.5rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.25)}
.h-oversize .name{font-size:clamp(3.6rem,15vw,13rem);font-weight:900;line-height:.92;letter-spacing:-.03em;margin:0 0 1.5rem}
.h-oversize .row{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;border-top:1px solid var(--line);padding-top:1.6rem}
.h-oversize .role{font-size:clamp(1.2rem,2.4vw,1.8rem);font-family:var(--font-heading);font-weight:700}
.h-bento .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:.9rem}
.h-bento .t{padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.h-bento .t-main{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.h-bento .t-photo{grid-row:span 2;padding:0}
.h-bento .t-photo .art,.h-bento .t-photo img{height:100%;aspect-ratio:auto;min-height:300px;object-fit:cover}
.h-bento .t-cta{background:var(--text);color:var(--bg)}
.h-bento .t-cta .btn{background:var(--bg);color:var(--text);align-self:flex-start}
.h-bento .num{font-family:var(--font-heading);font-size:2.6rem;font-weight:800;line-height:1}
.h-terminal .win{border-radius:calc(var(--radius) + 4px);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.h-terminal .bar{display:flex;gap:.45rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line);direction:ltr}
.h-terminal .bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.h-terminal .bar i:first-child{background:#ff5f57}.h-terminal .bar i:nth-child(2){background:#febc2e}.h-terminal .bar i:nth-child(3){background:#28c840}
.h-terminal .bar span{margin-inline:auto;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.h-terminal .body{padding:clamp(1.4rem,5vw,3.2rem);font-family:var(--mono)}
.h-terminal .cmd{color:var(--muted);direction:ltr;text-align:start;unicode-bidi:plaintext;margin:.2rem 0}
.h-terminal .cmd::before{content:"$ ";color:var(--accent)}
.h-terminal h1{font-family:var(--font-heading);margin:.6rem 0}
.h-terminal h1::after{content:"";display:inline-block;width:.07em;height:.85em;margin-inline-start:.12em;background:var(--accent);vertical-align:-.06em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.h-masthead .meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--text);padding-bottom:.8rem}
.h-masthead .title{font-size:clamp(3rem,11vw,9rem);font-weight:900;line-height:1;text-align:center;margin:1.6rem 0;letter-spacing:-.02em}
.h-masthead .grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,5vw,4rem);border-top:1px solid var(--line);padding-top:2.4rem;align-items:start}
.h-masthead .media{aspect-ratio:4/5}.h-masthead .media .art,.h-masthead .media img{aspect-ratio:4/5}
.h-masthead .drop::first-letter{float:inline-start;font-family:var(--font-heading);font-size:3.6em;line-height:1;margin-inline-end:.12em;color:var(--accent)}
.h-full{min-height:92vh;display:flex;align-items:flex-end;padding:0 0 3rem;overflow:hidden}
.h-full .bgart{position:absolute;inset:0;z-index:-1}
.h-full .bgart .art,.h-full .bgart img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
.h-full .bgart::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,color-mix(in srgb,var(--bg) 30%,transparent) 55%,transparent)}
.h-full .card{padding:clamp(1.4rem,4vw,2.6rem);border-radius:calc(var(--radius) + 8px);max-width:720px}
.h-type .typed{color:var(--accent);border-inline-end:3px solid var(--accent);padding-inline-end:.1em;white-space:nowrap}
.h-collage .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.h-collage .stack{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto}
.h-collage .stack .media{position:absolute;width:62%;box-shadow:0 20px 50px rgba(0,0,0,.18);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.h-collage .stack .media:nth-child(1){top:0;inset-inline-start:0;transform:rotate(-6deg)}
.h-collage .stack .media:nth-child(2){top:18%;inset-inline-end:0;transform:rotate(5deg)}
.h-collage .stack .media:nth-child(3){bottom:0;inset-inline-start:16%;transform:rotate(-2deg)}
.h-collage .stack:hover .media:nth-child(1){transform:rotate(-9deg) translate(-4%,-3%)}
.h-collage .stack:hover .media:nth-child(2){transform:rotate(8deg) translate(4%,-2%)}
.h-sentence .say{font-family:var(--font-heading);font-size:clamp(2rem,5.4vw,4.4rem);font-weight:700;line-height:1.45;max-width:1100px}
.h-sentence .say .pill{display:inline-flex;align-items:center;gap:.4em;padding:0 .45em;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.8em;vertical-align:.08em}
.h-sentence .say .pill .avatar{width:1.1em;height:1.1em;display:inline-block;flex:none}
.h-sentence .say .hl{color:var(--accent)}
.h-stats .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.h-stats .nums{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.h-stats .nums .c{padding:1.4rem}
.h-stats .nums strong{display:block;font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.h-orbit{text-align:center;overflow:hidden}
.h-orbit .ring{position:relative;width:min(440px,80vw);aspect-ratio:1;margin:0 auto 2.4rem}
.h-orbit .ring::before{content:"";position:absolute;inset:0;border:1px dashed var(--line);border-radius:50%}
.h-orbit .ring .avatar{position:absolute;inset:24%}
.h-orbit .spin{position:absolute;inset:0;animation:spin 40s linear infinite}
.h-orbit .spin .chip{position:absolute;background:var(--bg);transform:translate(-50%,-50%)}
.h-orbit .spin .chip span{display:inline-block;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.h-orbit .lead,.h-orbit .actions,.h-orbit .socials{margin-inline:auto;justify-content:center}
.scroll-cue{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted);margin-top:2.4rem}
.scroll-cue i{width:1px;height:36px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--text);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@media (max-width:860px){.h-split .grid,.h-masthead .grid,.h-collage .grid,.h-stats .grid{grid-template-columns:1fr}.h-split .media{max-width:420px}.h-bento .grid{grid-template-columns:1fr 1fr}.h-bento .t-main{grid-column:span 2}.h-bento .t-photo{grid-row:span 1}.h-oversize .row{grid-template-columns:1fr}}
@media (max-width:520px){.h-bento .grid{grid-template-columns:1fr}.h-bento .t-main{grid-column:auto}}

/* Work */
.w-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.2rem,3vw,2rem)}
.w-card{display:block}
.w-card .info{padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:start}
.w-card h3{font-size:1.1rem;margin:0}
.w-card .cat{font-size:.82rem;color:var(--muted)}
[data-card="filled"] .w-card.c,[data-card="elevated"] .w-card.c,[data-card="glass"] .w-card.c,[data-card="outline"] .w-card.c{padding:.7rem .7rem 1rem}
.w-card.c .info{padding-inline:.4rem}
.w-rows{display:grid;gap:clamp(3rem,7vw,5.5rem)}
.w-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.w-row:nth-child(even){grid-template-columns:.75fr 1.25fr}
.w-row:nth-child(even) .media{order:2}
.w-row .media .art,.w-row .media img{aspect-ratio:16/11}
.w-row h3{font-size:clamp(1.5rem,3vw,2.2rem)}
.w-masonry{columns:3 260px;column-gap:1rem}
.w-masonry .w-card{break-inside:avoid;margin-bottom:1.6rem}
.w-masonry .w-card:nth-child(3n+1) .media .art,.w-masonry .w-card:nth-child(3n+1) .media img{aspect-ratio:3/4}
.w-masonry .w-card:nth-child(3n+2) .media .art,.w-masonry .w-card:nth-child(3n+2) .media img{aspect-ratio:1}
.w-strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,440px);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.w-strip .w-card{scroll-snap-align:start}
.w-strip .media .art,.w-strip .media img{aspect-ratio:4/5}
.w-list{border-top:1px solid var(--line);counter-reset:w}
.w-list a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1.2rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--line);counter-increment:w;position:relative;transition:padding .3s}
.w-list a::before{content:counter(w,decimal-leading-zero);font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.w-list a:hover{padding-inline:.8rem}
.w-list h3{font-size:clamp(1.25rem,2.6vw,1.9rem);margin:0}
.w-list .peek{position:absolute;inset-inline-end:14%;top:50%;width:200px;transform:translateY(-50%) rotate(-3deg) scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:2}
.w-list a:hover .peek{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
.w-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:1rem}
.w-mosaic .w-card{position:relative;overflow:hidden;border-radius:var(--radius)}
.w-mosaic .w-card .media{height:100%}.w-mosaic .w-card .media .art,.w-mosaic .w-card .media img{aspect-ratio:auto;height:100%}
.w-mosaic .w-card:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.w-mosaic .w-card:nth-child(5n+4){grid-column:span 2}
.w-mosaic .info{position:absolute;inset:auto .7rem .7rem .7rem;padding:.7rem 1rem;border-radius:calc(var(--radius) / 1.5);opacity:0;transform:translateY(8px);transition:.3s}
.w-mosaic .w-card:hover .info{opacity:1;transform:none}
.w-table{width:100%;border-collapse:collapse}
.w-table th{font-weight:500;font-size:.82rem;color:var(--muted);text-align:start;padding:.6rem 0;border-bottom:1px solid var(--text)}
.w-table td{padding:1.1rem 0;border-bottom:1px solid var(--line);vertical-align:middle}
.w-table td:first-child{font-family:var(--mono);color:var(--muted);width:6rem}
.w-table tr:hover td{color:var(--accent)}
.w-table h3{font-size:1.1rem;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.35rem 1rem;font-size:.88rem}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
@media (max-width:760px){.w-row,.w-row:nth-child(even){grid-template-columns:1fr}.w-row:nth-child(even) .media{order:0}.w-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.w-mosaic .info{opacity:1;transform:none}.w-list .peek{display:none}.w-table .hide-sm{display:none}}

/* About */
.a-plain{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.a-plain .text{font-size:1.1rem}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.facts li span{color:var(--muted)}
.a-quote .say{font-family:var(--font-heading);font-size:clamp(1.6rem,3.6vw,2.8rem);font-weight:700;line-height:1.55}
.a-quote .say .muted{font-weight:600}
.a-quote .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 2rem;margin-top:2.5rem}
.a-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.a-split .media .art,.a-split .media img{aspect-ratio:4/5}
@media (max-width:860px){.a-plain,.a-split{grid-template-columns:1fr}}

/* Skills */
.s-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem 3rem}
.s-bars .row{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:.5rem}
.bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.in .bar i,.no-anim .bar i{width:var(--w)}
.s-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.s-chips .chip{padding:.55rem 1.2rem;font-size:.95rem}
.s-chips .chip b{font-weight:500;color:var(--muted);font-size:.8rem}
.s-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem 2rem;list-style:none;padding:0;margin:0;counter-reset:s}
.s-columns li{padding:.9rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;counter-increment:s}
.s-columns li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--muted);font-size:.8rem;margin-inline-end:auto;padding-inline-end:1rem}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;width:max-content;gap:1rem;animation:mq 38s linear infinite}
[dir="rtl"] .marquee .track{animation-name:mqr}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{font-family:var(--font-heading);font-size:clamp(1.6rem,4vw,3rem);font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:1rem}
.marquee .item::after{content:"✦";color:var(--accent);font-size:.6em}
@keyframes mq{to{transform:translateX(-50%)}}@keyframes mqr{to{transform:translateX(50%)}}

/* Services */
.v-acc{border-top:1px solid var(--line)}
.v-acc details{border-bottom:1px solid var(--line)}
.v-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:1rem;padding:1.4rem 0;font-family:var(--font-heading);font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:700}
.v-acc summary::-webkit-details-marker{display:none}
.v-acc summary .n{font-family:var(--mono);font-size:.85rem;color:var(--muted);font-weight:400}
.v-acc summary .plus{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s}
.v-acc details[open] .plus{transform:rotate(45deg);background:var(--text);color:var(--bg)}
.v-acc details p{padding:0 4rem 1.4rem;color:var(--muted);margin:0}
.v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.v-grid .c{padding:1.8rem}
.v-grid .ic{font-size:1.6rem;width:3rem;height:3rem;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);margin-bottom:1.2rem}
.v-grid h3{font-size:1.1rem}
.v-grid p{margin:0;color:var(--muted);font-size:.95rem}
.v-rows{border-top:1px solid var(--line)}
.v-rows .r{display:grid;grid-template-columns:1fr 1.2fr auto;gap:2rem;align-items:center;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.v-rows h3{font-size:clamp(1.3rem,2.6vw,2rem);margin:0}
.v-rows p{margin:0;color:var(--muted)}
.v-rows .ic{font-size:1.8rem}
@media (max-width:760px){.v-rows .r{grid-template-columns:1fr}.v-acc details p{padding-inline:0}}

/* Experience */
.e-timeline{position:relative;padding-inline-start:1.8rem;border-inline-start:1px solid var(--line);display:grid;gap:2.2rem}
.e-timeline .it{position:relative}
.e-timeline .it::before{content:"";position:absolute;inset-inline-start:calc(-1.8rem - 5px);top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg)}
.e-timeline .when{font-size:.85rem;color:var(--muted);font-family:var(--mono)}
.e-timeline h3{font-size:1.15rem;margin:.2rem 0 0}
.e-timeline .org{color:var(--muted)}
.e-timeline p{margin:.5rem 0 0;font-size:.95rem}
.e-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.e-cards .c{padding:1.6rem}
.e-cards .when{font-size:.8rem;color:var(--accent);font-weight:600}
.e-cards h3{font-size:1.05rem;margin:.4rem 0 .1rem}
.e-table{border-top:1px solid var(--line)}
.e-table .r{display:grid;grid-template-columns:200px 1fr 1fr;gap:1.5rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.e-table .when{color:var(--muted);font-family:var(--mono);font-size:.88rem}
.e-table h3{font-size:1.05rem;margin:0}
@media (max-width:760px){.e-table .r{grid-template-columns:1fr;gap:.2rem}}

/* Testimonials */
.t-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.t-cards .c{padding:1.8rem;display:flex;flex-direction:column;gap:1.4rem}
.t-cards blockquote{margin:0;font-size:1.08rem;line-height:1.9}
.who{display:flex;align-items:center;gap:.8rem}
.who .avatar{width:2.6rem;height:2.6rem}
.who small{display:block;color:var(--muted)}
.t-single{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.t-single::-webkit-scrollbar{display:none}
.t-single figure{scroll-snap-align:start;margin:0;text-align:center;padding:0 clamp(0rem,6vw,5rem)}
.t-single blockquote{font-family:var(--font-heading);font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:700;line-height:1.55;margin:0 0 2rem}
.t-single blockquote::before{content:"“";display:block;color:var(--accent);font-size:2.4em;line-height:.6}
.t-single .who{justify-content:center}
.dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.6rem}
.dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
.dots i:first-child{background:var(--text)}
.t-marquee .item{font-size:1.05rem;font-family:var(--font-body);font-weight:400;white-space:normal;width:360px;padding:1.4rem;border-radius:var(--radius);border:1px solid var(--line)}
.t-marquee .item::after{display:none}

/* Stats, pricing, FAQ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.stats .st{padding:1.6rem 0;border-top:1px solid var(--text)}
.stats strong{display:block;font-family:var(--font-heading);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1.05}
.stats span{color:var(--muted);font-size:.92rem}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;align-items:stretch}
.pricing .c{padding:2rem;display:flex;flex-direction:column}
.pricing .feat{outline:2px solid var(--text);outline-offset:-2px}
.pricing h3{font-size:1rem;margin:0}
.pricing .amount{font-family:var(--font-heading);font-size:2.2rem;font-weight:800;margin:.8rem 0 0}
.pricing ul{list-style:none;padding:0;margin:1.2rem 0 1.8rem;flex:1}
.pricing li{padding:.4rem 0;display:flex;gap:.6rem;align-items:baseline}
.pricing li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-.1rem)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.2rem 0;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--muted);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 1.2rem}

/* Contact */
.x-huge{text-align:center}
.x-huge .big{display:inline-block;font-family:var(--font-heading);font-size:clamp(2rem,7vw,6rem);font-weight:900;line-height:1.15;border-bottom:3px solid var(--accent);margin:1.4rem 0 2rem;overflow-wrap:anywhere}
.x-huge .big:hover{color:var(--accent)}
.x-huge .socials{justify-content:center}
.x-card{max-width:720px;margin:auto;padding:clamp(1.8rem,5vw,3.4rem);text-align:center}
.x-card .socials{justify-content:center;margin-top:1.4rem}
.x-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.form{display:grid;gap:.8rem;text-align:start}
.form label{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted)}
.form input,.form textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) / 1.5 + 2px);padding:.75rem 1rem;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.form textarea{min-height:140px;resize:vertical}
.info{list-style:none;padding:0;margin:1.6rem 0;display:grid;gap:.8rem}
.info li{display:flex;align-items:center;gap:.8rem}
.info svg{width:1.15rem;height:1.15rem;color:var(--muted)}
@media (max-width:760px){.x-split{grid-template-columns:1fr}}

/* Project page */
.case-cover .media .art,.case-cover .media img{aspect-ratio:16/8}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;border-block:1px solid var(--line);padding:1.4rem 0;margin:2.4rem 0}
.case-meta span{display:block;font-size:.8rem;color:var(--muted)}
.case-body{display:grid;grid-template-columns:240px 1fr;gap:1rem 3rem}
.case-body h2{font-size:1.2rem;margin:0}
.case-body p{font-size:1.08rem;margin:0 0 2.4rem}
.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.case-gallery .media:first-child{grid-column:span 2}
.case-gallery .media:first-child .art{aspect-ratio:16/8}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.pager a{padding:1.4rem;border-radius:var(--radius);border:1px solid var(--line);transition:border-color .2s}
.pager a:hover{border-color:var(--text)}
.pager span{display:block;font-size:.8rem;color:var(--muted)}
.pager .next{text-align:end}
@media (max-width:760px){.case-body{grid-template-columns:1fr}.case-gallery{grid-template-columns:1fr}.case-gallery .media:first-child{grid-column:auto}}

/* Footer */
.foot{padding:var(--pad) 0 2rem;border-top:1px solid var(--line)}
.f-bigname .name{font-family:var(--font-heading);font-size:clamp(3rem,13vw,11rem);font-weight:900;line-height:.95;letter-spacing:-.03em;margin:2rem 0 1.4rem;overflow-wrap:anywhere}
.f-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:.88rem;color:var(--muted)}
.f-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
.f-cols h4{font-size:.9rem;margin-bottom:1rem}
.f-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;color:var(--muted)}
.f-cols a:hover{color:var(--text)}
.made a{text-decoration:underline;text-underline-offset:3px}
[data-nav="dock"] .foot{padding-bottom:6.5rem}
@media (max-width:760px){.f-cols{grid-template-columns:1fr}}

/* Motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.reveal.in,.no-anim .reveal{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}