@font-face{font-family:"Rubik Dirt";src:url(/assets/fonts/RubikDirt-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Anton";src:url(/assets/fonts/Anton-Regular.ttf) format("truetype");font-display:swap}

:root{
  --ink:#121110;--ink-2:#1c1a18;--cream:#f6efe0;--cream-2:#d9cfbb;
  --pink:#fb3786;--pink-deep:#c41e63;
  --dirt:"Rubik Dirt",Impact,sans-serif;--block:"Anton",Impact,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:transparent;color:var(--cream);font:17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink)}
a:hover{color:var(--cream)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* lettering: cream, black stroke, pink drop shadow, -3 degree tilt (house rule) */
.dirt{font-family:var(--dirt);font-weight:400;color:var(--cream);line-height:.95;letter-spacing:.01em;
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--pink);transform:rotate(-3deg)}
.dirt.pink{color:var(--pink);text-shadow:5px 5px 0 var(--cream)}
h1,h2,h3{margin:0 0 .4em}
h2.dirt{font-size:clamp(2.4rem,6vw,4.2rem);display:inline-block}
.kicker{font-family:var(--block);text-transform:uppercase;letter-spacing:.12em;color:var(--pink);font-size:.95rem}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(18,17,16,.92);backdrop-filter:blur(6px);border-bottom:3px solid var(--pink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.logo img{width:44px;height:44px;border-radius:50%}
.logo span{font-family:var(--dirt);font-size:1.25rem}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font-family:var(--block);text-transform:uppercase;letter-spacing:.06em;color:var(--cream);text-decoration:none;padding:8px 10px;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{color:var(--pink)}
.nav .btn{margin-left:6px}
.menu{display:none;background:none;border:2px solid var(--cream);color:var(--cream);font-family:var(--block);padding:6px 10px;cursor:pointer}
@media (max-width:860px){
  .js .menu{display:block}
  .js .nav{display:none}
  .js .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--ink);border-bottom:3px solid var(--pink);padding:10px 0 18px}
  .js .nav.open{display:flex}
  .nav .btn{margin:8px 0 0}
}

/* buttons */
.btn{display:inline-block;font-family:var(--block);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  background:var(--pink);color:var(--ink);padding:12px 22px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--cream);
  transition:transform .12s,box-shadow .12s;cursor:pointer;font-size:1rem}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cream);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 var(--pink)}
.btn.ghost:hover{color:var(--cream);box-shadow:7px 7px 0 var(--pink)}
.btn.yt::before{content:"▶ "}

/* hero */
.hero{position:relative;min-height:calc(100vh - 64px);display:grid;place-items:center;text-align:center;overflow:hidden;
  background:url(/assets/img/pattern-top.webp) top center/auto 26% repeat-x,url(/assets/img/pattern-bottom.webp) bottom center/auto 26% repeat-x,var(--ink);padding:40px 0 80px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(18,17,16,.15),rgba(18,17,16,.55) 30%,rgba(18,17,16,.55) 70%,rgba(18,17,16,.15)),radial-gradient(ellipse at center,rgba(18,17,16,.9) 0,rgba(18,17,16,0) 60%)}
.hero>*{position:relative;z-index:1}
.hero .badge{width:min(62vw,40vh,380px);margin:0 auto -10px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));animation:wobble 6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg) scale(1.02)}}
.hero h1{font-size:clamp(2.6rem,9vw,6.6rem);margin:.15em 0 .25em}
.hero p.lede{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:640px;margin:0 auto 28px;color:var(--cream)}
.hero .ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.hero .badge,.tape span{animation:none}}

/* tape strip */
.tape{background:var(--pink);color:var(--ink);overflow:hidden;white-space:nowrap;border-block:3px solid var(--ink);transform:rotate(-1.5deg);margin:-26px -10px 0;position:relative;z-index:2}
.tape span{display:inline-block;padding:10px 0;font-family:var(--block);text-transform:uppercase;letter-spacing:.1em;font-size:1.15rem;animation:roll 38s linear infinite}
@keyframes roll{to{transform:translateX(-50%)}}

section{padding:90px 0}
section.alt{background:var(--ink-2)}
.center{text-align:center}

/* meet */
.meet{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.meet .photo{position:relative}
.meet .photo img{border:8px solid var(--cream);box-shadow:12px 12px 0 var(--pink);transform:rotate(2deg)}
.meet .george{position:absolute;width:42%;right:-16px;bottom:-30px;transform:rotate(8deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.meet p{font-size:1.1rem}
@media (max-width:860px){.meet{grid-template-columns:1fr}.meet .george{right:0}}

/* polaroid wall */
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.wall figure{margin:0;background:var(--cream);padding:10px 10px 34px;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.5);transition:transform .2s}
.wall figure:nth-child(odd){transform:rotate(-2.5deg)}
.wall figure:nth-child(even){transform:rotate(2deg)}
.wall figure:hover{transform:rotate(0) scale(1.05);z-index:2}
.wall img{aspect-ratio:3/4;object-fit:cover;width:100%}
.wall figcaption{font-family:var(--block);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;margin-top:8px;text-align:center}
@media (max-width:980px){.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.wall{grid-template-columns:repeat(2,1fr)}}

/* cards / grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;margin-top:40px}
.card{background:var(--ink-2);border:3px solid var(--cream);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:8px 8px 0 var(--pink)}
section.alt .card{background:var(--ink)}
.card img{aspect-ratio:1;object-fit:contain;width:100%;background:radial-gradient(circle,#2a2622 0,#161412 70%)}
.card h3{font-family:var(--block);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;margin:0}
.card .price{color:var(--pink);font-family:var(--block);font-size:1.1rem}
.card .buy{margin-top:auto}
.card .btn{width:100%;text-align:center}
.tag{display:inline-block;background:var(--cream);color:var(--ink);font-family:var(--block);text-transform:uppercase;font-size:.75rem;padding:2px 8px;letter-spacing:.08em}

/* vote */
.looks{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:40px 0 30px}
.looks label{cursor:pointer;display:block;background:var(--cream);color:var(--ink);padding:10px 10px 14px;border:4px solid transparent;transition:transform .15s}
.looks label:hover{transform:translateY(-4px)}
.looks input{position:absolute;opacity:0}
.looks input:checked+label{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink);transform:rotate(-2deg)}
.looks input:focus-visible+label{outline:3px dashed var(--pink);outline-offset:4px}
.looks img{aspect-ratio:3/4;object-fit:cover;width:100%}
.looks span{display:block;font-family:var(--block);text-transform:uppercase;text-align:center;margin-top:8px}
@media (max-width:860px){.looks{grid-template-columns:repeat(2,1fr)}}

/* forms */
form .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
input[type=email],input[type=text],textarea,select{font:inherit;padding:13px 14px;border:3px solid var(--cream);background:var(--ink);color:var(--cream);min-width:0}
input[type=email]{flex:1 1 280px;max-width:420px}
textarea{width:100%;min-height:140px}
.stack{display:grid;gap:14px;max-width:620px}
.stack label{font-family:var(--block);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.stack input,.stack select{width:100%}
.fine{font-size:.85rem;color:var(--cream-2)}
.hp{display:none}

/* postcard */
.postcard{background:var(--cream);color:var(--ink);max-width:880px;margin:0 auto;padding:44px;border:10px solid var(--ink);outline:3px dashed var(--pink);outline-offset:-22px;
  box-shadow:14px 14px 0 var(--pink);transform:rotate(-1deg);display:grid;grid-template-columns:1fr 170px;gap:30px;align-items:center}
.postcard .stamp{border:4px dashed var(--pink);padding:8px;transform:rotate(6deg);background:#fff}
.postcard h2{color:var(--ink);text-shadow:4px 4px 0 var(--pink);-webkit-text-stroke:0}
.postcard input[type=email]{border-color:var(--ink);background:#fff;color:var(--ink)}
.postcard .fine{color:#5b544a}
@media (max-width:700px){.postcard{grid-template-columns:1fr;padding:30px 24px}.postcard .stamp{width:140px}}

/* channels */
.channels{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* page header */
.pagehead{padding:80px 0 50px;background:linear-gradient(rgba(18,17,16,.55),var(--ink) 92%),url(/assets/img/pattern-top.webp) top center/auto 100% repeat-x;border-bottom:3px solid var(--pink)}
.pagehead h1{font-size:clamp(2.6rem,8vw,5rem)}
.pagehead p{max-width:640px;font-size:1.15rem}

/* prose (privacy, diary) */
.prose{max-width:760px}
.prose h2{font-family:var(--block);text-transform:uppercase;letter-spacing:.04em;color:var(--pink);font-size:1.4rem;margin-top:2em}
.prose li{margin:.3em 0}
.entry{border-left:6px solid var(--pink);padding:6px 0 6px 24px;margin:0 0 50px}
.entry time{font-family:var(--block);text-transform:uppercase;color:var(--pink);letter-spacing:.08em}
.entry h2{font-family:var(--dirt);font-size:2.2rem;color:var(--cream);margin:.2em 0}

/* footer */
footer{border-top:3px solid var(--pink);padding:50px 0 40px;background:#0b0a09;font-size:.95rem}
footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer nav{display:flex;flex-direction:column;gap:6px}
footer nav a{color:var(--cream);text-decoration:none}
footer nav a:hover{color:var(--pink)}
footer .ai{display:inline-block;border:2px solid var(--pink);color:var(--pink);font-family:var(--block);text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;margin-bottom:12px}
footer small{color:var(--cream-2)}

/* George's viewfinder portrait (diary) */
.diary-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
@media (max-width:860px){.diary-grid{grid-template-columns:1fr}.viewfinder{max-width:340px;margin:0 auto}}
.viewfinder{margin:0;position:sticky;top:90px;transform:rotate(-2deg)}
.vf-screen{position:relative;border:10px solid #050505;outline:3px solid var(--pink);box-shadow:12px 12px 0 var(--cream);overflow:hidden;background:#000}
.vf-screen img{width:100%;filter:contrast(1.08) saturate(.85) sepia(.12);animation:vf-jitter 7s steps(1) infinite}
.vf-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));}
.vf-corner{position:absolute;width:26px;height:26px;border:3px solid var(--cream);z-index:2}
.vf-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}.vf-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.vf-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}.vf-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.vf-rec,.vf-tc,.vf-bat{position:absolute;z-index:2;font-family:var(--block);color:var(--cream);letter-spacing:.08em;text-shadow:0 0 4px rgba(0,0,0,.8);font-size:.95rem}
.vf-rec{top:22px;left:50px;display:flex;align-items:center;gap:6px}
.vf-rec i{width:11px;height:11px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);animation:vf-blink 1.1s steps(1) infinite}
.vf-tc{bottom:22px;left:50px}.vf-bat{top:22px;right:50px}
.viewfinder figcaption{margin-top:22px;text-align:center}
.viewfinder figcaption .dirt{display:inline-block;font-size:2.2rem}
.viewfinder figcaption small{display:block;margin-top:8px;font-family:var(--block);text-transform:uppercase;letter-spacing:.1em;color:var(--pink)}
@keyframes vf-blink{50%{opacity:0}}
@keyframes vf-jitter{0%,96%{transform:none}97%{transform:translateX(3px) skewX(-1deg)}98%{transform:translateX(-2px)}99%{transform:none}}
@media (prefers-reduced-motion:reduce){.vf-rec i,.vf-screen img{animation:none}}

/* Shout-Out */
.ticks{list-style:none;padding:0;margin:18px 0}
.ticks li{padding-left:30px;position:relative;margin:8px 0}
.ticks li::before{content:"★";position:absolute;left:0;color:var(--pink)}
.price-big{font-family:var(--dirt);font-size:3.4rem;color:var(--pink);margin:6px 0;text-shadow:4px 4px 0 var(--cream);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.goal{margin:10px 0 24px}
.goal-bar{height:18px;border:3px solid var(--cream);background:var(--ink)}
.goal-bar span{display:block;height:100%;background:var(--pink)}
.goal p{font-size:.95rem;color:var(--cream-2);margin-top:10px}

/* Diary header: George illustrated header (option 1, 30d39914) */
.george-head{position:relative;min-height:clamp(380px,42vw,560px);display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(90deg,rgba(18,17,16,.55),rgba(18,17,16,0) 45%),url(/assets/img/george-header.webp) right center/cover no-repeat,var(--ink)}
.george-head .wrap{width:100%;position:relative;z-index:1}
.george-head .wrap>*{max-width:46%}
@media (max-width:860px){.george-head .wrap>*{max-width:none}}
.head-rec{top:22px;right:24px;left:auto;z-index:2}
@media (max-width:860px){.george-head{background:linear-gradient(rgba(18,17,16,.35),rgba(18,17,16,.85)),url(/assets/img/george-header.webp) 78% center/cover no-repeat,var(--ink)}}

/* Shout-Out page + home section */
.steps{padding-left:1.4em;margin:12px 0 18px}.steps li{margin:10px 0}
.preview-form{border:3px dashed var(--cream-2);padding:14px 18px;margin:12px 0 24px}
.fields{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 0}
.fields li{background:var(--ink-2);border:2px solid var(--cream);padding:6px 12px;font-family:var(--block);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}
.shout-home{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:44px;align-items:center}
.shout-home img{border:8px solid var(--cream);box-shadow:10px 10px 0 var(--pink);transform:rotate(-3deg);aspect-ratio:3/4;object-fit:cover}
@media (max-width:700px){.shout-home{grid-template-columns:1fr}.shout-home img{max-width:220px}}

/* Home: short hero + three doors */
.hero-short{min-height:auto;padding:40px 0 60px}
.hero-short .badge{width:min(46vw,30vh,260px)}
.hero-short h1{font-size:clamp(2.4rem,7vw,5rem)}
.doors-wrap{padding:0 0 70px;margin-top:-30px;position:relative;z-index:2}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.door{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--cream);background:var(--ink-2);border:3px solid var(--cream);box-shadow:8px 8px 0 var(--pink);padding:14px 14px 20px;transition:transform .15s,box-shadow .15s}
.door:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--pink);color:var(--cream)}
.door img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 25%;margin-bottom:8px}
.door img.contain{object-fit:contain;background:radial-gradient(circle,#2a2622 0,#161412 70%)}
.door-kicker{font-family:var(--block);text-transform:uppercase;letter-spacing:.1em;color:var(--pink);font-size:.85rem}
.door-title{font-size:2rem;display:inline-block;align-self:flex-start;transform:rotate(-2deg)}
.door-text{font-size:.98rem;color:var(--cream-2)}
@media (max-width:820px){.doors{grid-template-columns:1fr}.door img{aspect-ratio:16/9}}

/* Shout-Out header: illustrated Gladys on cream pattern (c63e81a3) */
.gladys-head{background:linear-gradient(90deg,rgba(246,239,224,.85) 0,rgba(246,239,224,.55) 38%,rgba(246,239,224,0) 58%),url(/assets/img/gladys-header.webp) right center/cover no-repeat,var(--cream)}
.gladys-head .wrap>p:not(.kicker){color:var(--ink);font-weight:600}
.gladys-head h1.dirt{color:var(--ink);-webkit-text-stroke:2px var(--cream);text-shadow:5px 5px 0 var(--pink)}
.gladys-head .head-rec{color:var(--ink);text-shadow:none}
@media (max-width:860px){.gladys-head{background:linear-gradient(rgba(246,239,224,.6),rgba(246,239,224,.92)),url(/assets/img/gladys-header.webp) 78% center/cover no-repeat,var(--cream)}}

/* "Send one to your Nan" band */
.nan-band{background:var(--pink);padding:46px 0;border-block:4px solid var(--ink)}
.nan-band h2.dirt{color:var(--cream);text-shadow:5px 5px 0 var(--ink);font-size:clamp(2.2rem,6vw,4rem)}
.nan-sub{font-family:var(--block);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-size:1.3rem;margin:.4em 0 0}
.nan-fine{color:var(--ink)!important;margin-top:10px}

/* Taped snapshot: real photos framed as objects from Gladys's world */
.snap{position:relative;margin:28px 0 0;max-width:460px;background:var(--cream);padding:12px 12px 46px;transform:rotate(-2.5deg);box-shadow:0 16px 30px rgba(0,0,0,.55),8px 8px 0 var(--pink)}
.snap img:first-child{width:100%;display:block;filter:contrast(1.04) saturate(.95)}
.snap::before,.snap::after{content:"";position:absolute;width:110px;height:30px;background:rgba(251,55,134,.82);top:-12px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.snap::before{left:-22px;transform:rotate(-35deg)}
.snap::after{right:-22px;transform:rotate(32deg)}
.snap .slap{position:absolute;width:34%;right:-9%;bottom:-6%;transform:rotate(14deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.snap figcaption{position:absolute;left:16px;bottom:10px;color:var(--ink);font-family:var(--dirt);font-size:1.3rem}
.snap figcaption span{font-family:var(--body);font-size:.75rem;color:#5b544a;margin-left:6px}

/* Home stage: interactive scene (v2: title between the pair) */
.stage{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(0,1.15fr) 1fr;grid-template-rows:1fr auto;align-items:end;padding:26px 2vw 0;
  background:linear-gradient(transparent 76%,#1d1a17 76%),radial-gradient(ellipse at 50% 40%,#2a2420 0,var(--ink) 65%)}
.stage::after{content:"";position:absolute;left:0;right:0;top:76%;height:4px;background:var(--pink)}
.stage::before{content:"";position:absolute;inset:0 0 auto;height:70px;background:url(/assets/img/pattern-top.webp) top center/auto 100% repeat-x;opacity:.3;pointer-events:none}
.stage-title{grid-column:2;grid-row:1;text-align:center;align-self:center;z-index:2;padding:30px 0 10px}
.stage-badge{width:min(16vw,190px);margin:0 auto -6px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));animation:wobble 6s ease-in-out infinite}
.stage-title h1{font-size:clamp(2rem,4.6vw,4.2rem);margin:.15em 0 .3em}
.stage-title .lede{max-width:520px;margin:0 auto;font-size:1rem}
.stage-hint{font-family:var(--block);text-transform:uppercase;letter-spacing:.1em;color:var(--pink);font-size:.82rem;margin-top:12px;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{opacity:.35}}
.actor{position:relative;z-index:1;background:none;border:0;padding:0;cursor:pointer;align-self:end;justify-self:center;width:min(28vw,400px);display:block;margin-bottom:2vh}
.actor-gladys{grid-column:1;grid-row:1/3}
.actor-george{grid-column:3;grid-row:1/3}
.actor img,.actor video{width:100%;display:block;transition:transform .25s}
.actor-still{position:relative}
.actor video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .4s;z-index:1}
.actor.playing video{opacity:1}
.actor.playing .actor-still{opacity:0;transition:opacity 0s .45s,transform .25s}
.bubble{position:absolute;top:2%;background:var(--cream);color:var(--ink);font-family:var(--dirt);font-size:1.15rem;line-height:1.15;padding:10px 14px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);width:max-content;max-width:240px;white-space:normal;opacity:0;transform:scale(.6) rotate(-6deg);transition:all .2s;pointer-events:none;z-index:3}
.actor-gladys .bubble{left:60%}
.actor-george .bubble{right:60%}
.bubble.show{opacity:1;transform:scale(1) rotate(-4deg)}
.rec{position:absolute;right:6%;top:4%;font-family:var(--block);color:var(--cream);display:flex;gap:6px;align-items:center;font-size:.9rem;z-index:2}
.rec i{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);animation:vf-blink 1.1s steps(1) infinite}
.props{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end;padding:10px 0 3vh;z-index:2}
.prop{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--cream)}
.prop img{width:100%;max-width:170px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6));transition:transform .2s}
.prop:nth-child(odd) img{transform:rotate(-6deg)}
.prop:nth-child(even) img{transform:rotate(5deg)}
.prop:hover img,.prop:focus-visible img{transform:translateY(-12px) rotate(0) scale(1.08);animation:wobble-prop .5s ease-in-out}
@keyframes wobble-prop{25%{transform:translateY(-12px) rotate(-6deg) scale(1.08)}75%{transform:translateY(-12px) rotate(6deg) scale(1.08)}}
.prop span{margin-top:6px;font-family:var(--block);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;text-align:center;background:var(--ink);padding:2px 8px;border:2px solid var(--pink)}
@media (max-width:820px){
  .stage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;padding-top:16px;background:radial-gradient(ellipse at 50% 40%,#2a2420 0,var(--ink) 65%)}
  .stage::after{display:none}
  .stage-title{grid-column:1/-1;grid-row:1;padding:6px 0}
  .stage-badge{width:120px}
  .actor{width:42vw}
  .actor-gladys{grid-column:1;grid-row:2}.actor-george{grid-column:2;grid-row:2}
  .props{grid-column:1/-1;grid-row:3;gap:6px;padding:16px 2vw 26px;border-top:4px solid var(--pink);background:#1d1a17}
  .prop img{max-width:74px}
  .prop span{font-size:.62rem;padding:2px 4px}
  .actor-gladys .bubble{left:30%}.actor-george .bubble{right:30%}
  .bubble{font-size:.95rem;max-width:170px}
}
@media (prefers-reduced-motion:reduce){.stage-hint,.rec i,.stage-badge{animation:none}.actor video{display:none}}

/* Site-wide faded pattern background */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/img/pattern-site.webp) center top/560px auto repeat;opacity:1;pointer-events:none}
section.alt{background:rgba(28,26,24,.72)}
.stage{background:linear-gradient(transparent 76%,rgba(29,26,23,.85) 76%),radial-gradient(ellipse at 50% 40%,rgba(42,36,32,.6) 0,rgba(18,17,16,.2) 65%)}
.stage::before{display:none}
.pagehead:not(.george-head){background:linear-gradient(rgba(18,17,16,.55),rgba(18,17,16,.85) 92%),url(/assets/img/pattern-top.webp) top center/auto 100% repeat-x}
footer{background:rgba(11,10,9,.94)}
@media (max-width:820px){.stage{background:radial-gradient(ellipse at 50% 40%,rgba(42,36,32,.6) 0,rgba(18,17,16,.2) 65%)}}
/* Readability glow behind the stage's centre column */
.stage-title{position:relative}
.stage-title::before{content:"";position:absolute;inset:-10% -18%;z-index:-1;background:radial-gradient(ellipse at center,rgba(18,17,16,.88) 0,rgba(18,17,16,.6) 45%,rgba(18,17,16,0) 72%);pointer-events:none}
/* No floor band under the pair */
.stage,.stage{background:none}
.stage::after{display:none}
@media (max-width:820px){.stage{background:none}.props{border-top:0;background:none}}

/* Props v2: easy to spot, inviting to click */
.props{gap:14px}
.prop{position:relative;cursor:pointer}
.prop::before{content:"";position:absolute;left:50%;top:42%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(251,55,134,.45) 0,rgba(251,55,134,.12) 40%,transparent 68%);z-index:-1;animation:prop-glow 2.6s ease-in-out infinite}
.prop img{max-width:180px;animation:prop-bob 3s ease-in-out infinite}
.prop-shout img{animation-delay:0s}.prop-shop img{animation-delay:.6s}.prop-yt img{animation-delay:1.2s}.prop-diary img{animation-delay:1.8s}
.prop-shout::before{animation-delay:0s}.prop-shop::before{animation-delay:.6s}.prop-yt::before{animation-delay:1.2s}.prop-diary::before{animation-delay:1.8s}
@keyframes prop-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes prop-glow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.prop span{margin-top:8px;font-family:var(--dirt);text-transform:none;letter-spacing:0;font-size:1.05rem;line-height:1.1;color:var(--ink);background:var(--cream);
  padding:5px 12px 6px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--pink);transform:rotate(-3deg);transition:transform .2s,box-shadow .2s}
.prop:nth-child(even) span{transform:rotate(2deg)}
.prop:hover span,.prop:focus-visible span{transform:rotate(0) scale(1.08);box-shadow:6px 6px 0 var(--pink)}
.prop:hover::before,.prop:focus-visible::before{animation-duration:.8s}
/* each prop has its own move on hover */
.prop-shout:hover img,.prop-shout:focus-visible img{animation:shout .45s ease-in-out infinite}
.prop-shop:hover img,.prop-shop:focus-visible img{animation:stack .5s ease-in-out infinite}
.prop-yt:hover img,.prop-yt:focus-visible img{animation:slide .6s ease-in-out infinite}
.prop-diary:hover img,.prop-diary:focus-visible img{animation:flap .5s ease-in-out infinite}
@keyframes shout{0%,100%{transform:scale(1.12) rotate(-8deg)}50%{transform:scale(1.22) rotate(4deg) translateX(4px)}}
@keyframes stack{0%,100%{transform:scale(1.12) rotate(0)}25%{transform:scale(1.14) rotate(-7deg)}75%{transform:scale(1.14) rotate(7deg)}}
@keyframes slide{0%,100%{transform:scale(1.12) translateX(0)}50%{transform:scale(1.12) translateX(10px) rotate(4deg)}}
@keyframes flap{0%,100%{transform:scale(1.12) rotate(0) skewY(0)}50%{transform:scale(1.14) rotate(-6deg) skewY(-4deg)}}
@media (max-width:820px){.prop img{max-width:72px}.prop span{font-size:.72rem;padding:3px 6px;border-width:2px;box-shadow:3px 3px 0 var(--pink)}}
@media (prefers-reduced-motion:reduce){.prop img,.prop::before{animation:none!important}}

/* Shout-Out page v2: sticker theme, easy to read */
.so-hero{padding:60px 0 40px}
.so-grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:50px;align-items:center}
.so-gladys{position:relative;background:none;border:0;padding:0;cursor:pointer;justify-self:center;width:100%;max-width:400px}
.so-gladys:hover .so-idle,.so-gladys:focus-visible .so-idle{animation:so-wiggle .5s ease-in-out infinite}
@keyframes so-idle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg) translateY(-6px)}}
@keyframes so-wiggle{0%,100%{transform:rotate(-5deg) scale(1.03)}50%{transform:rotate(5deg) scale(1.05)}}
@keyframes so-talk{0%,100%{transform:scale(1.02) rotate(-2deg)}50%{transform:scale(1.06) rotate(2deg) translateY(-4px)}}
.so-gladys .bubble{left:62%;top:-2%}
.so-tap{position:absolute;left:4%;bottom:6%;font-family:var(--dirt);font-size:1.2rem;color:var(--ink);background:var(--pink);border:3px solid var(--ink);padding:4px 12px;transform:rotate(-8deg);box-shadow:4px 4px 0 var(--cream);animation:hint 2.4s ease-in-out infinite}
.so-pitch h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.so-lead{font-size:1.2rem;max-width:520px}
.so-price{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:18px 0 26px;background:rgba(18,17,16,.85);border:3px solid var(--cream);box-shadow:8px 8px 0 var(--pink);padding:16px 20px;max-width:560px}
.so-price .price-big{margin:0;font-size:4rem}
.so-price .goal{flex:1;min-width:220px;margin:0}
.so-steps-wrap{padding:40px 0 60px}
.center-title{display:block;text-align:center;font-size:clamp(2rem,4.5vw,3.2rem)}
.so-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.so-steps li{position:relative;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--pink);padding:44px 22px 22px;border-radius:22px}
.so-steps li:nth-child(1){transform:rotate(-2deg)}.so-steps li:nth-child(2){transform:rotate(1.5deg)}.so-steps li:nth-child(3){transform:rotate(-1deg)}
.so-steps .num{position:absolute;top:-26px;left:20px;width:56px;height:56px;border-radius:50%;background:var(--pink);color:var(--cream);font-family:var(--dirt);font-size:2rem;display:grid;place-items:center;border:4px solid var(--ink);-webkit-text-stroke:1px var(--ink)}
.so-steps h3{font-family:var(--dirt);font-size:1.5rem;margin:0 0 8px;line-height:1.1}
.so-steps p{margin:0;font-size:1.02rem}
.so-sample{padding:30px 0 80px}
.so-vf{position:static;transform:rotate(-2deg)}
.so-screen{aspect-ratio:9/16;max-width:320px;display:grid;place-items:center;background:#0b0a09}
.so-soon{font-size:2rem;text-align:center;transform:rotate(-4deg)}
.fields.big li{font-size:1rem;padding:10px 16px;background:rgba(18,17,16,.85)}
@media (max-width:820px){.so-grid{grid-template-columns:1fr;gap:30px}.so-steps{grid-template-columns:1fr;gap:40px}.so-gladys{max-width:300px}.so-vf{margin:0 auto}}
@media (prefers-reduced-motion:reduce){.so-layer,.so-tap{animation:none!important}}

.so-layer{display:block;position:relative;animation:so-idle 3.2s ease-in-out infinite;transform-origin:50% 90%}
.so-layer img,.so-layer video{width:100%;display:block;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.so-layer video{position:absolute;inset:0;height:100%;object-fit:contain;opacity:0;transition:opacity .3s}
.so-layer.playing video{opacity:1}
.so-layer.playing .so-still{opacity:0;transition:opacity 0s .35s}
.so-talk{position:absolute;inset:0;opacity:0;animation:none}
.so-talk img{height:100%;object-fit:contain}
.so-gladys.talking:has(.so-talk) .so-idle{opacity:0}
.so-gladys.talking .so-talk{opacity:1}
.so-gladys .bubble,.so-gladys .so-tap{z-index:4}
.so-talk{z-index:2}
.so-one{padding:70px 0 70px;min-height:calc(100vh - 70px);display:flex;align-items:center}
.so-one .so-pitch h1{font-size:clamp(2.4rem,5.4vw,4.2rem);margin:6px 0 10px}
.so-nan{display:inline-block;font-family:var(--dirt);font-size:1.15rem;color:var(--ink);background:var(--pink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--cream);padding:4px 12px;transform:rotate(-3deg);margin:0 0 8px}
.so-one .fields{margin-bottom:8px}
.so-check{margin:0 0 20px}
.so-one .so-price{margin:0 0 22px}
.so-gladys.talking:not(:has(.so-talk)) .so-idle{animation:so-talk .28s ease-in-out infinite}
.shop-one{position:relative;min-height:calc(100vh - 70px);padding:0;overflow:hidden;display:flex;align-items:center}
.shop-one .so-grid{display:block;position:static}
.sticker-table{position:absolute;inset:0;max-width:none;width:100%;z-index:0;overflow:hidden}
.sticker-table .table-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drops{position:absolute;inset:0}
.drop{position:absolute;width:clamp(90px,15vw,210px);filter:drop-shadow(2px 4px 3px rgba(0,0,0,.45));transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .2s;will-change:transform}
.shop-one::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(18,17,16,0) 35%,rgba(18,17,16,.8) 65%,rgba(18,17,16,.95))}
.shop-one .so-pitch{position:relative;z-index:2;margin-left:auto;max-width:520px;padding:60px 0}
.shop-one .so-tap{left:5%;bottom:7%;z-index:4}
.shop-one .bubble{left:6%;top:8%;z-index:4}
.sticker-table.talking{animation:none}
@media (max-width:820px){.shop-one{align-items:flex-end}.shop-one::after{background:linear-gradient(180deg,rgba(18,17,16,0) 30%,rgba(18,17,16,.92) 68%)}.shop-one .so-pitch{margin:0;padding:52vh 0 40px}.drop{width:26vw}}
.so-price{background:none;border:0;box-shadow:none;padding:0}
.shop-one > .wrap{flex:1;width:100%}
.shop-one .so-pitch{pointer-events:none}.shop-one .so-pitch a{pointer-events:auto}
/* About: George's tapes on an old telly */
.tape-tv{position:relative;min-height:calc(100vh - 70px);overflow:hidden;display:flex;align-items:flex-end;background:#000}
.tv-screen{position:absolute;inset:0;border:0;padding:0;margin:0;background:#000;cursor:pointer;width:100%}
.tv-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;filter:saturate(1.25) contrast(1.1) blur(.6px);transform:scale(1.04)}
.tv-frame.on{opacity:1}
.tape-tv.glitch .tv-frame.on{animation:tv-jump .35s steps(4) 1}
@keyframes tv-jump{0%{transform:scale(1.04) translateX(-14px);filter:saturate(2) hue-rotate(-20deg) blur(1px)}50%{transform:scale(1.06) translateX(10px) skewX(-4deg)}100%{transform:scale(1.04)}}
.tv-lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75));}
.tv-lines::after{content:"";position:absolute;left:0;right:0;height:14%;top:-20%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);animation:tv-roll 6s linear infinite}
@keyframes tv-roll{to{top:120%}}
.tv-osd{position:absolute;z-index:2;font-family:var(--block);color:#fff;font-size:clamp(1rem,2vw,1.6rem);letter-spacing:.08em;text-shadow:2px 2px 0 #000,0 0 8px rgba(255,255,255,.5);text-transform:uppercase}
.tv-play{top:5%;left:4%}
.tv-tc{top:5%;right:4%}
.tv-place{top:11%;left:4%;color:var(--pink)}
.tape-tv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(18,17,16,.92) 0,rgba(18,17,16,.55) 38%,transparent 65%)}
.tv-copy{position:relative;z-index:3;padding:0 0 60px;pointer-events:none;max-width:1100px}
.tv-copy a{pointer-events:auto}
.tv-copy h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:6px 0 8px}
.tv-copy .so-lead{max-width:560px;margin-bottom:22px}
.tape-tv .so-tap{left:auto;right:4%;bottom:6%;top:auto;z-index:3}
@media (prefers-reduced-motion:reduce){.tv-lines::after,.tape-tv .so-tap{animation:none}}
.so-form{margin-top:4px;max-width:560px}
.chip-field{display:flex;align-items:center;gap:0;margin:0 0 8px;border:2px solid var(--cream);background:rgba(18,17,16,.7)}
.chip-field span{flex:0 0 auto;font-family:var(--block);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:10px 12px;background:var(--cream);color:var(--ink);white-space:nowrap}
.chip-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--cream);font:inherit;padding:10px 12px;margin:0}
.chip-field input:focus{outline:3px solid var(--pink);outline-offset:0}
.chip-field:focus-within span{background:var(--pink)}
.so-form .so-check{margin:6px 0 14px}
@media (max-width:520px){.chip-field{flex-direction:column;align-items:stretch}.chip-field span{font-size:.75rem;padding:6px 10px}}
/* Diary: George's desk, the entry writes itself onto his notebook */
.desk{position:relative;width:100%;aspect-ratio:2688/1520;max-height:none;overflow:hidden;background:#1a120c}
.desk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.desk{container-type:inline-size}
.desk-page{position:absolute;--u:calc(100cqw / 2688);left:calc(640 * var(--u));top:calc(563 * var(--u));width:calc(1010 * var(--u));height:calc(756 * var(--u));columns:2;column-gap:calc(110 * var(--u));column-fill:auto;font-family:Noteworthy,"Bradley Hand","Segoe Print","Ink Free","Comic Sans MS",cursive;color:#23245e;font-size:calc(36 * var(--u));line-height:calc(75.6 * var(--u));overflow:hidden}
.desk-page time{display:block;font-weight:700;text-decoration:underline}
.desk-page p{margin:0}
.desk-page .sign{font-size:1.3em}
.desk-page .ch{opacity:0}
.desk-page .ch.on{opacity:1;transition:opacity .08s}
.desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 52%,rgba(18,17,16,.55) 66%,rgba(18,17,16,.9))}
.desk-copy{position:absolute;z-index:2;right:5%;top:50%;transform:translateY(-50%);max-width:34%}
.desk-copy h1{font-size:clamp(2.4rem,5vw,4.6rem);margin:6px 0 10px}
@media (max-width:820px){.desk{aspect-ratio:auto;min-height:calc(100vh - 70px)}.desk-bg{object-position:32% 50%;filter:brightness(.45)}.desk::after{display:none}
.desk-page{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0 16px 40px;padding:22px 20px;background:#f3ead2;font-size:16px;transform:rotate(-1deg);box-shadow:0 14px 30px rgba(0,0,0,.6)}
.desk-copy{position:relative;right:auto;top:auto;transform:none;max-width:none;padding:40px 16px 20px}
.desk{display:flex;flex-direction:column-reverse;justify-content:flex-end}}
/* Full-screen scene: one image, words on the dark side (Brand deals, Thanks, Backstage) */
.scene{position:relative;min-height:calc(100vh - 70px);overflow:hidden;display:flex;align-items:center}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 38%,rgba(18,17,16,.7) 60%,rgba(18,17,16,.92))}
.scene.cream::after{background:linear-gradient(90deg,transparent 40%,rgba(246,239,224,.0) 100%)}
.scene > .wrap{position:relative;z-index:2;flex:1;width:100%}
.scene-copy{margin-left:auto;max-width:520px;padding:60px 0}
.scene-copy h1{font-size:clamp(2.6rem,6vw,5rem);margin:6px 0 10px}
.scene.cream .scene-copy{color:var(--ink)}
.scene.cream .scene-copy h1{color:var(--ink);text-shadow:4px 4px 0 var(--pink)}
.scene .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.scene{align-items:flex-end}.scene::after{background:linear-gradient(180deg,transparent 30%,rgba(18,17,16,.92) 66%)}.scene.cream::after{background:linear-gradient(180deg,transparent 35%,rgba(246,239,224,.95) 66%)}.scene-copy{margin:0;padding:48vh 0 40px}.scene-bg{object-position:20% 50%}}
.scene.left::after{background:linear-gradient(270deg,transparent 40%,rgba(18,17,16,.7) 62%,rgba(18,17,16,.92))}
.scene.left .scene-copy{margin-left:0;margin-right:auto}
@media (max-width:820px){.scene.left::after{background:linear-gradient(180deg,transparent 30%,rgba(18,17,16,.92) 66%)}.scene.left .scene-bg{object-position:60% 50%}}
/* Shout-Out has its own pattern */
.so-one{background:#121110 url(/assets/img/pattern-shout.webp) center top/560px auto repeat}
/* Diary: George walks across his desk, stops, looks up */
.desk-george{position:absolute;z-index:3;bottom:4%;left:46.5%;height:42%;aspect-ratio:480/748;background:none;border:0;padding:0;cursor:pointer;transform:translateX(70cqw)}
.desk-george.walking{animation:dg-walk 6.5s linear forwards}
@keyframes dg-walk{from{transform:translateX(70cqw)}to{transform:translateX(0)}}
.desk-george.arrived{transform:none}
.dg{position:absolute;inset:0}
.dg img,.dg video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(4px 10px 8px rgba(0,0,0,.55))}
.dg video{opacity:0}
.dg.playing video{opacity:1}
.dg.playing img{opacity:0}
.dg-look{opacity:0}
.desk-george.arrived .dg-walk{opacity:0}
.desk-george.arrived .dg-look{opacity:1}
.desk-george .bubble{left:-95%;top:-38%}
.desk-copy{top:auto;bottom:10%;transform:none;max-width:30%}
@media (max-width:820px){.desk-george{display:none}}
@media (prefers-reduced-motion:reduce){.desk-george{transform:none}.desk-george .dg-walk{opacity:0}.desk-george .dg-look{opacity:1}}
.desk-george .dg-tap{left:-30%;bottom:2%;top:auto;z-index:4;white-space:nowrap}
.desk-george.walking .dg-tap{opacity:0}
@media (max-width:820px){.desk-copy{max-width:none;bottom:auto;top:auto}.desk-page{columns:1;height:auto;top:auto;left:auto;width:auto;font-size:17px;line-height:1.6}}
.diary-play{display:none}
@media (max-width:820px){.diary-play{display:inline-block;position:relative;z-index:3;margin:0 16px 40px;align-self:flex-start}.desk{flex-direction:column;justify-content:flex-start}}
@media (max-width:820px){.desk-copy{order:1}.desk-page{order:2}.diary-play{order:3}.desk-george{order:4}}