:root,[data-theme="light"]{
            --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
            --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
            --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
            --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
            --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
            --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
            --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
            --color-bg:#f7f5f0;--color-surface:#fcfbf8;--color-surface-2:#f2eee7;--color-border:rgba(31,32,36,.12);--color-text:#17181c;--color-text-muted:#676b76;--color-primary:#0c7c66;--color-primary-2:#f7a928;
            --shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 10px 30px rgba(0,0,0,.08);--shadow-lg:0 24px 60px rgba(0,0,0,.14);
            --radius-md:20px;--radius-lg:28px;--radius-xl:36px;
            --font-body:'Plus Jakarta Sans',system-ui,sans-serif;--font-display:'DM Serif Display',Georgia,serif;
        }
        [data-theme="dark"]{
            --color-bg:#0d1117;--color-surface:#131a22;--color-surface-2:#1a2330;--color-border:rgba(255,255,255,.1);--color-text:#f4f7fb;--color-text-muted:#9aa4b1;--color-primary:#18b28f;--color-primary-2:#ffb545;
            --shadow-sm:0 1px 2px rgba(0,0,0,.22);--shadow-md:0 10px 30px rgba(0,0,0,.28);--shadow-lg:0 24px 60px rgba(0,0,0,.4);
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html,body{max-width:100%;overflow-x:clip}
        body{
            font-family:var(--font-body);
            font-size:var(--text-base);
            line-height:1.6;
            color:var(--color-text);
            background:
                radial-gradient(circle at top left, rgba(24,178,143,.15), transparent 30%),
                radial-gradient(circle at top right, rgba(255,181,69,.12), transparent 24%),
                var(--color-bg);
        }
        img{display:block;max-width:100%;height:auto}
        a{text-decoration:none;color:inherit}
        .container{width:min(1200px,calc(100% - 24px));margin-inline:auto}
        .topbar{
            position:sticky;top:0;z-index:50;
            backdrop-filter:blur(16px);
            background:color-mix(in srgb,var(--color-bg) 80%, transparent);
            border-bottom:1px solid var(--color-border);
        }
        .nav{
            display:flex;align-items:center;justify-content:space-between;
            gap:var(--space-6);padding:18px 0;
        }
        .brand{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.02em}
        .logo{
            width:42px;height:42px;border-radius:14px;
            background:linear-gradient(135deg,var(--color-primary),var(--color-primary-2));
            display:grid;place-items:center;box-shadow:var(--shadow-md);color:#04110e;
        }
        .logo svg{width:24px;height:24px}
        .nav-links{display:flex;gap:20px;color:var(--color-text-muted);font-size:var(--text-sm);flex-wrap:wrap}
        .nav-links a:hover{color:var(--color-text)}
        .hero{padding:clamp(28px,5vw,52px) 0 var(--space-12)}
        .hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:stretch}
        .hero-card,.panel-card,.story-card{
            background:var(--color-surface);
            border:1px solid var(--color-border);
            box-shadow:var(--shadow-md);
        }
        .hero-card{border-radius:var(--radius-xl);padding:clamp(24px,4vw,48px)}
        .eyebrow{
            display:inline-flex;align-items:center;gap:8px;
            padding:8px 14px;border-radius:999px;
            background:color-mix(in srgb,var(--color-primary) 16%, var(--color-surface));
            color:var(--color-primary-2);font-size:var(--text-xs);
            font-weight:800;letter-spacing:.12em;text-transform:uppercase;
        }
        h1{
            font-family:var(--font-display);
            font-size:clamp(2.7rem,5vw,5.6rem);
            line-height:.94;max-width:10ch;margin-top:18px;
        }
        .hero-copy{max-width:60ch;color:var(--color-text-muted);margin-top:18px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
        .btn,.btn-ghost{
            min-height:46px;padding:0 18px;border-radius:999px;
            display:inline-flex;align-items:center;justify-content:center;
            border:1px solid var(--color-border);font-weight:700;
        }
        .btn{background:var(--color-primary);border-color:transparent;color:#071018}
        .btn-ghost{background:transparent}
        .panel-card{border-radius:var(--radius-xl);padding:22px}
        .panel-label{
            font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;
            color:var(--color-primary-2);font-weight:800;margin-bottom:10px;
        }
        .panel-list{display:grid;gap:12px}
        .panel-item{
            padding:14px 0;border-top:1px solid var(--color-border);
        }
        .panel-item:first-child{border-top:0;padding-top:0}
        .panel-item a{display:block}
        .panel-item strong{display:block;line-height:1.25}
        .panel-item span{display:block;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:4px}
        .section{padding:0 0 var(--space-16)}
        .section-head{
            display:flex;justify-content:space-between;align-items:end;gap:20px;
            margin-bottom:20px;flex-wrap:wrap;
        }
        .section-head h2{
            font-family:var(--font-display);
            font-size:var(--text-xl);
        }
        .section-head p{color:var(--color-text-muted);max-width:62ch}
        .lead-layout{
            display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
            gap:24px;align-items:start;
        }
        .story-card{border-radius:var(--radius-lg);overflow:hidden}
        .story-card__image{
            aspect-ratio:16/9;background:linear-gradient(135deg,#234a69,#111827);
            overflow:hidden;
        }
        .story-card__image img{width:100%;height:100%;object-fit:cover}
        .story-card__body{padding:22px}
        .story-card__meta{
            display:flex;gap:10px;flex-wrap:wrap;align-items:center;
            font-size:var(--text-xs);color:var(--color-text-muted);
            text-transform:uppercase;letter-spacing:.08em;font-weight:700;
        }
        .story-card__title{
            margin-top:10px;line-height:1.04;
            overflow-wrap:anywhere;
        }
        .story-card--lead .story-card__title{
            font-family:var(--font-display);
            font-size:clamp(2rem,1.4rem + 1.9vw,3.2rem);
        }
        .story-card--lead .story-card__excerpt{
            color:var(--color-text-muted);
            font-size:var(--text-lg);
            margin-top:14px;max-width:54ch;
        }
        .side-stack{display:grid;gap:18px}
        .story-card--compact .story-card__title{
            font-size:clamp(1.2rem,1rem + .8vw,1.7rem);
        }
        .story-card--compact .story-card__excerpt{
            color:var(--color-text-muted);
            margin-top:10px;
            font-size:var(--text-sm);
        }
        .stories-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:20px;
        }
        .story-card--grid .story-card__title{
            font-size:clamp(1.15rem,1rem + .5vw,1.45rem);
        }
        .story-card--grid .story-card__excerpt{
            color:var(--color-text-muted);
            font-size:var(--text-sm);
            margin-top:10px;
        }
        .empty-state{
            padding:28px;border-radius:var(--radius-lg);
            background:var(--color-surface);
            border:1px solid var(--color-border);
            color:var(--color-text-muted);
        }
        footer{padding:0 0 40px}
        .footer-card{
            background:var(--color-surface);
            border:1px solid var(--color-border);
            border-radius:30px;padding:24px;
            display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
        }
        .footer-links{display:flex;gap:16px;flex-wrap:wrap;color:var(--color-text-muted)}
        @media (max-width: 980px){
            .hero-grid,.lead-layout,.stories-grid{grid-template-columns:1fr}
        }
        @media (max-width: 760px){
            .nav{flex-direction:column;align-items:flex-start}
            h1{max-width:12ch}
        }