@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:block;src:url("outfit.woff2") format("woff2")}
/* ============================================================
   RnK portfolio — noiz.bio design system, multi-page
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.site{
  --bg:#000;--ink:#f2f2f2;--ink1:#fff;--ink2:#ffffffa3;--ink3:#ffffff6b;
  --accent:#cfcfcf;--line:#ffffff17;--line2:#ffffff29;--glass:#0d0d0d8c;
  --eo:cubic-bezier(.19,1,.22,1);--eio:cubic-bezier(.76,0,.24,1);
  --gut:clamp(20px,2.6vw,44px);
  margin:0;background:var(--bg);color:var(--ink1);
  font-family:Outfit,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body:not(.on){overflow:hidden}
body.site ::selection{background:var(--ink);color:#000}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
em{font-style:normal}

.site-mono{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500;line-height:1.4;color:var(--ink3)}
.site-body{color:var(--ink2);font-size:17px;line-height:1.6;text-wrap:pretty;margin:0}
.site-display{font-weight:700;letter-spacing:-.03em;line-height:1.03;margin:0}
.chrome{background:linear-gradient(#fff 0%,#f2f2f2 30%,#868686 52%,#f9f9f9 60%,#c7c7c7 78%,#696969 100%);color:transparent;-webkit-background-clip:text;background-clip:text}
.sq{display:inline-block;width:7px;height:7px;background:var(--ink);margin-right:10px;vertical-align:1px}

/* ---------- roll hover (letters roll to row B) ---------- */
.roll{--room:.24em;display:inline-flex;position:relative;overflow:hidden;vertical-align:top;padding-bottom:var(--room);margin-bottom:calc(-1 * var(--room));font-kerning:none}
.roll__row{white-space:pre;display:inline-flex}
.roll__row.b{position:absolute;top:100%;left:0;color:var(--ink2)}
.roll i{font-style:normal;display:inline-block;transition:transform .62s var(--eio);transition-delay:calc(var(--i) * 13ms)}
.lnk:hover .roll i,.lnk:focus-visible .roll i{transform:translateY(calc(-100% - var(--room)))}

/* ---------- rise / split text reveals ---------- */
[data-rise]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--eo),transform .9s var(--eo);transition-delay:calc(var(--i,0) * 45ms)}
[data-rise].in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;transform:translateY(115%);transition:transform .95s var(--eo);transition-delay:var(--d,0ms)}
[data-split].in .wi{transform:none}
[data-art]{opacity:0;transform:scale(.965);filter:blur(6px);transition:opacity 1.1s var(--eo) .1s,transform 1.3s var(--eo) .1s,filter 1.1s var(--eo) .1s}
[data-art].in{opacity:1;transform:none;filter:none}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:100;background:#000;transition:opacity .45s var(--eo)}
#chrome-host{position:absolute;inset:0}
#chrome-host canvas{display:block;opacity:0;transition:opacity .6s linear}
#splash.out .cue{opacity:0;transition:opacity .3s}
#splash.gone{display:none}
.cue{position:absolute;left:50%;bottom:clamp(22px,4vh,44px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:var(--ink3);opacity:0;animation:cuein .9s var(--eo) 2.7s forwards;pointer-events:none;white-space:nowrap}
#splash.out .cue{animation:none}
.cue-line{width:1px;height:26px;background:linear-gradient(#fff0,var(--ink2));display:inline-block;animation:cueline 1.6s var(--eio) infinite}
@keyframes cuein{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cueline{0%{transform:translateY(-100%)}60%,100%{transform:translateY(220%)}}
.cue-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:blip 1.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- header (plain centered nav, no box) ---------- */
#hdr{position:fixed;inset-inline:0;top:0;z-index:80;transform:translateY(-110%);transition:transform .8s var(--eo) .15s,background-color .5s,border-color .5s;border-bottom:1px solid transparent}
body.on #hdr{transform:none}
#hdr.scrolled{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr-in{min-height:76px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:10px var(--gut)}
.logo{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.logo .mark{width:22px;height:22px;border:1.6px solid var(--ink);border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:0}
.nav{display:flex;gap:clamp(16px,2vw,30px);align-items:center;justify-content:center;flex:1}
.nav a{font-size:15px;font-weight:500;color:var(--ink2);letter-spacing:-.01em;transition:color .35s var(--eo)}
.nav a:hover{color:var(--ink1)}
.nav a.active{color:var(--ink1)}
.nav a.active::after{content:"";display:block;height:1px;background:var(--ink2);margin-top:3px}
.hdr-right{display:flex;align-items:center;gap:12px}

/* ---------- CTA pill ---------- */
.cta{--cta-h:50px;isolation:isolate;height:var(--cta-h);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;display:inline-flex;justify-content:space-between;align-items:center;gap:14px;padding:0 6px 0 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .6s var(--eo),color .4s var(--eo),border-color .4s var(--eo),background-color .4s var(--eo)}
.cta__glyph{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .5s var(--eo)}
.cta__glyph svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cta:hover .cta__glyph{transform:rotate(45deg)}
.cta.solid{background:var(--ink1);color:#000}
.cta.solid .cta__glyph{background:#000;color:var(--ink1)}
.cta.ghost{border:1px solid var(--line2);color:var(--ink)}
.cta.ghost .cta__glyph{border:1px solid var(--line2)}
.cta.ghost:hover{border-color:var(--ink2)}
.cta.sm{--cta-h:44px;font-size:14px;padding:0 5px 0 18px;gap:10px}
.cta.sm .cta__glyph{width:34px;height:34px}
.cta.xs{--cta-h:38px;font-size:13px;padding:0 4px 0 15px;gap:8px}
.cta.xs .cta__glyph{width:30px;height:30px}
.cta.xs .cta__glyph svg{width:13px;height:13px}

/* ---------- views (pages) ---------- */
.view{display:none}
[hidden]{display:none!important}
.view.on{display:block}
.page{display:block}
main{animation:pagein .6s var(--eo) both}
@keyframes pagein{from{opacity:0;transform:translateY(12px)}}
.sec{padding:clamp(96px,14vh,168px) var(--gut) clamp(74px,10vh,120px);max-width:1640px;margin:0 auto}
.pmeta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 clamp(24px,4vh,40px)}
.pmeta b{color:var(--ink2);font-weight:500}
.pmeta .sep{opacity:.45}
.ph1{font-size:clamp(38px,7.6vw,72px);max-width:15ch;margin:0 0 clamp(18px,3vh,28px)}
.pintro{max-width:64ch}
.pfoot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:clamp(30px,5vh,50px);padding-top:clamp(24px,4vh,36px);border-top:1px solid var(--line)}
.pfoot .site-mono a{color:var(--ink2);border-bottom:1px solid var(--line2)}
.pfoot .site-mono a:hover{color:var(--ink1)}
.grp{margin:clamp(40px,6.5vh,72px) 0 6px;display:flex;align-items:center;gap:16px}
.grp b{font-weight:500;color:var(--ink1)}
.grp::after{content:"";height:1px;background:var(--line);flex:1}
.grp .cnt{color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500;white-space:nowrap}

/* ---------- home (noiz hero composition) ---------- */
.home{min-height:100svh;display:flex;flex-direction:column;padding:clamp(96px,13vh,132px) var(--gut) clamp(26px,5vh,54px);position:relative}
.home-grid{width:100%;max-width:1640px;margin:0 auto;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(16px,3vw,48px);row-gap:clamp(14px,2.6vh,30px)}
.home-stats{grid-column:3;grid-row:1;justify-self:end;text-align:right;font-weight:600;font-size:clamp(15px,1.35vw,21px);line-height:1.5;letter-spacing:-.015em;color:var(--ink1);max-width:34ch}
.home-stats span{display:block}
.home-stats .dim{color:var(--ink2)}
.home-art{grid-column:2;grid-row:2;justify-self:center;align-self:center;width:min(46vw,780px);position:relative}
.home-art canvas{display:block;opacity:0;transition:opacity .9s linear}
.hero-stage{min-height:clamp(240px,42vh,560px)}
.home-art::before{content:"";position:absolute;inset:-16% -12%;background:radial-gradient(52% 46% at 50% 50%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);pointer-events:none}
.home-side{grid-row:2;align-self:center;color:var(--ink2);font-weight:600;font-size:clamp(14px,1.2vw,18px);letter-spacing:-.01em}
.home-left{grid-column:1}
.home-right{grid-column:3;justify-self:end;color:var(--ink3);font-variant-numeric:tabular-nums}
.home-h1{grid-column:1;grid-row:3;align-self:end;max-width:12ch;font-size:clamp(40px,7.4vw,104px);font-weight:700;letter-spacing:-.035em;line-height:1;margin:0}
.home-mid{grid-column:2;grid-row:3;align-self:end;max-width:38ch;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,22px);padding-bottom:4px}
.home-mid .site-body{font-size:15.5px;color:var(--ink2)}
.home-grab{grid-column:3;grid-row:3;align-self:end;justify-self:end;width:min(100%,400px);display:flex;flex-direction:column;gap:12px}
.grab{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:999px;padding:6px 6px 6px 20px;background:rgba(255,255,255,.02);transition:border-color .4s var(--eo)}
.grab:focus-within{border-color:var(--ink2)}
.grab input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:15px;font-weight:500;letter-spacing:-.01em;padding:10px 0;color:var(--ink1)}
.grab input::placeholder{color:var(--ink3)}
.home-grab .site-mono{margin:2px 0 0;text-align:right}
@media (max-width:960px){
  .home-grid{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3vh,26px);justify-content:center}
  .home-stats{order:1;text-align:left;justify-self:start;font-size:16px}
  .home-art{order:2;width:min(92vw,560px);align-self:center}
  .home-side{display:none}
  .home-h1{order:3;max-width:14ch;font-size:clamp(38px,11vw,64px)}
  .home-mid{order:4;max-width:46ch}
  .home-grab{order:5;align-self:stretch;width:100%;justify-self:stretch}
  .home-grab .site-mono{text-align:left}
}

/* ---------- rows (server list / generic lists) ---------- */
.rows{border-top:1px solid var(--line);margin-top:clamp(20px,3vh,30px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px clamp(18px,3vw,40px);align-items:center;padding:clamp(24px,3.6vh,38px) 0;border-bottom:1px solid var(--line);transition:background-color .5s var(--eo)}
.row:hover{background:rgba(255,255,255,.015)}
.row-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;min-width:0}
.row-h h3{font-size:clamp(21px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;margin:0}
.row-h .tag{font-size:10px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink3);white-space:nowrap;letter-spacing:.12em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}
.row-h .tag.own{border-color:var(--line2);color:var(--ink2)}
.row p{grid-column:1/-1;margin:0;max-width:82ch;color:var(--ink2);font-size:16px;line-height:1.6}
.row .ip{align-self:center;grid-row:1;grid-column:2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.04em;color:var(--ink2);border:1px solid var(--line);background:rgba(255,255,255,.03);padding:9px 15px;border-radius:999px;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s;white-space:nowrap}
.row .ip:hover{color:var(--ink);border-color:var(--line2)}
.row .ip.copied{color:#000;background:var(--ink1);border-color:var(--ink1)}
@media (max-width:720px){
  .row{grid-template-columns:minmax(0,1fr)}
  .row .ip{grid-row:auto;grid-column:1;justify-self:start;margin-top:2px}
}

/* ---------- screenshots gallery ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:clamp(20px,3vh,30px)}
.shot{margin:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#050505;position:relative;cursor:zoom-in;transition:transform .6s var(--eo),border-color .6s var(--eo)}
.shot:hover{transform:translateY(-5px);border-color:var(--line2)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}
.shot figcaption{padding:13px 18px 15px;border-top:1px solid var(--line);color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500}
#lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 40px 120px -40px #000}
#lb .lb-x{position:absolute;top:18px;right:20px;width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:var(--ink2)}
#lb .lb-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- experience timeline ---------- */
.pagehead{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:1024px){.pagehead{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.pagehead .ph-img{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#050505}
.pagehead .ph-img img{width:100%}
.ph-canvas{height:clamp(190px,24vw,300px);position:relative}
.ph-canvas canvas{display:block;opacity:0;transition:opacity .9s linear}
.tl{list-style:none;margin:clamp(16px,3vh,26px) 0 0;padding:0;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:24px;padding:clamp(22px,3.6vh,36px) 0;border-bottom:1px solid var(--line)}
.tl .yr{padding-top:7px;color:var(--ink3)}
.tl h3{font-size:clamp(19px,2.4vw,25px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.tl .site-body{max-width:74ch}
.exp-callout{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline;margin-top:clamp(30px,5vh,52px);padding:26px 30px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.02)}
.exp-callout b{font-size:clamp(34px,5vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1}

/* ---------- blog: the bookshelf ---------- */
.blogband{min-height:calc(100vh - 30px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(92px,13vh,132px) 0 clamp(26px,4.5vh,48px);position:relative}
.blogstats{text-align:right;margin-bottom:clamp(4px,1vh,10px)}
.blogstats .k{font-size:14.5px;color:var(--ink2);margin:0 0 2px}
.blogstats b{display:block;font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--ink1)}
.blogstats b.big{font-size:clamp(20px,2.2vw,28px)}
.edgelabel{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);font-size:15.5px;color:var(--ink2)}
.edgecount{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);font-size:14.5px;color:#8e8e8e;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.shelfwrap{margin:auto 0;display:flex;flex-direction:column;align-items:center}
.shelfgroup{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%}
.bookrow{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 8px}
.book{position:relative;display:block;width:var(--w);height:var(--h);flex:none;background:linear-gradient(180deg,#191919 0%,#0a0a0a 46%,#101010 100%);border-radius:5px 5px 2px 2px;box-shadow:inset -7px 0 12px rgba(0,0,0,.55),inset 1px 0 0 rgba(255,255,255,.05),2px 5px 15px rgba(0,0,0,.5);text-decoration:none;transition:transform .5s var(--eo),filter .5s var(--eo)}
.book:hover,.book:focus-visible{transform:translateY(-42px);filter:brightness(1.4)}
.book em{position:absolute;top:0;left:0;right:0;height:8px;background:#d7d7d7;border-radius:5px 5px 0 0}
.book.new em{background:#a9e7c6}
.book b{position:absolute;top:18px;bottom:34px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:13px;font-weight:550;letter-spacing:.01em;color:#dcdcdc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.book i{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.13em;color:#7e7e7e;transition:color .5s var(--eo)}
.book:hover i{color:#cfcfcf}
.plank{width:calc(100% + 96px);height:16px;margin:-1px -48px 0;background:linear-gradient(180deg,#242424,#0d0d0d);border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 36px rgba(0,0,0,.65)}
.blogfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,64px)}
.blogfoot .ph1{max-width:14ch;font-size:clamp(38px,6.6vw,86px);margin:0}
.blogfoot p{max-width:44ch;margin:0 0 6px;font-size:15px;color:#b6b6b6;line-height:1.6}
@media (max-width:820px){
  .edgelabel,.edgecount{display:none}
  .bookrow{overflow-x:auto;justify-content:flex-start;padding:46px 8px 6px}
  .plank{width:100%;margin:-1px 0 0}
  .bookrow .book{height:calc(var(--h) * .74);width:calc(var(--w) * .92)}
  .book b{font-size:11px}
  .blogfoot{flex-direction:column;align-items:flex-start}
  .blogstats{margin-bottom:8px}
}

/* ---------- blog: the post ---------- */
.postview{max-width:1120px}
.pbc{margin:0 0 clamp(20px,3.5vh,34px);letter-spacing:.15em;font-size:11px;color:#8b8b8b}
.pbc a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
.pbc a:hover{color:var(--ink1)}
.posttop{max-width:860px}
.posth1{font-size:clamp(34px,5.4vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0 0 clamp(16px,2.6vh,22px)}
.postmeta{margin:0 0 clamp(26px,4vh,38px);font-size:13px;color:#9b9b9b}
.postmeta .sep{opacity:.45}
.shorthdr{border:1px solid var(--line2);border-radius:15px;padding:clamp(18px,2.6vh,26px) clamp(20px,2.4vw,28px);background:rgba(255,255,255,.012)}
.shorthdr .site-mono{display:block;margin-bottom:10px;color:#8b8b8b}
.shorthdr p{margin:0;font-size:16.5px;line-height:1.62;color:#e7e7e7}
.postgrid{display:grid;grid-template-columns:196px minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(34px,5.5vh,56px);align-items:start}
.posttoc{position:sticky;top:120px;align-self:start}
.posttoc>.site-mono{display:block;margin-bottom:12px;color:#767676}
.posttoc a{display:block;padding:6px 0;font-size:13px;line-height:1.35;color:#8e8e8e;text-decoration:none;transition:color .3s var(--eo)}
.posttoc a:hover{color:#dcdcdc}
.posttoc a.on{color:var(--ink1)}
.postbody{max-width:700px}
.postbody h2{font-size:clamp(21px,2.5vw,29px);font-weight:700;letter-spacing:-.02em;margin:clamp(38px,6vh,54px) 0 14px;scroll-margin-top:112px}
.postbody h2:first-child{margin-top:0}
.postbody p{margin:0 0 15px;font-size:15.8px;line-height:1.72;color:#c6c6c6}
.postbody p b{color:#e9e9e9;font-weight:600}
.postbody a{color:var(--ink1);text-decoration:underline;text-decoration-color:#4a4a4a;text-underline-offset:3px}
.postbody a:hover{text-decoration-color:#a9a9a9}
.postbody ul,.postbody ol{margin:0 0 17px;padding-left:20px}
.postbody li{margin:7px 0;font-size:15.8px;line-height:1.68;color:#c6c6c6}
.postbody code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:#151515;border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:#dcdcdc}
.posttable{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:14px}
.posttable th{text-align:left;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.13em;color:#8b8b8b;border-bottom:1px solid var(--line2);text-transform:uppercase}
.posttable td{padding:11px 12px;border-bottom:1px solid var(--line);color:#c6c6c6;vertical-align:top}
.posttable td:first-child{color:#e9e9e9;font-weight:600}
.sources{margin-top:clamp(44px,7vh,64px)}
.sources>.site-mono{display:block;margin-bottom:12px;color:#8b8b8b}
.srcrow{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:#c6c6c6;margin:0}
.srcrow a{color:var(--ink1);text-decoration:underline;text-decoration-color:#4a4a4a;text-underline-offset:3px}
.srcrow em{font-style:normal;color:#8b8b8b}
.aboutbox{margin-top:clamp(34px,5vh,46px);border:1px solid var(--line2);border-radius:15px;padding:clamp(18px,2.6vh,24px) clamp(20px,2.4vw,26px)}
.aboutbox .site-mono{display:block;margin-bottom:10px;color:#8b8b8b}
.aboutbox p{margin:0;font-size:15px;line-height:1.65;color:#bdbdbd}
.readnext{display:block;margin-top:clamp(40px,6vh,56px);padding:clamp(20px,3vh,28px) 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);text-decoration:none}
.readnext>.site-mono{display:block;margin-bottom:12px;color:#8b8b8b}
.rnrow{display:flex;justify-content:space-between;align-items:center;gap:20px}
.rnrow h3{margin:0;font-size:clamp(19px,2.3vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--ink1)}
.rnrow .ar{font-size:22px;color:var(--ink3);transition:transform .4s var(--eo)}
.readnext:hover .rnrow .ar{transform:translate(4px,-4px);color:var(--ink1)}
.readnext:hover h3{text-decoration:underline;text-decoration-color:#3d3d3d;text-underline-offset:4px}
@media (max-width:900px){
  .postgrid{grid-template-columns:1fr}
  .posttoc{position:static;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
  .posttoc nav{display:flex;flex-wrap:wrap;gap:0 16px}
  .posttoc a{display:inline-block;padding:4px 0}
}

/* ---------- faq ---------- */
.fhero{position:relative;min-height:clamp(360px,62vh,600px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(30px,6vh,60px) 0 clamp(6px,2vh,18px)}
.fmarq{position:absolute;inset:-2% 0 6%;overflow:hidden;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.fqtrack{transform:rotate(-3deg) scale(1.08);transform-origin:50% 50%}
.frow{display:flex;white-space:nowrap;will-change:transform;animation:fqslide 90s linear infinite}
.frow+.frow{margin-top:clamp(4px,1vh,12px)}
.frow .fset{flex:none;padding-right:.8em;font-weight:600;letter-spacing:-.02em;color:#1f1f1f}
.frow .q{transition:color .22s var(--eo);pointer-events:auto;cursor:pointer}
.frow .q:hover{color:#eaeaea}
.frow i{font-style:normal;color:#151515;padding:0 .35em;font-size:.6em;vertical-align:.25em}
.frow.r1{font-size:clamp(24px,3.4vw,52px);animation-duration:96s}
.frow.r2{font-size:clamp(19px,2.5vw,38px);animation-duration:78s;animation-direction:reverse;color:#191919}
.frow.r3{font-size:clamp(27px,4vw,60px);animation-duration:104s}
.frow.r4{font-size:clamp(17px,2.2vw,32px);animation-duration:70s;animation-direction:reverse}
.frow.r2 .fset,.frow.r6 .fset{color:#191919}
.frow.r4 .fset{color:#232323}
.frow.r5{font-size:clamp(23px,3vw,46px);animation-duration:88s}
.frow.r6{font-size:clamp(20px,2.7vw,40px);animation-duration:82s;animation-direction:reverse}
@keyframes fqslide{to{transform:translateX(-50%)}}
.fhero::after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(to bottom,transparent,#000 68%);z-index:1;pointer-events:none}
.fmeta{position:absolute;top:0;right:0;text-align:right;z-index:2;display:flex;flex-direction:column;gap:6px;color:var(--ink2);margin:0}
.fmeta b{color:var(--ink1)}
.fmeta .dim{color:var(--ink3)}
.fhero-foot{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:end}
.fhero-foot .ph1{margin:0}
.fchips{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,3vh,26px) 0 0}
.fchips a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink2);transition:color .4s var(--eo),border-color .4s var(--eo)}
.fchips a:hover{color:var(--ink1);border-color:var(--ink2)}
.fhero .fsearch{max-width:320px;margin:0}
.fhero .fsearch .fcount{text-align:right}
.ftop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(18px,4vw,72px);margin-top:clamp(56px,9vh,110px);border-top:1px solid var(--line);padding-top:clamp(26px,5vh,52px)}
.ftop:first-of-type{margin-top:clamp(30px,5vh,56px)}
.ftop-l{position:sticky;top:112px;align-self:start}
.ftop-l .gmeta{margin:0;color:var(--ink3)}
.ftop-l h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.03em;margin:10px 0 14px}
.fbig{margin:0;font-size:clamp(64px,9vw,150px);line-height:.82;font-weight:700;letter-spacing:-.05em}
.fbig-lbl{margin:12px 0 0;color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500}
.qa-b{border-top:0}
.qaitem{border-bottom:1px solid var(--line);scroll-margin-top:130px}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;text-align:left;background:none;border:0;padding:clamp(17px,2.8vh,25px) 0;color:var(--ink2);font:inherit;font-size:clamp(16.5px,1.8vw,21px);font-weight:600;letter-spacing:-.015em;cursor:pointer;transition:color .4s var(--eo)}
.qhead:hover{color:var(--ink1)}
.qg{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:400;color:var(--ink2);transition:transform .5s var(--eo),border-color .4s var(--eo),color .4s var(--eo)}
.qhead:hover .qg{border-color:var(--ink2)}
.qaitem.open .qhead{color:var(--ink1)}
.qaitem.open .qg{transform:rotate(45deg);border-color:var(--ink1);color:var(--ink1)}
.qpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--eo)}
.qaitem.open .qpanel{grid-template-rows:1fr}
.qpin{overflow:hidden}
.qpin p{margin:0;padding:0 0 clamp(18px,2.8vh,26px);max-width:74ch;color:var(--ink2);font-size:16px;line-height:1.6}
.qpin p a{color:var(--ink1);border-bottom:1px solid var(--line2)}
.fask{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end;margin-top:clamp(70px,11vh,140px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,54px)}
.fask h2{font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:-.035em;margin:0 0 14px;line-height:1}
.fask p{margin:0;max-width:56ch;color:var(--ink2)}
.fask-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.fask-btns .cta{border:1px solid var(--line);transition:border-color .4s var(--eo)}
.fask-btns .cta:hover{border-color:var(--ink2)}
@media (max-width:900px){
  .fhero{min-height:0;display:flex;flex-direction:column;padding-top:clamp(16px,3vh,28px)}
  .fmeta{position:static;text-align:left;margin:0;order:0}
  .fmarq{position:relative;inset:auto;order:1;height:clamp(160px,24vh,230px);margin:14px 0 8px}
  .fhero::after{display:none}
  .fhero-foot{order:2;grid-template-columns:minmax(0,1fr)}
  .fhero .fsearch{max-width:none}
  .fhero .fsearch .fcount{text-align:left}
  .ftop{grid-template-columns:minmax(0,1fr);gap:14px}
  .ftop-l{position:static}
  .fbig{font-size:clamp(56px,15vw,90px)}
  .fask{grid-template-columns:minmax(0,1fr)}
  .fask-btns{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .frow{animation:none!important}
  .fqtrack{transform:rotate(-3deg) scale(1.08)}
  .qpanel{transition:none!important}
}

/* ---------- help ---------- */
.help-search{position:relative;max-width:600px;margin:clamp(24px,4vh,38px) 0 0}
.help-search input{width:100%;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.02);padding:17px 24px;font-size:16px;outline:none;transition:border-color .4s var(--eo)}
.help-search input::placeholder{color:var(--ink3)}
.help-search input:focus{border-color:var(--ink2)}
.help-search .fcount{margin-top:10px}
.trylist{list-style:none;margin:clamp(14px,2.4vh,22px) 0 0;padding:0;border-top:1px solid var(--line)}
.trylist button{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;width:100%;text-align:left;align-items:baseline;padding:clamp(16px,2.6vh,22px) 0;border-bottom:1px solid var(--line);transition:background-color .4s var(--eo)}
.trylist button:hover{background:rgba(255,255,255,.015)}
.trylist .n{color:var(--ink3);font-variant-numeric:tabular-nums}
.trylist .t{font-size:clamp(16px,1.8vw,19px);font-weight:600;letter-spacing:-.015em}
.trylist .t span{display:block;font-size:14.5px;font-weight:400;color:var(--ink3);margin-top:4px;letter-spacing:0}
.trylist .go{color:var(--ink3);font-size:18px;transition:transform .4s var(--eo),color .4s var(--eo)}
.trylist button:hover .go{transform:translateX(6px);color:var(--ink1)}
.steps{list-style:none;counter-reset:st;margin:clamp(14px,2.4vh,22px) 0 0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;padding:clamp(18px,3vh,26px) 0;border-bottom:1px solid var(--line)}
.steps .st-n{color:var(--ink3);padding-top:5px;font-variant-numeric:tabular-nums}
.steps h3{font-size:clamp(17px,2vw,20px);font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.steps .sub{margin:0;color:var(--ink3);font-size:15.5px;line-height:1.55}
.steps .sub .min{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;margin-left:10px}
.arts.rowshelp{border-top:1px solid var(--line);margin-top:clamp(14px,2.4vh,22px)}
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:clamp(15px,2.4vh,20px) 0;border-bottom:1px solid var(--line)}
.guide[hidden]{display:none}
.guide b{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.guide span{color:var(--ink3);font-size:15px;line-height:1.5}
.gguide[hidden]{display:none}
.help-cta{margin-top:clamp(44px,7vh,76px);padding-top:clamp(30px,5vh,48px);border-top:1px solid var(--line);display:grid;gap:clamp(18px,3vh,26px)}
.help-cta h2{font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.03em;margin:0}
.help-links{display:grid;gap:0;border-top:1px solid var(--line)}
.help-links a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:clamp(17px,2.6vh,23px) 0;border-bottom:1px solid var(--line);transition:background-color .4s var(--eo),padding-left .4s var(--eo)}
.help-links a:hover{background:rgba(255,255,255,.015);padding-left:8px}
.help-links b{font-size:17px;font-weight:600;letter-spacing:-.01em;display:block}
.help-links span{color:var(--ink3);font-size:15px}
.help-links .ar{color:var(--ink3);font-size:18px;transition:transform .4s var(--eo)}
.help-links a:hover .ar{transform:translateX(6px);color:var(--ink1)}

/* ---------- pricing ---------- */
.price-stage{position:relative;width:100%;height:clamp(190px,30vw,340px);border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%,#0c0c0c 0%,#000 70%);margin-top:clamp(22px,3.6vh,36px)}
.price-stage canvas{display:block}
.price-tag{margin:16px 0 0;text-align:center}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px;margin-top:clamp(36px,6vh,60px)}
.pbox{display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.02);transition:transform .6s var(--eo),border-color .6s var(--eo),box-shadow .6s var(--eo)}
.pbox:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 0 46px -20px rgba(255,255,255,.35)}
.pnum{margin:0;font-size:clamp(32px,4.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1}
.pnum a{color:var(--ink1);border-bottom:2px solid var(--line2)}
.pnum a:hover{border-bottom-color:var(--ink2)}
.pd{font-size:15px}
.pbox .site-mono{color:var(--ink2)}
.pbox[data-scene]{cursor:pointer}
.pbox[data-scene]:focus-visible{outline:1px solid var(--ink2);outline-offset:3px}
.pbox.sel{border-color:var(--ink1);box-shadow:0 0 60px -24px rgba(255,255,255,.45)}
.pbox.sel .site-mono{color:var(--ink1)}
.pstage{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--eo)}
.pstage.on{opacity:1}

/* ---------- pricing v2 (video layout) ---------- */
.svc-hero{min-height:94vh;display:flex;flex-direction:column;position:relative}
.svc-meta{position:absolute;top:0;right:0;text-align:right;margin:0;max-width:44ch;color:var(--ink2)}
.svc-meta b{color:var(--ink1)}
.svc-wrap{position:relative;flex:1;min-height:clamp(320px,58vh,560px);margin-top:clamp(18px,3vh,30px)}
.svc-stage{position:absolute;inset:0}
.svc-stage canvas{display:block}
.svc-foot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-top:clamp(22px,4vh,40px)}
.svc-foot h2{font-size:clamp(34px,5.4vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.03;margin:0}
.svc-foot .site-body{max-width:56ch}
.price-hero{position:relative;margin-top:clamp(56px,9vh,110px);padding-top:clamp(44px,7vh,72px)}
.price-label{position:absolute;top:0;left:0;margin:0;color:var(--ink3)}
.price-meta{position:absolute;top:0;right:0;text-align:right;margin:0;max-width:40ch;color:var(--ink2)}
.price-meta b{color:var(--ink1)}
.price-hero .price-stage{margin-top:0}
.price-foot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-top:clamp(22px,3.6vh,36px)}
.price-foot .ph1{margin:0}
.price-foot-r{display:grid;gap:18px;justify-items:start}
.pcard .psub{margin:-8px 0 0;color:var(--ink3)}
.pbul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.pbul li{position:relative;padding-left:20px;color:var(--ink2);font-size:14.5px;line-height:1.5}
.pbul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.pbul.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.pchip{align-self:flex-start;margin:2px 0 0;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--ink2)}
.pnote{margin:auto 0 0;padding-top:6px;color:var(--ink3)}
.ppill{margin-top:2px}
.addon{margin-top:clamp(44px,7vh,76px)}
.addon-lbl{margin:0 0 14px;color:var(--ink3)}
.addon-card{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3.4vw,44px);padding:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.02)}
.addon-card h3{margin:10px 0 8px;font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.025em}
.addon-card .site-body{font-size:15.5px;max-width:52ch}
.addon-r{display:grid;gap:16px;align-content:start;justify-items:start}
.addon-r .pnum{font-size:clamp(28px,3.6vw,38px)}
.cmp{margin-top:clamp(56px,9vh,100px)}
.cmp h2{font-size:clamp(40px,7.4vw,92px);font-weight:700;letter-spacing:-.035em;line-height:.98;margin:0}
.cmp-sub{margin:16px 0 0;max-width:62ch}
.cmp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4vw,44px);margin-top:clamp(26px,4.4vh,44px)}
.cmp-col{padding-top:18px;border-top:1px solid var(--line2)}
.cmp-col .site-mono{color:var(--ink2)}
.cmp-line{margin:12px 0 16px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink1)}
.cmp-col .tiny{columns:2;column-gap:26px;list-style:none;margin:0;padding:0}
.cmp-col .tiny li{break-inside:avoid;margin:0 0 8px;color:var(--ink3);font-size:12.5px;line-height:1.45}
.gift{display:grid;grid-template-columns:auto minmax(0,1.7fr) minmax(0,.9fr);gap:clamp(18px,3vw,36px);align-items:start;margin-top:clamp(44px,7vh,76px);padding:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.02)}
.gift-ic{width:46px;height:46px;border:1px solid var(--line2);border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--ink2)}
.gift h3{margin:0 0 10px;font-size:clamp(21px,2.8vw,28px);font-weight:700;letter-spacing:-.025em}
.gift .site-body{font-size:15.5px;max-width:60ch}
.gift-r{display:grid;gap:14px;justify-items:start}
.cqa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,4vw,70px);margin-top:clamp(56px,9vh,100px)}
.cqa-l h2{margin:12px 0 14px;font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.cqa-l .site-body{max-width:36ch}
@media (max-width:900px){
  .svc-wrap{overflow:hidden}
  .svc-meta,.price-meta{position:static;text-align:left;max-width:none;margin:0 0 14px}
  .svc-foot,.price-foot{grid-template-columns:minmax(0,1fr)}
  .price-label{position:static;margin:0 0 8px}
  .addon-card,.gift{grid-template-columns:minmax(0,1fr)}
  .gift-ic{display:none}
  .cmp-cols{grid-template-columns:minmax(0,1fr)}
  .cmp-col .tiny{columns:1}
  .cqa{grid-template-columns:minmax(0,1fr)}
}

/* ---------- help v2 (video layout) ---------- */
.hhero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:start}
.hhero .ph1{margin:0}
.hhero .pintro{max-width:46ch}
.help-stage{position:relative;width:100%;height:clamp(220px,38vh,420px);border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%,#0c0c0c 0%,#000 70%);margin-top:clamp(26px,4.5vh,48px)}
.help-stage canvas{display:block}
.hhunt{padding-top:clamp(6px,1.4vh,14px)}
.hhunt .help-search{margin:0 0 clamp(18px,3vh,26px)}
.hsec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(24px,4vw,70px);margin-top:clamp(56px,9vh,104px)}
.hstick{position:sticky;top:110px;align-self:start}
.hstick .site-mono{margin:0;color:var(--ink3)}
.hbig{margin:6px 0 10px;font-size:clamp(84px,12vw,168px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;background:linear-gradient(160deg,#fff 8%,#8f8f8f 52%,#3a3a3a 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hsub{line-height:1.7}
.hrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hrows li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;padding:clamp(18px,3vh,26px) 0;border-bottom:1px solid var(--line);opacity:.42;transition:opacity .6s var(--eo)}
.hrows li.on{opacity:1}
.hrows .st-n{color:var(--ink3);padding-top:5px;font-variant-numeric:tabular-nums}
.hrows h3{font-size:clamp(17px,2vw,20px);font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.hrows .sub{margin:0;color:var(--ink3);font-size:15.5px;line-height:1.55}
.hrows .sub .min{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;margin-left:10px}
.hacc{border-top:1px solid var(--line)}
.hacc .qhead{font-size:clamp(17px,2vw,21px)}
.hacc .htags{display:block;margin-top:7px;letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:500;color:var(--ink3)}
.hacc .qg{align-self:flex-start;margin-top:4px}
.hguides{display:grid;gap:0;padding-bottom:8px}
@media (max-width:900px){
  .hhero{grid-template-columns:minmax(0,1fr)}
  .hsec{grid-template-columns:minmax(0,1fr);gap:14px}
  .hstick{position:static}
  .hbig{font-size:clamp(64px,17vw,96px);margin:4px 0 6px}
  .hrows li{opacity:1}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:clamp(30px,5vh,54px)}
.foot-in{max-width:1640px;margin:0 auto;padding:clamp(40px,6vh,64px) var(--gut) 0;display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.foot-brand .logo{margin-bottom:16px}
.foot-brand p{margin:0;max-width:34ch;color:var(--ink3);font-size:15px;line-height:1.6}
.foot-col h4{margin:0 0 16px;color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:500}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{color:var(--ink2);font-size:15.5px;transition:color .3s}
.foot-col a:hover{color:var(--ink1)}
.foot-col .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.02em}
.foot-bar{max-width:1640px;margin:0 auto;padding:clamp(26px,4vh,40px) var(--gut) clamp(16px,2.6vh,26px);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:clamp(34px,5vh,56px)}
.foot-mark{max-width:1640px;margin:0 auto;padding:0 var(--gut);overflow:hidden}
.foot-mark span{display:block;font-weight:800;letter-spacing:-.05em;line-height:.82;font-size:clamp(120px,25.5vw,400px);text-align:center;transform:translateY(.06em);user-select:none}
@media (max-width:900px){
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .foot-in{grid-template-columns:minmax(0,1fr)}
}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-50%;z-index:130;pointer-events:none;opacity:.05;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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6,end) infinite}
@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0)}}

/* ---------- header on small screens ---------- */
@media (max-width:820px){
  .hdr-in{justify-content:space-between;padding-top:12px;padding-bottom:6px}
  .nav{order:3;flex:0 0 100%;width:100%;flex-wrap:wrap;gap:10px 20px;justify-content:center;padding-top:4px}
  .nav a{font-size:14px}
  .sec{padding-top:clamp(120px,18vh,180px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important}
  [data-art]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .wi{transform:none!important;transition:none!important}
  .grain,.cue-line,.cue-dot{animation:none!important}
  .cue{opacity:1;animation:none;transform:translate(-50%,0)}
  main{animation:none!important}
  *{transition-duration:.01ms!important}
}