/* DONQUEL — free static rebuild of the original Squarespace site.
   Look: black backgrounds, bright blue accents, white text,
   elegant serif ALL-CAPS headlines with wide letter-spacing.
   Don's interface bar: big readable text, big tap targets,
   high contrast, phone-first. */

:root{
  --bg:#000000;
  --bg2:#0a0a0f;
  --card:#101018;
  --blue:#2f7bff;
  --blue-bright:#4da3ff;
  --blue-soft:#9cc4ff;
  --text:#ffffff;
  --muted:#cfd6e4;
  --line:#3d3620;
  --gold:#d4af37;
  --yellow:#ffd60a;
  --gold-soft:#ffe89a;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:20px;line-height:1.6}
a{color:var(--blue-bright)}
img{max-width:100%}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Header ---------- */
header{background:#000;border-bottom:1px solid var(--line);padding:18px 18px 14px;text-align:center}
.logo{display:inline-block;font-family:var(--serif);font-size:40px;letter-spacing:.45em;text-indent:.45em;color:#fff;text-decoration:none;line-height:1.1}
nav.main{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
nav.main a{display:inline-block;padding:14px 20px;min-height:52px;border:1px solid var(--line);border-radius:10px;color:#fff;text-decoration:none;font-size:19px}
nav.main a:hover,nav.main a:active{background:#141824;border-color:var(--blue)}
.whats-new{margin-top:16px}
.social-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.social-row a{display:inline-block;padding:12px 18px;min-height:48px;border:1px solid var(--blue);border-radius:999px;color:var(--blue-soft);text-decoration:none;font-size:18px}
.social-row a:hover,.social-row a:active{background:var(--blue);color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:16px 30px;min-height:56px;border-radius:10px;font-size:20px;font-weight:700;letter-spacing:.08em;text-decoration:none;text-align:center}
.btn-blue{background:var(--blue);color:#fff;border:2px solid var(--blue)}
.btn-blue:hover,.btn-blue:active{background:var(--blue-bright)}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff}
.btn-outline:hover,.btn-outline:active{background:#fff;color:#000}

/* ---------- Layout / type ---------- */
.wrap{max-width:920px;margin:0 auto;padding:0 18px 64px}
section{margin-top:52px}
h1,h2,h3{font-family:var(--serif);text-transform:uppercase;font-weight:400}
h1{font-size:44px;letter-spacing:.22em;line-height:1.25;text-align:center}
h2{font-size:32px;letter-spacing:.18em;line-height:1.3;margin-bottom:14px}
h3{font-size:24px;letter-spacing:.14em;line-height:1.35}
p{margin-top:12px}
.center{text-align:center}
.lede{font-size:22px}
.muted{color:var(--muted)}
.giant{font-size:64px;letter-spacing:.3em;text-indent:.3em}
.title-link{color:#fff;text-decoration:none}
.title-link:hover,.title-link:active{color:var(--blue-soft)}

.hero{padding:72px 12px 40px;text-align:center;background:radial-gradient(ellipse at 50% 0%,#14213d 0%,#05070d 55%,#000 100%);border:1px solid var(--line);border-top:none}
.hero p{font-size:22px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;margin-top:18px}
.card p:first-child{margin-top:0}
.biglink{display:block;background:var(--card);border:2px solid var(--blue);border-radius:14px;padding:24px;margin-top:18px;color:#fff;text-decoration:none;font-size:21px}
.biglink strong{display:block;font-family:var(--serif);letter-spacing:.12em;font-size:24px;color:var(--blue-soft);margin-bottom:6px}

/* Placeholder art tiles (original photos were not available as files) */
.tile{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px;border:1px solid var(--line);padding:28px 16px;min-height:170px;font-family:var(--serif);letter-spacing:.16em;text-transform:uppercase;font-size:22px;line-height:1.4;color:#fff;text-decoration:none}
.tile small{display:block;font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:17px;color:var(--muted);margin-top:8px}
.tile-blue{background:linear-gradient(160deg,#123a7d,#050b1a)}
.tile-deep{background:linear-gradient(160deg,#1b2440,#05070d)}
.tile-gold{background:linear-gradient(160deg,#6e5510,#141003)}
.tile-rose{background:linear-gradient(160deg,#54300a,#120a03)}
.tile-teal{background:linear-gradient(160deg,#3f3a06,#0a0a03)}
a.tile:hover,a.tile:active{border-color:var(--blue)}

/* ---------- Grids ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:22px}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid.cols3{grid-template-columns:1fr 1fr 1fr}}
.product{background:#fff;color:#111;border-radius:14px;padding:18px;text-align:center}
.product .tile{min-height:150px}
.product h3{color:#111;margin-top:14px}
.price{font-size:22px;font-weight:700;color:var(--blue);margin-top:6px}
.product .btn{margin-top:14px;width:100%}
.track .tile{min-height:190px;font-size:26px}

/* ---------- Light page (Store) ---------- */
body.light{background:#ffffff;color:#111111}
body.light header{background:#fff;border-bottom:1px solid #ddd}
body.light .logo{color:#000}
body.light nav.main a{color:#000;border-color:#bbb}
body.light nav.main a:hover,body.light nav.main a:active{background:#eef3ff;border-color:var(--blue)}
body.light .social-row a{color:var(--blue);border-color:var(--blue)}
body.light .social-row a:hover,body.light .social-row a:active{background:var(--blue);color:#fff}
body.light h1{color:#000}
body.light p,body.light .lede{color:var(--blue)}
body.light footer{background:#fff;color:#111;border-top:1px solid #ddd}
body.light footer p{color:#111}
body.light .footer-links a{color:var(--blue)}
body.light .newsletter input{background:#fff;color:#111;border-color:#999}

/* ---------- Accordion (Membership) ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 20px;margin-top:16px}
summary{font-family:var(--serif);text-transform:uppercase;letter-spacing:.14em;font-size:22px;padding:16px 0;cursor:pointer;min-height:52px}
details p{padding-bottom:18px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);margin-top:64px;padding:40px 18px 48px;text-align:center;background:var(--bg2)}
.newsletter{max-width:560px;margin:0 auto}
.newsletter p{font-size:20px}
.newsletter form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.newsletter input{padding:16px;font-size:20px;border-radius:10px;border:2px solid var(--line);background:#0d0d14;color:#fff;min-height:56px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.footer-links a{display:inline-block;padding:12px 18px;min-height:48px;color:var(--blue-soft);font-size:19px}
.copy{margin-top:26px;color:var(--muted);font-size:17px}

@media(max-width:560px){
  body{font-size:19px}
  h1{font-size:34px}
  .giant{font-size:44px}
  .logo{font-size:32px}
  h2{font-size:27px}
}

/* ---------- Real photos ---------- */
.hero-photo{background-size:cover;background-position:center 18%;padding:0}
.hero-shade{background:linear-gradient(180deg,rgba(2,4,10,.42) 0%,rgba(2,4,10,.66) 55%,rgba(0,0,0,.88) 100%);padding:120px 12px 52px}
.story-hero{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:center}
.story-portrait{width:230px;height:290px;object-fit:cover;border-radius:14px;border:2px solid var(--blue)}
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:760px){.photo-row{grid-template-columns:repeat(4,1fr)}}
.photo-row img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.page-logo{display:block;margin:6px auto 22px;max-width:230px;width:62%;height:auto;border-radius:14px}
.support-logo{max-width:320px;width:78%}
.feature-photo{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);display:block}

/* Product photos + details */
.product .main-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block}
.product .back-photo{width:56%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;margin:10px auto 0;border:2px solid #e2e2e2}
.details-block{text-align:left;margin-top:14px;font-size:17px;line-height:1.55}
.details-block ul{margin:10px 0 0 20px}
.details-block li{margin-top:4px}
body.light .details-block,body.light .details-block p{color:#333}

/* Club cards with photos (WELCOME) */
.club-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:#fff}
.club-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.club-card .card-label{display:block;padding:18px 12px;text-align:center;font-family:var(--serif);letter-spacing:.14em;text-transform:uppercase;font-size:21px;line-height:1.4}
.club-card .card-label small{display:block;font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:16px;color:var(--muted);margin-top:8px}
.club-card:hover,.club-card:active{border-color:var(--blue)}

/* ---------- Network band (polish) ---------- */
.netband{max-width:900px;margin:34px auto 0;padding:26px 18px 4px;border-top:1px solid var(--line)}
.netband-title{font-family:var(--serif);letter-spacing:.22em;color:#d4af37;font-size:19px;text-transform:uppercase}
.netband-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.netband-links a{display:inline-block;padding:11px 16px;min-height:48px;border:1px solid var(--line);border-radius:999px;color:var(--blue-soft);font-size:18px;text-decoration:none}
.netband-links a:hover{border-color:var(--blue)}
.netband-note{margin-top:16px;color:var(--muted);font-size:17px}
.band{max-width:900px;margin:56px auto 0;padding:34px 22px;border:1px solid var(--line);border-radius:16px;background:var(--bg2);text-align:center}
.band h2{margin-top:0}
.band-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-ghost{background:transparent;color:var(--blue-soft);border:2px solid var(--blue)}
.btn-ghost:hover,.btn-ghost:active{background:var(--blue);color:#fff}

/* ---------- Gold sync (blend with donquel.com black & gold) ---------- */
.btn-blue{color:#000}
.btn-blue:hover,.btn-blue:active{color:#000}
.social-row a:hover,.social-row a:active{color:#000}
::selection{background:#d4af37;color:#000}
.tile{border-color:#6e5c1c}
.tile small{color:#f3e3ae}
.netband-links a:hover{border-color:#d4af37}

/* ---------- Gold + Blue balance (Don: both, synced) ---------- */
.btn-blue{background:var(--gold);border-color:var(--gold);color:#000}
.btn-blue:hover,.btn-blue:active{background:var(--yellow);border-color:var(--yellow);color:#000}
.social-row a{border-color:var(--gold);color:var(--gold-soft)}
.social-row a:hover,.social-row a:active{background:var(--gold);color:#000}
.price{color:var(--gold)}
.tile-blue,.tile-deep{border-color:#2f5fb3}

/* ---------- Album covers (Music page) ---------- */
.track .cover{display:block;border-radius:14px;overflow:hidden;border:2px solid var(--line);line-height:0}
.track .cover img{width:100%;height:auto;display:block}
.track .cover:hover,.track .cover:active{border-color:var(--gold)}

/* Site-wide backdrop — Don's Angel of Romance portrait behind every page
   (2026-10-18, Don's order: "in the background for the whole website").
   Dark tint keeps every word readable; light-theme pages opt out. */
body{background-image:linear-gradient(rgba(3,5,10,.84),rgba(3,5,10,.90)),url('img/hero-angel-of-romance.webp');background-size:auto,cover;background-position:center,center 25%;background-attachment:scroll,fixed;background-repeat:no-repeat;background-color:var(--bg)}
body.light{background-image:none}
@media (max-width:700px){body{background-attachment:scroll,scroll}}
.hero-shade{background:linear-gradient(180deg,rgba(2,4,10,.14) 0%,rgba(2,4,10,.32) 55%,rgba(0,0,0,.66) 100%)}

/* Backdrop refinement (2026-10-18): the portrait is shown WHOLE — never
   cropped — centered on the screen; a blurred, darkened copy of itself
   fills the sides so there are no gaps. Tint stays light enough to see him. */
body{background-image:linear-gradient(rgba(3,5,10,.42),rgba(3,5,10,.52)),url('img/hero-angel-of-romance.webp'),url('img/hero-ambient.webp');background-size:auto,contain,cover;background-position:center,center 12%,center;background-attachment:scroll,fixed,fixed;background-repeat:no-repeat}

/* SYNC PASS (2026-10-18, Don: "make it 100% perfect") — the portrait now
   exists exactly ONCE: a fixed layer behind the whole site, height-fit so
   Don is never cropped, anchored right, melting into the page black via a
   left-to-right fade. Header and footer go translucent so the backdrop
   flows through them — no seams, no patches, no double image. Light-theme
   pages (Store) keep their clean background: their body paint covers it. */
html{background:var(--bg)}
body{background:transparent}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#000 24%,rgba(0,0,0,.74) 54%,rgba(0,0,0,.30) 80%,rgba(0,0,0,.42) 100%),url('img/hero-angel-of-romance.webp');background-size:cover,auto 100%;background-position:center,right center;background-repeat:no-repeat}
header{background:rgba(0,0,0,.82)}
footer{background:rgba(6,6,10,.88)}
.hero-photo{background:none}
@media (max-width:700px){body::before{background-image:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.80)),url('img/hero-angel-of-romance.webp');background-size:cover,contain;background-position:center,center 6%}}

/* STAGE PASS (2026-10-18) — final backdrop design. The portrait takes the
   stage at the top of every page, like Don's original site: headline in
   the smoke at the top, his face in the clear middle, buttons and a fade
   to black at the bottom. No photo behind body content — one stage, one
   picture, nothing to misalign. Supersedes all earlier backdrop blocks. */
body{background:var(--bg)}
body::before{content:none}
header{background:#000}
footer{background:var(--bg2)}
.hero,.hero-photo{background-image:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.82) 100%),url('img/hero-angel-of-romance.webp');background-size:cover;background-position:center 24%;background-repeat:no-repeat}
.hero-shade{background:none;display:flex;flex-direction:column;align-items:center;min-height:92vh;padding:64px 12px 44px}
.hero-shade .cta-row{margin-top:auto}
@media (max-width:700px){.hero,.hero-photo{background-position:center 18%}.hero-shade{min-height:80vh;padding:44px 12px 32px}}

/* STORY BG REMOVAL (2026-10-21, Don's order: "On this page, remove the
   background") — the Story page hero drops the smoke photo entirely:
   portrait card and the DONQUEL name sit on clean black. Other pages
   keep the stage photo. */
.hero.no-photo{background-image:none}