/* Blessed Records - comfort layer for smooth, easy scrolling on phones, tablets and computers.
   Loaded AFTER assets/style.css. It only adds gentle rules; it does not redesign anything.
   To undo: delete the one <link ...comfort.css> line from a page, or delete this file. */

/* Smooth, stable scrolling */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;scrollbar-width:thin;scrollbar-color:#D4AF37 #0B1150;overscroll-behavior-x:none}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}

/* Never let long words, links or headings push the page wider than the screen */
h1,h2,h3,h4,p,li,dd,a{overflow-wrap:break-word}
img,video,iframe{max-width:100%}

/* Decorative star canvases must never catch a finger or mouse while scrolling */
canvas.sparkle{pointer-events:none}

/* Easy taps: no double-tap delay, soft gold tap highlight */
a,button,summary,label,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(214,180,60,.22)}

/* Clear keyboard focus for desktop users */
:focus-visible{outline:3px solid #FFD166;outline-offset:3px}

/* Keep the last lines of every page clear of the floating music and back-to-top buttons on phones */
@media (max-width:760px){footer.site{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Styles ONLY for the new X / phone / community items (touch nothing else) */
.community-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.community-btns .btn{flex:1 1 150px;text-align:center;justify-content:center}
.f-icons .x-follow{display:inline-flex;align-items:center;justify-content:center}
.f-icons .x-follow svg{width:1.15em;height:1.15em}

/* Safety ceilings so logos can never display oversized on any screen */
.nav .brand img.b-emb{max-height:44px;width:auto}
.nav .brand img.b-word{max-height:40px;width:auto;max-width:60vw}
footer.site .flogo img{max-height:48px;width:auto}
.grad-photo img{max-width:100%}

/* Keep every page inside the screen on phones, tablets and very large monitors (no layout changes) */
html,body{max-width:100%;overflow-x:clip}

/* Safari / iPhone header: the menu button must always stay visible and easy to tap */
.nav .wrap{flex-wrap:nowrap}
.nav .brand{min-width:0;flex:0 1 auto}
.nav-right{flex:0 0 auto;min-width:0}
.nav .burger{flex:0 0 auto;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav .ng-clock{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .nav .ng-clock,.nav .ng-clock *{font-size:12px!important;letter-spacing:0!important}
  .nav .ng-clock{padding:6px 9px!important;gap:5px!important;min-width:0}
}
@media (max-width:350px){.nav .ng-clock{display:none}}

/* Articles: wide photos or text can never push a post wider than the screen */
.stack-gap>*,.split>*,.wrap>*{min-width:0}
article.post{min-width:0;max-width:100%;box-sizing:border-box}
article.post p,article.post h3,article.post .meta{box-sizing:border-box;max-width:100%;overflow-wrap:break-word}
.spotlight-photo{max-width:100%;height:auto}

/* Event highlights video on the home page (Glow Run) and Wizkid video on the news page: new items only */
.gsrc-hl{max-width:520px;margin:26px auto 6px;text-align:center}
.gsrc-hl h4{margin:0 0 12px;font-size:clamp(18px,4.6vw,22px);color:#ffe08a}
.gsrc-hl-cap{margin:12px auto 0;max-width:46ch;line-height:1.6;font-size:15px;color:#d8f1e1}
.wiz-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid rgba(212,175,55,.5);box-shadow:0 10px 36px rgba(0,0,0,.45)}
.wiz-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.wiz-cap{margin:12px 0 0;line-height:1.65}
.wiz-credit{margin:8px 0 0;font-size:13px;opacity:.75}

/* ===== Header fit on laptops and computers: logo, menu and clock never overlap (added; nothing removed) ===== */
@media (min-width:1121px){
  /* The logo keeps its full size and is never squeezed under the menu */
  .nav .brand{flex:none;min-width:auto}
  .nav .brand img{flex:none}
}

/* Small laptops and large tablets: the same tidy menu button used on phones, so nothing is crowded */
@media (min-width:1121px) and (max-width:1260px){
  .burger{display:grid}
  .nav-right .btn{display:none}
  .links{position:fixed;inset:0;top:0;padding:96px 26px 40px;flex-direction:column;align-items:stretch;gap:6px;background:linear-gradient(160deg,#0B1150,#060927);z-index:39;transform:translateY(-102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);overflow-y:auto;visibility:hidden}
  .links.open{transform:none;visibility:visible}
  .links a{color:#fff;font:800 24px var(--display);padding:14px 16px;border-radius:16px}
  .links a:hover{background:rgba(255,255,255,.1)}
  .links a[aria-current="page"]{background:linear-gradient(90deg,var(--accent),#7A1FD0)}
  .burger{position:relative;z-index:41}
  body.menu-open{overflow:hidden}
  body.menu-open .burger{background:#fff;color:#0B1150}
}

/* Laptops and big screens: a wider header row so the full menu, clock and button all fit, centred */
@media (min-width:1261px){
  .nav .wrap{width:min(1480px,100% - 32px);gap:16px}
}

/* Standard laptops: slightly tighter spacing so everything keeps clear gaps */
@media (min-width:1261px) and (max-width:1535px){
  .links{gap:2px}
  .links a{font-size:13.5px;padding:8px 9px}
  .nav-right{gap:8px}
  .nav .ng-clock{padding:9px 14px;gap:6px}
  .nav .ng-clock .ng-time{font-size:16px}
  .nav .ng-clock .ng-ampm{font-size:11px}
  .nav-right .btn{padding-left:14px;padding-right:14px;white-space:nowrap}
}

/* ===== Smooth, perfectly fitting pages on every phone, tablet and computer (added; nothing removed) ===== */
/* Big headings stay whole: words are never cut in the middle, and sizes scale smoothly with the screen */
.hero h1{font-size:clamp(28px,4.2vw,56px);overflow-wrap:normal;word-break:normal;hyphens:manual;line-height:1.08}
h1{overflow-wrap:normal}
@media (max-width:760px){.hero h1{font-size:clamp(26px,8vw,40px)}}

/* Nothing can ever be wider than the screen */
.cover-wrap,.cover-wrap button,.zoomable,.spotlight-feature,.post,.card,.gcard{max-width:100%;min-width:0}
.cover-wrap img,.zoomable img{width:100%;height:auto;max-width:100%}
.guide-hero,.post img,.gc-img img{max-width:100%}
a{overflow-wrap:anywhere}
.links a,.btn,.brand{overflow-wrap:normal}
table{max-width:100%}
pre,code{max-width:100%;overflow-x:auto}
@media (max-width:760px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Comfortable reading and tapping on small screens */
@media (max-width:640px){
  body{line-height:1.6}
  .btn{min-height:44px}
}

/* ===== Older Safari / older browsers (added; modern browsers ignore every rule in this block) ===== */
/* 1) Videos and posters keep their shape where "aspect-ratio" is not supported (Safari 14 and older) */
@supports not (aspect-ratio:1/1){
  .vbox{height:0;padding-top:56.25%;overflow:hidden}
  .vbox>*{position:absolute;top:0;left:0;width:100%;height:100%}
  .wiz-frame{height:0;padding-top:56.25%}
  .wiz-frame>*{position:absolute;top:0;left:0;width:100%;height:100%}
  .vinyl{height:min(430px,90vw)}
  .spot{min-height:420px}
  .spotlight-media{min-height:300px}
  .pf-photo{min-height:240px}
  .pv-vid{height:462px;max-height:150vw}
  .zoomable img,.grad-photo img,.vote .flyer .zoomable img{height:auto}
}
/* 2) Colours that use "color-mix" (Safari older than 16.2): solid fallbacks so the menu and cards never turn see-through */
@supports not (background:color-mix(in srgb,red,blue)){
  .nav{background:var(--bg)}
  .links a:hover{background:rgba(120,130,255,.16)}
  .tile::before{background:linear-gradient(135deg,rgba(40,60,220,.14),rgba(255,106,77,.12))}
  .sponsor{background:var(--surface)}
  .avatar{box-shadow:0 14px 26px -14px rgba(15,22,112,.7),0 0 0 4px var(--surface),0 0 0 6px #7a92ff}
  .pill{background:rgba(255,106,77,.14)}
  .spotlight-feature{border-color:rgba(212,175,55,.45);background:var(--surface)}
  input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(80,100,255,.35)}
  .chip2{background:rgba(60,80,255,.14)}
  .act-phone{background:rgba(255,106,77,.08)}
}
/* 3) Safari tap and video details */
video{max-width:100%;-webkit-tap-highlight-color:transparent}
video::-webkit-media-controls-panel{-webkit-appearance:none}
button,.btn{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
input,textarea,select{font-size:16px}

/* ===== No half views: wide titles and photo columns can never push a page past the screen (added) ===== */
.feature>*,.spotlight-feature>*,.post>*{min-width:0}
.post img,.post video{max-width:100%;height:auto}
.spotlight-feature img,.post img[style*="float"]{max-width:min(100%,320px)!important}
@media (max-width:520px){.post img[style*="float"]{float:none!important;display:block;margin:0 auto 14px!important}}
.post .abtn,.actions .abtn{max-width:100%}
.actions{flex-wrap:wrap}
.post .meta{flex-wrap:wrap}
.post h3,.post p,.feature h2,.feature .by{overflow-wrap:break-word}
@media (max-width:860px){
  .feature{grid-template-columns:minmax(0,1fr)!important}
  .feature h2,.feature h3.big{font-size:clamp(28px,8.4vw,52px);line-height:1.05}
  .spotlight-feature{grid-template-columns:minmax(0,1fr)}
}

/* Small phones (360 px and under): logo, clock and menu button each get their own space */
@media (max-width:400px){
  .nav .wrap{gap:8px}
  .nav .brand{gap:6px}
  .nav .brand img.b-emb{max-height:34px}
  .nav .brand img.b-word{max-height:30px}
  .nav .ng-clock{padding:7px 9px;gap:4px}
  .nav .ng-clock .ng-time{font-size:12px;letter-spacing:0}
  .nav .ng-clock .ng-ampm{font-size:9px}
}

/* ===== New logo: lighter, well-shaped and comfortable in light mode, dark mode and any screen brightness (added) ===== */
@media (min-width:401px){
  .nav .brand img.b-emb{max-height:38px}
  .nav .brand img.b-word{max-height:31px}
}
@media (prefers-color-scheme:dark){
  /* Soft off-white plate (not pure white) so it never glares at low brightness, and the blue and red stay sharp */
  :root:not([data-theme="light"]) .nav .brand{background:#E9EDFF;border-radius:12px;padding:3px 10px 3px 8px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 8px rgba(0,0,0,.22)}
  :root:not([data-theme="light"]) .brand img{filter:none}
}
@media (prefers-contrast:more){
  .nav .brand{background:#fff!important}
}

/* ==========================================================================
   Blessed Records: SMOOTH SCREENS (added 11 Oct 2026)
   Keeps every card, player, photo and button inside the screen on phones and
   small tablets. Computers and large screens are not changed at all.
   To undo: delete everything from this line down to the END line below.
   ========================================================================== */
@media (max-width:860px){
  /* 1. Let columns shrink to the screen width instead of pushing text and buttons off the edge */
  .hero .wrap>*,.g2>*,.g3>*,.feature>*,.vote>*,.spot-grid>*,.signup-box>*,.split>*,.fgrid>*,.show>*,.pf>*{min-width:0}
  .feature h2,.feature h3.big,.feature .by,.pmeta,.ptitle,.psub{overflow-wrap:break-word}
  /* 2. Music cards (including Light EP): one tidy column */
  .feature{grid-template-columns:minmax(0,1fr)!important}
}
/* 3. Song names in the player may use two lines on phones instead of being cut off */
@media (max-width:520px){.player .ptitle,.player .psub{white-space:normal;overflow:visible;text-overflow:clip}}
/* 4. News photos that sit beside the text: never wider than their card */
article.post p>img[style*="float"]{max-width:min(320px,100%)!important;height:auto}
@media (max-width:520px){
  article.post p>img[style*="float"]{float:none!important;display:block;margin:0 auto 12px!important;width:100%;max-width:100%!important}
}
/* 5. Floating music and back-to-top buttons a little smaller on small phones so they cover less */
@media (max-width:480px){.fab{width:46px;height:46px}.fab svg{width:21px;height:21px}}
/* ===== END of Blessed Records SMOOTH SCREENS ===== */