
:root {
  --bg: #090507;
  --panel: rgba(20, 10, 15, 0.9);
  --panel-2: rgba(28, 12, 19, 0.9);
  --line: rgba(255, 185, 210, 0.16);
  --text: #fbf1f5;
  --muted: #e3c7d1;
  --soft: #c899ac;
  --accent: #ef6f9f;
  --accent-2: #ffe1eb;
  --gold: #f7cf8f;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  --radius: 24px;
  --radius-sm: 18px;
  --max: 1180px;
  --hero-stage: 980px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at top, rgba(120, 22, 56, 0.34), transparent 36%), linear-gradient(180deg, #050305 0%, #11080d 46%, #090507 100%);
  font: 16px/1.7 "Georgia", "Times New Roman", serif;
}
a { color: #ffdbe8; text-decoration-color: rgba(255, 219, 232, 0.35); }
a:hover { color: #fff4f8; }
img { max-width: 100%; height: auto; }
.container { width: min(calc(100% - 2rem), var(--max)); margin: 0 auto; }
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; color: #000; padding: .7rem 1rem; border-radius: 999px; }
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(9, 5, 7, 0.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.brand { color: var(--text); text-decoration:none; display:flex; align-items:center; gap:.85rem; }
.brand-mark { width:42px; height:42px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #ffd3df, #ef6f9f 70%, #4d1630 100%); box-shadow: 0 10px 24px rgba(239,111,159,.38); display:grid; place-items:center; font-weight:700; font-size:1.1rem; }
.brand-copy small { display:block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--soft); margin-bottom:.12rem; font-family: Arial, Helvetica, sans-serif; }
.brand-copy strong { display:block; font-size:1.55rem; line-height:1; color: var(--accent-2); font-family: "Segoe Script", "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive; font-weight:600; }
.nav { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:flex-end; }
.nav a { color: var(--text); text-decoration:none; padding:.78rem 1rem; border-radius:999px; border:1px solid transparent; font-family: Arial, Helvetica, sans-serif; font-size:.93rem; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
.hero { position: relative; min-height: 690px; background: linear-gradient(180deg, rgba(8, 4, 6, 0.48), rgba(8, 4, 6, 0.82)), linear-gradient(110deg, rgba(12, 4, 8, 0.88) 0%, rgba(12, 4, 8, 0.56) 42%, rgba(12, 4, 8, 0.18) 72%, rgba(12, 4, 8, 0.8) 100%), url('../images/hero-talia-paris-v1.webp') center center / cover no-repeat; display:flex; align-items:center; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:200px; background: linear-gradient(180deg, rgba(9,5,7,0), rgba(9,5,7,1)); }
.hero-shell { position:relative; z-index:1; width:min(calc(100% - 2rem), var(--hero-stage)); margin:0 auto; padding:4rem 0 5rem; }
.hero-panel { display:grid; grid-template-columns:minmax(0, 1.16fr) 320px; gap:1.8rem; align-items:start; background: linear-gradient(145deg, rgba(12,4,8,.82), rgba(20,8,13,.55)); border:1px solid rgba(255,255,255,.08); border-radius:32px; box-shadow:var(--shadow); overflow:hidden; padding:2.2rem; }
.hero-copy { padding:.4rem 0 0; }
.eyebrow { margin:0 0 .5rem; color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-family: Arial, Helvetica, sans-serif; font-size:.78rem; }
.hero-title { margin:0; font-size: clamp(3rem, 7vw, 4.8rem); line-height:.92; color:#fffafc; text-shadow: 0 8px 32px rgba(0,0,0,.36); font-family: "Segoe Script", "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive; font-weight:600; }
.hero-subtitle { margin:.35rem 0 1rem; font-size:1.18rem; color:var(--muted); max-width:46ch; }
.hero-facts { list-style:none; padding:0; margin:1.2rem 0 1.5rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.hero-facts li { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:.9rem 1rem; }
.hero-facts strong { display:block; color:var(--gold); font-size:.75rem; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.16em; margin-bottom:.15rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin:1.35rem 0 1rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.86rem 1.25rem; border-radius:999px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-weight:700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, #ff8bb1, #e55285); color:#fff; box-shadow: 0 16px 30px rgba(229,82,133,.34); }
.btn-secondary { background: rgba(255,255,255,.08); color: var(--text); border:1px solid rgba(255,255,255,.10); }
.btn-tertiary { background: rgba(247, 207, 143, 0.1); color: var(--gold); border:1px solid rgba(247,207,143,.25); }
.hero-contact { display:flex; flex-wrap:wrap; gap:1rem 1.2rem; color: var(--muted); font-size:.95rem; }
.hero-contact a { color:#ffeaf2; }
.hero-portrait-wrap { align-self:start; display:flex; justify-content:center; }
.hero-portrait { width:100%; max-width:320px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:28px; overflow:hidden; box-shadow:0 20px 44px rgba(0,0,0,.32); }
.hero-portrait img { display:block; width:100%; height:auto; object-fit:contain; object-position:top; }
.section { padding: 2rem 0; }
.intro-section { padding-top: 2.2rem; }
.intro-card { background: linear-gradient(180deg, rgba(22,11,16,.93), rgba(15,7,11,.96)); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem clamp(1.25rem, 3vw, 2rem); }
.kicker { display:inline-block; margin-bottom:.55rem; color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size:.75rem; font-family: Arial, Helvetica, sans-serif; }
.intro-card h2 { margin:.1rem 0 .6rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height:1.1; }
.intro-card p { margin:0; color:var(--muted); font-size:1.08rem; }
.contact-ribbon { padding-top:.75rem; }
.contact-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }
.contact-box { background: linear-gradient(180deg, rgba(25,12,18,.92), rgba(15,8,11,.95)); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem 1.1rem; box-shadow:var(--shadow); }
.contact-box h3 { margin:0 0 .45rem; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); font-family:Arial, Helvetica, sans-serif; }
.contact-box p, .contact-box a { margin:0; color:#fff9fb; font-size:1.08rem; text-decoration:none; }
.page-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:1.4rem; align-items:start; }
.article-card, .sidebar-card { background: linear-gradient(180deg, rgba(22,11,16,.95), rgba(14,7,10,.98)); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.article-card { padding:1.65rem clamp(1.2rem, 2.5vw, 2rem); }
.article-card h1 { margin:0 0 .9rem; font-size: clamp(2rem, 3vw, 2.8rem); line-height:1.08; }
.article-card p { margin:0 0 1.1rem; color:var(--muted); }
.article-card a { color:#ffe7f0; }
.sidebar-stack { display:grid; gap:1rem; position:sticky; top:86px; }
.sidebar-card { padding:1.2rem 1.15rem; }
.sidebar-card h2, .sidebar-card h3 { margin:0 0 .8rem; font-size:1.12rem; }
.sidebar-card p { margin:0 0 .85rem; color:var(--muted); }
.list-reset { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.list-reset a { text-decoration:none; color:var(--text); display:block; padding:.9rem 1rem; border-radius:16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.04); }
.list-reset a:hover { background: rgba(255,255,255,.08); }
.list-reset small { display:block; color:var(--soft); margin-top:.25rem; }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
.tease-card { background: linear-gradient(180deg, rgba(25,12,18,.94), rgba(14,7,10,.98)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.tease-card img { width:100%; height:240px; object-fit:cover; object-position: top center; display:block; }
.tease-copy { padding:1.2rem 1.2rem 1.35rem; }
.tease-copy h3 { margin:.1rem 0 .55rem; font-size:1.45rem; }
.tease-copy p { margin:0 0 1rem; color:var(--muted); }
.content-image { float:right; max-width:min(48%, 420px); margin:.2rem 0 1rem 1.2rem; border-radius:22px; box-shadow:0 20px 40px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.footer { padding:2.5rem 0 3.2rem; }
.footer-inner { background: linear-gradient(180deg, rgba(21,10,15,.92), rgba(12,6,9,.96)); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; display:flex; flex-wrap:wrap; gap:.8rem 1rem; justify-content:space-between; align-items:center; color:var(--soft); box-shadow: var(--shadow); }
.footer a { color: var(--accent-2); text-decoration:none; }
.footer .credit { font-size:.88rem; white-space:nowrap; }
.meta-note { color:var(--soft); font-size:.92rem; }
@media (max-width: 980px) {
  .hero-panel, .page-layout { grid-template-columns:1fr; }
  .hero-portrait-wrap { justify-content:flex-start; }
  .hero-portrait { max-width:360px; }
  .contact-grid { grid-template-columns:1fr; }
  .sidebar-stack { position: static; }
}
@media (max-width: 760px) {
  .topbar-inner { padding:.45rem 0 .85rem; flex-direction:column; align-items:flex-start; }
  .nav { width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:.15rem; }
  .hero { min-height:auto; background-position: 62% center; }
  .hero-shell { padding:3rem 0 4rem; }
  .hero-panel { padding:1.2rem; border-radius:26px; }
  .hero-title { font-size: clamp(2.6rem, 12vw, 3.7rem); }
  .hero-facts { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
  .btn { width:100%; }
  .card-grid { grid-template-columns:1fr; }
  .content-image { float:none; display:block; max-width:100%; width:100%; margin:0 0 1rem 0; }
  .footer-inner { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition:none; } }
