:root { --navy:#061727; --navy-2:#0a2236; --gold:#dca63d; --cream:#f4eee3; --ink:#101c26; --muted:#66717a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; padding:0 4.5vw; background:var(--navy); color:#fff; display:flex; align-items:center; gap:42px; position:relative; z-index:20; border-bottom:1px solid rgba(220,166,61,.22); }
.brand { display:flex; align-items:center; gap:13px; color:#f8f0e5; font:600 29px Georgia,serif; white-space:nowrap; }
.brand>span:last-child>span { color:var(--gold); }
.brand-mark { width:37px; height:45px; border:1.5px solid var(--gold); border-radius:50% 50% 42% 42%; position:relative; display:inline-block; }
.brand-mark:before,.brand-mark:after { content:""; position:absolute; left:7px; right:7px; border-top:1px solid var(--gold); }
.brand-mark:before { top:15px; }.brand-mark:after { top:25px; }
.brand-mark i { position:absolute; left:17px; top:-8px; height:58px; border-left:1px solid var(--gold); }.brand-mark b { position:absolute; left:-9px; right:-9px; top:21px; border-top:1px solid var(--gold); }
.desktop-nav { display:flex; gap:35px; margin-left:auto; font-size:14px; }.desktop-nav a { opacity:.78; transition:.2s; }.desktop-nav a:hover { color:var(--gold); opacity:1; }
.header-actions { display:flex; gap:20px; align-items:center; }.edition { color:var(--gold); font-size:12px; letter-spacing:.05em; }.outline-small { border:1px solid rgba(220,166,61,.65); color:var(--gold); padding:12px 18px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.mobile-menu { display:none; margin-left:auto; }.mobile-menu summary { list-style:none; width:42px; height:42px; border:1px solid var(--gold); border-radius:50%; display:grid; place-content:center; gap:4px; }.mobile-menu summary span { width:17px; border-top:1px solid #fff; }.mobile-menu nav { position:absolute; top:86px; left:0; right:0; background:var(--navy); padding:24px 6vw; display:grid; gap:18px; border-top:1px solid #24384a; }
.hero { min-height:calc(100vh - 86px); position:relative; overflow:hidden; background:var(--navy); color:#fff; display:flex; align-items:center; }
.hero-media { position:absolute; inset:0 0 0 42%; background-image:url('assets/hero-editorial.png'); background-size:cover; background-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#061727 0%,#061727 31%,rgba(6,23,39,.83) 49%,rgba(6,23,39,.15) 77%),linear-gradient(0deg,rgba(4,17,29,.5),transparent 45%); }
.hero-copy { position:relative; z-index:2; width:51%; padding:7vh 0 7vh 4.5vw; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:700; display:flex; align-items:center; gap:12px; }.eyebrow span { width:35px; border-top:1px solid var(--gold); }
.hero h1 { font:500 clamp(60px,7.5vw,126px)/.82 Georgia,serif; letter-spacing:-.06em; margin:31px 0; color:#f8f0e5; }
.hero-lede { max-width:620px; color:#d5d9dc; font-size:18px; line-height:1.65; }
.hero-buttons { display:flex; gap:16px; margin:33px 0 48px; }.button { padding:18px 24px; min-width:190px; display:flex; justify-content:space-between; font-weight:700; font-size:14px; }.button.gold { background:var(--gold); color:#081725; }.button.ghost { border:1px solid rgba(220,166,61,.75); color:var(--gold); }
.latest-line { display:flex; align-items:center; gap:18px; border-top:1px solid rgba(255,255,255,.16); padding-top:22px; max-width:560px; }.play { width:45px; height:45px; border:1px solid var(--gold); color:var(--gold); border-radius:50%; display:grid; place-items:center; font-size:11px; padding-left:2px; }.latest-line small { color:var(--gold); letter-spacing:.15em; font-size:9px; }.latest-line p { margin:5px 0 0; font:17px Georgia,serif; }
.hero-follow { display:inline-flex; gap:12px; align-items:center; margin-top:24px; color:#c7d0d6; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.hero-follow span { color:var(--gold); font-weight:700; }.hero-follow b { font-weight:400; transition:transform .2s; }.hero-follow:hover b { transform:translateY(3px); }
.hero-note { position:absolute; right:4vw; bottom:5vh; z-index:3; padding:18px 0 18px 20px; border-left:1px solid var(--gold); }.hero-note span { color:var(--gold); font-size:9px; letter-spacing:.2em; }.hero-note strong { display:block; margin-top:7px; font:18px/1.35 Georgia,serif; }.scroll { position:absolute; right:1.5vw; top:42%; z-index:3; writing-mode:vertical-rl; font-size:9px; letter-spacing:.2em; color:#d2d8dc; }.scroll span { color:var(--gold); margin-top:10px; }
.section { padding:110px 5vw; }.section-heading { display:grid; grid-template-columns:1.15fr .65fr; gap:12vw; align-items:end; max-width:1400px; margin:auto auto 60px; }.eyebrow.dark { color:#9a701f; }.section-heading h2,.future h2,.coverage h2,.contact h2 { font:500 clamp(46px,5.2vw,82px)/.98 Georgia,serif; letter-spacing:-.045em; margin:22px 0 0; }.section-heading>p { color:var(--muted); line-height:1.8; max-width:480px; }
.story-grid { max-width:1400px; margin:auto; display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:22px; }.story-card { background:#fff; min-height:570px; display:flex; flex-direction:column; }.story-visual { height:275px; position:relative; overflow:hidden; background:linear-gradient(135deg,#12344b,#b28a55); }.story-1 .story-visual { background:linear-gradient(135deg,#0a293e 0%,#ad8454 100%); }.story-2 .story-visual { background:linear-gradient(135deg,#5e3f2d,#e0b46d); }.story-3 .story-visual { background:linear-gradient(135deg,#132b3b,#6b8190); }.story-visual:after { content:""; position:absolute; width:180px; height:180px; border:1px solid rgba(255,255,255,.27); border-radius:50%; right:-25px; bottom:-45px; box-shadow:0 0 0 22px rgba(255,255,255,.04),0 0 0 44px rgba(255,255,255,.035); }.story-visual span { position:absolute; top:18px; left:20px; color:#fff; opacity:.7; font-size:12px; letter-spacing:.2em; }.story-visual i { position:absolute; width:56%; height:68%; right:11%; bottom:0; background:rgba(255,255,255,.11); border-radius:50% 50% 8% 8%; filter:blur(1px); }.story-body { padding:28px 30px 31px; display:flex; flex-direction:column; flex:1; }.story-body small { color:#a67623; letter-spacing:.16em; font-size:9px; }.story-body h3 { font:24px/1.25 Georgia,serif; margin:14px 0; }.story-body p { color:var(--muted); font-size:14px; line-height:1.7; }.story-body a { margin-top:auto; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.story-body a b { color:var(--gold); margin-left:8px; }
.coverage { padding:110px 7vw; background:var(--navy); color:#fff; display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }.coverage-intro>p:last-child { color:#aeb9c1; line-height:1.8; max-width:500px; }.region-list div { border-top:1px solid rgba(255,255,255,.16); padding:22px 4px; display:grid; grid-template-columns:45px 1fr 30px; align-items:center; }.region-list span { color:var(--gold); font-size:10px; }.region-list strong { font:25px Georgia,serif; }.region-list i { color:var(--gold); font-style:normal; }
.voices { text-align:center; background:#e8dfd1; }.quote-mark { font:100px/1 Georgia,serif; color:var(--gold); height:55px; }.voices blockquote { font:500 clamp(45px,5.7vw,88px)/1.02 Georgia,serif; letter-spacing:-.04em; margin:20px auto 30px; }.voices>p { max-width:620px; margin:auto; color:#59646c; line-height:1.8; }.text-link { display:inline-block; margin-top:34px; font-size:11px; letter-spacing:.15em; font-weight:700; border-bottom:1px solid #bf8b2d; padding-bottom:7px; }.text-link b { color:#ae7617; }
.future { padding:110px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:10vw; background:#f6f2ea; }.future-copy>p { color:var(--muted); line-height:1.85; font-size:17px; }.language-row { margin-top:50px; display:flex; flex-wrap:wrap; gap:10px; }.language-row span,.language-row strong { padding:10px 15px; border:1px solid #cfc5b6; font-weight:400; font-size:13px; }.language-row strong { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.social-hub { padding:110px 7vw; background:#081b2c; color:#fff; display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; align-items:start; position:relative; overflow:hidden; }.social-hub:before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(220,166,61,.09); border-radius:50%; left:-300px; bottom:-310px; box-shadow:0 0 0 70px rgba(220,166,61,.025),0 0 0 140px rgba(220,166,61,.02); }.social-intro { position:relative; z-index:1; }.social-intro h2 { font:500 clamp(46px,5.2vw,82px)/.98 Georgia,serif; letter-spacing:-.045em; color:#f8f0e5; margin:22px 0 28px; }.social-intro>p:not(.eyebrow) { color:#aeb9c1; line-height:1.8; max-width:520px; }.social-note { display:block; margin-top:36px; color:var(--gold); font:italic 16px Georgia,serif; }.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1; }.social-card { min-height:142px; padding:24px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.035); display:grid; grid-template-columns:48px 1fr 24px; align-items:center; gap:18px; transition:transform .25s,border-color .25s,background .25s; }.social-card:hover { transform:translateY(-4px); border-color:rgba(220,166,61,.65); background:rgba(255,255,255,.07); }.social-card:last-child { grid-column:1/-1; }.social-mark { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--navy); font:700 22px Arial,sans-serif; }.social-meta { display:flex; flex-direction:column; }.social-meta small { color:#81909b; font-size:8px; letter-spacing:.2em; }.social-meta strong { font:24px Georgia,serif; margin:5px 0; }.social-meta em { color:#aeb9c1; font-size:11px; font-style:normal; }.social-card>b { color:var(--gold); font-size:18px; }.social-card.youtube .social-mark { border-radius:13px; }.social-card.instagram .social-mark { background:linear-gradient(135deg,#dca63d,#b35a7c); color:#fff; }.social-card.tiktok .social-mark,.social-card.x .social-mark { background:#f2eee7; color:#071725; }
.contact { background:#c89331; color:#071725; padding:100px 7vw; text-align:center; }.contact .eyebrow { color:#26313a; justify-content:center; }.contact .eyebrow span { border-color:#26313a; }.contact>p:not(.eyebrow) { font-size:17px; }.contact-links { max-width:1050px; margin:45px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(7,23,37,.3); border-bottom:1px solid rgba(7,23,37,.3); }.contact-links a { padding:24px 18px; display:flex; justify-content:space-between; font-size:14px; border-right:1px solid rgba(7,23,37,.25); }.contact-links a:last-child { border:0; }
footer { padding:45px 5vw; background:#04121f; color:#dce1e4; display:flex; align-items:center; gap:40px; }.footer-brand { font-size:24px; }.footer-brand .brand-mark { transform:scale(.76); }.footer-brand+p { color:#95a3ad; font:italic 15px Georgia,serif; }.footer>div { margin-left:auto; display:flex; gap:25px; font-size:11px; color:#8f9ca5; }
@media (max-width:1000px) { .desktop-nav,.header-actions { display:none; }.mobile-menu { display:block; }.hero-media { left:28%; opacity:.62; }.hero-shade { background:linear-gradient(90deg,#061727 0%,rgba(6,23,39,.93) 48%,rgba(6,23,39,.4)); }.hero-copy { width:72%; }.hero-note { display:none; }.story-grid { grid-template-columns:1fr 1fr; }.story-3 { grid-column:1/-1; min-height:450px; }.coverage { gap:6vw; }.social-hub { grid-template-columns:1fr; gap:55px; }.contact-links { grid-template-columns:1fr; }.contact-links a { border-right:0; border-bottom:1px solid rgba(7,23,37,.25); } }
@media (max-width:680px) { .site-header { height:74px; padding:0 5vw; }.brand { font-size:23px; }.brand-mark { transform:scale(.82); margin-right:-3px; }.mobile-menu nav { top:74px; }.hero { min-height:850px; align-items:flex-start; }.hero-media { left:0; height:47%; opacity:.8; background-position:62% center; }.hero-shade { background:linear-gradient(0deg,#061727 45%,rgba(6,23,39,.08) 79%),linear-gradient(90deg,rgba(6,23,39,.35),transparent); }.hero-copy { width:100%; padding:330px 6vw 60px; }.hero h1 { font-size:60px; margin:23px 0; }.hero-lede { font-size:15px; }.hero-buttons { flex-direction:column; max-width:290px; margin-bottom:35px; }.hero-follow { align-items:flex-start; flex-direction:column; gap:6px; }.scroll { display:none; }.latest-line p { font-size:14px; }.section { padding:75px 5vw; }.section-heading { grid-template-columns:1fr; gap:20px; }.section-heading h2,.future h2,.coverage h2,.contact h2 { font-size:48px; }.story-grid { grid-template-columns:1fr; }.story-3 { grid-column:auto; }.coverage,.future { grid-template-columns:1fr; padding:75px 6vw; }.voices blockquote { font-size:45px; }.social-hub { padding:75px 5vw; }.social-intro h2 { font-size:46px; }.social-grid { grid-template-columns:1fr; }.social-card:last-child { grid-column:auto; }.social-card { min-height:118px; padding:20px; }.contact { padding:75px 5vw; }.contact h2 { font-size:43px; }.contact-links a { font-size:12px; }.future-copy { margin-top:-40px; } footer { flex-direction:column; align-items:flex-start; gap:12px; } footer>div { margin:20px 0 0; flex-wrap:wrap; } }