/* Light Unveiled — design prototype (static, for review only)
   System fonts only (no downloads). One accent. No gradients, no card chrome. */
:root{
  --bg:#fbfbfd; --bg-2:#f2f2f5; --ink:#1d1d1f; --ink-2:#515154; --ink-3:#6e6e73; --line:rgba(0,0,0,.12);
  --accent:#f2a33a; --accent-ink:#8a5200; --focus:#b86e00;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --header-h: 56px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#000; --bg-2:#111113; --ink:#f5f5f7; --ink-2:#c7c7cc; --ink-3:#98989d; --line:rgba(255,255,255,.16); --accent-ink:#f2a33a; --focus:#f2a33a; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.47 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:8px; z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1320px; margin-inline:auto; padding-inline:var(--gutter)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Header */
.site-header{position:sticky; top:0; z-index:50; height:var(--header-h); background:color-mix(in srgb,var(--bg) 82%,transparent); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line)}
.site-header .wrap{height:100%; display:flex; align-items:center; gap:28px}
.brand{font:600 19px/1 var(--serif); letter-spacing:.01em; text-decoration:none; display:flex; align-items:center; gap:9px; white-space:nowrap}
.brand i{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block}
.nav{display:flex; gap:26px; margin-left:auto; margin-right:8px}
.nav a{font-size:13.5px; color:var(--ink-2); text-decoration:none; padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 22px; border-radius:999px; border:1px solid transparent; font:500 15px/1 var(--sans); text-decoration:none; cursor:pointer; background:var(--ink); color:var(--bg); transition:opacity .2s ease, transform .2s ease}
.btn:hover{opacity:.88}
.btn.accent{background:var(--accent); color:#1d1d1f}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.sm{min-height:34px; padding:0 16px; font-size:13.5px}
.menu-btn{display:none; margin-left:auto; background:none; border:0; min-width:44px; min-height:44px; cursor:pointer}
.menu-btn span{display:block; width:20px; height:1.5px; background:var(--ink); margin:5px auto; transition:transform .25s}
@media (max-width:820px){
  .nav{display:none; position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; gap:0; margin:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gutter) 18px}
  .nav.open{display:flex}
  .nav a{font-size:20px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink)}
  .menu-btn{display:block}
  .site-header .btn.sm{margin-left:auto}
  .menu-btn{margin-left:0}
}

/* Hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(36px,5vw,72px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:center}
.eyebrow{font:500 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 20px}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.5rem,5.6vw,5rem); line-height:1.02}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-2); max-width:34ch; margin:22px 0 30px; line-height:1.45}
.actions{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center}
.link{color:var(--ink); text-decoration:none; font-weight:500; border-bottom:1px solid var(--line); padding-bottom:2px}
.link:hover{border-bottom-color:var(--ink)}
.feature{position:relative; display:block; border-radius:22px; overflow:hidden; background:var(--bg-2); aspect-ratio:16/9; width:100%; border:0; padding:0; cursor:pointer; text-align:left}
.feature img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature:hover img{transform:scale(1.025)}
.play{position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 6px 30px rgba(0,0,0,.28); transition:transform .3s}
.feature:hover .play{transform:scale(1.07)}
.play:after{content:""; border-left:20px solid #1d1d1f; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px}
.feature-cap{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; font-size:14px; color:var(--ink-3)}
.feature-cap b{color:var(--ink); font-weight:600}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .lede{max-width:44ch} }

/* Rows */
.row{padding:clamp(26px,4vw,48px) 0 clamp(14px,2vw,22px)}
.row-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.row-head h2{font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1}
.row-head .link{font-size:14.5px; border:0; color:var(--accent-ink); white-space:nowrap}
.row-head .link:hover{text-decoration:underline}
.rail-wrap{position:relative}
.rail{display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); padding:4px var(--gutter) 16px; margin-inline:calc(var(--gutter) * -1); scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start; flex:0 0 clamp(250px,23vw,320px)}
.rail.shorts>*{flex-basis:clamp(138px,12.5vw,172px)}
.rail.covers>*{flex-basis:clamp(168px,16vw,230px)}
.rail.wide>*{flex-basis:clamp(280px,30vw,420px)}
@media (max-width:640px){
  .rail>*{flex-basis:76vw} .rail.shorts>*{flex-basis:40vw} .rail.covers>*{flex-basis:46vw} .rail.wide>*{flex-basis:76vw}
}
@media (min-width:1500px){ .rail{margin-inline:0; padding-inline:0} }
.arrow{position:absolute; top:calc(50% - 44px); width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; display:grid; place-items:center; opacity:0; transition:opacity .2s; z-index:2}
.arrow.prev{left:6px} .arrow.next{right:6px}
.arrow:disabled{display:none}
.rail-wrap:hover .arrow,.arrow:focus-visible{opacity:1}
.arrow svg{width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (hover:none){ .arrow{display:none} }

/* Tiles (no card chrome) */
.tile{display:block; text-decoration:none; color:inherit; background:none; border:0; padding:0; text-align:left; cursor:pointer; width:100%}
.thumb{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--bg-2)}
.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover .thumb img{transform:scale(1.035)}
/* Shorts: the full-size thumbnail is 16:9 with the vertical frame centred; cover-cropping to 9:16 shows exactly that frame. */
.shorts .thumb{aspect-ratio:9/16}
.shorts .thumb img{object-position:center}
.cover .thumb{aspect-ratio:1/1}
.dur{position:absolute; right:8px; bottom:8px; font:500 11.5px/1 var(--sans); padding:4px 6px; border-radius:6px; color:#fff; background:rgba(0,0,0,.68); font-variant-numeric:tabular-nums}
.tile h3{font:600 15.5px/1.3 var(--sans); letter-spacing:0; margin:11px 0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tile .sub{font-size:13px; color:var(--ink-3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.pill{display:inline-block; font:500 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.collection{display:block; text-decoration:none}
.collection .thumb{aspect-ratio:16/9}
.collection h3{font:500 clamp(1.25rem,1.8vw,1.6rem)/1.15 var(--serif); margin:12px 0 4px}
.collection span{font-size:14px; color:var(--ink-3)}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .tile:hover .thumb img,.feature:hover img{transform:none} *{scroll-behavior:auto!important} }

/* Sections */
.section{padding:clamp(56px,9vw,120px) 0}
.statement{font:400 clamp(1.7rem,3.6vw,3.1rem)/1.18 var(--serif); letter-spacing:-.012em; max-width:24ch}
.statement em{font-style:normal; color:var(--accent-ink)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:center}
.split p{color:var(--ink-2); max-width:44ch; margin:16px 0 26px}
.split img{border-radius:20px; width:100%; aspect-ratio:1200/630; object-fit:cover; background:var(--bg-2)}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
.support{text-align:center; border-top:1px solid var(--line)}
.support h2{font-size:clamp(1.6rem,3vw,2.4rem); max-width:22ch; margin:0 auto 22px}
.site-footer{border-top:1px solid var(--line); padding:36px 0 56px; color:var(--ink-3); font-size:13px}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between}
.site-footer nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.site-footer a{text-decoration:none} .site-footer a:hover{color:var(--ink); text-decoration:underline}

/* Library */
.page-head{padding-top:clamp(36px,6vw,80px); padding-bottom:18px}
.page-head h1{font-size:clamp(2.4rem,5vw,4.2rem)}
.page-head p{color:var(--ink-3); margin:10px 0 0}
.filters{position:sticky; top:var(--header-h); z-index:40; background:color-mix(in srgb,var(--bg) 90%,transparent); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line); padding:14px 0}
.search{position:relative; flex:1 1 280px; min-width:0}
.search input{width:100%; min-height:46px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); padding:0 44px 0 46px; font:400 16px var(--sans)}
.search svg{position:absolute; left:16px; top:14px; width:18px; height:18px; stroke:var(--ink-3); fill:none; stroke-width:2; stroke-linecap:round}
.search button{position:absolute; right:6px; top:6px; width:34px; height:34px; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--ink-3); font-size:18px}
.bar{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center}
.seg{display:inline-flex; background:var(--bg-2); border-radius:999px; padding:3px}
.seg button{min-height:40px; padding:0 16px; border:0; border-radius:999px; background:none; cursor:pointer; font-size:14px; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--bg); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); font-weight:600}
@media (prefers-color-scheme:dark){ .seg button[aria-pressed="true"]{background:#2c2c2e} }
select.sort{min-height:46px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); padding:0 16px; font:400 14.5px var(--sans)}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 0 0; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; min-height:38px; padding:0 15px; border-radius:999px; border:1px solid var(--line); background:none; cursor:pointer; font-size:14px; color:var(--ink-2); white-space:nowrap}
.chip:hover{color:var(--ink); border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip small{opacity:.6; margin-left:6px; font-size:12px}
.result-meta{display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 18px; color:var(--ink-3); font-size:14px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:34px clamp(16px,1.8vw,26px)}
.grid.shorts{grid-template-columns:repeat(auto-fill,minmax(min(46%,168px),1fr)); gap:28px 16px}
@media (max-width:520px){ .grid{grid-template-columns:1fr; gap:28px} }
.more{display:flex; justify-content:center; padding:44px 0 90px}
.empty{padding:70px 0; text-align:center; color:var(--ink-3)}
.empty b{display:block; color:var(--ink); font:500 1.5rem var(--serif); margin-bottom:8px}

/* Player dialog */
dialog{border:0; padding:0; background:transparent; color:var(--ink); max-width:none; max-height:none; width:100%; height:100%}
dialog::backdrop{background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.sheet{position:relative; width:min(960px,calc(100vw - 24px)); margin:max(12px,4vh) auto; background:var(--bg); border-radius:20px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.45); animation:rise .28s ease}
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.player{aspect-ratio:16/9; background:#000}
.player iframe{width:100%; height:100%; border:0; display:block}
.sheet.vertical .player{aspect-ratio:9/16; max-height:76vh; margin-inline:auto}
.sheet-body{padding:18px 22px 22px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between}
.sheet-body h2{font:500 1.4rem/1.2 var(--serif); max-width:46ch}
.sheet-body p{margin:4px 0 0; color:var(--ink-3); font-size:14px}
.close{position:absolute; right:10px; top:10px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:22px; cursor:pointer}
.platforms{display:grid; gap:10px; padding:0 22px 24px}
.platforms a{display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 18px; border:1px solid var(--line); border-radius:14px; text-decoration:none; font-weight:500}
.platforms a:hover{border-color:var(--ink)}
.platforms a span{color:var(--ink-3); font-weight:400; font-size:14px}
.cover-sheet{display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:22px; padding:26px 22px 8px; align-items:center}
.cover-sheet img{border-radius:14px; width:100%; aspect-ratio:1}
@media (max-width:560px){ .cover-sheet{grid-template-columns:1fr} .cover-sheet img{max-width:220px} }
.proto-note{background:var(--ink); color:var(--bg); font-size:12.5px; text-align:center; padding:7px 12px}
.proto-note a{color:inherit}

/* Manual theme override, used for screenshots and by a future theme switch */
:root[data-theme="light"]{ --bg:#fbfbfd; --bg-2:#f2f2f5; --ink:#1d1d1f; --ink-2:#515154; --ink-3:#6e6e73; --line:rgba(0,0,0,.12); --accent-ink:#8a5200; --focus:#b86e00; }
:root[data-theme="dark"]{ --bg:#000; --bg-2:#111113; --ink:#f5f5f7; --ink-2:#c7c7cc; --ink-3:#98989d; --line:rgba(255,255,255,.16); --accent-ink:#f2a33a; --focus:#f2a33a; }
:root[data-theme="dark"] .seg button[aria-pressed="true"]{ background:#2c2c2e }
:root[data-theme="light"] .seg button[aria-pressed="true"]{ background:var(--bg) }

/* Music: all releases and release pages */
.rel-sec{padding:clamp(18px,3vw,36px) 0 8px}
.rel-sec h2{font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:20px}
.rel-sec h2 small{font:400 .9rem var(--sans); color:var(--ink-3); margin-left:8px}
.rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:34px clamp(16px,2vw,28px)}
@media (max-width:520px){ .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px} }
.rel-grid .tile .thumb{aspect-ratio:1/1}
.rv{position:absolute; left:8px; top:8px; background:var(--accent); color:#1d1d1f; font:600 11px/1 var(--sans); padding:5px 8px; border-radius:6px; letter-spacing:.04em}
.rel-head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(26px,5vw,80px); align-items:center; padding-top:clamp(28px,5vw,70px); padding-bottom:clamp(20px,3vw,40px)}
.rel-art img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:18px; background:var(--bg-2)}
.rel-info h1{font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.04; margin:2px 0 12px}
.rel-meta{color:var(--ink-3); margin:0 0 26px}
.platforms.flat{padding:0; max-width:460px}
.muted{color:var(--ink-3)} .small{font-size:13.5px; margin-top:14px}
@media (max-width:820px){ .rel-head{grid-template-columns:1fr} .rel-art{max-width:420px} }
.rel-body{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(26px,6vw,90px); padding-block:clamp(24px,4vw,56px)}
.rel-body h2{font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:12px}
@media (max-width:820px){ .rel-body{grid-template-columns:1fr} }
.tracks{list-style:none; margin:0; padding:0; counter-reset:t}
.tracks li{display:grid; grid-template-columns:2.2em 1fr auto; gap:10px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line)}
.tracks .no{color:var(--ink-3); font-variant-numeric:tabular-nums} .tracks .td{color:var(--ink-3); font-variant-numeric:tabular-nums}
.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:15px}
.facts dt{color:var(--ink-3)} .facts dd{margin:0} .facts dd span{color:var(--ink-3)}
.rvbox{margin-top:26px; border:1px dashed var(--accent); border-radius:12px; padding:14px 16px; font-size:14px}
.rvbox ul{margin:8px 0 0; padding-left:18px} .rvbox p{margin:10px 0 0}
body:not(.review) .rv{display:none}

/* Grid items may shrink below their text width (prevents sideways overflow on phones) */
.grid>*,.rel-grid>*,.rail>*{min-width:0}
.tile{min-width:0; max-width:100%}

.rel-feat{margin:.15rem 0 .6rem;font-size:1.05rem;color:var(--muted,#8a8a8f)}
.rel-desc{margin:.2rem 0 .9rem;max-width:34rem;line-height:1.5}

.conf{display:block;font-size:12px;line-height:1.35;margin-top:4px;color:var(--ink-3)}
.conf::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--ink-3)}
.conf-A::before{background:#4aa371}.conf-owner::before{background:var(--accent)}.conf-B::before{background:transparent;border:1.5px solid var(--ink-3)}
.conf-legend{margin:10px auto 0}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap}

.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:36px 24px}
.collection-card .link{display:inline-block;margin-top:8px}
.placeholder-note{margin:22px 0 0;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--ink-3);font-size:14px;max-width:52ch}

.split img{height:auto}

body[data-page="home"]:not(.rows-ready) #about,body[data-page="home"]:not(.rows-ready) #quiz,body[data-page="home"]:not(.rows-ready) .support,body[data-page="home"]:not(.rows-ready) .site-footer{display:none}

body:not(.ready) .site-footer{visibility:hidden}
.chips{min-height:52px}
body[data-page="library"] main,body[data-page="music"] main,body[data-page="release"] main,body[data-page="collections"] main{min-height:100svh}
.more{min-height:80px}

.prose{max-width:62ch}.prose h2{font:500 1.4rem/1.2 var(--serif);margin:28px 0 10px}.prose li,.prose p{color:var(--ink-2)}
.contact-list{max-width:560px;border-top:1px solid var(--line)}
.contact-row{display:flex;align-items:baseline;gap:14px;padding:20px 2px;border-bottom:1px solid var(--line);text-decoration:none;min-height:64px}
.contact-row span{font:500 1.25rem/1.2 var(--serif)}.contact-row small{color:var(--ink-3);margin-left:auto}.contact-row i{font-style:normal;color:var(--ink-3)}
.news-slot{max-width:560px;border:1px dashed var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:6px;color:var(--ink-3)}

/* touch targets: 44px minimum on phones and touch devices */
@media (max-width:820px),(pointer:coarse){
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .btn.sm{min-height:44px}
  .row-head .link,.split .link,.actions .link,.collection-card .link,.page-head .link{display:inline-flex;align-items:center;min-height:44px}
  .site-footer a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
  .seg button,.chip{min-height:44px}
  .search #clear,#clear{min-width:44px;min-height:44px}
}
.dur,.conf,.rv{font-size:12px}

@media (max-width:600px){
  .coll-grid{grid-template-columns:1fr;gap:0}
  .collection-card{display:grid;grid-template-columns:128px 1fr;gap:2px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .collection-card .collection{display:contents}
  .collection-card .thumb{grid-row:1/3;border-radius:10px}
  .collection-card h3{margin:0;align-self:end}
  .collection-card .collection span{align-self:start}
  .collection-card .link{grid-column:2;margin-top:0;min-height:44px}
}
@media (max-width:820px){.site-footer{padding:20px 0 40px;font-size:14px}.site-footer .wrap{gap:0 32px}.site-footer nav{gap:0 18px}.site-footer .wrap>span{display:block;line-height:44px}}
.page-head .eyebrow{margin:0 0 12px}


/* small-phone fixes: keep the menu button on screen and stop sideways scrolling */
@media (max-width:359px){
  .site-header .wrap{gap:10px}
  .site-header .btn.sm{padding-inline:18px}
}
/* keep row headings on one line beside their link on narrow phones */
@media (max-width:374px){
  .row-head{gap:10px}
  .row-head .link{font-size:13px}
}
@media (max-width:339px){
  .row-head{gap:8px}
  .row-head h2{font-size:1.3rem}
  .row-head .link{font-size:12px}
}

/* official logo (approved 12 Nov 2026): header, footer, small-phone behaviour */
.brand .brand-logo{display:block;width:32px;height:32px;max-width:none;flex:none}
.foot-brand{display:inline-block}
.foot-brand .brand-logo-foot{display:inline-block;vertical-align:middle;width:24px;height:24px;max-width:none;margin-right:10px;position:relative;top:-1px}
@media (max-width:430px){.site-header .wrap{gap:10px}.brand{gap:8px}.brand .brand-logo{width:28px;height:28px}}
@media (max-width:339px){.brand{gap:0;min-width:44px}.brand .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* WordPress integration (additions only; the approved design above is unchanged) */
.wp-site-blocks{padding:0}
.wp-block-template-part{display:contents}
.video-single{padding-top:clamp(28px,5vw,64px); padding-bottom:80px}
.video-single .vs-player{max-width:980px; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; margin-top:24px}
.video-single .vs-player.vertical{max-width:420px; aspect-ratio:9/16}
.video-single .vs-player iframe{width:100%; height:100%; border:0; display:block}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}