/*
Theme Name: Miss Honey’s Hotline
Theme URI: https://misshoneyshotline.co.uk
Author: REVILO
Description: Custom Y2K theme for Miss Honey’s Hotline, Liverpool. Animated with anime.js. Homepage with ringing Nokia, events inbox, Instagram camera roll (Smash Balloon) and Forminator forms.
Version: 2.0.1
Requires at least: 6.3
Requires PHP: 7.4
License: Proprietary
Text Domain: hotline
*/
/* ===== Fonts (self-hosted) ===== */
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/pixelify-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/pixelify-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/quicksand-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/quicksand-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/quicksand-latin-700-normal.woff2) format("woff2")}



:root{
  --pink:#FF87BA; --honey:#FECB5F; --blush:#FFCBE1; --aqua:#9CF6F6; --plum:#574D68;
  --pixel:"Pixelify Sans","Courier New",monospace;
  --body:"Quicksand",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  --ink:var(--plum);
  --bg:var(--blush); --text:var(--plum); --muted:#7A6C8C; --surface:#FFF4F9;
  --bubble:#FFF4F9; --bubble-text:var(--plum); --line:var(--plum);
  --header-bg:rgba(255,203,225,.88); --footer-bg:var(--plum);
  --pattern-opacity:.55; --err:#B8215F;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#17131D;
    --bg:#2B2634; --text:var(--blush); --muted:#C9B4D0; --surface:#3A3346;
    --bubble:#3A3346; --bubble-text:var(--blush); --line:#17131D;
    --header-bg:rgba(43,38,52,.88); --footer-bg:#17131D; --pattern-opacity:.3; --err:#FF87BA; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --ink:#17131D;
    --bg:#2B2634; --text:var(--blush); --muted:#C9B4D0; --surface:#3A3346;
    --bubble:#3A3346; --bubble-text:var(--blush); --line:#17131D;
    --header-bg:rgba(43,38,52,.88); --footer-bg:#17131D; --pattern-opacity:.3; --err:#FF87BA; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
body{
  margin:0;isolation:isolate;background:var(--bg);color:var(--text);
  font-family:var(--body);font-weight:500;
  font-size:1.125rem;line-height:1.55;overflow-x:hidden;
}
.hl-bg{ /* pixel pattern layer: its own element, so plugins that use body::after can't hide it */
  content:"";background-image:var(--pattern);image-rendering:pixelated;position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:var(--pattern-opacity);
  background-size:220px 220px,340px 340px;background-position:0 0,110px 70px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--header-bg);backdrop-filter:blur(10px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:3px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.5rem;padding:.5rem 0}
.bar .brand img{width:150px}
header nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
header nav a{text-decoration:none;font-weight:600}
.bar .spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:var(--pixel);font-weight:700;font-size:1.05rem;line-height:1.2;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  padding:.75rem 1.25rem;border:3px solid var(--ink);border-radius:999px;
  background:var(--honey);color:var(--plum);box-shadow:4px 4px 0 var(--ink);
  transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms var(--ease-out);
}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.pink{background:var(--pink)}
.btn.ghost{background:var(--surface);color:var(--text)}
.menu-btn{display:none}

/* hero */
.hero{padding:clamp(2rem,5vw,4.5rem) 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.hero h1{margin:0}
.hero h1 img{width:min(640px,100%);filter:drop-shadow(6px 8px 0 rgba(87,77,104,.2))}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);max-width:34ch;margin:1.5rem 0 2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem}

/* phone */
.phone-col{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.phone{position:relative;width:min(300px,70vw);cursor:pointer;background:none;border:0;padding:0;transform-origin:50% 70%}
.phone img{width:100%;filter:drop-shadow(10px 14px 0 rgba(87,77,104,.25))}
.screen{
  position:absolute;left:13.4%;top:26.5%;width:73.2%;height:22.6%;
  display:flex;flex-direction:column;padding:4% 5%;
  color:#2C3A0E;font-family:var(--pixel);line-height:1.15;text-align:left;
}
.status{display:flex;justify-content:space-between;align-items:flex-end;height:14%}
.bars{display:flex;gap:2px;align-items:flex-end}
.bars i{display:block;width:4px;background:#2C3A0E}
.bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:7px}.bars i:nth-child(3){height:10px}.bars i:nth-child(4){height:13px}
.batt{width:20px;height:10px;border:2px solid #2C3A0E;position:relative}
.batt::before{content:"";position:absolute;inset:1px;right:4px;background:#2C3A0E}
.batt::after{content:"";position:absolute;right:-5px;top:2px;width:3px;height:4px;background:#2C3A0E}
.screen-body{flex:1;display:flex;flex-direction:column;justify-content:center;font-size:clamp(.8rem,1.55vw,1.05rem)}
.screen-body .big{font-size:1.3em;font-weight:600}
.soft{display:flex;justify-content:space-between;font-size:clamp(.65rem,1.2vw,.82rem);font-weight:600;border-top:2px solid rgba(44,58,14,.35);padding-top:2px}
.dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.phone-actions{display:flex;gap:.75rem}
.answer{background:var(--aqua)}
.decline{background:var(--surface);color:var(--text)}


/* sections */
section{padding:clamp(3.5rem,7vw,6rem) 0}
h2{font-family:var(--pixel);font-weight:700;
  font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;margin:0 0 .5rem;color:var(--pink);
  text-shadow:3px 3px 0 var(--ink)}
.sub{color:var(--muted);margin:0 0 2.5rem;max-width:52ch}

/* inbox */
.inbox{display:grid;grid-template-columns:260px 1fr;gap:3rem;align-items:start}
.inbox-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
.count{display:inline-flex;align-items:center;gap:.5rem;background:var(--plum);color:var(--aqua);padding:.25rem .75rem;border-radius:6px;font-weight:600}
.thread{display:flex;flex-direction:column;gap:1.75rem}
.msg{position:relative;max-width:620px;background:var(--bubble);color:var(--bubble-text);border:3px solid var(--ink);border-radius:20px 20px 20px 4px;padding:1.25rem 1.5rem 1.25rem;box-shadow:6px 6px 0 var(--pink)}
.msg:nth-child(2){box-shadow:6px 6px 0 var(--aqua)}
.msg:nth-child(3){box-shadow:6px 6px 0 var(--honey)}
.msg:nth-child(2){margin-left:clamp(.25rem,4vw,3rem)}
.msg:nth-child(3){margin-left:clamp(.25rem,2vw,1.5rem)}
.msg-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted);margin-bottom:.5rem}
.msg-meta b{color:var(--text)}
.msg p{margin:0 0 1rem;font-size:1.15rem}
.msg .when{display:block;margin-top:0;font-family:var(--pixel);font-weight:700;font-size:1.6rem;line-height:1.1;margin-bottom:.25rem;color:var(--bubble-text)}
.msg-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.msg-actions .btn{font-size:.95rem;padding:.5rem 1rem}
.tag{font-size:.9rem;font-weight:600;padding:.25rem .5rem;border:2px solid var(--ink);border-radius:999px;background:var(--honey);color:var(--plum)}
.tag.low{background:var(--pink);color:var(--plum)}
.tag.soon{background:var(--aqua);color:var(--plum)}
.typing{display:inline-flex;gap:6px;padding:1rem 1.25rem;border:3px solid var(--ink);border-radius:20px 20px 20px 4px;background:var(--bubble);width:max-content}
.typing i{width:9px;height:9px;background:var(--pink);border-radius:2px;}
.typing-note{color:var(--muted);font-size:.95rem;margin-top:-.75rem}

/* about */
.about{background:var(--pink);border-block:3px solid var(--ink);color:var(--plum)}
.about h2{color:var(--honey);text-shadow:3px 3px 0 var(--plum)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.about p{max-width:46ch;font-size:1.2rem}
.facts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;padding:0;list-style:none}
.facts li{background:#FFF4F9;color:var(--plum);border:3px solid var(--ink);border-radius:999px;padding:.25rem 1rem;font-weight:600}

/* join */

label{font-weight:600}
.form-msg{min-height:1.5em;color:var(--text);font-weight:600;margin:0}
.small{font-size:.9rem;color:var(--muted);margin:0}


/* ===== Camera roll: Smash Balloon Instagram Feed ===== */
.gal-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-bottom:2rem}
.gal-head .sub{margin-bottom:0}
.hl-ig #sb_instagram{width:100% !important;padding:0 !important;background:none !important}
.hl-ig #sb_instagram .sb_instagram_header,.hl-ig #sb_instagram .sbi-header{display:none !important}
.hl-ig #sb_instagram #sbi_images{display:grid !important;grid-template-columns:repeat(4,1fr);gap:1rem !important;padding:0 !important;width:100% !important;float:none !important}
.hl-ig #sb_instagram .sbi_item{width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;float:none !important;position:relative;aspect-ratio:1;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--surface);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.hl-ig #sb_instagram .sbi_item:first-child{grid-column:span 2;grid-row:span 2}
.hl-ig #sb_instagram .sbi_photo_wrap,.hl-ig #sb_instagram .sbi_photo{display:block;width:100%;height:100% !important;background-size:cover;background-position:center}
.hl-ig #sb_instagram .sbi_photo img{width:100% !important;height:100% !important;object-fit:cover;opacity:1 !important}
.hl-ig #sb_instagram .sbi_playbtn,.hl-ig #sb_instagram .sbi_lightbox_carousel_icon,.hl-ig #sb_instagram .sbi_carousel_icon{display:none !important}
.hl-ig #sb_instagram .sbi_type_video .sbi_photo_wrap::after,.hl-ig #sb_instagram .sbi_type_carousel .sbi_photo_wrap::after{
  position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;min-width:2rem;height:2rem;padding:0 .5rem;
  border:2px solid var(--plum);border-radius:8px;background:var(--honey);color:var(--plum);font-family:var(--pixel);font-weight:700;font-size:.9rem;pointer-events:none}
.hl-ig #sb_instagram .sbi_type_video .sbi_photo_wrap::after{content:"";background:var(--honey) linear-gradient(var(--plum),var(--plum)) center/0 0;clip-path:none;-webkit-mask:none}
.hl-ig #sb_instagram .sbi_type_video .sbi_photo_wrap::before{content:"";position:absolute;z-index:2;top:calc(.5rem + 10px);right:calc(.5rem + 10px);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--plum);pointer-events:none}
.hl-ig #sb_instagram .sbi_type_carousel .sbi_photo_wrap::after{content:"";background:linear-gradient(var(--honey),var(--honey)) 9px 15px/6px 6px no-repeat,linear-gradient(var(--plum),var(--plum)) 7px 13px/10px 10px no-repeat,linear-gradient(var(--honey),var(--honey)) 13px 9px/6px 6px no-repeat,linear-gradient(var(--plum),var(--plum)) 11px 7px/10px 10px no-repeat,var(--honey)}
.hl-ig #sb_instagram #sbi_load{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;width:100%}
.hl-ig #sb_instagram #sbi_load .sbi_load_btn,.hl-ig #sb_instagram .sbi_follow_btn a{
  display:inline-flex !important;align-items:center;gap:.5rem;font-family:var(--pixel) !important;font-weight:700;font-size:1.05rem !important;
  padding:.75rem 1.25rem !important;border:3px solid var(--ink) !important;border-radius:999px !important;
  background:var(--honey) !important;color:var(--plum) !important;box-shadow:4px 4px 0 var(--ink) !important;text-decoration:none;margin:0 !important}
.hl-ig #sb_instagram .sbi_follow_btn a{background:var(--surface) !important;color:var(--text) !important}
.hl-ig #sb_instagram .sbi_follow_btn svg{display:none}
.hl-ig #sb_instagram .sbi_load_btn .sbi_loader{background-color:var(--plum) !important}

/* ===== Forms: Forminator ===== */
.involved-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.who{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.5rem}
.who li{display:flex;gap:.5rem;align-items:baseline}
.who li::before{content:"";flex:none;width:10px;height:10px;transform:translateY(1px);background:linear-gradient(var(--c),var(--c)) center/30% 100% no-repeat,linear-gradient(var(--c),var(--c)) center/100% 30% no-repeat;--c:var(--pink)}
.contact-card{background:var(--surface);border:3px solid var(--ink);border-radius:24px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:10px 10px 0 var(--pink)}
.hl-form .forminator-ui.forminator-custom-form{margin:0 !important;padding:0 !important;background:none !important;font-family:var(--body) !important}
.hl-form .forminator-row{margin-bottom:1.25rem !important}
.hl-form .forminator-row-last{margin-bottom:0 !important}
.hl-form .forminator-label,.hl-form .forminator-legend{display:block;font-family:var(--body) !important;font-weight:600 !important;font-size:1.05rem !important;color:var(--text) !important;margin:0 0 .5rem !important;padding:0 !important}
.hl-form .forminator-required{color:var(--err) !important}
.hl-form .forminator-input,.hl-form .forminator-textarea,.hl-form select{
  font-family:var(--body) !important;font-size:1.05rem !important;font-weight:500;width:100% !important;
  padding:.75rem 1rem !important;border:3px solid var(--ink) !important;border-radius:14px !important;
  background:var(--bg) !important;color:var(--text) !important;box-shadow:none !important}
.hl-form .forminator-textarea{min-height:9rem !important;resize:vertical}
.hl-form .forminator-input:focus,.hl-form .forminator-textarea:focus{outline:3px solid var(--pink) !important;outline-offset:2px}
.hl-form .forminator-has_error .forminator-input,.hl-form .forminator-has_error .forminator-textarea{border-color:var(--err) !important}
.hl-form .forminator-error-message{display:block;background:none !important;color:var(--err) !important;font-weight:600 !important;font-size:.95rem !important;padding:0 !important;margin:.5rem 0 0 !important}
.hl-form .forminator-error-message::before{display:none !important}
.hl-form .forminator-description{color:var(--muted) !important;font-size:.9rem !important;margin-top:.25rem !important}
/* radio options become pill chips */
.hl-form .forminator-field:has(> .forminator-radio){display:flex;flex-wrap:wrap;gap:.5rem}
.hl-form .forminator-radio{position:relative;display:inline-flex !important;align-items:center;margin:0 !important;padding:.5rem 1rem !important;
  border:3px solid var(--ink);border-radius:999px;background:var(--bg);color:var(--text);cursor:pointer;font-weight:600}
.hl-form .forminator-radio input{position:absolute !important;opacity:0 !important;width:1px;height:1px}
.hl-form .forminator-radio-bullet{display:none !important}
.hl-form .forminator-radio-label{padding:0 !important;margin:0 !important;color:inherit !important;font-family:var(--body) !important;font-size:1rem !important;line-height:1.3 !important}
.hl-form .forminator-radio:has(input:checked){background:var(--aqua);color:var(--plum)}
.hl-form .forminator-radio:has(input:focus-visible){outline:3px solid var(--text);outline-offset:2px}
.hl-form .forminator-button-submit,.hl-form .forminator-button{
  font-family:var(--pixel) !important;font-weight:700 !important;font-size:1.05rem !important;letter-spacing:.02em;
  padding:.75rem 1.5rem !important;border:3px solid var(--ink) !important;border-radius:999px !important;
  background:var(--pink) !important;color:var(--plum) !important;box-shadow:4px 4px 0 var(--ink) !important;cursor:pointer;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.hl-form .forminator-response-message{border:3px solid var(--ink) !important;border-radius:14px !important;background:var(--aqua) !important;color:var(--plum) !important;padding:1rem 1.25rem !important;margin-bottom:1.25rem !important;box-shadow:none !important}
.hl-form .forminator-response-message p,.hl-form .forminator-response-message *{color:var(--plum) !important;font-family:var(--body) !important}
.hl-form .forminator-response-message.forminator-error{background:var(--blush) !important}

/* ===== WordPress bits ===== */
.admin-note{border:3px dashed var(--ink);border-radius:16px;padding:1.25rem 1.5rem;background:var(--surface)}
.admin-note strong{font-family:var(--pixel)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty-inbox{max-width:620px;background:var(--bubble);border:3px solid var(--ink);border-radius:20px 20px 20px 4px;padding:1.25rem 1.5rem}
.page-content{padding:clamp(3rem,6vw,5rem) 0}
.page-content .wrap{max-width:760px}
.page-content h1{font-family:var(--pixel);font-weight:700;font-size:clamp(2.3rem,5vw,3.4rem);line-height:1.05;color:var(--pink);text-shadow:3px 3px 0 var(--ink);margin:0 0 1.5rem}
.page-content h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.page-content h3{font-family:var(--pixel);font-weight:700;font-size:1.4rem}
.page-content a{color:var(--text);text-decoration-color:var(--pink);text-decoration-thickness:3px}
.page-content img{border:3px solid var(--ink);border-radius:16px}
.post-list{list-style:none;padding:0;display:grid;gap:1.5rem}
.post-list a{font-family:var(--pixel);font-weight:700;font-size:1.4rem;text-decoration:none}
body.admin-bar header{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){body.admin-bar header{top:calc(46px + env(safe-area-inset-top,0px))}}
/* footer */
footer{position:relative;background:var(--footer-bg);color:var(--blush);margin-top:3rem;padding:1.5rem 0 1rem}
footer::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--footer-bg);
  -webkit-mask:var(--edge) repeat-x left bottom/24px 12px;
  mask:var(--edge) repeat-x left bottom/24px 12px}
.foot{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.foot-logo img{width:130px}
.foot-nav{flex:1}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot-nav a{color:var(--blush);text-decoration:none;font-weight:600;padding:.5rem 0;display:inline-block}
.foot-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.foot-social a{display:inline-block;padding:.5rem 1rem;border:2px solid var(--blush);border-radius:999px;color:var(--blush);text-decoration:none;font-family:var(--pixel);font-weight:700;font-size:.95rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:1rem;padding-top:.75rem;border-top:2px dashed rgba(255,203,225,.3);font-size:.85rem;color:#D9C3DE}
.foot-base p{margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.foot-base a{color:#D9C3DE}
.nokia::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:linear-gradient(var(--c),var(--c)) center/30% 100% no-repeat,linear-gradient(var(--c),var(--c)) center/100% 30% no-repeat;--c:var(--honey)}

@media (max-width:900px){
  .hero-grid,.about-grid,.inbox,.involved-grid{grid-template-columns:1fr}
  .hl-ig #sb_instagram #sbi_images{grid-template-columns:repeat(3,1fr)}
  .hero-grid{text-align:center}.lede{margin-inline:auto}.hero .cta-row{justify-content:center}
  .inbox-head{position:static}
  .phone{width:min(240px,62vw)}
  .msg:nth-child(n){margin-left:0}
}
@media (max-width:720px){
  .hl-ig #sb_instagram #sbi_images{grid-template-columns:repeat(2,1fr);gap:.5rem !important}
  .bar .tix{display:none}
  .bar .brand img{width:120px}
}
@media (max-width:1020px){
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--header-bg);border-bottom:3px solid var(--line);backdrop-filter:blur(10px)}
  header nav.open{display:block}
  header nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem}
  header nav a{display:block;padding:.5rem 0}
  .menu-btn{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ringing,.typing i,.dots::after{animation:none}
  .dots::after{content:"..."}
  .btn,.hl-ig #sb_instagram .sbi_item,.hl-form .forminator-button-submit{transition:none}
}
/* ===== Shared layout for inner pages ===== */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-bottom:2rem}
.sec-head .sub{margin-bottom:0}
.page-head{padding:clamp(3rem,7vw,5.5rem) 0 1rem}
.page-head h1{font-family:var(--pixel);font-weight:700;font-size:clamp(2.8rem,7vw,5rem);line-height:1;color:var(--pink);text-shadow:4px 4px 0 var(--ink);margin:0}
.page-head .lede{margin:1.25rem 0 0;max-width:46ch}
.page-head + section{padding-top:clamp(2rem,4vw,3rem)}
.inbox-link{margin:1.5rem 0 0}
.msg-details{margin-top:-.5rem !important}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem}
.cta-band .cta-row{margin-top:1.5rem}
.cta-band p{font-size:1.2rem;max-width:44ch}
.cta-strip{padding:3rem 0}
.cta-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:var(--plum);color:var(--blush);border:3px solid var(--ink);border-radius:20px;padding:1.5rem 1.75rem}
.cta-strip p{margin:0;font-family:var(--pixel);font-weight:700;font-size:1.5rem}
.privacy-line{margin:1rem 0 0}
.privacy-line a{color:var(--text)}
.prose p{font-size:1.15rem;max-width:62ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:2rem}
.prose a{color:var(--text);text-decoration-color:var(--pink);text-decoration-thickness:3px}
.about-page .about-grid{align-items:start}
.about-page .star-wrap{position:sticky;top:120px}
header nav .current-menu-item > a,header nav .current_page_item > a{color:var(--pink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* Camera roll preview on the homepage: first 9 posts only */
.hl-ig.preview #sb_instagram .sbi_item:nth-child(n+10){display:none !important}
.hl-ig.preview #sb_instagram #sbi_load{display:none !important}
.gallery-follow{margin:0 0 2rem}

/* ===== Past events ===== */
.past-list{list-style:none;margin:0;padding:0;border:3px solid var(--ink);border-radius:20px;background:var(--surface);overflow:hidden;max-width:820px}
.past-list li{display:grid;grid-template-columns:8.5rem 1fr auto;gap:1rem;padding:1rem 1.25rem;border-top:2px dashed rgba(87,77,104,.35);align-items:baseline}
.past-list li:first-child{border-top:0}
.past-date{font-family:var(--pixel);font-weight:700;color:var(--pink);text-shadow:1px 1px 0 var(--ink)}
.past-name{font-weight:600}
.past-venue{color:var(--muted);font-size:.95rem}

/* ===== Past DJs ===== */
.dj-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.dj-card a{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:var(--text)}
.dj-photo{display:block;aspect-ratio:1;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--pink);box-shadow:6px 6px 0 var(--aqua);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.dj-card:nth-child(3n+2) .dj-photo{box-shadow:6px 6px 0 var(--honey)}
.dj-card:nth-child(3n+3) .dj-photo{box-shadow:6px 6px 0 var(--pink)}
.dj-photo img{width:100%;height:100%;object-fit:cover}
.dj-initial{display:grid;place-items:center;width:100%;height:100%;font-family:var(--pixel);font-weight:700;font-size:4rem;color:var(--plum)}
.dj-name{font-family:var(--pixel);font-weight:700;font-size:1.35rem;margin-top:.5rem}
.dj-sound{color:var(--muted);font-size:.95rem}
.dj-hero{padding:clamp(2rem,5vw,4rem) 0 2rem}
.back a{font-weight:600;color:var(--text)}
.back a::before{content:"‹ "}
.dj-hero-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:1rem}
.dj-hero h1{font-family:var(--pixel);font-weight:700;font-size:clamp(2.8rem,7vw,5rem);line-height:1;color:var(--pink);text-shadow:4px 4px 0 var(--ink);margin:0 0 .75rem;overflow-wrap:anywhere}
.dj-sound-lg{font-size:1.3rem;font-weight:600;margin:0 0 .5rem}
.polaroid{background:#FFF4F9;border:3px solid var(--ink);border-radius:6px;padding:16px 16px 0;box-shadow:8px 8px 0 var(--pink);transform:rotate(-3deg)}
.polaroid img,.polaroid .dj-initial{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--ink);background:var(--pink)}
.polaroid-caption{display:block;text-align:center;padding:.75rem 0 1rem;font-family:var(--pixel);font-weight:700;color:var(--plum);font-size:1.2rem}
.socials{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.socials a{display:inline-block;padding:.5rem 1rem;border:3px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;text-decoration:none}
.dj-bio{padding-top:1rem}
.bio-card{max-width:820px}
.bio-card h2{font-size:clamp(1.8rem,3.5vw,2.4rem)}
.photo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.photo-tile{display:block;width:100%;aspect-ratio:1;padding:0;border:3px solid var(--ink);border-radius:16px;overflow:hidden;cursor:zoom-in;background:var(--surface);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.photo-tile img{width:100%;height:100%;object-fit:cover}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.video-frame{position:relative;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:#17131D;box-shadow:6px 6px 0 var(--aqua)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
dialog.lightbox{border:3px solid var(--ink);border-radius:20px;padding:0;background:var(--surface);color:var(--text);width:min(900px,94vw);max-height:92vh;max-height:92dvh;overflow:auto}
dialog.lightbox::backdrop{background:rgba(43,38,52,.85)}
.lb-media{background:#17131D;display:grid;place-items:center}
.lb-media img{max-width:100%;max-height:74vh;max-height:74dvh;object-fit:contain}
.lb-body{padding:1rem 1.25rem}
.lb-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.lb-bar .grow{flex:1}
.lb-bar .btn{font-size:.95rem;padding:.5rem 1rem}

@media (max-width:900px){
  .dj-grid,.photo-grid{grid-template-columns:repeat(3,1fr)}
  .dj-hero-grid{grid-template-columns:1fr}
  .polaroid{width:min(340px,86%);margin-inline:auto}
  .about-page .star-wrap{position:static;width:min(260px,70%);margin-inline:auto}
}
@media (max-width:720px){
  .dj-grid,.photo-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .video-grid{grid-template-columns:1fr}
  .past-list li{grid-template-columns:1fr;gap:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .dj-photo,.photo-tile{transition:none}
}

.page-head ~ section,.dj-hero ~ section{padding:clamp(2.5rem,5vw,4rem) 0}
.page-head ~ .cta-strip,.dj-hero ~ .cta-strip{padding:2rem 0 3rem}

/* Gallery page: even grid (the big first tile is homepage-only) */
.gallery-page .hl-ig #sb_instagram .sbi_item:first-child{grid-column:auto;grid-row:auto}

/* ===== Gallery albums ===== */
.album-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem}
.album-card a{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:var(--text)}
.album-stack{position:relative;display:block;aspect-ratio:4/3;margin:12px 12px .5rem}
.album-stack::before,.album-stack::after{content:"";position:absolute;inset:0;border:3px solid var(--ink);border-radius:16px;transition:transform 240ms var(--ease-out)}
.album-stack::before{background:var(--honey);transform:rotate(-4deg)}
.album-stack::after{background:var(--aqua);transform:rotate(3deg)}
.album-cover{position:relative;z-index:1;display:block;height:100%;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--pink)}
.album-cover img{width:100%;height:100%;object-fit:cover}
.album-name{font-family:var(--pixel);font-weight:700;font-size:1.45rem;line-height:1.15}
.album-meta{color:var(--muted);font-size:.95rem}
.ig-section{padding-top:0 !important}
.back{margin:0 0 1rem}

/* ===== Photo and video grids that fit their contents ===== */
.photo-grid.count-1{grid-template-columns:minmax(0,640px)}
.photo-grid.count-1 .photo-tile{aspect-ratio:auto}
.photo-grid.count-1 .photo-tile img{height:auto}
.photo-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.photo-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.video-grid.count-1{grid-template-columns:minmax(0,860px)}
.video-grid.count-2 .video-frame:last-child:nth-child(odd){grid-column:1/-1}
.media-section + .media-section{padding-top:0 !important}
@media (max-width:900px){
  .album-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .photo-grid.count-3,.photo-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-grid.count-2 .video-frame:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:560px){
  .album-grid{grid-template-columns:1fr}
}

/* ===== Decorative pieces (animated by assets/js/hotline.js with anime.js) ===== */
.star-wrap{width:min(340px,80%);margin-inline:auto;cursor:pointer}
.star{display:block;width:100%;transform:rotate(-6deg);transform-origin:50% 90%;filter:drop-shadow(6px 8px 0 rgba(87,77,104,.25))}
.hero-logo{position:relative;display:inline-block}
.spark{position:absolute;width:18px;height:18px;opacity:0;pointer-events:none;
  background:linear-gradient(var(--honey),var(--honey)) center/4px 100% no-repeat,linear-gradient(var(--honey),var(--honey)) center/100% 4px no-repeat}
.spark.s2,.spark.s4{background-image:linear-gradient(var(--aqua),var(--aqua)),linear-gradient(var(--aqua),var(--aqua))}
.spark.s3{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)}
.hero-logo .s1{top:4%;left:2%}.hero-logo .s2{top:-4%;left:58%}.hero-logo .s3{top:44%;left:90%}.hero-logo .s4{bottom:6%;left:30%}.hero-logo .s5{bottom:-2%;left:78%}
.sparkle-title{position:relative;display:inline-block;padding-right:1.5rem}
.sparkle-title .s1{top:-.2em;right:-.2rem}.sparkle-title .s2{bottom:.1em;right:.6rem;width:12px;height:12px}


.polaroid{transition:transform 240ms var(--ease-out)}

.page-head ~ .media-section,.dj-hero ~ .media-section,.dj-hero ~ .dj-bio{padding:1.5rem 0 !important}
@media (max-width:720px){
  .foot{flex-direction:column;text-align:center;gap:1rem}
  .foot-nav ul{justify-content:center;gap:.25rem 1rem}
  .foot-social{justify-content:center}
  .foot-base{flex-direction:column;align-items:center;text-align:center}
  .foot-base p{justify-content:center}
}

/* Hover lifts only on devices with a real pointer, so taps on phones don’t leave things stuck "lifted". */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
  .hl-ig #sb_instagram .sbi_item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
  .hl-form .forminator-button-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink) !important}
  .foot-logo:hover img{transform:rotate(-3deg);transition:transform 200ms var(--ease-out)}
  .dj-card a:hover .dj-photo{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
  .photo-tile:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
  .album-card a:hover .album-stack::before{transform:rotate(-7deg) translate(-4px,2px)}
  .album-card a:hover .album-stack::after{transform:rotate(6deg) translate(4px,2px)}
  .polaroid:hover{transform:rotate(1deg) scale(1.02)}
  .dj-card a:hover .dj-photo img,.album-card a:hover .album-cover img{transform:scale(1.03)}
}

/* ===== Mobile polish ===== */
html{-webkit-text-size-adjust:100%}
.back a,.foot-base a{display:inline-block;padding:.75rem 0}
.nav-tix{display:none}
@media (max-width:1020px){
  header nav.open{box-shadow:0 10px 0 rgba(87,77,104,.15)}
  header nav a{font-size:1.15rem;padding:.75rem 0}
  header nav li + li{border-top:2px dashed rgba(87,77,104,.2)}
}
@media (max-width:720px){
  .nav-tix{display:block;padding:.5rem 1.25rem 1.25rem}
  .nav-tix .btn{width:100%}
  .phone{width:min(280px,72vw)}
  .hero{padding-top:1.5rem}
  .hero h1 img{width:min(420px,100%)}
  .lede{font-size:1.1rem}
  section{padding:3rem 0}
  .sec-head{align-items:flex-start}
  .msg{padding:1rem 1rem 1rem}
  .msg .when{font-size:1.4rem}
  .cta-strip .wrap{flex-direction:column;text-align:center;padding:1.25rem}
  .cta-strip p{font-size:1.3rem}
  .page-head{padding:2.25rem 0 .5rem}
  .dj-hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .socials a{padding:.5rem 1rem}
  dialog.lightbox{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;border-left:0;border-right:0}
  .lb-media img{max-height:70dvh}
  .lb-bar .btn{flex:1}
  .lb-bar .grow{display:none}
}
@media (max-width:720px){
  .screen-body{font-size:.95rem}
  .soft{font-size:.75rem}
}
.foot-base{align-items:center}
.foot-base p{align-items:center}
.foot-base a{padding:.5rem 0}
@media (max-width:1020px){
  header nav.open{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ===== YouTube videos: thumbnail first, player loads on tap ===== */
.video-frame.yt{display:block;width:100%;padding:0;cursor:pointer;font:inherit}
.video-frame.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.video-frame .play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border:3px solid var(--ink);border-radius:16px;background:var(--pink);box-shadow:4px 4px 0 var(--ink);transition:transform 200ms var(--ease-out)}
.video-frame .play::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -6px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--plum)}
.video-frame.yt:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.video-frame.portrait{aspect-ratio:9/16;max-width:340px;width:100%;justify-self:center}
.video-grid.count-1 .video-frame.portrait{justify-self:start}
@media (hover:hover) and (pointer:fine){
  .video-frame.yt:hover .play{transform:scale(1.04)}
}
/* Video layout: rows line up at the same height whether a video is landscape or a tall Short */
.video-grid{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.video-grid .video-frame{flex:0 0 calc(50% - .75rem);max-width:none;justify-self:auto}
.video-grid .video-frame.portrait{flex-basis:calc((50% - .75rem) * .3164);min-width:150px}
.video-grid.count-1 .video-frame{flex-basis:min(860px,100%)}
.video-grid.count-1 .video-frame.portrait{flex-basis:min(340px,100%)}
@media (max-width:720px){
  .video-grid .video-frame{flex-basis:100%}
  .video-grid .video-frame.portrait,.video-grid.count-1 .video-frame.portrait{flex-basis:min(300px,80%);margin-inline:auto}
}


/* Forminator's message box stays hidden until there's actually a message to show */
.hl-form .forminator-response-message[aria-hidden="true"],.hl-form .forminator-response-message:empty{display:none !important}

/* WordPress admin bar scrolls away on small phones, so the header sits at the very top there */
@media (max-width:600px){
  body.admin-bar header{top:env(safe-area-inset-top,0px)}
}

/* Smaller ringing Nokia on phones */
@media (max-width:720px){
  .phone{width:min(165px,44vw)}
  .screen-body{font-size:.72rem}
  .soft{font-size:.6rem}
  .screen{padding:3% 5%}
  .hero-grid{gap:1.25rem}
  .phone-col{gap:1rem}
}

/* ===== Craft pass (unslop polish, taste micro-interactions, Emil motion rules) ===== */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
/* Headings break evenly, paragraphs avoid one-word last lines */
h1,h2,h3,.when,.dj-name,.album-name{text-wrap:balance}
p,li{text-wrap:pretty}
/* Times, dates and counts line up */
.msg-meta,.past-date,.counter,.count,.album-meta,.lb-bar{font-variant-numeric:tabular-nums}
/* Message count: a small status square instead of an envelope emoji */
.count::before{content:"";width:8px;height:8px;background:var(--aqua)}
/* Underlines draw in from the left on nav and footer links */
header nav a,.foot-nav a,.foot-base a,.back a,.privacy-line a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;background-origin:content-box;transition:background-size 200ms var(--ease-out),color 200ms ease}
header nav .current-menu-item > a,header nav .current_page_item > a{background-size:100% 2px;text-decoration:none}
.foot-base a,.privacy-line a{background-size:100% 1px}
@media (hover:hover) and (pointer:fine){
  header nav a:hover,.foot-nav a:hover,.back a:hover{background-size:100% 2px}
  .foot-base a:hover,.privacy-line a:hover{background-size:100% 2px}
}
/* Pressable things answer the press */
.photo-tile,.video-frame.yt,.dj-card a,.album-card a,.socials a,.foot-social a,.menu-btn{transition:transform 160ms var(--ease-out),box-shadow 200ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.photo-tile:active,.video-frame.yt:active,.socials a:active,.foot-social a:active{transform:scale(.97)}
.dj-card a:active,.album-card a:active{transform:scale(.98)}
.dj-photo img,.album-cover img,.photo-tile img{transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .photo-tile:hover img{transform:scale(1.03)}
  .photo-tile:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
}
.video-frame .play{transition:transform 160ms var(--ease-out)}
/* The mobile menu fades and drops a few pixels from the header as it opens */
/* The photo viewer scales up slightly from the centre, the backdrop fades */
/* Phone answer and decline feel like real keys */
.phone-actions .btn:active{transform:translate(3px,3px) scale(.98)}
@media (prefers-reduced-motion:reduce){
  .photo-tile:active,.video-frame.yt:active,.socials a:active,.foot-social a:active,.dj-card a:active,.album-card a:active{transform:none}
}

/* =====================================================================
   Motion system
   Hover and press feedback stays in CSS: it is interruptible and runs off the main thread.
   Everything that plays, loops or reacts to scroll and drag runs through anime.js in hotline.js.
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entering, feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* moving on screen */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* header slide */
  --press:160ms;
}

/* First homepage visit of the session: hero pieces wait for the intro. If the script never
   runs, they appear after 2.5s anyway. */
.hl-intro [data-intro]{opacity:0;animation:introFallback 0s 2.5s forwards}
@keyframes introFallback{to{opacity:1}}

/* Every press answers instantly; nothing grows from zero */
.btn,.phone-actions .btn,.menu-btn,.socials a,.foot-social a,.photo-tile,.video-frame.yt{transition:transform var(--press) var(--ease-out),box-shadow var(--press) var(--ease-out),background-color 160ms ease,color 160ms ease}
.btn:active,.menu-btn:active{transform:translate(3px,3px) scale(.97);box-shadow:1px 1px 0 var(--ink)}
.socials a:active,.foot-social a:active,.photo-tile:active,.video-frame.yt:active{transform:scale(.97)}

/* Header: a hairline shadow once the page scrolls; on phones it tucks away while you scroll down */
header{transition:transform 320ms var(--ease-drawer),box-shadow 200ms ease}
header.is-scrolled{box-shadow:0 6px 0 rgba(87,77,104,.12)}
header.is-tucked{transform:translateY(calc(-100% - 6px))}

/* Mobile menu: opens from the Menu button's corner */
@media (max-width:1020px){
  header nav{transform-origin:calc(100% - 48px) 0}
  header nav.open{background:var(--bg)}
}

/* Phone */
.screen{overflow:hidden}
.screen-glow{position:absolute;inset:0;border-radius:4px;background:#fff;opacity:0;pointer-events:none}
.screen-body,.soft{position:relative}

/* Star: the outer layer sways, the inner layer hops when tapped */
.star-wrap{cursor:pointer}
.star-hop{will-change:transform}
.star{transform:rotate(-6deg);transform-origin:50% 90%}

/* Lightbox: drag to change photo or pull down to close */
dialog.lightbox{overflow:hidden}
.lb-media{overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab}
.lb-media.dragging{cursor:grabbing}
.lb-media img{will-change:transform;-webkit-user-drag:none}
.lb-count{font-family:var(--pixel);font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);margin-right:auto;min-width:4ch}
.lb-bar .grow{display:none}

/* Video: a fast pixel spinner while YouTube's player loads */
.video-frame .loading{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;z-index:2;
  background:linear-gradient(var(--pink),var(--pink)) center/30% 100% no-repeat,linear-gradient(var(--pink),var(--pink)) center/100% 30% no-repeat}

/* Cursor trail: three pixel crosses that follow the pointer on a spring */
.cursor-trail{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;z-index:9999;opacity:0;transition:opacity 300ms ease;
  background:linear-gradient(var(--c),var(--c)) center/30% 100% no-repeat,linear-gradient(var(--c),var(--c)) center/100% 30% no-repeat}
.cursor-on .cursor-trail{opacity:.9}

/* Page-to-page: a quick crossfade, and the header stays put */
@view-transition{navigation:auto}
header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms;animation-timing-function:var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  header{transition:none}
  header.is-tucked{transform:none}
  .btn:active,.menu-btn:active,.socials a:active,.foot-social a:active,.photo-tile:active,.video-frame.yt:active{transform:none}
  .cursor-trail{display:none}
}
.msg{transform-origin:0 100%}
dialog.lightbox::backdrop{transition:opacity 220ms ease}
@starting-style{dialog.lightbox[open]::backdrop{opacity:0}}


/* =====================================================================
   Native feel on phones (mobile-native) and fluid, physical interaction (apple-design)
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent}

/* Hover only where there's a real pointer; taps get :active feedback instead */
@media (hover:hover) and (pointer:fine){
  header nav a:hover{color:var(--pink)}
  .foot-nav a:hover{color:var(--pink)}
  .foot-social a:hover{background:var(--aqua);border-color:var(--aqua);color:var(--plum)}
  .foot-base a:hover{color:var(--pink)}
  .socials a:hover{background:var(--aqua);color:var(--plum)}
}

/* Taps fire straight away, and holding a control never selects its label or pops a menu */
a,button,summary,[role="button"],label{touch-action:manipulation}
button,.btn,header nav a,.foot-nav a,.foot-social a,.socials a,.menu-btn,.chip,.tag,.count,.phone,.soft,.star-wrap,.photo-tile,.video-frame.yt,.dj-card a,.album-card a,.lb-bar,.brand{-webkit-user-select:none;user-select:none}
.phone img,.star,.photo-tile img,.video-frame img,.brand img,.foot-logo img,.dj-photo img,.album-cover img,.lb-media img{-webkit-touch-callout:none}

/* Press feedback on everything tappable, on touch-down, 100-160ms */
header nav a:active,.foot-nav a:active,.foot-base a:active,.back a:active{opacity:.6;transition:opacity 100ms ease-out}
.dj-card a:active .dj-photo,.album-card a:active .album-stack{transform:scale(.97)}
.dj-photo,.album-stack{transition:transform 160ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.phone:active{transform:scale(.98)}

/* Typing never zooms the page on iPhone: fields are 16px or more */
input,textarea,select,.hl-form .forminator-input,.hl-form .forminator-textarea{font-size:max(16px,1em) !important}

/* Header: a translucent material the page scrolls under */
header{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}

/* Mobile menu: a heavier material, so it never stacks light-on-light over busy content */
@media (max-width:1020px){
  header nav.open{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);overscroll-behavior:contain}
}

/* Photo viewer: the photo is a custom gesture surface (sideways and down), the dialog never scrolls the page */
dialog.lightbox{overscroll-behavior:contain}
.lb-media{touch-action:none}
.lb-bar .btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
@media (max-width:720px){
  dialog.lightbox{height:100dvh;max-height:100dvh;display:none;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
  dialog.lightbox[open]{display:flex}
  .lb-media{flex:1;min-height:0}
  .lb-media img{max-height:100%}
  .lb-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}

/* Type: tracking changes with size. Big display text tightens, small labels open up */
.page-head h1,.dj-hero h1{letter-spacing:-.01em}
.small,.msg-meta,.album-meta,.dj-sound,.foot-base{letter-spacing:.01em}

/* People who ask for less transparency or more contrast get solid surfaces */
@media (prefers-reduced-transparency:reduce){
  header,header nav.open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  header,header nav.open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .small,.sub,.msg-meta,.album-meta,.dj-sound{color:var(--text)}
}
@media (prefers-reduced-motion:reduce){
  .phone:active,.dj-card a:active .dj-photo,.album-card a:active .album-stack{transform:none}
}


/* ===== 2.0.0 fixes ===== */

/* The footer is the bottom of the page. Its colour runs into the phone's home-bar area,
   and the page doesn't bounce past it to show the background underneath. */
footer{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
html,body{overscroll-behavior-y:none}

/* Buttons inside written content keep button colours (the content link colour was turning
   the yellow button's text pale pink in dark mode) */
.prose a.btn{color:var(--plum);text-decoration:none}
.prose a.btn.ghost{color:var(--text)}

/* About page buttons: start-aligned with the text above; on phones they stack at full width */
.about-page .cta-row{justify-content:flex-start;margin-top:1.5rem}
@media (max-width:560px){
  .about-page .cta-row{flex-direction:column;align-items:stretch}
  .about-page .cta-row .btn{width:100%}
}

/* "I'm a..." options: the question on its own line, then an even grid of equal-width options */
.hl-form .forminator-field:has(> .forminator-radio){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hl-form .forminator-field:has(> .forminator-radio) > :not(.forminator-radio){grid-column:1/-1}
.hl-form .forminator-field:has(> .forminator-radio) > .forminator-label{margin-bottom:4px !important}
.hl-form .forminator-radio{width:100%;justify-content:center;text-align:center;min-height:48px;padding:8px 12px !important}
.hl-form .forminator-radio-label{text-wrap:balance}
.hl-form .forminator-field:has(> .forminator-radio){grid-template-rows:auto;grid-auto-rows:minmax(48px,auto)}
.hl-form .forminator-field:has(> .forminator-radio) > .forminator-radio{height:100%}
@media (min-width:561px){
  /* every option row the same height, so the grid reads as one even block */
  .hl-form .forminator-field:has(> .forminator-radio){grid-auto-rows:1fr}
  .hl-form .forminator-field:has(> .forminator-radio) > :not(.forminator-radio){grid-row:auto}
}
@media (max-width:560px){
  /* phones: one clean column, like a native option list */
  .hl-form .forminator-field:has(> .forminator-radio){grid-template-columns:1fr}
}

/* Bigger tap area on the privacy link under forms, without changing the line spacing */
.privacy-line a{display:inline-block;padding:12px 0;margin:-12px 0}