/* IA de Guardia — lime + ink + paper. Fonts are self-hosted (assets/fonts). */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jbmono.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --lime:#C6FF3D; --lime-d:#B3EA2A; --ink:#0E0F0A; --paper:#F6F4EC; --paper-2:#ECE9DC;
  --mute:#555A4A; --mute-on-ink:#B9BEAA; --rule:rgba(14,15,10,.9);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4.5vw,56px); --max:1240px;
  --focus:var(--ink);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink) var(--lime);scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:2px}
::selection{background:var(--ink);color:var(--lime)}
.on-ink ::selection,.on-ink::selection{background:var(--lime);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--lime)}::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--lime);border-radius:8px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.on-ink{--focus:var(--lime)}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--lime);padding:10px 16px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(100% - var(--gut)*2,var(--max));margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.03em;line-height:1;text-wrap:balance}
h2{font-size:clamp(2.2rem,5.2vw,4.4rem)}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;max-width:46ch}

/* the logo device: ink pill, lime type */
.pill{background:var(--ink);color:var(--lime);padding:.02em .2em .1em;border-radius:.24em;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
.on-ink .pill,.pill.lime{background:var(--lime);color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:700 1rem/1 var(--body);padding:.95em 1.35em;border-radius:12px;background:var(--ink);color:var(--lime);text-decoration:none;border:2px solid var(--ink);transition:transform .35s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em;height:1.1em;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--lime)}
.on-ink .btn{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.on-ink .btn.ghost{background:transparent;color:var(--lime)}
.on-ink .btn.ghost:hover{background:var(--lime);color:var(--ink)}

/* dock: a floating video-player control bar. Scroll = playhead, sections = chapters. */
.dock{position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);width:min(100% - 28px,var(--max));height:60px;border-radius:18px;color:var(--paper);display:flex;align-items:center;gap:18px;padding:0 10px 0 20px;transition:background .35s,color .35s;--g-tint:rgba(14,15,10,.86);--g-solid:var(--ink);--dock-fg:var(--paper);--dock-mute:rgba(246,244,236,.82);--dock-chip:rgba(246,244,236,.1);--dock-accent:var(--lime);--dock-on-accent:var(--ink);--focus:var(--lime)}
.dock.inv{color:var(--ink);--g-tint:rgba(198,255,61,.82);--g-solid:var(--lime);--dock-fg:var(--ink);--dock-mute:rgba(14,15,10,.72);--dock-chip:rgba(14,15,10,.1);--dock-accent:var(--ink);--dock-on-accent:var(--lime);--focus:var(--ink)}
.dock .brand{font:800 1.5rem/1 var(--display);letter-spacing:-.03em;text-decoration:none;white-space:nowrap;color:var(--dock-fg)}
.dock .pill{background:var(--dock-accent);color:var(--dock-on-accent)}
.chapters{display:flex;gap:4px;list-style:none;margin:0 0 0 14px;padding:0}
.chapters a{display:block;padding:9px 14px;border-radius:10px;font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;color:var(--dock-mute);transition:background .25s,color .25s}
.chapters a:hover{background:var(--dock-chip);color:var(--dock-fg)}
.chapters a.on{background:var(--dock-accent);color:var(--dock-on-accent)}
.tc{margin-left:auto;font:600 .85rem/1 var(--mono);color:var(--dock-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc b{font-weight:700;color:var(--dock-fg)}
.dock .btn{background:var(--dock-accent);color:var(--dock-on-accent);border-color:var(--dock-accent);padding:.75em 1.1em .75em .95em;font-size:.95rem;border-radius:12px}
.dock .btn svg{width:.95em;height:.95em}
.dock .btn:hover svg{transform:scale(1.15)}
.track{position:absolute;left:14px;right:14px;bottom:0;height:16px;cursor:pointer}
.track::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:3px;border-radius:3px;background:var(--dock-chip);transition:height .2s}
.track:hover::before{height:5px}
.track .fill{position:absolute;left:0;bottom:5px;height:3px;width:0;border-radius:3px;background:var(--dock-accent);transition:height .2s}
.track:hover .fill{height:5px}
.track .knob{position:absolute;bottom:3.5px;left:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--dock-accent);box-shadow:0 0 0 3px var(--dock-chip)}
.track .ticks i{position:absolute;bottom:5px;width:2px;height:9px;margin-left:-1px;border-radius:1px;background:var(--dock-mute);opacity:.55;pointer-events:none}
.menu-btn{display:none;width:42px;height:42px;border:0;border-radius:12px;background:var(--dock-chip);color:var(--dock-fg);cursor:pointer;place-items:center;padding:0}
.menu-btn svg{width:20px;height:20px}
.dock .btn[aria-current]{box-shadow:0 0 0 3px var(--dock-chip)}
@media (max-width:820px){
  .dock{gap:12px;padding-left:16px}.dock .brand{font-size:1.3rem}
  .tc{margin-left:auto}.menu-btn{display:grid}
  .chapters{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:#0E0F0A;box-shadow:inset 0 0 0 1px rgba(246,244,236,.16),0 24px 44px -20px rgba(0,0,0,.7)}
  .dock.open .chapters{display:flex}
  .chapters a{padding:14px 16px;font-size:1.05rem;color:var(--paper)}
  .chapters a:hover{background:rgba(246,244,236,.1);color:var(--paper)}
  .chapters a.on{background:var(--lime);color:var(--ink)}
}
@media (max-width:480px){.dock .tc{display:none}.menu-btn{margin-left:auto}}

/* hero */
.hero{background:var(--lime);position:relative;overflow:hidden;padding:calc(88px + clamp(28px,5vw,64px)) 0 clamp(56px,8vw,112px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(14,15,10,.13) 0 1.6px,transparent 2px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000 100%);mask-image:linear-gradient(115deg,transparent 40%,#000 100%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.7rem,6.6vw,6rem);line-height:.98}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .w>span{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{margin-top:clamp(20px,3vw,32px)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.phone-wrap{position:relative;justify-self:center;width:min(100%,360px);animation:float-in 1.1s var(--ease) .35s both}
@keyframes float-in{from{opacity:0;transform:translateY(60px) rotate(2deg)}to{opacity:1;transform:none}}
.phone{position:relative;border:10px solid var(--ink);border-radius:46px;overflow:hidden;background:var(--ink);transform:rotate(-3deg);box-shadow:0 40px 60px -28px rgba(14,15,10,.55)}
.phone video,.phone img{width:100%;aspect-ratio:9/16;object-fit:cover}
.onair{position:absolute;z-index:2;left:-16px;top:34px;transform:rotate(-8deg);color:var(--lime);font:700 .85rem/1 var(--mono);padding:.7em 1em;border-radius:10px;display:flex;gap:.6em;align-items:center;--g-tint:rgba(14,15,10,.58)}
.onair i{width:.6em;height:.6em;border-radius:50%;background:var(--lime);animation:blink 1.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}
/* the phone screen catches a reflection */
.phone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.17),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06))}
.hero .btn.ghost{background:rgba(246,244,236,.34);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 24px -14px rgba(14,15,10,.5)}
.hero .btn.ghost:hover{background:var(--ink)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.phone-wrap{width:min(78%,320px);margin-top:12px}}

/* marquee */
.ticker{background:var(--ink);color:var(--lime);overflow:hidden;border-block:2px solid var(--ink)}
.ticker-track{display:flex;width:max-content;animation:slide 70s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker li{font:600 1.05rem/1 var(--mono);padding:20px 0;white-space:nowrap}
.ticker li::after{content:"/";margin:0 22px;color:var(--mute-on-ink);opacity:.7}
@keyframes slide{to{transform:translateX(-50%)}}

/* series */
.series{padding:clamp(72px,10vw,140px) 0 clamp(56px,8vw,104px)}
.series h2{max-width:15ch}
.series .intro{margin-top:22px;color:var(--mute)}
.rows{margin-top:clamp(36px,5vw,64px);list-style:none;padding:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,4vw,56px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-top:2px solid var(--rule)}
.row:last-child{border-bottom:2px solid var(--rule)}
.row h3{font-size:clamp(1.9rem,4.2vw,3.5rem)}
.row p{margin-top:12px;max-width:52ch;color:var(--mute)}
.row .art{width:clamp(110px,17vw,200px);aspect-ratio:4/5;object-fit:contain;transform:translateY(calc(var(--p,0)*18px)) rotate(calc(var(--p,0)*5deg));transition:transform .15s linear;will-change:transform}
.row:first-child .art{width:clamp(130px,23vw,290px)}
.row .tag{display:inline-block;margin-top:16px;font:600 .8rem/1 var(--mono);letter-spacing:.04em;background:var(--lime);padding:.5em .75em;border-radius:8px}

/* la ficha */
.ficha{background:var(--ink);color:var(--paper);padding:clamp(72px,10vw,140px) 0}
.ficha .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.ficha h2{max-width:11ch}
.ficha .lead{margin-top:22px;color:var(--mute-on-ink)}
.rules{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0}
.rules li{padding:18px 0;border-top:2px solid rgba(246,244,236,.2)}
.rules b{display:block;font:800 1.25rem/1.2 var(--display);letter-spacing:-.01em;color:var(--lime)}
.rules span{display:block;margin-top:6px;color:var(--mute-on-ink)}
.win{position:sticky;top:96px;border:2px solid rgba(246,244,236,.22);border-radius:16px;overflow:hidden;background:#0A0B07;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 70px -40px rgba(0,0,0,.9)}
.win-bar{display:flex;justify-content:space-between;padding:12px 18px;background:rgba(246,244,236,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 .8rem/1 var(--mono);color:var(--mute-on-ink);border-bottom:2px solid rgba(246,244,236,.14)}
.win video,.win img{width:100%;aspect-ratio:1280/920;object-fit:cover}
@media (max-width:900px){.ficha .wrap{grid-template-columns:1fr}.win{position:static;order:-1}}

/* más vistos */
.top{padding:clamp(72px,10vw,140px) 0}
.top h2{max-width:14ch}
.strip{margin-top:clamp(32px,4vw,52px);display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;padding:16px var(--gut) 28px;margin-inline:calc(var(--gut)*-1);scroll-snap-type:x proximity}
.strip>figure{position:relative;flex:0 0 clamp(200px,22vw,252px);margin:0;scroll-snap-align:start;transition:transform .5s var(--ease)}
.strip>figure:hover{transform:translateY(-8px) rotate(-1.2deg)}
.strip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:var(--ink)}
.strip figcaption{position:absolute;left:10px;right:10px;bottom:10px;margin:0;padding:10px 12px 11px;border-radius:14px;color:var(--paper);font-weight:700;font-size:.95rem;line-height:1.25;--g-tint:rgba(14,15,10,.62)}
.strip figcaption small{display:block;margin-top:4px;font:600 .78rem/1.3 var(--mono);color:rgba(246,244,236,.86)}
.note{margin-top:8px;color:var(--mute);font-size:.95rem}

/* jorge */
.jorge{background:var(--lime);overflow:hidden}
.jorge .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,5vw,72px);align-items:end}
.jorge .txt{padding:clamp(56px,8vw,112px) 0}
.jorge h2{font-size:clamp(2.1rem,3.9vw,3.4rem)}
.jorge p{margin-top:22px;max-width:46ch;font-size:1.15rem}
.jorge .links{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.jorge img{width:100%;max-width:700px;height:auto;justify-self:end}
@media (max-width:820px){.jorge .wrap{grid-template-columns:1fr}.jorge .txt{order:-1;padding-bottom:8px}.jorge img{max-width:480px;margin-inline:auto;justify-self:center}}

/* seguir */
.follow{background:var(--ink);color:var(--paper);overflow:hidden;position:relative}
.follow .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,4vw,64px);align-items:end}
.follow .txt{position:relative;z-index:2;margin:clamp(56px,8vw,112px) -110px clamp(56px,8vw,112px) 0;padding:clamp(28px,4vw,52px);border-radius:28px;--g-tint:rgba(246,244,236,.07);--g-solid:#1A1C14}
.follow .mascot{z-index:1}
.follow h2{font-size:clamp(2.4rem,6vw,5rem);max-width:12ch}
.follow .lead{margin-top:22px;color:var(--mute-on-ink)}
.follow .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.mascot{position:relative;width:min(100%,430px);aspect-ratio:880/1168;justify-self:center;margin-bottom:-70px}
.mascot img{position:absolute;inset:0;width:100%;height:100%}
.mascot .head{position:absolute;inset:0;transform-origin:50% 67.6%;animation:nod 5.2s ease-in-out infinite}
.mascot .mouth{position:absolute;left:50.2%;top:55.3%;width:6.4%;height:3.2%;margin:-1.6% 0 0 -3.2%;border-radius:50%;background:var(--ink);transform:scaleY(.22);animation:talk 5.2s steps(1,end) infinite}
@keyframes talk{0%,30%{transform:scaleY(.22)}32%{transform:scaleY(.9)}35%{transform:scaleY(.3)}38%{transform:scaleY(1)}41%{transform:scaleY(.4)}44%{transform:scaleY(.9)}47%{transform:scaleY(.3)}50%,100%{transform:scaleY(.22)}}
@keyframes nod{0%,100%{transform:rotate(-2deg) translateY(0)}30%{transform:rotate(3deg) translateY(-6px)}60%{transform:rotate(-1deg) translateY(2px)}}
@media (max-width:820px){.follow .wrap{grid-template-columns:1fr}.follow .txt{margin-right:0}.mascot{width:min(70%,320px);margin-top:-20px}}

/* inner pages */
.phead{background:var(--lime);position:relative;overflow:hidden;padding:calc(88px + clamp(28px,5vw,64px)) 0 clamp(40px,6vw,80px)}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(14,15,10,.13) 0 1.6px,transparent 2px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000 100%);mask-image:linear-gradient(115deg,transparent 40%,#000 100%);pointer-events:none}
.phead .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,5vw,72px);align-items:center}
.phead.solo .wrap{grid-template-columns:minmax(0,1fr)}
.phead h1{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;max-width:14ch}
.phead .lead{margin-top:clamp(18px,2.6vw,28px)}
.phead .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,34px)}
.phead .tag{display:inline-block;margin-bottom:18px;font:600 .8rem/1 var(--mono);letter-spacing:.04em;background:var(--ink);color:var(--lime);padding:.55em .8em;border-radius:8px}
.phead .art{width:min(100%,380px);justify-self:center;aspect-ratio:4/5;object-fit:contain;animation:float-in 1s var(--ease) .2s both}
.phead.ink{background:var(--ink);color:var(--paper)}
.phead.ink::before{background:radial-gradient(circle,rgba(198,255,61,.12) 0 1.6px,transparent 2px) 0 0/18px 18px}
.phead.ink .lead{color:var(--mute-on-ink)}
.crumb{font:600 .85rem/1 var(--mono);margin-bottom:22px}
.crumb a{text-decoration:none;border-bottom:2px solid currentColor}
.psec{padding:clamp(56px,8vw,112px) 0}
.psec.alt{background:var(--paper-2)}
.psec.dark{background:var(--ink);color:var(--paper)}
.psec h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:18ch}
.psec .lead{margin-top:18px;color:var(--mute)}
.psec.dark .lead{color:var(--mute-on-ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0}
.chips li{font:600 1rem/1 var(--mono);padding:.7em 1em;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}
.psec.alt .chips li{background:var(--paper)}
.ask{font:800 clamp(1.7rem,3.8vw,3.2rem)/1.05 var(--display);letter-spacing:-.03em;max-width:20ch}
.ask-note{margin-top:14px;color:var(--mute);max-width:52ch}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,48px)}
.pager a{display:block;padding:22px 24px;border:2px solid var(--ink);border-radius:16px;text-decoration:none;transition:transform .35s var(--ease),background .25s,color .25s}
.pager a:hover{background:var(--ink);color:var(--lime);transform:translateY(-3px)}
.pager small{display:block;font:600 .8rem/1 var(--mono);margin-bottom:10px;opacity:.75}
.pager b{font:800 1.6rem/1.05 var(--display);letter-spacing:-.02em}
.pager .next{text-align:right}
.steps{list-style:none;counter-reset:s;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(12px,4vw,56px);padding:24px 0;border-top:2px solid var(--rule)}
.steps li:last-child{border-bottom:2px solid var(--rule)}
.steps b{font:800 clamp(1.4rem,2.6vw,2rem)/1.1 var(--display);letter-spacing:-.02em}
.steps span{color:var(--mute);max-width:54ch}
.psec.dark .steps li{border-color:rgba(246,244,236,.2)}
.psec.dark .steps b{color:var(--lime)}
.psec.dark .steps span{color:var(--mute-on-ink)}
.vgrid{margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:clamp(14px,2vw,24px)}
.vgrid figure{position:relative;margin:0;transition:transform .5s var(--ease)}
.vgrid figure:hover{transform:translateY(-8px) rotate(-1.2deg)}
.vgrid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:var(--ink)}
.vgrid figcaption{position:absolute;left:10px;right:10px;bottom:10px;margin:0;padding:10px 12px 11px;border-radius:14px;color:var(--paper);font-weight:700;font-size:.95rem;line-height:1.25;--g-tint:rgba(14,15,10,.62)}
.vgrid figcaption small{display:block;margin-top:4px;font:600 .78rem/1.3 var(--mono);color:rgba(246,244,236,.86)}
.vgrid .rank{position:absolute;z-index:2;top:-10px;left:-8px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font:800 1.4rem/1 var(--display);border:2px solid var(--ink);transform:rotate(-6deg)}
.chan{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:clamp(28px,4vw,48px)}
.chan a{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,36px);border-radius:22px;text-decoration:none;border:2px solid var(--ink);transition:transform .35s var(--ease),background .25s,color .25s}
.chan a:hover{background:var(--ink);color:var(--lime);transform:translateY(-4px)}
.chan b{font:800 clamp(1.8rem,3.4vw,2.8rem)/1 var(--display);letter-spacing:-.03em}
.chan span{color:inherit;opacity:.8;max-width:34ch}
.chan .go{margin-top:10px;display:inline-flex;gap:.5em;align-items:center;font-weight:700}
.chan .go svg{width:1.1em;height:1.1em}
.psec.dark .chan a{border-color:rgba(246,244,236,.3)}
.psec.dark .chan a:hover{background:var(--lime);color:var(--ink)}
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,72px);align-items:start}
.bio h2{max-width:12ch}
.prose{max-width:62ch}
.prose p+p{margin-top:1.1em}
.prose h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:1.8em 0 .5em;max-width:none}
.prose ul{margin:1em 0;padding-left:1.2em}
.prose li{margin:.4em 0}
.phead .photo{align-self:end;justify-self:end;width:min(100%,640px);margin-bottom:calc(clamp(40px,6vw,80px)*-1)}
@media (max-width:900px){.phead .wrap,.bio,.steps li{grid-template-columns:1fr}.phead .art{width:min(70%,300px)}.phead .photo{justify-self:center;width:min(100%,460px)}.chan,.pager{grid-template-columns:1fr}}

/* directory (/repos) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.needs-js{display:none}
.js .needs-js{display:block}
.rtool{position:sticky;top:86px;z-index:20;background:var(--paper);border-block:2px solid var(--ink);padding:16px 0 14px}
.rtool .wrap{display:grid;gap:12px}
.rsearch{position:relative;display:flex;align-items:center}
.rsearch label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rsearch input{width:100%;font:600 clamp(1.05rem,2.2vw,1.35rem)/1 var(--body);color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:14px;padding:.95em 3.2em .95em 1.1em;transition:box-shadow .3s var(--ease),background .2s;-webkit-appearance:none;appearance:none}
.rsearch input::placeholder{color:var(--mute);opacity:1}
.rsearch input:focus{outline:none;background:#fff;box-shadow:0 0 0 4px var(--lime),0 0 0 6px var(--ink)}
.rsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.rsearch kbd{position:absolute;right:14px;font:700 .85rem/1 var(--mono);border:2px solid var(--ink);border-radius:8px;padding:.3em .55em;background:var(--lime);transition:opacity .2s}
.rsearch input:focus~kbd{opacity:0}
.fchips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:thin}
.fchip{flex:none;font:700 .95rem/1 var(--body);color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:999px;padding:.7em 1em;cursor:pointer;transition:background .2s,color .2s,transform .3s var(--ease)}
.fchip small{font:700 .75rem/1 var(--mono);margin-left:.35em;opacity:.7}
.fchip:hover{transform:translateY(-2px)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--lime)}
.rsec{padding-top:clamp(28px,4vw,44px)}
.rcount{font:600 .95rem/1 var(--mono);color:var(--mute);margin-bottom:12px}
.rcount b{display:inline-block;color:var(--ink);font-size:1.2rem}
.rlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.repo{border-bottom:2px solid var(--rule)}
.repo[hidden]{display:none}
.repo a{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) 152px 28px;gap:clamp(10px,3vw,40px);align-items:center;padding:clamp(18px,2.4vw,26px) clamp(8px,1.4vw,18px);text-decoration:none;overflow:hidden;isolation:isolate}
.repo a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.repo a:hover::before,.repo a:focus-visible::before{transform:scaleX(1)}
.repo a:focus-visible{outline-offset:-3px}
.rn{font:700 clamp(1.15rem,2.2vw,1.7rem)/1.1 var(--mono);letter-spacing:-.02em;overflow-wrap:anywhere;transition:transform .45s var(--ease)}
.rn mark{background:var(--ink);color:var(--lime);border-radius:4px;padding:0 .08em}
.rd{color:var(--mute);transition:color .2s}
.repo a:hover .rd,.repo a:focus-visible .rd{color:var(--ink)}
.rs{font:600 .78rem/1 var(--mono);border:2px solid var(--ink);border-radius:8px;padding:.5em .7em;white-space:nowrap}
.repo a:hover .rn{transform:translateX(8px)}
.repo svg{width:22px;height:22px;transition:transform .45s var(--ease)}
.repo a:hover svg{transform:translate(6px,-4px) rotate(-45deg)}
.rempty{padding:clamp(40px,6vw,80px) 0;max-width:40rem}
.rempty h3{font-size:clamp(1.8rem,4vw,3rem)}
.rempty p{margin-top:12px;color:var(--mute)}
.rempty .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.rempty button.btn{cursor:pointer}
@media (max-width:760px){
  .rtool{top:84px}
  .repo a{grid-template-columns:minmax(0,1fr) 22px;gap:6px 12px}
  .rd{grid-column:1;grid-row:2}
  .rs{grid-column:1;grid-row:3;justify-self:start;margin-top:6px}
  .repo svg{grid-column:2;grid-row:1}
  .rsearch kbd{display:none}
}

/* link in bio (/bio): one column, thumb-first, no dock */
.biopage{background:var(--lime);min-height:100vh;background-image:radial-gradient(rgba(14,15,10,.2) 1.4px,transparent 1.6px);background-size:18px 18px}
.bio-in{width:min(100% - 32px,480px);margin-inline:auto;padding:clamp(32px,7vh,64px) 0 40px}
.bio-head{text-align:center;display:grid;justify-items:center;gap:10px;margin-bottom:34px}
.bio-av{width:124px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--ink);border:3px solid var(--ink);box-shadow:0 18px 30px -16px rgba(14,15,10,.6);position:relative;animation:avin .9s var(--ease) both}
.bio-av img{position:absolute;left:-15%;top:-6%;width:130%;max-width:none;height:auto;transform-origin:50% 40%;animation:nod 5.2s ease-in-out infinite}
@keyframes avin{from{opacity:0;transform:scale(.7) rotate(-8deg)}}
.bio-logo{font:800 2rem/1 var(--display);letter-spacing:-.03em;animation:rise .7s .1s var(--ease) both}
.bio-tag{max-width:30ch;font-weight:600;animation:rise .7s .2s var(--ease) both}
.bio-h{font:700 .85rem/1 var(--mono);letter-spacing:0;margin:26px 4px 12px;opacity:.75}
.bio-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bio-links li{animation:rise .7s calc(.25s + var(--i)*.07s) var(--ease) both}
.bl{position:relative;display:grid;grid-template-columns:1fr 24px;gap:2px 12px;align-items:center;padding:18px 20px;border-radius:18px;border:2px solid var(--ink);text-decoration:none;color:var(--ink);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),color .25s}
.bl::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--ease)}
.bl:hover,.bl:focus-visible{color:var(--lime);transform:translateY(-3px)}
.bl:hover::before,.bl:focus-visible::before{transform:none}
.bl:active{transform:scale(.98)}
.bl-t{grid-column:1;font:800 1.35rem/1.1 var(--display);letter-spacing:-.02em}
.bl-s{grid-column:1;font-size:.92rem;font-weight:600;opacity:.8}
.bl svg{grid-column:2;grid-row:1/3;width:22px;height:22px;transition:transform .4s var(--ease)}
.bl:hover svg{transform:translateX(5px)}
.bl.main{background:var(--ink);color:var(--lime);padding:22px 22px}
.bl.main::before{background:var(--paper)}
.bl.main:hover,.bl.main:focus-visible{color:var(--ink)}
.bl.main .bl-t{font-size:1.7rem}
.bio-foot{margin-top:34px;text-align:center;font:600 .85rem/1 var(--mono);opacity:.8}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* footer */
.foot{background:var(--ink);color:var(--mute-on-ink);border-top:2px solid rgba(246,244,236,.18);padding:34px 0 40px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.foot .brand{color:var(--paper)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{color:var(--paper)}
.foot small{display:block;width:100%;font-size:.88rem}

/* 404 */
.nf{background:var(--lime);min-height:80vh;display:grid;place-items:center;text-align:center;padding:120px 20px 80px}
.nf h1{font-size:clamp(4rem,16vw,11rem)}
.nf p{margin:18px auto 28px;max-width:36ch;font-size:1.2rem}

/* liquid glass: used for controls and overlays that sit on real imagery, never for body copy */
.glass{background:var(--g-tint,rgba(14,15,10,.62));-webkit-backdrop-filter:blur(18px) saturate(1.7) brightness(1.05);backdrop-filter:blur(18px) saturate(1.7) brightness(1.05);isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -14px 22px -16px rgba(255,255,255,.18),0 22px 44px -22px rgba(0,0,0,.6)}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--mx,18%) var(--my,0%),rgba(255,255,255,.2),transparent 62%),linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--g-solid,#14160F)}}
@media (prefers-reduced-transparency:reduce){.glass,.hero .btn.ghost,.win-bar{-webkit-backdrop-filter:none;backdrop-filter:none}.glass{background:var(--g-solid,#14160F)}.hero .btn.ghost{background:var(--lime)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker{overflow-x:auto}
}

/* photos (Higgsfield): rounded frames, one elevation, no card chrome */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 28px 60px -30px rgba(14,15,10,.6)}
.shot figcaption{margin-top:14px;font-size:.95rem;line-height:1.45;color:var(--mute);max-width:44ch}
.phead .photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;box-shadow:0 28px 60px -28px rgba(14,15,10,.6);animation:float-in 1s var(--ease) .2s both}
.photos{padding:clamp(56px,8vw,112px) 0;background:var(--paper)}
.photos h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:20ch}
.photos .lead{margin-top:18px;color:var(--mute);max-width:60ch}
.photos .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:clamp(28px,4vw,48px)}
.photos .pgrid .shot:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.psec .wrap.withshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(24px,5vw,72px);align-items:center}
.psec .withshot .shot img{max-height:560px;object-fit:cover}
@media (max-width:760px){.photos .pgrid,.psec .wrap.withshot{grid-template-columns:minmax(0,1fr)}.photos .pgrid .shot:nth-child(2){margin-top:0}}