/* ronnyzy.com · Brutal Glitch
   One deliberate look (yellow, black, hard shadows), so there is no dark-mode variant.
   Layout: mobile-first single column → 2 columns (≥640px) → 4×3 bento (≥1000px). */

:root{
  --y:#FFE600; --k:#000; --w:#FFFFFF; --r:#FF3B1F; --b:#0047FF; --c:#00E0FF; --l:#E6DEFF;
  --f-display:"Archivo Black", "Arial Black", Impact, sans-serif;
  --f-body:"Courier Prime", "Courier New", ui-monospace, monospace;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--y);color:var(--k);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:4px solid var(--b);outline-offset:3px}

/* ================= HOME ================= */
.home{display:flex;flex-direction:column;gap:16px;padding:16px var(--gut-r) 16px var(--gut)}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
.t{position:relative;overflow:hidden;min-width:0;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  background:var(--w);border:3px solid var(--k);box-shadow:6px 6px 0 var(--k);
  transition:transform .12s, box-shadow .12s;animation:inGlitch .7s steps(6) backwards;animation-delay:calc(var(--i, 0) * 110ms + 150ms)}
.t:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--k)}
.t .art{position:relative;flex:1;min-height:0}
.t .tx{position:relative;z-index:2}
.t h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.05;text-transform:uppercase}
.t .k{font-size:13px;margin-top:4px;line-height:1.35}
/* the heading link covers the whole tile */
.tile-link{text-decoration:none}
.tile-link::after{content:"";position:absolute;inset:0;z-index:5}
.tile-link:focus-visible{outline:none}
.tile-link:focus-visible::after{outline:4px solid var(--b);outline-offset:-8px}
@keyframes inGlitch{0%{clip-path:inset(0 100% 0 0)}25%{clip-path:inset(10% 0 60% 0);transform:translateX(-14px)}50%{clip-path:inset(55% 0 15% 0);transform:translateX(12px)}75%{clip-path:inset(0);transform:translateX(-4px)}100%{clip-path:inset(0)}}

/* tile colours */
.t-ab{background:var(--k);color:var(--w)}
.t-ap{background:var(--c)}
.t-ga{background:var(--l)}
.t-mu{background:var(--r)}
.t-hi{background:var(--b);color:var(--w)}

/* phone: a 2-column bento with mixed sizes
   About (wide) · Apps (wide strip) · Articles (tall) beside Games + Music · Say hi (wide, short) */
.t-ab{grid-area:ab}.t-ar{grid-area:ar}.t-ap{grid-area:ap}.t-ga{grid-area:ga}.t-mu{grid-area:mu}.t-hi{grid-area:hi}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ab ab" "ap ap" "ar ga" "ar mu" "hi hi"}
.t-ab{min-height:200px}
.t-ap{min-height:150px}
.t-ga{min-height:210px}
.t-mu{min-height:210px}
.t-hi{min-height:120px}

@media (min-width:640px){
  .grid{grid-template-columns:1fr 1fr;grid-template-areas:"ab ab" "ar ap" "ar ga" "mu hi"}
  .t-ab{min-height:220px}.t-ap{min-height:190px}.t-ga{min-height:240px}.t-mu{min-height:190px}.t-hi{min-height:150px}
}
@media (min-width:1000px){
  .home{height:100vh;height:100dvh;min-height:680px;padding-block:18px}
  .grid{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));
    grid-template-areas:"ar ab ab ab" "ar ap ap ga" "ar mu hi ga"}
  .t{min-height:0}
}

/* ---- About: glitching name ---- */
.t-ab .art{display:flex;align-items:center}
.glitch{position:relative;display:inline-block;font-family:var(--f-display);font-size:clamp(84px, 9vw, 132px);line-height:.85;letter-spacing:-.04em;color:var(--w)}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;mix-blend-mode:screen}
.glitch::before{color:var(--r);animation:gl1 2.4s steps(1) infinite}
.glitch::after{color:var(--c);animation:gl2 2.4s steps(1) infinite}
@keyframes gl1{0%,100%{transform:translate(0);clip-path:inset(0)}20%{transform:translate(-6px,2px);clip-path:inset(10% 0 60% 0)}40%{transform:translate(5px,-2px);clip-path:inset(50% 0 20% 0)}60%{transform:translate(0)}}
@keyframes gl2{0%,100%{transform:translate(0);clip-path:inset(0)}25%{transform:translate(6px,-1px);clip-path:inset(60% 0 5% 0)}45%{transform:translate(-5px,3px);clip-path:inset(5% 0 70% 0)}65%{transform:translate(0)}}
.t-ab .k{max-width:36ch}
@media (min-width:1000px){
  .t-ab{flex-direction:row;align-items:stretch;gap:28px}
  .t-ab .art{flex:0 0 auto}
  .t-ab .tx{flex:1;align-self:flex-end;border-left:3px solid var(--w);padding-left:20px}
}

/* ---- Articles: ticker, typing lines, card stack ---- */
.t-ar .art{display:flex;flex-direction:column;gap:20px}
.tick{margin:0 -16px;background:var(--k);color:var(--y);padding:7px 0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden}
.tick div{display:inline-block;animation:marq 20s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.lines{display:flex;flex-direction:column;gap:12px;color:#333}
.lines i{height:9px;border-radius:5px;background:currentColor;animation:lineT 3s ease-in-out infinite}
.lines i:nth-child(2){animation-delay:.3s;--w:85%}.lines i:nth-child(3){animation-delay:.6s;--w:65%}.lines i:nth-child(4){animation-delay:.9s;--w:90%}
@keyframes lineT{0%{width:0}45%,85%{width:var(--w,100%)}100%{width:0}}
.cards{position:relative;height:190px;margin:auto 6px auto 0}
.card{position:absolute;left:0;right:0;top:0;height:116px;overflow:hidden;background:var(--w);border:3px solid var(--k);box-shadow:4px 4px 0 var(--k);padding:12px;font-weight:700;font-size:15px;line-height:1.25;animation:cardC 9s cubic-bezier(.6,0,.3,1) infinite}
.card b{display:inline-block;font-family:var(--f-display);font-weight:400;font-size:10px;background:var(--r);color:var(--w);padding:1px 6px;margin-bottom:6px}
.card small{display:block;font-weight:400;font-size:11px;margin-top:8px;opacity:.75}
.card:nth-child(2){animation-delay:-6s;background:var(--y)}
.card:nth-child(3){animation-delay:-3s;background:var(--c)}
@keyframes cardC{0%,28%{transform:translate(0,0) scale(1);z-index:3;opacity:1}33%{transform:translate(130%,-10px) rotate(10deg);z-index:3;opacity:0}34%{transform:translate(0,40px) scale(.88);z-index:1;opacity:0}40%,61%{transform:translate(0,40px) scale(.88);z-index:1;opacity:1}66%,94%{transform:translate(0,20px) scale(.94);z-index:2;opacity:1}100%{transform:translate(0,0) scale(1);z-index:3;opacity:1}}

/* ---- Apps: launcher ---- */
.t-ap .art{display:flex;align-items:center;justify-content:center;min-height:70px}
.launch{position:relative;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.launch i{width:46px;height:46px;display:grid;place-items:center;font-style:normal;font-size:20px;background:var(--w);border:3px solid var(--k);box-shadow:4px 4px 0 var(--k);transition:transform .15s}
.launch i.lit{background:var(--hc,#FFE600);transform:scale(.82)}
.cursor{position:absolute;left:0;top:0;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:25px solid var(--k);rotate:-30deg;filter:drop-shadow(2px 2px 0 var(--w));transition:transform .25s steps(3);z-index:3;pointer-events:none}

/* ---- Games: pixel invader ---- */
.inv{position:absolute;left:14px;top:14px;width:8px;height:8px}
.inv.a{animation:frameA .8s steps(1) infinite}
.inv.b{opacity:0;animation:frameB .8s steps(1) infinite}
@keyframes frameA{50%{opacity:0}}@keyframes frameB{50%{opacity:1}}
.t-ga .art{animation:shake 2.6s steps(1) infinite;min-height:120px}
@keyframes shake{0%,86%,100%{transform:none}88%{transform:translate(-4px,2px)}91%{transform:translate(4px,-2px)}94%{transform:translate(-2px,0)}}
.shot{position:absolute;left:54px;top:90px;width:6px;height:16px;background:var(--r);animation:shot 1.2s steps(8) infinite}
@keyframes shot{from{transform:translateY(0)}to{transform:translateY(160px);opacity:0}}

/* ---- Music: vinyl ---- */
.vinyl,.shine{position:absolute;right:-30px;top:-34px;width:136px;height:136px;border-radius:50%}
.vinyl{border:3px solid var(--k);background:repeating-radial-gradient(circle,#1a1a1a 0 2px,#000 2px 5px);animation:spin 1.8s linear infinite;box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.vinyl::after{content:"RZ";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--y);border:3px solid var(--k);display:grid;place-items:center;font-family:var(--f-display);font-size:13px}
.vinyl::before{content:"";position:absolute;left:50%;top:6px;width:6px;height:20px;margin-left:-3px;background:var(--w);opacity:.5;border-radius:3px}
.shine{background:conic-gradient(from 30deg,transparent 0 40deg,rgba(255,255,255,.22) 50deg,transparent 60deg 220deg,rgba(255,255,255,.16) 230deg,transparent 240deg);pointer-events:none}
.arm{position:absolute;right:8px;top:-20px;width:8px;height:86px;background:var(--w);border:3px solid var(--k);transform-origin:50% 6px;animation:armM 3.6s ease-in-out infinite}
.arm::after{content:"";position:absolute;left:-7px;bottom:-6px;width:16px;height:16px;background:var(--k)}
@keyframes armM{0%,100%{transform:rotate(18deg)}50%{transform:rotate(26deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.t-mu.playing .vinyl{animation-duration:.5s}
.t-mu.playing .arm{animation:none;transform:rotate(30deg)}
.t-mu .art{min-height:80px}
.playbtn{position:absolute;right:12px;bottom:12px;z-index:6;font-family:var(--f-display);font-size:11px;background:var(--y);color:var(--k);border:3px solid var(--k);box-shadow:3px 3px 0 var(--k);padding:5px 9px;cursor:pointer;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playbtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--k)}

/* ---- Say hi ---- */
.arrow{position:absolute;left:0;top:-10px;font-family:var(--f-display);font-size:70px;line-height:1;animation:arr 1.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes arr{50%{transform:translate(12px,-12px)}}
.t-hi .art{min-height:60px}

/* ---- footer strip ---- */
.ft{flex:none;min-height:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;background:var(--k);color:var(--y);padding:6px 14px;font-family:var(--f-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ft .on{color:var(--c)}
.ft .on::before{content:"● ";animation:blinkS 1.2s steps(1) infinite}
.ft .sample{background:var(--r);color:var(--w);padding:1px 6px}
@keyframes blinkS{50%{opacity:.2}}

/* ================= GLITCH TRANSITION ================= */
.gx{position:fixed;inset:0;z-index:100;background:var(--gx-bg);pointer-events:none;transition:clip-path .45s steps(6)}
.gx i{position:absolute;left:0;right:0;opacity:0}
.gx.run i{animation:sliceN .5s steps(4) forwards}
@keyframes sliceN{0%{opacity:1;transform:translateX(-40px)}30%{transform:translateX(30px)}60%{transform:translateX(-14px);opacity:1}100%{opacity:0;transform:none}}

/* ================= SECTION PAGES ================= */
.sec{min-height:100vh;min-height:100dvh;background:var(--bgc);color:var(--fgc);display:flex;flex-direction:column}
.sec main{flex:1;padding:22px var(--gut-r) 56px var(--gut);width:100%;max-width:1200px;margin:0 auto}
.sec .ft{margin:0 var(--gut-r) 16px var(--gut)}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.back{font-family:var(--f-display);font-size:14px;text-decoration:none;background:var(--k);color:var(--y);border:3px solid var(--k);padding:7px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.back:hover{background:var(--y);color:var(--k)}
.crumb{font-family:var(--f-display);font-size:12px;letter-spacing:.04em;opacity:.85;text-transform:uppercase}
.sec h1{font-family:var(--f-display);font-weight:400;font-size:clamp(56px, 13vw, 150px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase;margin:32px 0 12px;text-wrap:balance;overflow-wrap:anywhere}
.lede{font-size:18px;max-width:60ch;margin:0 0 32px}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}
.item{position:relative;background:var(--w);color:var(--k);border:3px solid var(--k);box-shadow:6px 6px 0 var(--k);padding:16px 18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:transform .12s, box-shadow .12s}
a.item:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--k)}
.item h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.1}
.item p{margin:0;font-size:15px}
.item .meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;font-weight:700;opacity:.75;margin-top:auto}
.badge{display:inline-block;align-self:flex-start;font-family:var(--f-display);font-size:10px;background:var(--r);color:var(--w);padding:1px 7px}
.badge.soon{background:var(--k);color:var(--y)}
.icon{width:52px;height:52px;display:grid;place-items:center;font-size:24px;background:var(--c);border:3px solid var(--k);box-shadow:3px 3px 0 var(--k)}
.trk{flex-direction:row;align-items:center;gap:14px}
.trk .no{font-family:var(--f-display);font-size:22px;width:2ch}
.trk .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.trk button{font-family:var(--f-display);font-size:11px;background:var(--y);color:var(--k);border:3px solid var(--k);box-shadow:3px 3px 0 var(--k);padding:6px 10px;cursor:pointer;white-space:nowrap}
.trk.playing{background:var(--y)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px;margin-top:36px}
.facts div{border:3px solid currentColor;padding:12px 14px}
.facts dt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.facts dd{margin:4px 0 0;font-family:var(--f-display);font-size:18px}
.bio p{font-size:21px;line-height:1.5;max-width:52ch;margin:0 0 16px}
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.copyrow code{font-family:var(--f-display);font-size:clamp(20px,4vw,34px);background:var(--w);color:var(--k);padding:6px 12px;border:3px solid var(--k);box-shadow:5px 5px 0 var(--k);user-select:all;overflow-wrap:anywhere}
.copybtn{font-family:var(--f-display);font-size:13px;background:var(--y);color:var(--k);border:3px solid var(--k);padding:8px 14px;cursor:pointer;box-shadow:4px 4px 0 var(--k)}

/* article */
.prose{max-width:68ch;font-size:18px;line-height:1.7;background:var(--w);border:3px solid var(--k);box-shadow:8px 8px 0 var(--k);padding:clamp(18px,4vw,40px)}
.prose h2,.prose h3{font-family:var(--f-display);font-weight:400;line-height:1.15;margin:1.6em 0 .5em}
.prose h2{font-size:28px}.prose h3{font-size:22px}
.prose p,.prose ul,.prose ol{margin:0 0 1em}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:6px solid var(--r);font-weight:700}
.prose blockquote p{margin:0}
.prose code{background:var(--y);padding:1px 5px;border:2px solid var(--k);font-size:.9em}
.prose pre{background:var(--k);color:var(--y);padding:16px;overflow-x:auto;border:3px solid var(--k)}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose a{color:var(--b);text-decoration-thickness:2px}
.prose img{border:3px solid var(--k)}
.post-meta{font-weight:700;font-size:14px;margin:0 0 24px}

/* 404 */
.nf h1{color:var(--k)}

/* phone tile tweaks (after base tile styles so they win) */
@media (max-width:639px){
  .grid{gap:12px}
  .t{padding:12px;box-shadow:5px 5px 0 var(--k)}
  .t h2{font-size:20px}
  .t .k{font-size:12px}
  .tick{margin:0 -12px;font-size:12px}
  .t-ar .art{gap:16px}
  .lines{gap:10px}
  .cards{height:168px;margin-right:4px}
  .card{font-size:13px;padding:9px;height:130px}
  .card small{font-size:10px}
  .launch{gap:12px}
  .launch i{width:42px;height:42px;font-size:18px}
  .inv{left:6px;top:6px}
  .vinyl,.shine{width:118px;height:118px;right:-34px;top:-34px}
  .arm{height:74px;right:2px}
  .playbtn{right:10px;bottom:10px;max-width:calc(100% - 20px)}
  .t-mu .tx{padding-bottom:36px}
  .t-hi{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .t-hi .art{order:2;flex:0 0 72px;min-height:56px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:nth-child(2){transform:translate(0,20px) scale(.94);z-index:2}
  .card:nth-child(3){transform:translate(0,40px) scale(.88);z-index:1}
  .card:nth-child(1){z-index:3}
}