/* ==========================================================================
   DannyGlasspool.com — "Grid Ref" theme
   An OS map crossed with a van dashboard. Light + dark mode.
   Colours live in the two blocks at the top: change them there.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face{font-family:"Big Shoulders Display";src:url(/assets/fonts/big-shoulders-display.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}

/* ---------- Colours ---------- */
:root{--paper:#f5efdf;--paper2:#fbf7ec;--ink:#17262b;--mute:#3d4c51;--acc:#07747a;--acc-ink:#fff;--poi:#c2185b;--grid:rgba(41,120,160,.16);--line:#17262b;--card:#fffaf0;--amber:#e08a00;--contour:url(/assets/img/contours-light.svg);--sign:#0d6970;--focus:#c2185b;color-scheme:light}
[data-theme=dark]{--paper:#061015;--paper2:#0a1a21;--ink:#e3f4f5;--mute:#8fa9ae;--acc:#2de2e6;--acc-ink:#03181b;--poi:#ff5c9a;--grid:rgba(45,226,230,.07);--line:#1f3a43;--card:#0a1820;--amber:#ffb547;--contour:url(/assets/img/contours-dark.svg);--sign:#0b5a60;--focus:#ffb547;color-scheme:dark}

/* ---------- Base ---------- */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{background:var(--paper)}
body{font-family:"Space Grotesk",system-ui,sans-serif;color:var(--ink);background:transparent;transition:color .3s;overflow-x:hidden;line-height:1.5}

/* ---------- Sky backgrounds ----------
   Fixed layers behind everything: blue sky + clouds (light), night sky + stars + moon (dark).
   They cross-fade when the toggle is pressed. Star/cloud art: /assets/img/sky-*.svg */
body:before,body:after,html:before,html:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity .8s ease}
/* Night: deepest at the top, a faint teal glow low down, a soft moon, two star fields and a faint chart grid */
/* Night layers, top first: Rame Head coastline (sky-rame-night.svg), moon, stars, chart grid, glow, sky */
body:before{z-index:-4;opacity:0;--moon-x:84%;--moon-y:9%;--moon-s:160px;--coast-pos:center bottom;--coast-size:max(1600px,100%) 240px;
  background:
    url(/assets/img/sky-rame-night.svg) var(--coast-pos)/var(--coast-size) no-repeat,
    url(/assets/img/sky-moon.svg) var(--moon-x) var(--moon-y)/var(--moon-s) var(--moon-s) no-repeat,
    url(/assets/img/sky-stars-b.svg) 120px 40px/940px 940px,
    url(/assets/img/sky-stars-a.svg) 0 0/620px 620px,
    linear-gradient(rgba(45,226,230,.035) 1px,transparent 1px) 0 0/160px 160px,
    linear-gradient(90deg,rgba(45,226,230,.035) 1px,transparent 1px) 0 0/160px 160px,
    radial-gradient(120% 60% at 50% 115%,rgba(45,226,230,.16),transparent 70%),
    linear-gradient(180deg,#030a10 0%,#06141c 45%,#0a2029 100%)}
/* Twinkle: two copies of the star fields fade in and out out of step */
html:before,html:after{z-index:-3;opacity:0}
html:before{background:url(/assets/img/sky-stars-a.svg) 310px 210px/620px 620px}
html:after{background:url(/assets/img/sky-stars-b.svg) 590px 470px/940px 940px}
/* Day: five Rame Head skies (picked with the sky button in the header, saved as 'dg-sky').
   Each is a sky gradient + clouds on body:after, and the Rame Head coastline (St Michael's Chapel,
   seen from Whitsand Bay) on html:after along the bottom of the screen, light mode only.
   Only the active sky's SVGs are downloaded, because only its rule matches. Art: gen_day_d.py */
body:after{z-index:-2;opacity:1}
/* Golden hour: peach golden-hour sky, dusty rose-mauve headland, peach-to-blue sea */
body:after{background:radial-gradient(90% 55% at 78% 108%,rgba(255,196,140,.75) 0,rgba(255,196,140,.35) 45%,rgba(255,196,140,0) 75%),url(/assets/img/sky-clouds-golden.svg) center top/max(1600px,100%) auto repeat-y,linear-gradient(180deg,#a5cfea 0%,#bfdbee 22%,#e0e9ee 40%,#f7eadc 58%,#fbdcc3 78%,#fcd0aa 100%)}
/* Soft dawn: pale pink and lilac melting up into baby blue, lavender-mauve headland, pearly lilac sea */
html[data-sky=dawn] body:after{background:radial-gradient(90% 55% at 78% 108%,rgba(255,190,210,.75) 0,rgba(255,190,210,.35) 45%,rgba(255,190,210,0) 75%),url(/assets/img/sky-clouds-dawn.svg) center top/max(1600px,100%) auto repeat-y,linear-gradient(180deg,#b9d7f0 0%,#cddff2 22%,#e2e2f2 40%,#efdeef 58%,#f6d9e4 78%,#f9d3dc 100%)}
/* Cornish summer: clear bright blue sky, crisp white clouds, green fields on the headland, turquoise sea, golden sand */
html[data-sky=summer] body:after{background:radial-gradient(90% 55% at 78% 108%,rgba(255,240,190,.75) 0,rgba(255,240,190,.35) 45%,rgba(255,240,190,0) 75%),url(/assets/img/sky-clouds-summer.svg) center top/max(1600px,100%) auto repeat-y,linear-gradient(180deg,#7fc0ea 0%,#93cbef 22%,#acd8f3 40%,#c6e5f6 58%,#dbf0f8 78%,#e8f6f8 100%)}
/* Sunset blaze: deep coral and orange glowing up into dusky purple, plum silhouette, dark sea with gold glints */
html[data-sky=blaze] body:after{background:radial-gradient(90% 55% at 78% 108%,rgba(255,150,90,.75) 0,rgba(255,150,90,.35) 45%,rgba(255,150,90,0) 75%),url(/assets/img/sky-clouds-blaze.svg) center top/max(1600px,100%) auto repeat-y,linear-gradient(180deg,#8d86c4 0%,#a993c8 22%,#cf9cbf 40%,#f0a9a0 58%,#f8b585 78%,#fbbf72 100%)}
/* Sea mist: muted sea-mist greys and soft sage, grey-green headland fading into the haze, soft teal sea */
html[data-sky=mist] body:after{background:radial-gradient(90% 55% at 78% 108%,rgba(235,240,230,.75) 0,rgba(235,240,230,.35) 45%,rgba(235,240,230,0) 75%),url(/assets/img/sky-clouds-mist.svg) center top/max(1600px,100%) auto repeat-y,linear-gradient(180deg,#b9cdd0 0%,#c6d5d5 22%,#d2dcd8 40%,#dbe2da 58%,#e3e7dd 78%,#e8eadf 100%)}
html[data-theme=light]:after{z-index:-1;opacity:.92;background:center bottom/max(1600px,100%) 240px no-repeat;background-image:url(/assets/img/sky-rame-golden.svg)}
html[data-theme=light][data-sky=dawn]:after{opacity:0.92;background-image:url(/assets/img/sky-rame-dawn.svg)}
html[data-theme=light][data-sky=summer]:after{opacity:0.92;background-image:url(/assets/img/sky-rame-summer.svg)}
html[data-theme=light][data-sky=blaze]:after{opacity:0.9;background-image:url(/assets/img/sky-rame-blaze.svg)}
html[data-theme=light][data-sky=mist]:after{opacity:0.9;background-image:url(/assets/img/sky-rame-mist.svg)}
@media (max-width:700px){html[data-theme=light]:after{background-position:39% bottom;background-size:1000px 150px}}
[data-theme=dark] body:after{opacity:0}
[data-theme=dark] body:before{opacity:1}
[data-theme=dark] html:before{opacity:1;animation:twinkle 5s ease-in-out infinite alternate}
[data-theme=dark] html:after{opacity:.2;animation:twinkle 7s ease-in-out -3.5s infinite alternate-reverse}
@media (max-width:700px){body:before{--moon-x:92%;--moon-y:16%;--moon-s:116px;--coast-pos:39% bottom;--coast-size:1000px 150px}}
/* twinkling stars fade out near the horizon so they never twinkle over Rame Head or the sea */
html[data-theme=dark]:before,html[data-theme=dark]:after{-webkit-mask-image:linear-gradient(#000 calc(100% - 250px),transparent calc(100% - 140px));mask-image:linear-gradient(#000 calc(100% - 250px),transparent calc(100% - 140px))}
@media (max-width:700px){html[data-theme=dark]:before,html[data-theme=dark]:after{-webkit-mask-image:linear-gradient(#000 calc(100% - 165px),transparent calc(100% - 90px));mask-image:linear-gradient(#000 calc(100% - 165px),transparent calc(100% - 90px))}}
@keyframes twinkle{from{opacity:.15}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  body:before,body:after,html:before,html:after{transition:none}
  [data-theme=dark] html:before,[data-theme=dark] html:after{animation:none;opacity:.6}
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--acc);color:var(--acc-ink);padding:10px 16px;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:18px;height:18px;flex:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 48px}
.mono,.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace}
.display{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;text-transform:uppercase;line-height:.88}
.display em{font-style:normal;color:var(--acc)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.hd{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.wm{display:inline-block;height:52px;line-height:0}
.wm img{height:100%;width:auto}
.wm .wm-w{display:none}
[data-theme=dark] .wm .wm-d{display:none}[data-theme=dark] .wm .wm-w{display:block}
.brand small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;letter-spacing:2px;line-height:1.4;color:var(--mute);border-left:2px solid var(--line);padding-left:12px;text-transform:uppercase}
.nav{margin-left:auto}
.nav ul{display:flex;gap:26px;list-style:none;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.nav a{display:block;padding:8px 0}
.nav a:hover,.nav a[aria-current=page]{color:var(--acc)}
.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav a b{color:var(--acc);margin-right:6px}
.menu-btn{display:none;margin-left:auto;height:38px;padding:0 12px;border:2px solid var(--line);background:var(--paper2);color:var(--ink);font:700 11px "JetBrains Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;align-items:center;gap:8px}
.menu-btn .bars{width:16px;height:10px;border-block:2px solid currentColor;position:relative}
.menu-btn .bars:after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor}
.theme-tog{flex:none;width:76px;height:38px;border-radius:20px;border:2px solid var(--line);background:var(--paper2);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:var(--mute)}
.theme-tog svg{width:16px;height:16px;position:relative;z-index:1}
.theme-tog:after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--amber);transition:transform .25s}
[data-theme=dark] .theme-tog:after{transform:translateX(38px);background:var(--acc);box-shadow:0 0 14px var(--acc)}
.theme-tog .ic-sun{color:#3b2500}[data-theme=dark] .theme-tog .ic-sun{color:var(--mute)}[data-theme=dark] .theme-tog .ic-moon{color:var(--acc-ink)}
/* Sky picker: a round swatch of the current day sky with a tiny Rame Head on it. Hidden in dark mode
   (there's just the one night scene). Its name pops up underneath on hover, focus, or when changed. */
.sky-pick{position:relative;flex:none;margin-right:-16px}
.sky-tog{display:block;width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--paper2);padding:3px;cursor:pointer;transition:transform .15s}
.sky-tog:hover{transform:rotate(-12deg)}
.sky-sw{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;background:var(--sw);color:var(--sw-land)}
.sky-sw svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
.sky-name{position:absolute;top:calc(100% + 8px);right:-6px;white-space:nowrap;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--paper2);color:var(--ink);border:2px solid var(--line);padding:4px 8px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.sky-name.show,.sky-tog:hover+.sky-name,.sky-tog:focus-visible+.sky-name{opacity:1;transform:none}
[data-theme=dark] .sky-pick{display:none}
:root{--sw:linear-gradient(180deg,#a5cfea,#f7eadc 55%,#fcd0aa);--sw-land:#b19aa2}
[data-sky=dawn]{--sw:linear-gradient(180deg,#b9d7f0,#efdeef 55%,#f9d3dc);--sw-land:#a99ab6}
[data-sky=summer]{--sw:linear-gradient(180deg,#7fc0ea,#c6e5f6 55%,#e8f6f8);--sw-land:#7fa86b}
[data-sky=blaze]{--sw:linear-gradient(180deg,#8d86c4,#f0a9a0 55%,#fbbf72);--sw-land:#6f5274}
[data-sky=mist]{--sw:linear-gradient(180deg,#b9cdd0,#dbe2da 55%,#e8eadf);--sw-land:#93a596}
@media (prefers-reduced-motion:reduce){.sky-tog,.sky-name{transition:none}}
@media(max-width:400px){.wm{height:34px}.hd{gap:8px}.sky-tog{width:36px;height:36px}}

/* ---------- Shared bits ---------- */
.ref{display:inline-flex;gap:14px;align-items:center;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;letter-spacing:1.5px;border:2px solid var(--line);padding:8px 14px;background:var(--paper2);text-transform:uppercase}
.ref i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--poi);box-shadow:0 0 0 4px color-mix(in srgb,var(--poi) 25%,transparent)}
.lede{font-size:21px;line-height:1.5;max-width:580px;color:var(--mute)}
.lede b,.lede strong{color:var(--ink)}
.btns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:16px 22px;border:2px solid var(--line);background:var(--paper2);color:var(--ink);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn svg{width:16px;height:16px}
.btn.p{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.inset{position:relative;border:2px solid var(--line);background:var(--paper2);padding:14px}
.inset>picture img,.inset>img{width:100%;object-fit:cover}
.inset .lbl{position:absolute;top:-13px;left:22px;background:var(--paper);padding:2px 10px;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:2px;border:2px solid var(--line);z-index:2;text-transform:uppercase}
.cn{position:absolute;width:26px;height:26px;border:3px solid var(--acc);z-index:1}
.cn.a{top:24px;left:24px;border-right:0;border-bottom:0}.cn.b{top:24px;right:24px;border-left:0;border-bottom:0}.cn.c{bottom:24px;left:24px;border-right:0;border-top:0}.cn.d{bottom:24px;right:24px;border-left:0;border-top:0}
.pin{position:absolute;display:flex;align-items:center;gap:10px;z-index:1}
.pin i{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--poi);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.pin span{background:#fff;color:#17262b;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;padding:5px 8px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head h2{font-size:84px}
.sec-head p{max-width:520px;color:var(--mute);font-size:17px}
.code{display:inline-flex;align-items:stretch;border:2px dashed var(--acc);background:var(--paper2);font-family:"JetBrains Mono",monospace;vertical-align:middle}
.code span{padding:10px 14px;font-weight:700;font-size:20px;letter-spacing:2px;color:var(--ink)}
.code button{border:0;border-left:2px dashed var(--acc);background:transparent;color:var(--acc);font:700 11px "JetBrains Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;padding:0 14px;cursor:pointer}
.code button:hover{background:var(--acc);color:var(--acc-ink)}
.code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;font-weight:500}

/* ---------- Home: hero ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:110px}
.hero h1{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:168px;line-height:.82;text-transform:uppercase;letter-spacing:-2px;margin:26px 0 22px}
.hero h1 .o{color:transparent;-webkit-text-stroke:3px var(--ink)}
.hero h1 .a{color:var(--acc)}
[data-theme=dark] .hero h1 .a{text-shadow:0 0 30px rgba(45,226,230,.35)}
.hero .inset img.photo{height:520px;object-position:center 25%}
.hero .pin{left:58%;top:38%}
.mapbadge{position:absolute;right:-66px;bottom:-84px;width:224px;transform:rotate(7deg);z-index:3;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.mapbadge img{width:100%;height:auto}

/* ---------- Home: socials dashboard ---------- */
.dash{border:2px solid var(--line);background:var(--paper2);display:grid;grid-template-columns:260px repeat(4,1fr);margin-bottom:56px;list-style:none}
.dash>*{padding:22px 18px;border-right:2px solid var(--line)}.dash>*:last-child{border-right:0}
.dash h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:40px;line-height:.9;text-transform:uppercase}
.dash h2 em{font-style:normal;color:var(--acc)}
.odo{display:flex;gap:3px;margin-top:14px}
.odo b{font-family:"JetBrains Mono",monospace;background:var(--ink);color:var(--paper);width:26px;height:34px;display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:3px}
.odo b:last-child{background:var(--amber);color:#1b1000}
.dial{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;height:100%;text-align:center}
.dial .g{width:104px;height:104px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(from -135deg,var(--ink) 0 1.4deg,transparent 1.4deg 13.5deg)}
.dial .g:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--paper2)}
.dial .g:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -135deg,var(--acc) 0 var(--v,200deg),transparent var(--v,200deg));-webkit-mask:radial-gradient(circle,transparent 47px,#000 48px);mask:radial-gradient(circle,transparent 47px,#000 48px)}
.dial svg{width:34px;height:34px;position:relative;z-index:1}
.dial:hover .g svg{color:var(--acc)}
.dial small{font-weight:400;color:var(--mute);font-size:10px;letter-spacing:.5px;text-transform:none;word-break:break-word}

/* ---------- Ticker ---------- */
.tick{position:relative;border-block:2px solid var(--line);background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap}
.tick-track{display:inline-flex;align-items:center;animation:tk 34s linear infinite;padding:16px 0}
.tick:hover .tick-track,.tick:focus-within .tick-track,.tick.paused .tick-track{animation-play-state:paused}
.tick ul{display:inline-flex;align-items:center;list-style:none}
.tick a{display:inline-block;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:36px;text-transform:uppercase;letter-spacing:1px;margin:0 22px}
.tick a:hover{color:var(--acc)}
[data-theme=light] .tick a:hover{color:#5fe3e6}
.tick li:after{content:"◆";color:var(--amber);font-family:"JetBrains Mono",monospace;font-size:20px}
.tick :focus-visible{outline-color:var(--amber);outline-offset:-2px}
[data-theme=dark] .tick{background:var(--acc);color:var(--acc-ink)}[data-theme=dark] .tick li:after{color:var(--acc-ink)}[data-theme=dark] .tick a:hover{color:#fff}[data-theme=dark] .tick :focus-visible{outline-color:var(--acc-ink)}
.tick-pause{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:2px solid currentColor;background:var(--ink);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;font:700 12px "JetBrains Mono",monospace}
[data-theme=dark] .tick-pause{background:var(--acc);color:var(--acc-ink)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- Home: links (cards) ---------- */
.route{display:grid;grid-template-columns:300px 1fr;gap:40px;padding-top:80px;padding-bottom:40px;scroll-margin-top:80px}
.legend{position:sticky;top:110px;align-self:start;border:2px solid var(--line);background:var(--paper2);padding:24px}
.legend h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:64px;line-height:.85;text-transform:uppercase}
.legend h2 em{font-style:normal;color:var(--acc)}
.legend p{font-size:14px;color:var(--mute);margin:12px 0 18px;line-height:1.5}
.legend ol{list-style:none;border-top:2px solid var(--line)}
.legend li a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.legend li a:hover{color:var(--acc)}
.wp{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--acc);display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:var(--acc);background:var(--paper2)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:22px;list-style:none}
.cards>li{display:flex}
.card{position:relative;flex:1;border:2px solid var(--line);background:var(--card);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover,.card:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--acc)}
.card .ph{position:absolute;inset:0}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card.photo{color:#fff}
.card.photo .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,21,0) 30%,rgba(6,16,21,.92))}
.card>*:not(.ph){position:relative}
.card .top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:flex-end;align-items:center}
.card .go{width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:center}
.card .go svg{width:20px;height:20px}
.card h3{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:46px;line-height:.9;text-transform:uppercase}
.card p{font-size:15px;line-height:1.45;margin-top:8px;max-width:420px}
.c-hair{grid-column:span 3;grid-row:span 4}.c-hair h3{font-size:clamp(60px,6.2vw,76px)}
.c-hair .ph img{object-position:center 30%}
.c-scr{grid-column:span 3;grid-row:span 2}
.c-scr .ph{left:auto;width:42%;border-left:2px solid var(--line)}
.c-scr h3,.c-scr p{max-width:56%}
.c-kit{grid-column:span 3;grid-row:span 2}
.c-kit .card{background:var(--acc);color:var(--acc-ink)}
.c-kit .go{background:var(--acc-ink);color:var(--acc)}
.c-kit .ph{left:auto;width:44%;display:flex;align-items:center;justify-content:center;padding:52px 14px 14px 0}
.c-kit .ph img{width:100%;height:auto;max-height:100%;object-fit:contain;background:#fff;border-radius:12px;padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.c-kit h3,.c-kit p{max-width:55%}
.c-pat,.c-kofi{grid-column:span 2;grid-row:span 2}
.c-pat .ph img{object-position:center 20%}
.c-kofi .ph img{object-position:center 30%}

/* ---------- Work with me (road sign) ---------- */
.sign-wrap{padding-top:60px;padding-bottom:90px;scroll-margin-top:80px}
.sign{background:var(--sign);color:#fff;border-radius:22px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.sign-in{border:4px solid #fff;border-radius:14px;padding:46px 54px;display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center}
.sign .sym{width:150px;height:150px;border:4px solid #fff;border-radius:12px;display:flex;align-items:center;justify-content:center}
.sign .sym svg{width:84px;height:84px}
.sign h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:110px;line-height:.82;text-transform:uppercase}
.sign p{font-size:18px;line-height:1.5;margin-top:14px;max-width:560px}
.sign .arrow{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:180px;line-height:.7}
.sign .btn{border-color:#fff;color:#fff;background:transparent}.sign .btn.p{background:#fff;color:var(--sign)}
.sign .btn:hover{box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.sign :focus-visible{outline-color:#ffb547}

/* ---------- Inner pages ---------- */
.page-hero{padding-top:56px;padding-bottom:64px}
.page-hero h1{font-size:150px;letter-spacing:-1px;margin:24px 0 20px}
.page-hero h1 .o{color:transparent;-webkit-text-stroke:3px var(--ink)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ba figure{margin:0}
.ba .inset img{aspect-ratio:3/4;height:auto}
.ba figcaption{margin-top:14px;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:40px;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.ba figcaption .wp{width:34px;height:34px}
.band{padding-top:70px;padding-bottom:70px;scroll-margin-top:80px}
.band.ink{background:var(--paper2);border-block:2px solid var(--line)}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none}
.reel{border:2px solid var(--line);background:var(--card);display:flex;flex-direction:column}
.reel h3{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:2px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.reel .frame{background:#fff;flex:1}
.reel iframe{width:100%;height:580px;border:0;background:#fff}
.reel .frame.vid{background:#000;flex:0 0 auto}
.reel video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000}
.reel .ig-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:2px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.reel .ig-link:hover{color:var(--acc)}
.prose{max-width:760px;font-size:19px;line-height:1.65}
.prose p+p{margin-top:18px}
.prose strong{color:var(--acc)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;list-style:none}
.contact-grid>li{display:flex}
.contact-grid .card{min-height:260px}
.contact-grid .card .ic{position:absolute;top:18px;left:18px;width:52px;height:52px;border:2px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.contact-grid .card .ic svg{width:24px;height:24px}
.contact-grid .card .go{position:absolute;top:18px;right:18px}
.scrolly-img{max-width:460px;margin-left:auto;transform:rotate(2deg)}
.scrolly-img img{width:100%;height:auto;aspect-ratio:516/524}
.reel-solo{max-width:360px;margin:0 auto}
.reel-solo iframe{height:720px}
.cta-panel{text-align:center;padding:60px 28px;border:2px solid var(--line);background:var(--paper2);position:relative}
.cta-panel h2{font-size:96px}
.cta-panel p{color:var(--mute);font-size:18px;margin:14px auto 0;max-width:560px}
.cta-panel .code-row,.cta-panel .btns{justify-content:center}

/* ---------- 404 ---------- */
.nf{padding-top:56px;padding-bottom:90px}
.nf h1{font-size:200px;letter-spacing:-2px;margin:20px 0 10px}
.nf h1 .o{color:transparent;-webkit-text-stroke:3px var(--ink)}
.nf .inset img{height:420px;filter:grayscale(.35)}
.nf .pin{left:44%;top:46%}

/* ---------- Footer ---------- */
.site-footer{border-top:2px solid var(--line);background:var(--paper2)}
.ft{display:grid;grid-template-columns:1fr auto;gap:28px 40px;padding-top:44px;padding-bottom:36px;align-items:start}
.ft h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:40px;text-transform:uppercase;line-height:.9}
.ft p{color:var(--mute);font-size:14px;margin-top:8px;max-width:440px}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.ft-links a{display:inline-block;padding:4px 0}
.ft-links a:hover{color:var(--acc)}
.ft-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.soc{display:flex;gap:10px;list-style:none;flex-wrap:wrap}
.soc a{width:44px;height:44px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);background:var(--paper)}
.soc svg{width:18px;height:18px}.soc a:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.scale{display:flex;flex-direction:column;gap:6px}
.scale .bar{display:flex;border:2px solid var(--ink);width:206px;height:12px}.scale .bar i{flex:1;background:var(--ink)}.scale .bar i:nth-child(2n){background:transparent}
.ft-base{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:20px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:1px;color:var(--mute)}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
.hero h1{font-size:128px}
.dash{grid-template-columns:repeat(4,1fr)}.dash>.dash-t{grid-column:1/-1;border-right:0;border-bottom:2px solid var(--line);display:flex;align-items:center;justify-content:space-between}.dash .odo{margin-top:0}
.route{grid-template-columns:1fr}.legend{position:static}
.page-hero h1{font-size:120px}
.reels{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.mapbadge{right:-12px}
.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--line);margin:0}
.nav.open{display:block}
.nav ul{flex-direction:column;gap:0;padding:8px 18px 14px}
.nav li a{padding:14px 0;border-bottom:1px dashed var(--line);font-size:13px}
.menu-btn{display:inline-flex}
.split{grid-template-columns:1fr;gap:40px}
.hero{grid-template-columns:1fr}
.scrolly-img{margin:0 auto}
.sign-in{grid-template-columns:1fr;gap:22px}.sign .arrow{display:none}
}
@media(max-width:700px){
.wrap{padding:0 18px}.hd{height:64px;gap:10px}.wm{height:40px}.brand small{display:none}.sky-pick{margin-right:-4px}
.hero{gap:44px;padding-top:30px;padding-bottom:90px}
.hero h1{font-size:78px;letter-spacing:-1px;margin:18px 0}.hero h1 .o,.page-hero h1 .o,.nf h1 .o{-webkit-text-stroke:2px var(--ink)}
.lede{font-size:17px}.btns .btn{flex:1 1 auto;justify-content:center;padding:15px 12px;font-size:12px}
.hero .inset img.photo{height:360px}.hero .pin{left:46%;top:30%}
.mapbadge{width:132px;right:-8px;bottom:-62px}
.dash>*{padding:14px 4px}.dash h2{font-size:30px}
.dash>li:not(.dash-t){padding:18px 4px}
.dial .g{width:68px;height:68px}.dial .g:before{inset:6px}.dial .g:after{-webkit-mask:radial-gradient(circle,transparent 30px,#000 31px);mask:radial-gradient(circle,transparent 30px,#000 31px)}.dial svg{width:24px;height:24px}.dial{font-size:10px;gap:8px;letter-spacing:.5px}.dial small{display:none}
.tick a{font-size:26px;margin:0 14px}.tick-track{padding:12px 0}.tick-pause{width:32px;height:32px;right:6px}
.route{padding-top:50px;gap:24px}.legend h2{font-size:52px}.legend ol{display:none}
.cards{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
.cards>li{grid-column:auto!important;grid-row:auto!important;min-height:250px}
.c-hair{min-height:440px!important}.c-hair h3{font-size:60px}.card h3{font-size:40px}
.c-scr .ph,.c-kit .ph{width:40%}
.sign-in{padding:28px 22px}.sign .sym{width:90px;height:90px}.sign .sym svg{width:50px;height:50px}.sign h2{font-size:66px}
.sign .btns{flex-direction:column}.sign .btn{width:100%;font-size:11px;letter-spacing:.3px;padding:15px 8px;word-break:break-all}
.sign-wrap{padding-bottom:50px}
.page-hero{padding-top:30px;padding-bottom:44px}.page-hero h1{font-size:76px}
.sec-head h2,.cta-panel h2{font-size:54px}
.ba{gap:14px}.ba figcaption{font-size:28px}
.band{padding-top:50px;padding-bottom:50px}
.reels{grid-template-columns:1fr}
.prose{font-size:17px}
.contact-grid{grid-template-columns:1fr}
.reel iframe,.reel-solo iframe{height:600px}
.cta-panel{padding:40px 18px}
.code span{font-size:17px}
.nf h1{font-size:110px}.nf .inset img{height:260px}
.ft{grid-template-columns:1fr}.ft-right{align-items:flex-start}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}
.tick{white-space:normal}.tick-track{display:block;padding:14px 18px}.tick ul{flex-wrap:wrap;justify-content:center;display:flex}.tick ul[aria-hidden]{display:none}.tick-pause{display:none}
}

/* small extras */
.split.ba-split{grid-template-columns:.95fr 1.05fr}
@media(max-width:900px){.split.ba-split{grid-template-columns:1fr}}
@media(max-width:700px){
.cards .card{padding-top:78px}
.c-kit .ph{padding-top:70px}
.legend{padding:20px}.legend h2 br{display:none}.legend h2{font-size:48px}.legend p{margin-bottom:0}
.contact-grid .card{padding-top:90px;min-height:0}
}
.prose-sub{margin-top:20px;font-size:17px;color:var(--mute)}
.reels.reel-solo{grid-template-columns:1fr}

/* ---------- Foxygen (card + page) ---------- */
/* Card grid with 7 cards: Hair (tall) | Scrolly + Foxygen stacked; Discount codes + Storefront; Patreon + Ko-fi */
.c-fox{grid-column:span 3;grid-row:span 2}
.c-fox .ph{left:auto;width:42%;border-left:2px solid var(--line);background:color-mix(in srgb,var(--acc) 14%,var(--paper2));display:flex;align-items:center;justify-content:center;padding:70px 12px 16px}
.c-fox .ph img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.c-fox h3,.c-fox p{max-width:56%}
.c-kit{grid-column:span 4}
.c-codes{grid-column:span 2;grid-row:span 2}
.c-pat,.c-kofi{grid-column:span 3}
.c-codes .card{background:radial-gradient(circle at 0 50%,transparent 13px,var(--card) 14px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 13px,var(--card) 14px) right/51% 100% no-repeat;border-style:dashed;border-color:var(--acc)}
.c-codes .pct{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:120px;line-height:.7;color:var(--amber);margin-bottom:auto;margin-top:46px}
.see-all{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--acc);text-decoration:underline;text-underline-offset:5px}
.codes-hero{padding-bottom:36px}
.codes-wrap{padding-bottom:90px}
@media(max-width:700px){.c-codes .pct{font-size:90px}}
/* Discount codes page: tear-off tickets. Notches are cut with a mask on .tk-in; the outline comes from
   stacked drop-shadows on .tk so it follows the notches. The stub height (--stub) sets where the tear line sits. */
.codes-odo{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.codes-odo .odo{margin-top:0}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none}
.tk{--stub:116px;--o:var(--line);min-width:0;filter:drop-shadow(2px 0 0 var(--o)) drop-shadow(-2px 0 0 var(--o)) drop-shadow(0 2px 0 var(--o)) drop-shadow(0 -2px 0 var(--o)) drop-shadow(0 0 0 transparent);transition:transform .2s,filter .2s}
.tk:hover,.tk:focus-within{transform:translate(-3px,-3px) rotate(-.6deg);filter:drop-shadow(2px 0 0 var(--o)) drop-shadow(-2px 0 0 var(--o)) drop-shadow(0 2px 0 var(--o)) drop-shadow(0 -2px 0 var(--o)) drop-shadow(6px 6px 0 var(--o))}
.tk:nth-child(even):hover,.tk:nth-child(even):focus-within{transform:translate(-3px,-3px) rotate(.6deg)}
.tk-in{--cut:calc(100% - var(--stub));position:relative;height:100%;display:flex;flex-direction:column;background:var(--card);
  -webkit-mask:radial-gradient(circle 15px at 0 var(--cut),transparent 14.5px,#000 15px) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% var(--cut),transparent 14.5px,#000 15px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 15px at 0 var(--cut),transparent 14.5px,#000 15px) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% var(--cut),transparent 14.5px,#000 15px) right/51% 100% no-repeat}
.tk-no{position:absolute;top:16px;left:20px;z-index:1;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;background:var(--paper);color:var(--ink);padding:4px 8px;border:1.5px solid var(--line);text-transform:uppercase}
.tk-top{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:62px 26px 26px}
.tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%}
.tk-deal{display:flex;align-items:flex-start;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;text-transform:uppercase;line-height:.78}
.tk-deal b{font-size:138px;letter-spacing:-3px;color:var(--amber);text-shadow:4px 4px 0 var(--ink)}
.tk-deal span{font-size:38px;line-height:.86;margin:6px 0 0 10px;color:var(--ink)}
.tk-ph{flex:none;width:108px;aspect-ratio:1;margin-top:-34px;border:6px solid #fff;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.25);transform:rotate(5deg);overflow:hidden}
.tk:nth-child(even) .tk-ph{transform:rotate(-4deg)}
.tk-ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.tk h2{margin-top:20px;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:42px;line-height:.9;text-transform:uppercase}
.tk-me{margin-top:16px;font-size:15px;line-height:1.45;color:var(--ink);background:color-mix(in srgb,var(--amber) 13%,var(--card));border-left:3px solid var(--amber);padding:10px 12px}
.stamp{display:table;margin:0 0 7px -2px;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--poi);border:2px solid var(--poi);padding:2px 7px;transform:rotate(-3deg)}
.tk-txt{margin:12px 0 24px;color:var(--mute);font-size:16px}
.tk-top .btn{margin-top:auto}
.tk-stub{position:relative;height:var(--stub);flex:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 26px;background:color-mix(in srgb,var(--acc) 9%,var(--card))}
.tk-stub:before{content:"";position:absolute;top:-1px;left:24px;right:24px;border-top:2px dashed var(--line)}
[data-theme=dark] .tk-stub:before{border-top-color:var(--mute)}
.tk-lbl{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.tk-stub .code-row{margin-top:0}
.tk-stub .code{background:var(--card)}
.tk-stub .code button{min-width:76px;transition:background .15s,color .15s}
.tk-done{position:absolute;right:16px;top:-16px;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:1px;color:var(--poi);background:var(--card);border:3px solid var(--poi);border-radius:4px;padding:4px 10px 3px;opacity:0;transform:rotate(-9deg) scale(.5);pointer-events:none}
.tk.is-copied .code{border-style:solid;border-color:var(--amber)}
.tk.is-copied .code button{background:var(--amber);color:#1b1000;border-left-style:solid;border-left-color:var(--amber)}
.tk.is-copied .tk-done{animation:tk-stamp .42s cubic-bezier(.2,1.5,.45,1) forwards}
@keyframes tk-stamp{0%{opacity:0;transform:rotate(-9deg) scale(2.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
/* the "your brand here" ticket: brown road-sign colours, spans the whole row */
.tk-next{grid-column:1/-1;--o:var(--line)}
.tk-next .tk-in{--cut:50%;flex-direction:row;align-items:center;gap:32px;padding:56px 56px 40px;background:var(--sign);color:#fff}
.tk-next .tk-no{background:transparent;color:#fff;border-color:#fff;left:56px;top:20px}
.tk-next-txt{flex:1}
.tk-next h2{margin-top:0;font-size:72px;line-height:.85}
.tk-next h2 em{font-style:normal;color:#ffb547}
.tk-next p{margin-top:10px;font-size:17px;line-height:1.5;max-width:560px}
.tk-next .btn.p{flex:none;background:#fff;color:var(--sign);border-color:#fff}
.tk-next .btn.p:hover{box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.tk-next :focus-visible{outline-color:#ffb547}
@media(max-width:1000px){.tickets{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
.tickets{grid-template-columns:1fr;gap:22px}
.tk{--stub:110px}
.tk-top{padding:58px 22px 22px}.tk-stub{padding:0 22px}.tk-stub:before{left:22px;right:22px}
.tk-deal b{font-size:120px}.tk-deal span{font-size:34px}
.tk-ph{width:92px;margin-top:-30px}
.tk h2{font-size:38px}
.tk-next .tk-in{flex-direction:column;align-items:flex-start;gap:20px;padding:56px 22px 28px}
.tk-next .tk-no{left:22px}
.tk-next h2{font-size:52px}
.tk-next .btn.p{width:100%;justify-content:center;font-size:12px;letter-spacing:.8px;padding:15px 10px}
}
@media (prefers-reduced-motion:reduce){.tk:hover,.tk:focus-within,.tk:nth-child(even):hover,.tk:nth-child(even):focus-within{transform:none}.tk.is-copied .tk-done{opacity:1;transform:rotate(-9deg)}}
.disclose{margin-top:22px;font-size:14px;line-height:1.5;color:var(--mute);max-width:560px;border-left:3px solid var(--amber);padding-left:12px}
.cta-panel .disclose{margin:22px auto 0;text-align:left;font-size:13px}
.fox-img img{aspect-ratio:1;background:#fbf6f8}
.specs{display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--line);background:var(--card)}
.specs>div{padding:20px 18px;border-right:2px solid var(--line)}.specs>div:last-child{border-right:0}
.specs dt{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
.specs dd{margin-top:12px;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:30px;line-height:1;text-transform:uppercase}
@media(max-width:1180px){.specs{grid-template-columns:1fr 1fr}.specs>div{border-right:0;border-bottom:2px solid var(--line)}.specs>div:nth-child(odd){border-right:2px solid var(--line)}.specs>div:last-child{grid-column:1/-1;border-bottom:0;border-right:0}}
@media(max-width:700px){.c-fox .ph{width:40%}.c-fox .ph{padding:70px 8px 12px}.specs{grid-template-columns:1fr}.specs>div,.specs>div:nth-child(odd){border-right:0}.specs dd{font-size:26px}}

/* ---- Homepage: latest YouTube video banner ("Now showing", under the hero) ---- */
:root{--yt:#ff0033;--yt-t:#d40029}[data-theme=dark]{--yt-t:#ff5a7a}
.btn.yt-red{background:var(--yt);border-color:var(--yt);color:#fff}
.ytc{margin:0 0 64px;border-bottom:2px solid var(--line);background:#061015;color:#fff;position:relative}
.ytc-nl{display:flex;justify-content:space-between;gap:12px;padding:7px 48px;font:700 11px "JetBrains Mono",monospace;letter-spacing:3px;text-transform:uppercase;background:var(--paper);color:var(--ink);border-bottom:2px solid var(--line);position:relative}
.ytc-nl:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:8px;z-index:3;background:repeating-linear-gradient(90deg,var(--ink) 0 40px,var(--paper) 40px 80px);border-bottom:2px solid var(--line)}
.ytc-nl.b{border-bottom:0;border-top:2px solid var(--line)}
.ytc-nl.b:after{bottom:auto;top:-10px;border-bottom:0;border-top:2px solid var(--line)}
.ytc-body{position:relative;min-height:470px;display:flex;align-items:center;overflow:hidden}
.ytc-img{position:absolute;inset:0;z-index:0;display:block}
.ytc-img img{position:absolute;right:0;top:0;height:100%;width:72%;object-fit:cover;object-position:70% center}
.ytc-img:before{content:"";position:absolute;inset:0;z-index:1;--ytx:max(48px,calc((100% - 1360px)/2 + 48px));background:linear-gradient(90deg,#061015 0,#061015 calc(var(--ytx) + 380px),rgba(6,16,21,.88) calc(var(--ytx) + 560px),rgba(6,16,21,.55) calc(var(--ytx) + 690px),rgba(6,16,21,.2) calc(var(--ytx) + 810px),rgba(6,16,21,0) calc(var(--ytx) + 920px)),linear-gradient(rgba(45,226,230,.09) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(45,226,230,.09) 1px,transparent 1px) 0 0/80px 80px}
.ytc-play{position:absolute;right:5%;bottom:12%;z-index:2;width:96px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));transition:transform .2s}
.ytc-img:hover .ytc-play{transform:scale(1.1)}
.ytc-in{position:relative;z-index:2;width:100%;pointer-events:none;padding-top:54px;padding-bottom:54px}
.ytc-txt{max-width:600px;pointer-events:auto}
.ytc-k{display:inline-flex;align-items:center;gap:10px;font:700 12px "JetBrains Mono",monospace;letter-spacing:2px;text-transform:uppercase;border:2px solid #fff;padding:8px 14px}
.ytc-k .icon{color:var(--yt)}
.ytc h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:82px;line-height:.86;text-transform:uppercase;margin:22px 0 16px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.ytc h2 a:hover{color:#ff5a7a}
.ytc p{font-size:19px;line-height:1.5;color:#d4e3e5;max-width:520px}
.ytc-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.ytc .btn.ytc-watch{background:#fff;color:#061015;border-color:#fff}
.ytc .btn:hover{box-shadow:4px 4px 0 rgba(255,255,255,.35)}
.ytc p.ytc-meta{font:700 11px "JetBrains Mono",monospace;letter-spacing:2px;text-transform:uppercase;color:#8fa9ae;margin-top:22px}
.ytc p.ytc-p2{margin-top:10px}
.ytc :focus-visible{outline-color:#ffb547}
@media(max-width:1180px){.ytc h2{font-size:66px}.ytc-img img{width:78%}}
@media(max-width:900px){.ytc-body{display:block;min-height:0}.ytc-img{position:relative;aspect-ratio:16/9}.ytc-img img{width:100%}.ytc-img:before{background:linear-gradient(180deg,rgba(6,16,21,0) 78%,#061015)}.ytc-play{right:6%;bottom:18%}.ytc-in{padding-top:6px;padding-bottom:36px}}
@media(max-width:700px){.ytc{margin-bottom:44px}.ytc-nl{padding:6px 18px;font-size:10px;letter-spacing:2px}.ytc-nl span:nth-child(2){display:none}.ytc-play{width:70px}.ytc h2{font-size:44px;margin:18px 0 12px}.ytc p{font-size:16px}.ytc-k{font-size:11px;padding:7px 10px}.ytc-btns{margin-top:22px}.ytc-btns .btn{flex:1 1 auto;justify-content:center;padding:15px 12px;font-size:12px}}

/* ---- Hair offer: homepage card tag + hair page 3-step strip ---- */
.deal-tag{align-self:flex-start;margin-bottom:14px;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--amber);color:#17262b;padding:6px 10px;border:2px solid #17262b;box-shadow:3px 3px 0 rgba(6,16,21,.55)}
.page-hero .disclose{margin-top:20px}
.steps-wrap{padding-top:0;padding-bottom:64px;margin-top:-20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;border:2px solid var(--line);background:var(--card)}
.steps>li{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-right:2px solid var(--line)}
.steps>li:last-child{border-right:0}
.steps .wp{width:34px;height:34px;font-size:13px}
.steps h3{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:30px;line-height:1;text-transform:uppercase}
.steps h3 .nb{color:var(--acc);white-space:nowrap}
.steps p{margin-top:6px;font-size:15px;line-height:1.4;color:var(--mute)}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps>li{border-right:0;border-bottom:2px solid var(--line)}.steps>li:last-child{border-bottom:0}}
@media(max-width:700px){.steps-wrap{padding-bottom:44px;margin-top:-14px}.steps>li{padding:16px 16px}.steps h3{font-size:26px}}
/* Hair page: step strip links + numbered sections */
.step-link{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;height:100%;color:inherit;text-decoration:none;transition:background .15s}
.steps>li{padding:0}
.step-link:hover{background:var(--paper2)}
.step-link:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.step-link:focus-visible{outline-offset:-5px}
.sec-head h2 .step-no{width:46px;height:46px;font-size:17px;margin-bottom:14px;border-width:2.5px}
.step-code{margin-top:28px}
.step-code>.wp{width:46px;height:46px;font-size:17px;border-width:2.5px}
#discount-code{scroll-margin-top:110px}
@media(max-width:700px){.step-link{padding:16px}.sec-head h2 .step-no,.step-code>.wp{width:38px;height:38px;font-size:14px}.sec-head h2 .step-no{margin-bottom:10px}}
/* Reels: stop the video's own width stretching the page; two small cards per row on phones */
.reel{min-width:0}.reel video{max-width:100%}
@media(max-width:700px){.reels{grid-template-columns:1fr 1fr;gap:12px}.reel h3{padding:10px;font-size:11px;letter-spacing:1px;gap:8px}.reel h3 .wp{display:none}.reel .ig-link{padding:10px;font-size:10px;letter-spacing:.5px}}
/* Work with me: four "Ways to team up" cards in a 2x2 grid */
@media(min-width:901px){#how .steps{grid-template-columns:1fr 1fr}#how .steps>li{border-right:0}#how .steps>li:nth-child(odd){border-right:2px solid var(--line)}#how .steps>li:nth-child(-n+2){border-bottom:2px solid var(--line)}}
/* ---- Van kit page (van-kit/ only) ---- */
.vt-inset{transform:rotate(-1.5deg)}
.vt-inset img{aspect-ratio:4/3;height:auto}

.kit-zone{padding-bottom:20px}
.kit-zone{padding-top:56px}
.kit-zone .sec-head{margin-bottom:24px;align-items:center}
.kit-zone .sec-head h2{font-size:64px;display:flex;align-items:center;gap:18px}
.kit-zone .sec-head h2 .step-no{width:52px;height:52px;font-size:18px;border-width:2.5px;margin:0}
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.kit{display:flex;flex-direction:column;border:2px solid var(--line);background:var(--card);min-width:0}
.kit-ph{aspect-ratio:4/3;border-bottom:2px solid var(--line);background:color-mix(in srgb,var(--acc) 12%,var(--paper2));display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.kit-ph img{width:auto;max-width:100%;height:100%;object-fit:contain;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.kit-ph-ex,.kit-ph-play{background-color:var(--paper2);background-image:linear-gradient(var(--grid) 2px,transparent 2px),linear-gradient(90deg,var(--grid) 2px,transparent 2px);background-size:28px 28px}
.kit-ph-ex span{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:34px;line-height:.95;text-transform:uppercase;text-align:center;color:var(--mute);opacity:.55}
.kit-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px 22px}
.kit .deal-tag{margin:0}
.kit h3{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:36px;line-height:.92;text-transform:uppercase}
.kit p{font-size:15px;line-height:1.45;color:var(--mute)}
.kit-code{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:1px;text-transform:uppercase}.kit-code b{color:var(--ink)}
.kit-btn{margin-top:auto}
.kit-ex{border-style:dashed}.kit-ex .kit-ph{border-bottom-style:dashed}
.kit-ex h3{color:var(--mute)}

.sign .vt-sym{background:#fff;padding:12px}.sign .vt-sym img{width:100%;height:100%;object-fit:contain}
.vt-disclose{margin-top:26px;max-width:none}
@media(max-width:1000px){.kit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.kit-grid{grid-template-columns:1fr;gap:18px}.kit-zone .sec-head h2{font-size:44px;gap:12px}.kit-zone .sec-head h2 .step-no{width:40px;height:40px;font-size:14px}.kit-zone{padding-top:40px}.kit-ex{display:grid;grid-template-columns:104px 1fr}.kit-ex .kit-ph{aspect-ratio:auto;border-bottom:0;border-right:2px dashed var(--line);padding:8px}.kit-ex .kit-ph span{font-size:20px}.kit-ex .kit-body{padding:14px 16px 16px;gap:8px}.kit-ex h3{font-size:26px}.kit-ex p{font-size:14px}.kit-ex .kit-btn{padding:10px 12px;font-size:11px}.kit h3{font-size:32px}.kit-ph{aspect-ratio:16/10}.kit-ph-play{aspect-ratio:16/7}.vt-sign h2{font-size:50px}.vt-sign-wrap{padding-top:44px}}
/* Van tour: compact storefront kit cards (4-up desktop, 2-up phone) */
.vt-jump{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:18px}
.vt-jump a{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 12px;border:2px solid var(--line);background:var(--paper2);color:var(--ink);text-decoration:none}
.vt-jump b{color:var(--acc)}
.vt-jump a:hover{background:var(--card);box-shadow:3px 3px 0 var(--line)}
.kit-grid.kit-4{grid-template-columns:repeat(4,1fr);gap:20px}
.kit-4 .kit-feat{grid-column:span 2;display:grid;grid-template-columns:1fr 1.15fr}
.kit-4 .kit-feat .kit-ph{aspect-ratio:auto;border-bottom:0;border-right:2px solid var(--line)}
.kit-4 .kit-feat .kit-ph img{width:100%;height:auto;max-height:100%}
.kit-sm .kit-ph{aspect-ratio:1;background:#fff;padding:14px}
.kit-sm .kit-ph img{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none}
.kit-sm .kit-body{padding:14px 16px 16px;gap:8px}
.kit-sm h3{font-size:24px;line-height:.95}
.kit-sm .kit-btn{padding:11px 12px;font-size:11px;letter-spacing:1px;width:100%;justify-content:center}
@media(max-width:1000px){.kit-grid.kit-4{grid-template-columns:repeat(3,1fr)}.kit-4 .kit-feat{grid-column:1/-1}}
@media(max-width:700px){.kit-grid.kit-4{grid-template-columns:1fr 1fr;gap:12px}.kit-4 .kit-feat{grid-column:1/-1;display:flex}.kit-4 .kit-feat .kit-ph{aspect-ratio:16/10;border-right:0;border-bottom:2px solid var(--line)}.kit-sm .kit-ph{padding:8px;aspect-ratio:4/3}.kit-4 .kit-feat .kit-ph img{width:auto;height:100%}.kit-sm .kit-body{padding:10px 10px 12px;gap:6px}.kit-sm h3{font-size:19px}.kit-sm .kit-btn{padding:9px 6px;font-size:10px;letter-spacing:.5px}.vt-jump a{font-size:11px;padding:7px 9px}}

/* ---------- Van kit card (homepage): full photo with product chips (chips hotlinked from the van kit page) ---------- */
.c-kit .card.photo{background:#061015;color:#fff}
.c-kit .card.photo .go{background:var(--acc);color:var(--acc-ink)}
.c-kit .card.photo .ph{left:0;width:auto;display:block;padding:0}
.c-kit .card.photo .ph img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 60%;background:none;border-radius:0;padding:0;box-shadow:none;transition:transform .4s}
.c-kit .card.photo .ph:after{background:linear-gradient(90deg,rgba(6,16,21,.9) 0,rgba(6,16,21,.55) 50%,rgba(6,16,21,.05) 85%),linear-gradient(180deg,rgba(6,16,21,0) 40%,rgba(6,16,21,.6))}
.c-kit .card.photo:hover .ph img,.c-kit .card.photo:focus-visible .ph img{transform:scale(1.05)}
.c-kit .card.photo h3,.c-kit .card.photo p{max-width:62%}
.c-kit .deal-tag{margin-bottom:12px}
.kit-chips{display:flex;align-items:center}
.kit-chips img,.kit-chips b{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #17262b;object-fit:contain;padding:5px;margin-right:-10px;box-shadow:2px 2px 0 rgba(6,16,21,.5);transition:margin .25s,transform .25s}
.kit-chips b{display:flex;align-items:center;justify-content:center;padding:0;background:var(--amber);color:#17262b;font:700 12px "JetBrains Mono",monospace}
.c-kit .card:hover .kit-chips img,.c-kit .card:hover .kit-chips b,.c-kit .card:focus-visible .kit-chips img,.c-kit .card:focus-visible .kit-chips b{margin-right:4px;transform:translateY(-2px)}
@media(max-width:700px){.c-kit{min-height:400px!important}.c-kit .card.photo .ph{width:auto}.c-kit .card.photo h3,.c-kit .card.photo p{max-width:none}.c-kit .card.photo .ph:after{background:linear-gradient(180deg,rgba(6,16,21,.1) 20%,rgba(6,16,21,.92) 72%)}.kit-chips img,.kit-chips b{width:42px;height:42px}}
.c-kit .card.photo .top{justify-content:space-between}
.kit-chips b{margin-right:0}

/* ---------- Animated wordmark (hand-drawn "Motorhomowner Dan") ----------
   Art: /assets/img/wordmark-draw-720.webp (and -320 for the header). Each file stacks 8 cells
   top to bottom: the four hand-drawn "wobble" poses of line 1, then the same four of DAN, white
   on transparent. They're used as masks so the colour follows the theme (currentColor).
   It writes itself in left to right (line 1, then DAN) over about 3.7s, wobbles for 4s and settles on pose 1.
   Reduced motion: no animation, just the finished wordmark.
   Markup: <span class="wma play" role="img" aria-label="Motorhomowner Dan"><i class="l1"><b></b></i><i class="l2"><b></b></i></span> */
.wma{position:relative;display:block;aspect-ratio:1858/743;color:var(--ink);--wm:url(/assets/img/wordmark-draw-720.webp)}
.wma i{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,#000 50%,transparent 60%) 0 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,transparent 60%) 0 0/250% 100% no-repeat}
.wma b{position:absolute;inset:0;background:currentColor;-webkit-mask:var(--wm) 0 0/100% 800% no-repeat;mask:var(--wm) 0 0/100% 800% no-repeat}
.wma .l2 b{-webkit-mask-position:0 57.143%;mask-position:0 57.143%}
@keyframes wma-wipe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes wma-boil1{0%{-webkit-mask-position:0 0;mask-position:0 0}25%{-webkit-mask-position:0 14.286%;mask-position:0 14.286%}50%{-webkit-mask-position:0 28.571%;mask-position:0 28.571%}75%{-webkit-mask-position:0 42.857%;mask-position:0 42.857%}}
@keyframes wma-boil2{0%{-webkit-mask-position:0 57.143%;mask-position:0 57.143%}25%{-webkit-mask-position:0 71.429%;mask-position:0 71.429%}50%{-webkit-mask-position:0 85.714%;mask-position:0 85.714%}75%{-webkit-mask-position:0 100%;mask-position:0 100%}}
@media (prefers-reduced-motion:no-preference){
.wma.play i{animation:wma-wipe 2.2s cubic-bezier(.45,.05,.35,1) var(--wma-delay,0s) both}
.wma.play .l2{animation:wma-fade 1s ease calc(var(--wma-delay,0s) + 2.3s) both}@keyframes wma-fade{from{opacity:0}to{opacity:1}}
.wma.play .l1 b{animation:wma-boil1 1.2s steps(1,end) var(--wma-delay,0s) 4}
.wma.play .l2 b{animation:wma-boil2 1.2s steps(1,end) var(--wma-delay,0s) 4}
}

/* Splash line 1 "writes itself": inline SVG in index.html. The real hand-drawn sprite (#wma-ink, boiling through
   the 4 poses) is revealed by #wma-pen, a mask of thick round pen strokes traced along each letter in writing order and
   drawn on with stroke-dashoffset (per-stroke delay/duration inline). .pen-end fades in at the end so nothing is left unrevealed. */
.wma svg.l1{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wma.play svg.l1 .pen path{animation:wma-pen .3s linear both}
.wma.play svg.l1 .pen-end{animation:wma-fade .25s ease 2.25s both}
.wma.play svg.l1 .ink{animation:wma-boil-svg 1.2s steps(1,end) var(--wma-delay,0s) 4}
@keyframes wma-pen{to{stroke-dashoffset:0}}
@keyframes wma-boil-svg{0%{transform:translateY(0)}25%{transform:translateY(-288px)}50%{transform:translateY(-576px)}75%{transform:translateY(-864px)}}
/* Intro splash, mock C: homepage only, once per visit (sessionStorage "dg-splash"), tap or any key skips.
   Only shown when JavaScript runs and the visitor hasn't asked for reduced motion. */
.splash{display:none}
.splash-on{overflow:hidden}
.splash-on .splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:var(--paper);transition:opacity .45s ease,visibility .45s}
.splash .wma{width:min(78vw,620px)}
.splash .wma .l2{color:var(--acc)}
.splash small{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mute);opacity:0;animation:splash-hint .4s ease 1.4s forwards}
.splash.out{opacity:0;visibility:hidden}
@keyframes splash-hint{to{opacity:1}}
.splash .sk-m{display:none}
@media (hover:hover) and (pointer:fine){.splash .sk-t{display:none}.splash .sk-m{display:inline}}

.site-footer .ft{padding-top:52px;padding-bottom:36px}
@media(max-width:700px){.wrap.sign-wrap{padding-top:32px}}
/* Hero h1: visible "aka" name line under the DannyGlasspool.com wordmark (SEO: both names in the h1) */
.hero h1 .aka{display:block;font-size:.27em;line-height:1;letter-spacing:.5px;margin-top:.55em;color:var(--ink)}