/* Layout: a fixed WebGL street behind; tall scroll sections carry camera markers; copy sits on translucent panels to one side of the subject. Single dark look (night street) by choice. */
:root{
  color-scheme:dark;
  --night:#07060b; --glass:rgba(10,8,16,.72); --line:rgba(243,239,230,.14);
  --bone:#f3efe6; --dim:#b8b1c6; --neon:#ff2e88; --cyber:#3fb4ff; --treat:#ffb43a; --eye:#ff2333; --ink:#07060b;
  --f-display:"Bowlby One",Impact,sans-serif; --f-body:"Archivo",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --hud:56px;
}
html body.woodog-avenue *{box-sizing:border-box}
html body.woodog-avenue [hidden]{display:none!important}
html body.woodog-avenue{scroll-behavior:auto}
html body.woodog-avenue{margin:0;background:var(--night);color:var(--bone);font:16px/1.6 var(--f-body);overflow-x:clip}
html body.woodog-avenue a{color:inherit}
html body.woodog-avenue :focus-visible{outline:3px solid var(--cyber);outline-offset:3px;border-radius:4px}
html body.woodog-avenue .mono{font:400 .74rem/1.5 var(--f-mono);letter-spacing:.06em}

/* ---------- 3D layer + overlays ---------- */
html body.woodog-avenue #gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
html body.woodog-avenue .fx{position:fixed;inset:0;pointer-events:none;z-index:2}
html body.woodog-avenue .vignette{background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.65) 100%)}
html body.woodog-avenue .grain{opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(3) infinite}
@keyframes grain{33%{background-position:40px -30px}66%{background-position:-25px 50px}}
/* fallback when there is no WebGL */
html body.woodog-avenue .static-bg{position:fixed;inset:0;z-index:0;display:none;place-items:center;
  background:radial-gradient(ellipse at 70% 20%,rgba(255,46,136,.35),transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(63,180,255,.3),transparent 55%),var(--night)}
html body.woodog-avenue .static-bg svg{width:min(60vw,420px);opacity:.35}
html.no-gl body.woodog-avenue .static-bg{display:grid} html.no-gl body.woodog-avenue #gl{display:none}

/* ---------- loader ---------- */
html body.woodog-avenue #loader{position:fixed;inset:0;z-index:50;background:var(--night);display:grid;place-items:center;transition:opacity .8s,visibility .8s}
html body.woodog-avenue #loader.done{opacity:0;visibility:hidden}
html body.woodog-avenue #loader .box{width:min(360px,80vw);display:grid;gap:12px}
html body.woodog-avenue #loader .count{font:400 clamp(3rem,12vw,6rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
html body.woodog-avenue #loader .bar{height:2px;background:var(--line);overflow:hidden}
html body.woodog-avenue #loader .bar i{display:block;height:100%;width:0;background:var(--neon);box-shadow:0 0 12px var(--neon)}
html body.woodog-avenue #loader .msg{color:var(--dim)}

/* ---------- HUD ---------- */
html body.woodog-avenue #hud{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--hud) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:18px;background:linear-gradient(180deg,rgba(7,6,11,.85),rgba(7,6,11,0))}
html body.woodog-avenue .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.1rem var(--f-display);white-space:nowrap}
html body.woodog-avenue .brand img{width:34px;height:34px;border-radius:50%}
html body.woodog-avenue #hud nav{display:flex;gap:2px}
html body.woodog-avenue #hud nav a{text-decoration:none;font:700 .74rem var(--f-mono);letter-spacing:.06em;color:var(--dim);padding:8px 10px;border-radius:6px;white-space:nowrap}
html body.woodog-avenue #hud nav a:hover,html body.woodog-avenue #hud nav a[aria-current="true"]{color:var(--bone);background:rgba(243,239,230,.08)}
html body.woodog-avenue .hud-r{margin-left:auto;display:flex;gap:8px;align-items:center}
html body.woodog-avenue .tog{font:700 .72rem var(--f-mono);letter-spacing:.06em;color:var(--bone);background:rgba(16,14,23,.8);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer}
html body.woodog-avenue .tog[aria-pressed="true"]{border-color:var(--cyber);color:var(--cyber)}
html body.woodog-avenue .btn{display:inline-flex;align-items:center;gap:.5em;font:800 .95rem/1 var(--f-body);text-decoration:none;cursor:pointer;padding:14px 20px;border-radius:999px;border:2px solid var(--neon);background:var(--neon);color:var(--ink);white-space:nowrap}
html body.woodog-avenue .btn:hover{box-shadow:0 0 24px rgba(255,46,136,.6)}
html body.woodog-avenue .btn.ghost{background:transparent;color:var(--bone);border-color:rgba(243,239,230,.45)}
html body.woodog-avenue .btn.sm{padding:9px 14px;font-size:.85rem}
html body.woodog-avenue #hudFoot{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-between;align-items:end;gap:16px;pointer-events:none;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));color:var(--dim)}
html body.woodog-avenue #coords{font-variant-numeric:tabular-nums}
html body.woodog-avenue .chap{display:grid;gap:6px;justify-items:end;min-width:150px}
html body.woodog-avenue .chap b{color:var(--bone);font-weight:700}
html body.woodog-avenue .chap .prog{width:150px;height:2px;background:var(--line)}
html body.woodog-avenue .chap .prog i{display:block;height:100%;width:0;background:var(--treat)}
@media (max-width:900px){html body.woodog-avenue #hud nav{display:none}}
@media (max-width:520px){html body.woodog-avenue #coords{display:none}html body.woodog-avenue .brand span{display:none}}

/* ---------- scroll chapters ---------- */
html body.woodog-avenue main{position:relative;z-index:10}
html body.woodog-avenue .ch{min-height:130vh;display:flex;align-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20vh}
html body.woodog-avenue .ch.tall{min-height:180vh}
html body.woodog-avenue .ch.right{justify-content:flex-end}
html body.woodog-avenue .ch.center{justify-content:center;text-align:center}
html body.woodog-avenue .panel{width:min(460px,100%);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;min-width:0}
html body.woodog-avenue .panel.bare{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;width:min(720px,100%)}
html body.woodog-avenue .ch .eyebrow{color:var(--cyber)}
html body.woodog-avenue h1{font:400 clamp(3.2rem,11vw,8.5rem)/.9 var(--f-display);margin:0;white-space:nowrap;color:#fff;text-shadow:0 0 2px #fff,0 0 10px var(--neon),0 0 30px var(--neon),0 0 70px var(--neon)}
html body.woodog-avenue h2{font:400 clamp(2rem,5vw,3.4rem)/1 var(--f-display);margin:0;text-wrap:balance}
html body.woodog-avenue .lede{font:800 clamp(1.2rem,2.4vw,1.7rem)/1.2 var(--f-body);margin:0;max-width:22ch}
html body.woodog-avenue p{margin:0;color:var(--dim)}
html body.woodog-avenue .ctas{display:flex;gap:10px;flex-wrap:wrap}
html body.woodog-avenue #top{min-height:100vh;align-items:flex-end;padding-bottom:16vh}
html body.woodog-avenue .by{font-weight:800;color:var(--treat)}
html body.woodog-avenue .draft{font:700 .66rem var(--f-mono);color:var(--treat);border:1px dashed var(--treat);border-radius:5px;padding:1px 6px;white-space:nowrap}
html body.woodog-avenue .creed{display:grid;gap:12px}
html body.woodog-avenue .creed div{display:grid;gap:2px}
html body.woodog-avenue .creed b{font:400 1.5rem var(--f-display)}
html body.woodog-avenue .creed .l{color:var(--cyber)} html body.woodog-avenue .creed .r{color:var(--neon)} html body.woodog-avenue .creed .t{color:var(--treat)}
html body.woodog-avenue .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body.woodog-avenue .item{text-decoration:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(7,6,11,.6)}
html body.woodog-avenue .item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
html body.woodog-avenue .item span{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font-size:.85rem;font-weight:700}
html body.woodog-avenue .item em{font-style:normal;color:var(--treat)}
html body.woodog-avenue form{display:grid;gap:10px}
html body.woodog-avenue label{display:grid;gap:4px;font-size:.85rem;font-weight:600}
html body.woodog-avenue input,html body.woodog-avenue textarea,html body.woodog-avenue select{font:16px var(--f-body);color:var(--bone);background:rgba(7,6,11,.8);border:1px solid rgba(243,239,230,.22);border-radius:10px;padding:11px 12px;width:100%}
html body.woodog-avenue textarea{min-height:100px;resize:vertical}
html body.woodog-avenue .hp{position:absolute;left:-9999px}
html body.woodog-avenue .err{color:#ff8b95;font-size:.8rem;min-height:1em}
html body.woodog-avenue #formStatus{font-weight:700;margin:0}
html body.woodog-avenue .big{font:400 clamp(3.4rem,12vw,9rem)/.9 var(--f-display);color:#fff;text-shadow:0 0 2px #fff,0 0 10px var(--eye),0 0 30px var(--eye),0 0 70px var(--eye);margin:0}
html body.woodog-avenue footer{position:relative;z-index:10;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--dim);
  padding:28px max(16px,env(safe-area-inset-right,0px)) calc(70px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(0deg,var(--night),transparent)}
html body.woodog-avenue .ch.right .panel,html body.woodog-avenue .ch .panel{margin-inline:0}
@media (max-width:760px){
  html body.woodog-avenue .ch,html body.woodog-avenue .ch.right{justify-content:center;align-items:flex-end}
  html body.woodog-avenue .panel{width:100%}
  html body.woodog-avenue .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){html body.woodog-avenue .grain{animation:none}}
html.calm body.woodog-avenue .grain{animation:none}

/* WordPress: admin bar offset for logged-in users */
html body.woodog-avenue.admin-bar #hud{top:32px}
@media (max-width:782px){html body.woodog-avenue.admin-bar #hud{top:46px}}