/* SP GO THEME: connect these variables to template color/font settings. */
    :root { color-scheme:dark; --bg:#0b0c10; --surface:#17191f; --text:#f5f5f7; --muted:#a6a8b3; --accent:#f3454e; --line:#ffffff18; --gutter:clamp(22px,5vw,84px); }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; scroll-padding-top:95px; }
    body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; cursor:pointer; }
    button,a { -webkit-tap-highlight-color:transparent; }
    button:focus-visible,a:focus-visible { outline:3px solid #fff; outline-offset:5px; }
    button:disabled { opacity:.3; cursor:default; }
    img { display:block; width:100%; }
    svg { width:20px; height:20px; flex-shrink:0; }
    .skip { position:fixed; top:-80px; left:20px; padding:14px; background:#fff; color:#000; z-index:100; }
    .skip:focus { top:10px; }
    .site-header { position:absolute; top:0; left:0; right:0; z-index:5; padding:28px var(--gutter); display:flex; align-items:center; gap:54px; background:linear-gradient(#090a0ed9,transparent); }
    .brand { display:inline-flex; gap:7px; align-items:baseline; font-size:30px; font-weight:900; letter-spacing:-1.8px; white-space:nowrap; }
    .brand span { color:var(--accent); }
    .site-nav { display:flex; align-items:center; justify-content:flex-end; gap:27px; margin-left:auto; font-size:14px; font-weight:600; }
    .site-nav a { color:#c8c9ce; padding:10px 0; position:relative; }
    .site-nav a:hover,.site-nav a[aria-current] { color:#fff; }
    .site-nav a[aria-current]:after { content:""; position:absolute; bottom:0; left:0; width:16px; height:2px; background:var(--accent); }
    .menu-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:6px; padding:10px 14px; }
    main { overflow:hidden; }
    .hero { position:relative; min-height:750px; min-height:min(850px,96svh); padding:180px var(--gutter) 38px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; background:radial-gradient(ellipse at 80% 30%,#374150,#111319 60%); }
    /* Full-bleed YouTube layers, cropped like background-size:cover.
       The poster remains underneath until the muted player starts playing. */
    .hero-art { position:absolute; z-index:-3; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
    .hero-media { position:absolute; inset:0; opacity:0; transition:opacity 1.2s cubic-bezier(.4,0,.2,1); }
    .hero-media.is-active { opacity:1; }
    .hero-media img { width:100%; height:100%; object-fit:cover; object-position:var(--art-position,60% center); filter:brightness(.73) saturate(.82); }
    .youtube-background { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; filter:brightness(.73) saturate(.82); }
    .hero-media.is-playing .youtube-background { opacity:1; }
    .youtube-background iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--video-width,100%); height:var(--video-height,100%); border:0; }
    .hero-copy { transition:opacity .35s ease,transform .35s ease; }
    .hero-copy.is-changing { opacity:0; transform:translateY(8px); }
    /* These gradients do the cinematic work, including hiding competing thumbnail copy. */
    .hero:before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(90deg,#0b0c10 3%,rgba(11,12,16,.98) 21%,rgba(11,12,16,.85) 37%,rgba(11,12,16,.25) 66%,rgba(11,12,16,.1)),linear-gradient(0deg,#0b0c10 1%,rgba(11,12,16,.87) 12%,transparent 48%),linear-gradient(180deg,rgba(11,12,16,.35),transparent 30%); }
    .hero-copy { max-width:590px; padding-bottom:70px; }
    .eyebrow { display:flex; align-items:center; gap:10px; color:#e3e3e8; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:2.7px; margin:0 0 23px; }
    .eyebrow:before { content:""; width:24px; height:2px; background:var(--accent); }
    .eyebrow[hidden] { display:none; }
    h1 { font-size:clamp(42px,4.7vw,72px); line-height:1.04; font-weight:800; letter-spacing:-2.9px; margin:0 0 25px; text-wrap:balance; }
    .hero-description { font-size:16px; line-height:1.75; color:#c0c2cb; max-width:460px; margin:0 0 29px; }
    .watch { display:inline-flex; gap:12px; align-items:center; background:var(--accent); padding:15px 25px; border-radius:5px; font-size:15px; font-weight:750; transition:background .2s,transform .2s; box-shadow:0 6px 30px #ed384a1a; }
    .watch:hover { background:color-mix(in srgb,var(--accent) 85%,white); transform:translateY(-2px); }
    .hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; width:100%; }
    .featured-label { color:#b0b2bd; text-transform:uppercase; letter-spacing:2px; font-size:12px; margin:0 0 13px; }
    .previews { display:flex; gap:12px; }
    .preview { padding:0; background:#15161c; width:128px; aspect-ratio:16/9; border:1px solid #ffffff30; border-radius:5px; position:relative; overflow:hidden; transition:border-color .2s,transform .2s; }
    .preview img { width:100%; height:100%; object-fit:cover; opacity:.52; transition:opacity .2s; }
    .preview[aria-pressed="true"] { border:2px solid #fff; }
    .preview[aria-pressed="true"] img,.preview:hover img { opacity:1; }
    .preview:hover { transform:translateY(-3px); }
    .preview-number { position:absolute; bottom:6px; left:8px; font-size:11px; font-weight:700; text-shadow:0 1px 5px #000; }
    .hero-pagination { display:flex; align-items:center; gap:13px; padding-bottom:4px; }
    .slide-count { font-size:12px; color:#a2a5ae; letter-spacing:2px; margin-right:12px; }
    .slide-count strong { color:#fff; font-weight:500; }
    .circle { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffffff05; border:1px solid #ffffff2a; }
    .circle:hover:not(:disabled) { background:#ffffff15; border-color:#ffffff70; }
    .library { padding:28px 0 65px; }
    .shelf { margin-bottom:44px; scroll-margin-top:28px; }
    .shelf-heading { display:flex; justify-content:space-between; align-items:center; padding:0 var(--gutter); margin-bottom:19px; gap:16px; }
    h2 { font-size:24px; letter-spacing:-.65px; margin:0; }
    .shelf-controls { display:flex; gap:8px; }
    .shelf-controls .circle { width:32px; height:32px; }
    .track { display:flex; gap:20px; overflow-x:auto; padding:4px var(--gutter) 17px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#34363f transparent; }
    .card { display:block; flex:0 0 clamp(230px,23vw,355px); min-width:0; scroll-snap-align:start; scroll-margin-left:var(--gutter); }
    .card-art { aspect-ratio:16/9; border-radius:7px; overflow:hidden; position:relative; background:linear-gradient(135deg,#252b38,#13141b); border:1px solid #ffffff09; }
    .card-art img { height:100%; object-fit:cover; transition:transform .35s,filter .35s; filter:brightness(.85); }
    .card-art:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%,#0005); }
    .card-play { position:absolute; z-index:1; right:13px; bottom:13px; display:grid; place-items:center; width:34px; height:34px; background:#0b0c1088; border:1px solid #ffffff60; border-radius:50%; opacity:0; transform:translateY(6px); transition:.2s; }
    .card-play svg { width:13px; height:13px; }
    .card:hover img,.card:focus-visible img { transform:scale(1.045); filter:brightness(1); }
    .card:hover .card-play,.card:focus-visible .card-play { opacity:1; transform:translateY(0); }
    .card-category { margin:15px 0 7px; color:#999daa; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:1.7px; }
    .card h3 { font-size:16px; line-height:1.45; font-weight:600; margin:0; letter-spacing:-.15px; }
    footer { border-top:1px solid var(--line); padding:54px var(--gutter) 25px; background:#090a0d; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:55px; padding-bottom:42px; }
    .footer-about p { max-width:310px; color:var(--muted); font-size:14px; line-height:1.85; margin:17px 0 0; }
    footer h2 { font-size:14px; letter-spacing:0; margin:5px 0 20px; }
    footer ul { padding:0; margin:0; list-style:none; display:grid; gap:14px; font-size:14px; color:var(--muted); }
    footer a:hover { color:#fff; }
    .social-link { display:flex; gap:10px; align-items:center; }
    .social-link svg { width:17px; height:17px; }
    .footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:25px; color:#9295a1; font-size:12px; line-height:1.6; }
    .legal-links { display:flex; gap:23px; flex-wrap:wrap; }
    dialog { width:min(560px,calc(100% - 32px)); border:1px solid #383a45; border-radius:12px; padding:30px; background:#17191f; color:var(--text); }
    dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
    dialog p { color:#bfc1cc; line-height:1.75; }
    .dialog-close { display:block; margin-left:auto; padding:10px 18px; background:#2a2d36; border:1px solid #ffffff24; border-radius:5px; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    @media(min-width:1600px) { .hero { min-height:850px; } }
    @media(max-width:1050px) { .site-header { gap:30px; } .site-nav { gap:18px; } .hero { min-height:760px; } .hero-copy { max-width:510px; } .footer-grid { gap:28px; } }
    @media(max-width:760px) {
      .site-header { padding-top:20px; justify-content:space-between; }
      .brand { font-size:27px; } .menu-toggle { display:block; }
      .site-nav { display:none; position:absolute; top:75px; left:var(--gutter); right:var(--gutter); background:#14161df5; border:1px solid var(--line); padding:18px 24px; border-radius:8px; flex-direction:column; align-items:stretch; gap:4px; }
      .site-nav.open { display:flex; }
      .hero { min-height:850px; padding-top:305px; padding-bottom:25px; }
      .hero-art { width:100%; height:100%; }
      .hero-media img { object-position:var(--mobile-position,center top); filter:brightness(.8) saturate(.85); }
      .hero:before { background:linear-gradient(0deg,#0b0c10 0%,#0b0c10 45%,rgba(11,12,16,.9) 57%,rgba(11,12,16,.1) 88%,#0b0c1055),linear-gradient(90deg,#0b0c1044,transparent); }
      .hero-copy { max-width:100%; padding-bottom:35px; }
      h1 { font-size:clamp(38px,9vw,56px); letter-spacing:-1.8px; max-width:560px; }
      .eyebrow { margin-bottom:17px; font-size:11px; }
      .hero-description { line-height:1.65; max-width:490px; }
      .hero-bottom { gap:13px; align-items:center; }
      .previews { gap:8px; } .preview { width:clamp(56px,16vw,112px); }
      .hero-pagination { gap:6px; padding-top:24px; } .slide-count { display:none; }
      .hero-pagination .circle { width:32px; height:32px; }
      .library { padding-top:20px; padding-bottom:20px; } .shelf { margin-bottom:29px; }
      h2 { font-size:21px; } .track { gap:14px; } .card { flex-basis:72vw; max-width:320px; }
      .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } .footer-about { grid-column:1/-1; }
      .footer-about p { max-width:450px; } .footer-bottom { flex-direction:column; }
    }
    @media(max-width:360px) { .hero-bottom { flex-wrap:wrap; } .hero-pagination { padding-top:0; } }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; scroll-behavior:auto!important; } }
  
/* ABOUT PAGE: independent companion template; existing pages remain unchanged. */
@font-face { font-family:Allura; src:url(../fonts/allura.ttf) format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
.site-header { position:relative; background:#0b0c10; }
.about-main { max-width:1440px; margin:0 auto; padding:0 var(--gutter) 80px; overflow:visible; }
.about-heading { position:relative; padding:43px 0 39px; }
.about-heading:after { content:""; position:absolute; inset:0 -20px -50px; background:radial-gradient(ellipse at 65% 40%,#70293419,transparent 65%); pointer-events:none; z-index:-1; }
.about-heading .eyebrow { margin-bottom:17px; }
.about-heading h1 { font-size:clamp(39px,4.6vw,65px); letter-spacing:-2.2px; margin:0; line-height:1.1; }
.about-heading h1 span { color:#9298a6; }
.about-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:32px; align-items:start; }
.author-card { border:1px solid #ffffff20; border-radius:10px; overflow:hidden; background:linear-gradient(145deg,#191b22,#111218); }
.author-portrait { position:relative; aspect-ratio:1/1; overflow:hidden; background:#20232a; }
.author-portrait img { width:100%; height:100%; object-fit:cover; object-position:center; }
.author-portrait:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#17191f 0%,transparent 38%); }
.author-contact { padding:2px 27px 28px; }
.author-contact h2 { font-size:25px; letter-spacing:-.6px; margin:0 0 9px; }
.author-contact .role { color:#949caa; font-size:13px; line-height:1.6; margin:0 0 23px; }
.author-email { display:block; font-size:14px; color:#b5bdca; margin-bottom:20px; overflow-wrap:anywhere; }
.author-email:hover { color:#fff; }
.author-contact .watch { width:100%; justify-content:center; padding:13px 17px; font-size:14px; }
.author-socials { display:flex; gap:12px; margin-top:24px; }
.author-socials a { width:34px; height:34px; border:1px solid #ffffff25; border-radius:50%; display:grid; place-items:center; color:#c5cad4; font-size:18px; }
.author-socials a:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.author-socials svg { width:16px; height:16px; }
.bio-card { border:1px solid #ffffff1c; border-radius:10px; padding:clamp(28px,4vw,60px); background:linear-gradient(125deg,#17191f,#101116 80%); min-width:0; }
.bio-kicker { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#949daa; margin:0 0 22px; }
.bio-card h2 { font-size:clamp(28px,3vw,39px); letter-spacing:-1px; margin:0 0 29px; }
.bio-copy { font-size:16px; color:#b9c0cd; line-height:1.95; }
.bio-copy p { margin:0 0 21px; overflow-wrap:anywhere; }
.bio-copy p:last-child { margin-bottom:0; }
.signature-block { margin-top:34px; padding-top:25px; border-top:1px solid #ffffff12; }
.signature { font-family:Allura,'Apple Chancery',cursive; font-size:clamp(46px,4.6vw,65px); line-height:1.15; font-weight:400; color:#eee4cc; margin:0; overflow-wrap:anywhere; }
.signature-label { color:#7f8897; letter-spacing:1.8px; font-size:10px; text-transform:uppercase; margin:12px 0 0; }
.about-latest { margin-top:58px; }
.latest-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:30px; border-top:1px solid #ffffff18; margin-bottom:24px; }
.latest-heading h2 { font-size:24px; }
.latest-heading a { font-size:13px; color:#a6afbf; }
.latest-heading a:hover { color:#fff; }
.latest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.latest-grid .card { min-width:0; }
@media(max-width:1000px) { .about-layout { grid-template-columns:280px minmax(0,1fr); gap:23px; } .bio-card { padding:30px; } }
@media(max-width:760px) { .about-heading { padding:30px 0; } .about-layout { grid-template-columns:1fr; } .author-card { display:grid; grid-template-columns:180px 1fr; } .author-portrait { height:100%; aspect-ratio:auto; min-height:270px; } .author-portrait:after { background:linear-gradient(90deg,transparent 65%,#17191f); } .author-contact { padding:24px; } .author-contact .role { margin-bottom:14px; } .author-socials { margin-top:18px; } .latest-grid { grid-template-columns:1fr; gap:25px; } .about-main { padding-bottom:50px; } }
@media(max-width:450px) { .author-card { display:block; } .author-portrait { aspect-ratio:4/3; height:auto; min-height:0; } .author-portrait:after { background:linear-gradient(0deg,#17191f,transparent 38%); } .author-contact { padding-top:5px; } .bio-card { padding:26px; } .latest-heading { gap:12px; } .latest-heading h2 { font-size:21px; } }

/* Responsive safeguards for database-driven titles, names and navigation. */
.site-header { gap:clamp(20px,3vw,54px); }
.site-header .brand { min-width:0; max-width:40%; white-space:normal; overflow-wrap:anywhere; line-height:1.15; }
.site-nav { min-width:0; flex-wrap:wrap; }
.site-nav a { overflow-wrap:anywhere; }
h1,h2,h3,.hero-description,.body-copy,.signature,.profile-card,.author-contact { overflow-wrap:anywhere; }
.detail-grid > *, .about-layout > *, .footer-grid > *, .row-copy { min-width:0; }
img { max-width:100%; }
button,a,select { touch-action:manipulation; }
:focus-visible { outline:3px solid #f5f5f7; outline-offset:4px; }
.site-nav a:focus-visible,.category-list button:focus-visible { border-radius:3px; }
body { overflow-wrap:break-word; }
@media(max-width:1024px) {
 .site-header { justify-content:space-between; align-items:center; }
 .site-header .brand { max-width:calc(100% - 98px); }
 .menu-toggle { display:block; flex:0 0 auto; min-width:70px; min-height:44px; }
 .site-nav { display:none; position:absolute; top:calc(100% - 4px); left:var(--gutter); right:var(--gutter); margin:0; max-height:calc(100dvh - 130px); overflow-y:auto; background:#14161dfc; border:1px solid var(--line); padding:12px 20px; border-radius:8px; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:4px; box-shadow:0 18px 35px #0007; }
 .site-nav.open { display:flex; }
 .site-nav a { display:flex; align-items:center; min-height:44px; padding:11px 0; }
 .nav-spacer { display:none; }
}
@media(max-width:900px) {
 .detail-grid { grid-template-columns:minmax(0,1fr); gap:40px; }
 .sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .profile-card { grid-column:1/-1; }
}
@media(max-width:600px) {
 .sidebar { grid-template-columns:minmax(0,1fr); }
 .site-header { padding-top:18px; padding-bottom:18px; }
 .site-header .brand { font-size:26px; }
 .hero-pagination { flex-wrap:wrap; }
 .hero-bottom { flex-wrap:wrap; align-items:flex-end; }
 .hero-pagination .circle,.shelf-controls .circle,.circle { width:44px; height:44px; }
 .hero-pagination { padding-top:0; }
 .hero-copy h1 { font-size:clamp(34px,9vw,48px); letter-spacing:-1.3px; }
 .hero-copy { padding-bottom:28px; }
 .hero { padding-top:290px; }
 .preview { min-height:44px; }
 .watch,.row-cta,.share-button,.promo button,.dialog-close { min-height:44px; }
 .tag { min-height:44px; padding:12px; }
 .social-icons a,.author-socials a { width:44px; height:44px; }
 .category-list button { min-height:48px; }
 .player-toolbar { flex-wrap:wrap; }
 .player-toolbar button,.player-toolbar a { min-height:44px; display:inline-flex; align-items:center; }
 .preview-controls { flex-wrap:wrap; }
 .post-meta { gap:10px; line-height:1.7; }
 .promo { gap:18px; }
 .promo-copy { flex-basis:100%; }
 .promo button { max-width:100%; white-space:normal; }
 .optional-cta { align-items:stretch; }
 .optional-cta .watch { white-space:normal; justify-content:center; }
 .pagination a,.pagination span { min-width:44px; min-height:44px; }
 .category-control { width:100%; }
 .category-control select { min-width:0; flex:1; min-height:44px; font-size:16px; }
 .catalog-tools { gap:16px; }
 .legal-links { column-gap:18px; row-gap:0; }
 .legal-links a,footer li a { min-height:44px; display:inline-flex; align-items:center; }
 footer ul { gap:2px; }
 .footer-grid { gap:26px; }
 .related-grid { grid-template-columns:minmax(0,1fr); }
 .about-heading h1 { font-size:clamp(36px,10vw,48px); }
 .bio-copy { line-height:1.8; }
}
@media(max-width:360px) {
 .footer-grid { grid-template-columns:minmax(0,1fr); }
 .footer-about { grid-column:auto; }
 .hero-pagination { width:100%; }
 .story-header h1 { font-size:29px; }
 .author-socials { gap:10px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* SP GO: personal footer uses the member's profile/contact fields. */
footer .footer-grid { grid-template-columns:minmax(390px,2fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); }
footer .footer-personal { display:flex; align-items:flex-start; gap:23px; min-width:0; }
.footer-portrait { display:block; flex:0 0 156px; width:156px; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--accent); border-radius:5px; }
.footer-contact-copy { min-width:0; }
footer .footer-personal h2 { color:#fff; font-size:21px; letter-spacing:-.035em; margin:0 0 17px; }
footer .footer-personal .footer-name { color:#eceef3; font-size:16px; line-height:1.5; margin:0 0 7px; }
.footer-contact-link { display:block; width:fit-content; overflow-wrap:anywhere; font-size:14px; line-height:1.7; color:#afb6c4; }
.footer-contact-link[hidden] { display:none; }
.footer-contact-link:hover { color:var(--accent); }
.footer-contact-socials { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.footer-contact-socials a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#07080b; border:1px solid #ffffff17; color:#e8eaf0; font-size:19px; font-weight:700; transition:background .2s,border-color .2s; }
.footer-contact-socials a:hover { background:color-mix(in srgb,var(--accent) 20%,#07080b); border-color:var(--accent); color:#fff; }
.footer-contact-socials svg { width:18px; height:18px; }
@media(max-width:1050px) { footer .footer-grid { grid-template-columns:1fr 1fr; } footer .footer-personal { grid-column:1/-1; } }
@media(max-width:600px) { footer .footer-grid { gap:30px 20px; } .footer-portrait { width:116px; flex-basis:116px; } footer .footer-personal { gap:18px; } footer .footer-personal h2 { font-size:19px; } .footer-contact-socials { gap:7px; } .footer-contact-socials a { width:38px; height:38px; } }
@media(max-width:360px) { .footer-portrait { width:88px; flex-basis:88px; } footer .footer-personal { gap:14px; } }