:root {
  --bg: #060605;
  --bg-2: #0d0b08;
  --panel: rgba(20, 17, 12, .72);
  --panel-strong: rgba(17, 14, 10, .92);
  --text: #f7f3ea;
  --muted: #c9c1b2;
  --gold: #d7b06a;
  --gold-2: #f2d493;
  --gold-dim: rgba(215,176,106,.26);
  --line: rgba(215,176,106,.24);
  --white-line: rgba(255,255,255,.08);
  --shadow: 0 30px 90px rgba(0,0,0,.58);
  --radius: 26px;
  --container: 1480px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 76% 11%, rgba(215,176,106,.12), transparent 22rem),
    radial-gradient(circle at 16% 24%, rgba(146,100,38,.08), transparent 26rem),
    linear-gradient(145deg, #050504 0%, #0a0907 52%, #050504 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.2) .55px, transparent .55px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 9999;
  background: var(--gold-2);
  color: #17110a;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
}
.skip-link:focus { top: 12px; }

.site-shell { min-height: 100vh; position: relative; isolation: isolate; }
.site-shell::before,
.site-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(80px);
}
.site-shell::before { width: 420px; height: 420px; top: 8rem; right: 12%; background: rgba(191,136,58,.16); }
.site-shell::after { width: 320px; height: 320px; top: 42rem; left: -7rem; background: rgba(120,78,20,.11); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(to bottom, rgba(6,6,5,.94), rgba(6,6,5,.72));
  backdrop-filter: blur(18px) saturate(120%);
}
.header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  width: 42px; height: 42px; border: 1px solid var(--gold-dim); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-2); font-family: Georgia,serif; font-style: italic;
  background: radial-gradient(circle at 35% 30%, rgba(242,212,147,.15), rgba(215,176,106,.04));
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.018);
}
.brand-copy strong { display:block; font-family: Georgia, serif; font-size: 1.35rem; font-style: italic; font-weight: 500; letter-spacing:.02em; }
.brand-copy small { display:block; margin-top:-1px; color: var(--gold); font-size:.62rem; letter-spacing:.27em; text-transform:uppercase; }

.nav { display:flex; align-items:center; gap:24px; }
.nav a { color:#ece6dc; font-size:.79rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; opacity:.82; transition:.2s ease; }
.nav a:hover, .nav a:focus-visible { color:var(--gold-2); opacity:1; }
.nav-cta { border:1px solid var(--line); padding:10px 16px; border-radius:999px; background:rgba(215,176,106,.06); }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--white-line); border-radius:14px; background:rgba(255,255,255,.035); color:#fff; cursor:pointer; }
.menu-toggle span { display:block; width:20px; height:2px; margin:4px auto; background:currentColor; border-radius:3px; }

.hero { padding: clamp(42px, 6vw, 92px) 0 38px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr); gap:clamp(28px,4vw,72px); align-items:center; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; color:var(--gold-2); text-transform:uppercase; letter-spacing:.25em; font-size:.72rem; font-weight:800; }
.eyebrow::before { content:""; width:54px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.domain { margin:22px 0 8px; color:#e7d6b6; font:500 clamp(.85rem,1vw,1rem)/1.2 Georgia,serif; letter-spacing:.38em; text-transform:lowercase; }
.hero h1 { margin:0; max-width:850px; font:500 clamp(3.2rem,6.25vw,7.25rem)/.92 Georgia,"Times New Roman",serif; letter-spacing:-.045em; text-wrap:balance; }
.hero h1 span { color:var(--gold); display:block; text-shadow:0 0 44px rgba(215,176,106,.13); }
.hero-lead { max-width:730px; margin:28px 0 0; color:#d5cec0; font:400 clamp(1.03rem,1.6vw,1.28rem)/1.72 Georgia,serif; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 20px; border-radius:999px; border:1px solid transparent; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:850; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,#f0d291,#c99a4d); color:#1d160d; box-shadow:0 14px 34px rgba(215,176,106,.18); }
.btn-secondary { border-color:var(--line); background:rgba(255,255,255,.025); color:#eee8dc; }

.hero-visual { position:relative; min-height:760px; display:grid; place-items:end center; }
.hero-visual::before { content:""; position:absolute; inset:8% 4% 8% 8%; border-radius:42% 42% 18% 18%; background:radial-gradient(circle at 50% 35%, rgba(236,194,112,.19), rgba(151,95,30,.05) 42%, transparent 67%); filter:blur(4px); }
.hero-visual::after { content:""; position:absolute; left:8%; right:8%; bottom:7%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 30px rgba(215,176,106,.42); }
.portrait { position:relative; z-index:1; width:min(100%,670px); height:auto; filter:drop-shadow(0 38px 52px rgba(0,0,0,.52)); -webkit-mask-image:linear-gradient(to bottom,#000 0 83%,transparent 99%); mask-image:linear-gradient(to bottom,#000 0 83%,transparent 99%); }
.verse-card { position:absolute; z-index:3; top:6%; right:0; width:min(310px,55%); padding:20px 22px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(20,16,11,.76),rgba(9,8,6,.45)); backdrop-filter:blur(14px); box-shadow:var(--shadow); }
.verse-card blockquote { margin:0; color:#f0ddba; font:italic 1.18rem/1.42 Georgia,serif; }
.verse-card cite { display:block; margin-top:10px; color:var(--gold); font-style:normal; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.mission { position:absolute; z-index:3; right:3%; bottom:14%; display:grid; gap:8px; text-align:right; }
.mission span { color:#eee2cf; font-size:.69rem; letter-spacing:.32em; text-transform:uppercase; text-shadow:0 2px 14px #000; }

.divider { height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:0 auto; width:min(calc(100% - 40px),var(--container)); }

.section { padding: clamp(62px,8vw,110px) 0; }
.section-head { max-width:850px; margin-bottom:34px; }
.kicker { margin:0 0 12px; color:var(--gold); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; font-weight:850; }
.section h2 { margin:0; font:500 clamp(2.2rem,4.5vw,4.6rem)/1 Georgia,serif; letter-spacing:-.035em; text-wrap:balance; }
.section-intro { margin:18px 0 0; color:var(--muted); font-size:1.03rem; max-width:760px; }

.story-card { display:grid; grid-template-columns:.74fr 1.26fr; gap:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(215,176,106,.08),rgba(255,255,255,.025) 45%,rgba(255,255,255,.015)); box-shadow:var(--shadow); }
.story-aside { padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:space-between; min-height:390px; background:radial-gradient(circle at top left,rgba(215,176,106,.14),transparent 48%); border-right:1px solid var(--line); }
.story-aside .big { color:var(--gold-2); font:500 clamp(4.4rem,8vw,8rem)/.85 Georgia,serif; letter-spacing:-.06em; }
.story-aside .small { margin-top:8px; color:#d8cdbb; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; }
.story-aside .words { display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; }
.story-aside .words span { border:1px solid var(--line); border-radius:999px; padding:7px 11px; color:#d8cdbb; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; }
.story-copy { padding:clamp(28px,4vw,58px); color:#d5cec2; font-family:Georgia,serif; font-size:clamp(1rem,1.3vw,1.13rem); line-height:1.82; }
.story-copy p:first-child::first-letter { float:left; color:var(--gold); font-size:4.6rem; line-height:.78; padding:.12em .12em 0 0; }
.story-copy p { margin:0 0 20px; }
.story-copy p:last-child { margin-bottom:0; }

.social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.social-card { position:relative; min-height:205px; padding:24px; overflow:hidden; border-radius:22px; border:1px solid var(--white-line); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 20px 50px rgba(0,0,0,.22); transition:transform .22s ease,border-color .22s ease,background .22s ease; }
.social-card::before { content:""; position:absolute; inset:auto -20% -52% auto; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,var(--accent-soft),transparent 68%); opacity:.9; pointer-events:none; }
.social-card:hover, .social-card:focus-visible { transform:translateY(-5px); border-color:rgba(215,176,106,.38); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); outline:none; }
.social-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.social-icon { width:48px; height:48px; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.22); }
.social-arrow { color:var(--gold); font-size:1.45rem; transition:transform .2s ease; }
.social-card:hover .social-arrow { transform:translate(3px,-3px); }
.social-card h3 { margin:34px 0 5px; font:600 1.35rem/1.2 Georgia,serif; }
.social-card p { margin:0; color:#bcb4a7; font-size:.88rem; overflow-wrap:anywhere; }
.social-card strong { display:block; margin-top:12px; color:#ede5d7; font-size:.71rem; letter-spacing:.13em; text-transform:uppercase; }
.social-youtube { --accent-soft: rgba(255,0,51,.32); }
.social-instagram { --accent-soft: rgba(220,0,177,.27); }
.social-spotify { --accent-soft: rgba(30,215,96,.24); }
.social-facebook { --accent-soft: rgba(24,119,242,.25); }
.social-deezer { --accent-soft: rgba(162,56,255,.24); }
.social-x { --accent-soft: rgba(255,255,255,.14); }

.notice { margin-top:28px; display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:16px; padding:16px 18px; background:rgba(215,176,106,.045); color:#c8beae; font-size:.88rem; }
.notice svg { flex:0 0 auto; margin-top:2px; }

.footer { border-top:1px solid var(--white-line); padding:30px 0 42px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-brand strong { font:500 1.2rem Georgia,serif; color:#eadcbf; }
.footer-brand p { margin:6px 0 0; color:#847e73; font-size:.82rem; }
.footer-mini { color:#8f887c; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; text-align:right; }

:focus-visible { outline:2px solid var(--gold-2); outline-offset:4px; }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns:1fr .88fr; }
  .hero-visual { min-height:650px; }
  .verse-card { width:260px; }
  .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .header-inner { min-height:74px; }
  .menu-toggle { display:block; }
  .nav { position:fixed; top:74px; left:20px; right:20px; display:grid; gap:0; padding:10px; border:1px solid var(--line); border-radius:18px; background:rgba(9,8,6,.97); box-shadow:var(--shadow); transform:translateY(-16px); opacity:0; visibility:hidden; transition:.2s ease; }
  .nav.open { transform:none; opacity:1; visibility:visible; }
  .nav a { padding:14px; border-radius:12px; }
  .nav a:hover { background:rgba(215,176,106,.08); }
  .nav-cta { border:0; }
  .hero { padding-top:54px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:760px; }
  .hero-visual { min-height:640px; margin-top:-18px; }
  .portrait { width:min(92vw,620px); }
  .verse-card { top:10%; right:2%; width:280px; }
  .mission { right:5%; bottom:10%; }
  .story-card { grid-template-columns:1fr; }
  .story-aside { min-height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .story-aside .words { margin-top:28px; }
}

@media (max-width: 640px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .brand-copy small { display:none; }
  .header-inner { gap:14px; }
  .domain { letter-spacing:.19em; overflow-wrap:anywhere; }
  .hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .hero-lead { font-size:1.02rem; line-height:1.65; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .btn { width:100%; }
  .hero-visual { min-height:520px; margin-top:8px; overflow:hidden; border-radius:24px; }
  .portrait { width:min(112vw,570px); max-width:none; margin-right:-10vw; }
  .verse-card { top:10px; left:0; right:auto; width:min(82%,290px); padding:15px 16px; }
  .verse-card blockquote { font-size:1rem; }
  .mission { right:5px; bottom:8%; gap:5px; }
  .mission span { font-size:.58rem; letter-spacing:.22em; }
  .section { padding:68px 0; }
  .section h2 { font-size:clamp(2.2rem,12vw,3.2rem); }
  .story-aside, .story-copy { padding:26px 22px; }
  .story-aside .big { font-size:5.4rem; }
  .social-grid { grid-template-columns:1fr; }
  .social-card { min-height:178px; }
  .social-card h3 { margin-top:26px; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
  .footer-mini { text-align:left; }
}

@media (max-width: 390px) {
  .brand-copy strong { font-size:1.15rem; }
  .brand-mark { width:38px; height:38px; }
  .hero-visual { min-height:480px; }
  .mission { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}