/* garden-retro v2 — more 60s/70s: sunburst, walnut hi-fi panels, CRT cards, groovy beds */
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Bagel+Fat+One&family=Inter:wght@400;600&display=swap');
:root{--bg:#1d1712;--paper:#2a2019;--ink:#efe3c8;--muted:#cdbd9e;--clay:#e2703a;--orange:#e2703a;--gold:#e0a526;--avocado:#8e9f45;--teal:#3a9e98;--line:#4a3a2c;--shadow:0 10px 28px -12px rgba(0,0,0,.7);
 --walnut:repeating-linear-gradient(92deg,rgba(0,0,0,.0) 0 7px,rgba(0,0,0,.14) 8px,rgba(0,0,0,0) 10px 19px,rgba(255,220,170,.05) 20px,rgba(0,0,0,0) 22px 31px),
  repeating-linear-gradient(88deg,rgba(0,0,0,0) 0 41px,rgba(0,0,0,.22) 43px,rgba(0,0,0,0) 46px 77px),
  linear-gradient(180deg,#4a2f1d,#3a2416 55%,#2e1c11);
 --pop:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}
body{margin:0;background-color:var(--bg);color:var(--ink);font:16px/1.6 Inter,sans-serif;overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.09;mix-blend-mode:overlay;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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#vp{background:radial-gradient(rgba(239,227,200,.045) 1.2px,transparent 1.6px) 0 0/14px 14px,radial-gradient(ellipse at 50% 45%,#2a1f17,var(--bg) 70%)}
h1,h2,h3{line-height:1.15;margin:.2em 0}
h2{font-family:Righteous,sans-serif;font-weight:400;letter-spacing:.02em}
a{color:var(--gold)}
/* walnut hi-fi header */
header.site{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem 1.5rem;flex-wrap:wrap;gap:.5rem;position:relative;z-index:10;background:var(--walnut);box-shadow:inset 0 1px 0 rgba(255,220,170,.12),inset 0 -14px 18px -14px rgba(0,0,0,.6),0 6px 16px -8px #000}
header.site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(var(--orange) 0 33%,var(--gold) 33% 66%,var(--avocado) 66%);
 -webkit-mask:linear-gradient(#000 0 26%,transparent 26% 37%,#000 37% 63%,transparent 63% 74%,#000 74%);mask:linear-gradient(#000 0 26%,transparent 26% 37%,#000 37% 63%,transparent 63% 74%,#000 74%)}
header.site .logo{font:400 1.6rem/1 "Bagel Fat One",Righteous,sans-serif;color:var(--ink);text-decoration:none;letter-spacing:.01em;text-shadow:2px 2px 0 #7a3a18}
header.site nav a{margin-left:1rem;color:var(--ink);text-decoration:none;font-family:Righteous,sans-serif;letter-spacing:.04em}
header.site nav a:hover,header.site nav a:focus-visible{color:var(--gold)}
/* CRT cards */
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:1rem 1.1rem;box-shadow:inset 0 0 18px rgba(224,165,38,.08),var(--shadow);position:relative;color:var(--ink);text-decoration:none;display:block;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 45%,rgba(255,190,120,.07),transparent 60%),
  radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.45) 100%)}
.card .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.card h3{font:600 1.05rem/1.25 Inter,sans-serif;color:var(--ink)}.card p{color:var(--muted);font-size:.88rem;margin:.3em 0 0}
.card .doodle{height:6px;border-radius:6px;margin-bottom:.6rem;background:linear-gradient(var(--orange) 0 33%,var(--gold) 33% 66%,var(--avocado) 66%)!important}
.lock{display:inline-block;width:.85em;height:.85em;vertical-align:-1px;margin-left:.3em}
#vp{flex:1;position:relative;overflow:hidden;cursor:grab;touch-action:none}#world{position:absolute;left:0;top:0;width:1600px;height:1100px;transform-origin:0 0}
/* sunburst */
.sun{position:absolute;left:-200px;top:-450px;width:2000px;height:2000px;border-radius:50%;pointer-events:none;
 background:repeating-conic-gradient(from 0deg,rgba(224,165,38,.045) 0 6deg,transparent 6deg 12deg);
 -webkit-mask:radial-gradient(circle,#000 8%,transparent 55%);mask:radial-gradient(circle,#000 8%,transparent 55%)}
.sun::after{content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px;border-radius:50%;
 background:radial-gradient(circle,rgba(226,112,58,.12) 0 30%,rgba(224,165,38,.08) 30% 52%,rgba(142,159,69,.06) 52% 72%,transparent 72%)}
/* soft organic topic areas */
.bed{position:absolute;width:620px;height:400px;border-radius:48% 52% 45% 55%/55% 45% 55% 45%;
 background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 8%,transparent) 60%,transparent 75%);
 box-shadow:inset 0 0 60px color-mix(in srgb,var(--c) 10%,transparent)}
.bed::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px);pointer-events:none;opacity:.6}
.bed h2{position:absolute;left:50%;top:38px;transform:translateX(-50%);margin:0;font-size:1.9rem;white-space:nowrap;color:color-mix(in srgb,var(--c) 70%,#fff4dc);text-shadow:3px 3px 0 #120b06}
.bed h2 .lock{width:.7em;height:.7em}
/* always-visible retro TV cards */
.post{position:absolute;width:270px;z-index:2}
.post .card{border-radius:18px;padding:.7rem .9rem .75rem;border:2px solid color-mix(in srgb,var(--c) 55%,#3a2a1c);
 transition:transform .3s var(--pop),box-shadow .3s}
.post .card .doodle{background:var(--c)!important;height:5px;margin-bottom:.45rem}
.post .card .tag{display:flex;justify-content:space-between;color:color-mix(in srgb,var(--c) 60%,#fff4dc)!important}
.post .card h3{font-size:1rem;margin:.15em 0 .1em}
.post .card p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.post:hover,.post:focus-within,.post.open{z-index:6}
.post:hover .card,.post:focus-within .card,.post.open .card{transform:translateY(-4px);box-shadow:0 0 26px -4px color-mix(in srgb,var(--c) 60%,transparent),var(--shadow)}
.post:hover .card p,.post:focus-within .card p,.post.open .card p{-webkit-line-clamp:4}
.post .card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* mobile stacked list */
#list{display:none}
@media (max-width:700px){
 #vp{display:none}body{overflow:auto;height:auto}
 #list{display:block;padding:1rem 1rem 2rem;position:relative}
 #list section{border-radius:28px;padding:1rem;margin-bottom:1.2rem;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--c) 20%,transparent),color-mix(in srgb,var(--c) 6%,transparent) 80%)}
 #list h2{color:color-mix(in srgb,var(--c) 70%,#fff4dc);text-shadow:2px 2px 0 #120b06;font-size:1.5rem;margin:.1em 0 .6em}
 #list .post{position:relative;width:auto;margin-bottom:.8rem}
 #list .post .card p{-webkit-line-clamp:3}
 #list .badge{position:static;display:inline-block}
}
/* walnut console + knobs */
.ctrl{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.55rem;z-index:9;padding:.5rem .65rem;border-radius:16px;background:var(--walnut);box-shadow:inset 0 1px 0 rgba(255,220,170,.14),inset 0 0 0 2px #22150c,var(--shadow)}
.ctrl button{font:400 1.2rem/1 Righteous,sans-serif;width:44px;height:44px;border-radius:50%;border:2px solid #1a110a;color:var(--ink);cursor:pointer;
 background:repeating-conic-gradient(rgba(0,0,0,.18) 0 4deg,transparent 4deg 10deg),radial-gradient(circle at 38% 32%,#6a4a33,#3a271a 60%,#24170e);
 box-shadow:0 3px 0 #120b06,0 6px 10px -4px #000,inset 0 1px 0 rgba(255,220,170,.25);transition:transform .15s var(--pop)}
.ctrl button:hover{color:var(--gold);transform:rotate(-12deg)}
.ctrl button:active{transform:translateY(2px);box-shadow:0 1px 0 #120b06,inset 0 1px 0 rgba(255,220,170,.2)}
.ctrl button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hint{position:absolute;left:1rem;bottom:2.6rem;color:var(--muted);font-size:.85rem;z-index:9}
.badge{position:absolute;left:1rem;bottom:1rem;z-index:9;font:400 .72rem/1 Righteous,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:.3rem .7rem;background:rgba(29,23,18,.85)}
@media (max-width:600px){.hint{right:11rem;font-size:.75rem;bottom:2.4rem;line-height:1.35}.badge{font-size:.6rem;letter-spacing:.05em;padding:.28rem .5rem;max-width:calc(100% - 11.5rem);white-space:nowrap}.ctrl{padding:.4rem .5rem;gap:.4rem}header.site nav a{margin-left:.7rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}