/* Home page (XV.home in public/social.js). A photo hero that welcomes people, then image led bands.
   Brand: Bodoni Moda headings, Manrope text, the green accent (--brass). Accents use the validated palette
   (public/css/palette.css): one --viz colour per tile and section marker, --tint bands. Text stays in --chalk, --smoke, --dim.
   Photos sit on a dark green ground, so a photo that fails to load still leaves a finished tile. */
.home2{--hx-night:#10201A;--hx-gap:clamp(14px,1.6vw,22px);--hx-sec:clamp(56px,7vw,96px);--hx-r:10px}
.landing.home2 .wrap{max-width:1360px;padding-inline:max(32px,env(safe-area-inset-left,0px))}
.home2 h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.85rem);letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.home2 h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.025em}
.home2 .hx-p{color:var(--smoke);line-height:1.75;max-width:52ch}
.home2 .hx-arrow{flex:none;color:var(--brass);transition:transform .2s ease}

/* section marker: a coloured dot names the section's colour; sentence case */
.hx-kick{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:.84rem;font-weight:700;color:var(--smoke);letter-spacing:0}
.hx-kick::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--brass));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--brass)) 18%,transparent)}
.hx-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.4vw,30px)}
.hx-head>div{min-width:0}
.hx-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:.88rem;text-decoration:none;color:var(--chalk);white-space:nowrap}
.hx-link:hover .hx-arrow{transform:translateX(3px)}
.hx-link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hx-sec{padding-top:var(--hx-sec)}
.hx-band{margin-top:var(--hx-sec);padding-block:var(--hx-sec)}

/* ---------- hero ---------- */
.hx-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(600px,86vh,800px);display:flex;align-items:center;background:var(--hx-night);color:#fff}
.hx-slides{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 80% 10%,#2c5a43 0%,#173226 45%,var(--hx-night) 100%)}
.hx-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;transition:opacity 2.4s ease;transform:scale(1.02)}
.hx-slide.on{opacity:1}
.hx-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,22,17,.86) 0%,rgba(10,22,17,.66) 38%,rgba(10,22,17,.18) 72%,rgba(10,22,17,.1) 100%),linear-gradient(0deg,rgba(10,22,17,.7) 0%,transparent 34%)}
.hx-in{position:relative;display:grid;gap:18px;justify-items:start;width:100%;padding-block:clamp(56px,9vh,104px) clamp(64px,10vh,112px)}
.home2 .hx-hero h1{font-family:var(--display);font-weight:400;color:#fff;font-size:clamp(2.7rem,5.6vw,4.9rem);line-height:1.02;letter-spacing:-.045em;max-width:18ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hx-sub{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;max-width:50ch;color:rgba(255,255,255,.9);margin-bottom:8px}
.hx-hero .sbox{max-width:860px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.home2 .hx-hero .hx-try{margin-top:0;justify-content:flex-start}
.hx-hero .hx-try .tiny{color:rgba(255,255,255,.8);font-weight:700;letter-spacing:.04em;text-transform:none;font-size:.8rem}
.hx-hero .hx-try .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px)}
.hx-hero .hx-try .chip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
.hx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.home2 .hx-btn{min-height:50px;padding:12px 24px;font-size:.95rem}
.hx-hero .btn-brass{background:#fff;border-color:#fff;color:#14231A}
.hx-hero .btn-brass:hover{background:#E6F2EC;border-color:#E6F2EC}
.hx-btn-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.hx-btn-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.hx-credit{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;margin:0;max-width:min(560px,calc(100% - 32px));font-size:.7rem;line-height:1.4;text-align:right;color:rgba(255,255,255,.72)}
.hx-credit a{color:inherit;text-decoration:none}
.hx-credit a:hover{color:#fff;text-decoration:underline}

/* ---------- photo credit on tiles and cards ---------- */
.hx-cr{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:row-reverse;align-items:start;gap:6px;max-width:calc(100% - 20px)}
.hx-cr-b{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(10,22,17,.5);color:#fff;font:italic 600 .85rem/1 Georgia,serif;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.hx-cr-b::after{content:"";position:absolute;inset:-7px}
.hx-cr-b{position:relative}
.hx-cr-t{display:none;padding:6px 10px;border-radius:6px;background:rgba(10,22,17,.88);color:#fff;font-size:.7rem;line-height:1.4;text-decoration:none}
.hx-cr-t:hover{text-decoration:underline}
.hx-cr.open .hx-cr-t,.hx-cr:focus-within .hx-cr-t{display:block}
@media (hover:hover){.hx-cr:hover .hx-cr-t{display:block}}

/* ---------- explore by type ---------- */
.hx-types{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(220px,22vw,320px);gap:var(--hx-gap)}
.hx-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--hx-r);background:linear-gradient(140deg,color-mix(in srgb,var(--c) 55%,#10201A),#10201A 75%);grid-column:span 3}
.hx-t1{grid-column:span 6}.hx-t6{grid-column:span 6}
.hx-tile .hx-img,.hx-pc-art .hx-img,.hx-sell .hx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hx-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,22,17,.86) 0%,rgba(10,22,17,.35) 45%,rgba(10,22,17,0) 70%)}
.hx-tile-a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;gap:6px;padding:clamp(18px,2vw,26px);color:#fff;text-decoration:none}
.hx-tile-a::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--c);margin-bottom:6px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.hx-tile-n{font-family:var(--display);font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.03em;line-height:1.05}
.hx-tile-d{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:36ch}
.hx-tile:hover .hx-img{transform:scale(1.04)}
.hx-tile-a:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:var(--hx-r)}

/* ---------- live bands ---------- */
.hx-journal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hx-gap)}
.hx-tv{background:var(--tint-3)}
.hx-know{background:var(--tint-2)}

/* ---------- guides and drives ---------- */
.hx-know-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.hx-subhead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid color-mix(in srgb,var(--chalk) 14%,transparent)}
.hx-pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hx-pc{position:relative;isolation:isolate;display:grid;gap:10px;align-content:start}
.hx-pc-art{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:8px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 50%,#10201A),#10201A)}
.hx-pc-art::before{content:"";position:absolute;left:12px;bottom:12px;width:28px;height:4px;border-radius:2px;background:var(--c);z-index:1}
.hx-pc-art .hx-img{z-index:0}
.hx-pc-art .hx-cr{z-index:4}
.hx-pc-a{display:grid;gap:3px;text-decoration:none;color:var(--chalk)}
.hx-pc-a::after{content:"";position:absolute;inset:0;z-index:2}
.hx-pc-a b{font-size:.98rem;line-height:1.35}
.hx-pc-a span{font-size:.82rem;line-height:1.5;color:var(--smoke)}
.hx-pc:hover .hx-img{transform:scale(1.04)}
.hx-pc:hover .hx-pc-a b{text-decoration:underline;text-underline-offset:4px}

/* ---------- club ---------- */
.hx-club{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.hx-club-lead{display:grid;gap:14px;justify-items:start}
.hx-btn-line{border-color:var(--chalk);background:transparent;margin-top:4px}
.hx-events{display:grid;gap:12px}
.hx-ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:14px 16px;border-radius:var(--hx-r);border:1px solid var(--line);text-decoration:none;color:var(--chalk);background:var(--pit)}
.hx-ev:hover{border-color:color-mix(in srgb,var(--viz-5) 55%,var(--line))}
.hx-ev-d{display:grid;place-items:center;width:64px;height:64px;border-radius:8px;background:var(--tint-5);color:var(--chalk);line-height:1}
.hx-ev-d b{font-family:var(--display);font-size:1.7rem;font-weight:500}
.hx-ev-d span{font-size:.72rem;font-weight:700;color:var(--smoke);margin-top:-8px}
.hx-ev-b{display:grid;gap:3px;min-width:0}
.hx-ev-b b{font-size:1rem;line-height:1.35}
.hx-ev-b span{font-size:.84rem;color:var(--smoke)}
.hx-ev-none{padding:20px;border-radius:var(--hx-r);background:var(--tint-5);max-width:none}

/* ---------- sell ---------- */
.hx-sell{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--hx-sec);min-height:clamp(380px,46vw,540px);display:flex;align-items:center;background:linear-gradient(120deg,#1E3A2C,var(--hx-night));color:#fff}
.hx-sell .hx-img{object-position:60% 55%}
.hx-sell-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,22,17,.88) 0%,rgba(10,22,17,.62) 42%,rgba(10,22,17,.1) 80%)}
.hx-sell-in{width:100%;display:grid;gap:16px;justify-items:start;padding-block:56px}
.home2 .hx-sell h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem)}
.hx-sell-in p{max-width:44ch;font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.9)}
.hx-sell .btn-brass{background:#fff;border-color:#fff;color:#14231A;margin-top:4px}
.hx-sell .btn-brass:hover{background:#E6F2EC}

/* ---------- why ---------- */
.hx-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hx-gap)}
.hx-why li{display:grid;gap:8px;align-content:start;padding:24px 22px 26px;border-radius:var(--hx-r);background:var(--t)}
.hx-why-i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--pit);color:var(--c);margin-bottom:6px}
.hx-why-i svg{width:24px;height:24px}
.home2 .hx-why-t{text-align:start;font-family:var(--body);font-size:1.02rem;font-weight:700;letter-spacing:0;line-height:1.35}
.hx-why p{font-size:.88rem;line-height:1.65;color:var(--smoke)}
.hx-more{margin-top:clamp(40px,5vw,64px)}
.home2>section:last-child{padding-bottom:clamp(48px,6vw,80px)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
 .hx-types{grid-auto-rows:clamp(220px,30vw,300px)}
 .hx-tile,.hx-t1,.hx-t6{grid-column:span 6}
 .hx-know-grid{grid-template-columns:1fr}
 .hx-why{grid-template-columns:1fr 1fr}
 .hx-journal{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-journal>*:nth-child(3){display:none}
}
@media (max-width:860px){.hx-club{grid-template-columns:1fr}}
@media (min-width:641px) and (max-width:960px){.home2 .hx-tv .band-tv{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- phone ---------- */
@media (max-width:640px){
 .landing.home2 .wrap{padding-inline:16px}
 .hx-hero{min-height:0;align-items:end}
 .hx-in{gap:14px;padding-block:72px 64px}
 .home2 .hx-hero h1{font-size:clamp(2.35rem,10.5vw,3.1rem)}
 .hx-shade{background:linear-gradient(0deg,rgba(10,22,17,.92) 0%,rgba(10,22,17,.7) 55%,rgba(10,22,17,.45) 100%)}
 .hx-acts{width:100%}
 .hx-acts .hx-btn{flex:1 1 auto}
 .home2 .hx-hero .hx-try .chip{padding:5px 12px;font-size:.76rem}
 .home2 .hx-hero .hx-try .chip:nth-of-type(n+4){display:none}
 .home2 .hx-btn{padding-inline:12px;font-size:.9rem}
 .hx-head{flex-direction:column;align-items:start;gap:4px}
 .hx-types{grid-template-columns:1fr;grid-auto-rows:220px}
 .hx-tile,.hx-t1,.hx-t6{grid-column:auto}
 .hx-journal{grid-template-columns:1fr}.hx-journal>*:nth-child(3){display:none}
 .hx-pcs{grid-template-columns:1fr;gap:10px}
 .hx-pc{grid-template-columns:40% minmax(0,1fr);align-items:center;gap:14px}
 .hx-pc-art{aspect-ratio:4/3}
 .hx-why{grid-template-columns:1fr}
 .hx-sell{min-height:0}
 .hx-sell-shade{background:linear-gradient(0deg,rgba(10,22,17,.92) 0%,rgba(10,22,17,.6) 100%)}
 .hx-sell-in{padding-block:72px 64px}
 .hx-credit{font-size:.64rem;bottom:8px}
}

/* ---------- motion and themes ---------- */
@media (prefers-reduced-motion:reduce){.hx-slide{transition:none}.hx-tile .hx-img,.hx-pc-art .hx-img{transition:none}.hx-tile:hover .hx-img,.hx-pc:hover .hx-img{transform:none}}
:root[data-theme="dark"] .hx-btn-line{border-color:var(--smoke)}
:root[data-theme="dark"] .hx-why-i{background:color-mix(in srgb,var(--c) 16%,var(--pit))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hx-why-i{background:color-mix(in srgb,var(--c) 16%,var(--pit))}}
.landing h1,.landing h2,.landing h3{font-variant-numeric:lining-nums}
.hx-hero .sbox{color:var(--chalk)}

/* ---------- hero search: centred, one width, calmer ---------- */
@media (min-width:641px){
 .hx-in{justify-items:center;text-align:center}
 .home2 .hx-hero h1{max-width:20ch;margin-inline:auto}
 .hx-sub{margin-inline:auto;text-align:center !important}
 .hx-hero .sbox{width:min(960px,100%);max-width:960px;margin-inline:auto;padding:14px;gap:14px;border-radius:14px;border-color:transparent;background:color-mix(in srgb,var(--pit) 96%,transparent);text-align:start}
 .hx-hero .smodes{justify-self:center;border-radius:999px;padding:4px}
 .hx-hero .smode{border-radius:999px;min-height:40px;padding-inline:20px}
 .hx-hero .sbar{gap:12px}
 .hx-hero .sfield{border-radius:10px}
 .hx-hero .sfield input{min-height:58px}
 .hx-hero .sgo{min-height:58px;border-radius:10px;min-width:150px}
 .hx-hero .sa-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home2 .hx-hero .hx-try,.hx-acts{justify-content:center}
 .hx-shade{background:linear-gradient(0deg,rgba(10,22,17,.72) 0%,rgba(10,22,17,.35) 45%,rgba(10,22,17,.5) 100%)}
 .hx-hero h1,.hx-sub{text-shadow:0 2px 24px rgba(0,0,0,.45)}
}
@media (max-width:640px){
 .hx-in{justify-items:stretch}
 .hx-hero .sbox{border-radius:12px;padding:10px;border-color:transparent}
 .hx-hero .smodes{justify-self:stretch;display:grid;grid-template-columns:repeat(3,1fr)}
 .hx-hero .sbar{grid-template-columns:1fr}
 .hx-hero .sgo{width:100%;min-height:52px}
 .hx-hero .sa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}