/* ============ Design Tokens ============ */
    :root {
      color-scheme: light;
      --background: oklch(0.992 0.002 106);
      --foreground: oklch(0.17 0.005 260);
      --card: oklch(1 0 0);
      --muted: oklch(0.965 0.003 106);
      --muted-2: oklch(0.94 0.003 106);
      --muted-foreground: oklch(0.5 0.008 260);
      --border: oklch(0.9 0.004 260);
      --energy: oklch(0.63 0.17 150);
      --energy-foreground: oklch(0.99 0.01 150);
      --electric: oklch(0.6 0.14 235);
      --navy: oklch(0.19 0.02 255);
      --navy-foreground: oklch(0.96 0.003 106);
      --navy-muted: oklch(0.28 0.02 255);
      --live: oklch(0.55 0.22 27);
      --radius: 0.3rem;
      --maxw: 1400px;
      --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --font-serif: 'Source Serif 4', ui-serif, Georgia, serif;
      --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    }

    /* ============ Reset ============ */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { background: var(--background); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      font-family: var(--font-sans);
      background: var(--background);
      color: var(--foreground);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: 'ss01', 'cv01';
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
    input { font: inherit; }
    ul, ol { list-style: none; padding: 0; }
    h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; }
    .serif { font-family: var(--font-serif); }
    .mono { font-family: var(--font-mono); }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ============ Layout ============ */
    .container { max-width: var(--maxw); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
    @media (min-width:640px){ .container { padding-left: 1rem; padding-right: 1rem; } }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* ============ Top utility bar ============ */
    .topbar { border-bottom: 1px solid var(--border); background: var(--navy); color: var(--navy-foreground); }
    .topbar-inner { display: flex; height: 2.25rem; align-items: center; justify-content: space-between; gap: 1rem; }
    .topbar-left { display: flex; align-items: center; gap: 1rem; font-size: 11px; font-weight: 500; color: color-mix(in oklch, var(--navy-foreground) 75%, transparent); }
    .topbar-left .cap { text-transform: capitalize; }
    .topbar-chip { display: none; align-items: center; gap: 0.375rem; }
    .dot-energy { width: 4px; height: 4px; border-radius: 999px; background: var(--energy); }
    .topbar-right { display: flex; align-items: center; gap: 0.375rem; }
    .topbar-socials { display: none; align-items: center; gap: 0.625rem; margin-right: 0.25rem; }
    .topbar-socials a { color: color-mix(in oklch, var(--navy-foreground) 70%, transparent); transition: color .2s; }
    .topbar-socials a:hover { color: var(--energy); }
    .vsep { width: 1px; height: 1rem; background: color-mix(in oklch, var(--navy-foreground) 20%, transparent); margin: 0 0.25rem; display: none; }
    .util-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklch, var(--navy-foreground) 80%, transparent); transition: color .2s; }
    .util-btn:hover { color: var(--energy); }
    .util-btn.hide-mobile { display: none; }
    .util-btn .lbl { display: none; }

    /* ============ Masthead ============ */
    .masthead { border-bottom: 1px solid var(--border); background: var(--background); }
    .masthead-inner { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
    .logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; }
    .logo-img { display: block; width: 100%; max-width: 430px; height: auto; }
    .logo.compact .logo-img { width: 9.5rem; max-width: 9.5rem; }
    .logo-tag { margin-top: 0.5rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: var(--muted-foreground); }
    .footer-logo { display: inline-block; text-decoration: none; }
    .footer-logo .logo-img { width: 12rem; max-width: 12rem; height: auto; }

    /* ============ Sticky nav ============ */
    .navbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 95%, transparent); backdrop-filter: blur(8px); transition: box-shadow .3s; }
    .navbar.scrolled { box-shadow: 0 2px 16px -6px rgba(0,0,0,0.3); }
    .navbar-inner { display: flex; height: 3.5rem; align-items: center; gap: 0.75rem; }
    .menu-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
    .nav-logo-mobile { flex-shrink: 0; opacity: 0; transition: opacity .3s; }
    .navbar.scrolled .nav-logo-mobile { opacity: 1; }
    .nav-logo-desktop { display: none; }
    .primary-nav { display: none; }
    .nav-search-mobile { margin-left: auto; padding: 0.5rem; display: inline-flex; }

    /* ============ Ticker ============ */
    .ticker { border-bottom: 1px solid var(--border); background: var(--foreground); color: var(--background); }
    .ticker-inner { display: flex; align-items: stretch; max-width: var(--maxw); margin: 0 auto; }
    .ticker-label { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; background: var(--live); padding: 0.625rem 0.75rem; }
    .ticker-pulse { position: relative; display: flex; width: 10px; height: 10px; }
    .ticker-pulse .ping { position: absolute; inline-size: 100%; block-size: 100%; border-radius: 999px; background: rgba(255,255,255,0.8); animation: ping 1.2s cubic-bezier(0,0,0.2,1) infinite; }
    .ticker-pulse .core { position: relative; width: 10px; height: 10px; border-radius: 999px; background: #fff; }
    .ticker-label span.txt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }
    .ticker-view { position: relative; flex: 1; overflow: hidden; }
    .ticker-track { display: flex; width: max-content; align-items: center; white-space: nowrap; padding: 0.625rem 0; animation: marquee 40s linear infinite; }
    .ticker-track:hover { animation-play-state: paused; }
    .ticker-track a { margin: 0 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; font-size: 14px; font-weight: 500; color: color-mix(in oklch, var(--background) 90%, transparent); transition: color .2s; }
    .ticker-track a:hover { color: var(--energy); }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }

    /* ============ Article cards ============ */
    .cat { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--energy); }
    .live-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 2px; background: var(--live); padding: 0.125rem 0.375rem; color: var(--energy-foreground); }
    .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 12px; color: var(--muted-foreground); }
    .meta-invert { color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .meta-author { font-weight: 500; }
    .meta-time { display: inline-flex; align-items: center; gap: 0.25rem; }

    .img-wrap { position: relative; width: 100%; overflow: hidden; }
    .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
    .ar-hero { aspect-ratio: 16/10; }
    .ar-16-9 { aspect-ratio: 16/9; }
    .ar-16-10 { aspect-ratio: 16/10; }
    .ar-16-11 { aspect-ratio: 16/11; }
    .ar-4-3 { aspect-ratio: 4/3; }
    @media (min-width:768px){ .ar-hero { aspect-ratio: 16/9; } }

    .card { display: block; }
    .group:hover .img-wrap img { transform: scale(1.05); }
    .group:hover .card-title { color: var(--energy); }
    .card-title { font-family: var(--font-serif); font-weight: 600; line-height: 1.3; color: var(--foreground); text-wrap: pretty; transition: color .2s; font-size: 1rem; }
    .card-title.invert { color: var(--navy-foreground); }
    .card-body { margin-top: 0.75rem; }
    .card-body.compact { margin-top: 0.625rem; }
    .card-excerpt { margin-top: 0.5rem; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
    .card-excerpt.invert { color: color-mix(in oklch, var(--navy-foreground) 70%, transparent); }
    .card-body .cat + .card-title, .card-title + * { margin-top: 0.375rem; }
    .t-lg { font-size: 1rem; }
    .t-xl { font-size: 1rem; }
    .t-compact { font-size: 1rem; }
    @media (min-width:640px){
      .t-lg { font-size: 1.125rem; }
      .t-xl { font-size: 1.5rem; }
    }
    @media (min-width:768px){ .t-xl { font-size: 1.7rem; } }

    /* hero variant */
    .hero-card { position: relative; isolation: isolate; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 55%, transparent); }
    .hero-content { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; }
    .hero-title { margin-top: 0.75rem; max-width: 56rem; font-family: var(--font-serif); font-weight: 700; line-height: 1.15; color: #fff; text-wrap: balance; font-size: 1rem; }
    .hero-excerpt { margin-top: 0.75rem; max-width: 42rem; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.8); text-wrap: pretty; }
    .hero-meta { margin-top: 1rem; }
    .hero-meta .meta { color: rgba(255,255,255,0.75); }
    @media (min-width:640px){ .hero-content { padding: 1.75rem; } .hero-title { font-size: 2.25rem; line-height: 1.08; } .hero-excerpt { font-size: 1rem; } }
    @media (min-width:768px){ .hero-content { padding: 2.25rem; } .hero-title { font-size: 3rem; } }
    @media (min-width:1024px){ .hero-title { font-size: 3.4rem; } }

    /* horizontal variant */
    .card-h { display: flex; gap: 1rem; }
    .card-h .img-wrap { width: 7rem; flex-shrink: 0; aspect-ratio: 4/3; }
    .card-h .h-body { min-width: 0; }
    .card-h .card-title { font-size: 1rem; margin-top: 0.375rem; }
    @media (min-width:640px){ .card-h .img-wrap { width: 8rem; } }

    /* ============ Hero grid ============ */
    .hero-grid { display: grid; gap: 1.5rem; padding: 1.5rem 0; }
    .hero-secondary { display: flex; flex-direction: column; }
    .hero-secondary > * { border-top: 1px solid var(--border); padding: 1.25rem 0; }
    .hero-secondary > *:first-child { border-top: none; padding-top: 0; }
    .hero-secondary > *:last-child { padding-bottom: 0; }
    @media (min-width:1024px){
      .hero-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2rem 0; }
      .hero-main { grid-column: span 2; }
    }

    /* ============ Now strip ============ */
    .now { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 50%, transparent); }
    .now-inner { display: flex; align-items: stretch; }
    .now-label { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; border-right: 1px solid var(--border); background: var(--energy); padding: 0 1rem; color: var(--energy-foreground); }
    .now-label span { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
    .now-items { display: flex; flex: 1; align-items: stretch; overflow-x: auto; }
    .now-items a { display: flex; min-width: 240px; flex: 1; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-left: 1px solid var(--border); transition: background .2s; }
    .now-items a:first-child { border-left: none; }
    .now-items a:hover { background: var(--background); }
    .now-items time { margin-top: 2px; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--energy); }
    .now-items .now-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.4; transition: color .2s; }
    .now-items a:hover .now-t { color: var(--energy); }

    /* ============ Markets ============ */
    .markets { background: var(--navy); color: var(--navy-foreground); }
    .markets-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem; }
    @media (min-width:640px){ .markets-inner { padding: 1.5rem 1rem; } }
    .markets-head { margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
    .markets-head .lead { display: flex; align-items: center; gap: 0.75rem; }
    .bar-energy { width: 6px; height: 1.25rem; background: var(--energy); }
    .markets-head h2 { font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; }
    .markets-live { display: flex; align-items: center; gap: 0.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .pulse-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--energy); animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
    @keyframes pulse { 50% { opacity: 0.4; } }
    .markets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border-radius: 2px; background: color-mix(in oklch, var(--navy-foreground) 10%, transparent); }
    .market-cell { display: flex; flex-direction: column; gap: 0.5rem; background: var(--navy); padding: 1rem; transition: background .2s; }
    .market-cell:hover { background: var(--navy-muted); }
    .market-cell .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
    .market-cell .m-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .market-cell .m-unit { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: color-mix(in oklch, var(--navy-foreground) 40%, transparent); }
    .market-cell .row2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
    .market-cell .m-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .market-cell .m-change { display: flex; align-items: center; gap: 0.25rem; font-size: 12px; font-weight: 600; }
    @media (min-width:640px){ .markets-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width:1024px){ .markets-grid { grid-template-columns: repeat(6, 1fr); } }

    /* ============ Ads ============ */
    .ad { width: 100%; }
    /* Temporary: hide all ad placeholders until GPT is re-enabled */
    .ad,
    .ad-strip,
    .infra-ad,
    .econ-ad,
    .mr-ad {
      display: none !important;
    }
    .ad-box { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed var(--border); background: color-mix(in oklch, var(--muted) 60%, transparent); }
    .ad-box .tag { position: absolute; left: 0.5rem; top: 0.5rem; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
    .ad-box .dim { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in oklch, var(--muted-foreground) 50%, transparent); }
    .ad-leaderboard .ad-box { min-height: 90px; }
    .ad-billboard .ad-box { min-height: 160px; }
    .ad-mpu .ad-box { aspect-ratio: 300/250; min-height: 250px; }
    .ad-skyscraper .ad-box { aspect-ratio: 300/600; min-height: 250px; }
    @media (min-width:640px){ .ad-leaderboard .ad-box { min-height: 110px; } .ad-billboard .ad-box { min-height: 220px; } }
    @media (min-width:768px){ .ad-billboard .ad-box { min-height: 250px; } }
    .ad-strip { padding: 1.25rem 0 1.75rem; }
    .ad-strip .ad { display: flex; justify-content: center; }
    .ad-strip .ad-box { width: 100%; max-width: 970px; }
    .ad.adLoaded .ad-box { border-style: solid; background: transparent; }
    .ad.adLoaded .ad-box .tag,
    .ad.adLoaded .ad-box .dim { display: none; }
    .ad-gpt { width: 100%; }
    .ad.adLoaded .ad-gpt { min-height: inherit; }

    /* ============ Section + header ============ */
    section[id] { scroll-margin-top: 4rem; }
    .sec { padding: 2.5rem 0; }
    .sec.bordered { border-top: 1px solid var(--border); }
    @media (min-width:640px){ .sec { padding: 3.5rem 0; } }
    .sec-head { margin-bottom: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--foreground); padding-bottom: 0.75rem; }
    .sec-head.invert { border-bottom-color: color-mix(in oklch, var(--navy-foreground) 20%, transparent); }
    .sec-head .lead { display: flex; align-items: baseline; gap: 0.75rem; }
    .sec-head .bar { width: 6px; height: 1.5rem; flex-shrink: 0; align-self: center; background: var(--energy); }
    .sec-head .kicker { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
    .sec-head.invert .kicker { color: var(--energy); }
    .sec-head h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    .sec-head.invert h2 { color: var(--navy-foreground); }
    .sec-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.25rem; padding-bottom: 0.25rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); transition: color .2s; }
    .sec-link:hover { color: var(--energy); }
    .sec-head.invert .sec-link { color: color-mix(in oklch, var(--navy-foreground) 70%, transparent); }
    .sec-head.invert .sec-link:hover { color: var(--energy); }
    @media (min-width:640px){ .sec-head h2 { font-size: 1.875rem; } }

    .grid { display: grid; }
    .divide-y > * { border-top: 1px solid var(--border); }
    .divide-y > *:first-child { border-top: none; }

    /* Energy section */
    .energy-top { display: grid; gap: 2rem; }
    .energy-side { display: flex; flex-direction: column; }
    .energy-side > * { border-top: 1px solid var(--border); padding: 1rem 0; }
    .energy-side > *:first-child { border-top: none; padding-top: 0; }
    .energy-side > *:last-child { padding-bottom: 0; }
    .energy-grid { margin-top: 2.5rem; display: grid; gap: 2rem; border-top: 1px solid var(--border); padding-top: 2rem; }
    @media (min-width:768px){ .energy-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width:1024px){
      .energy-top { grid-template-columns: repeat(12, 1fr); }
      .energy-lead { grid-column: span 7; }
      .energy-side { grid-column: span 5; }
    }

    /* Big feature */
    .feature { padding: 1rem 0; }
    .feature-link { position: relative; display: block; }
    .feature-img { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4/5; }
    .feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease-out; }
    .feature-link:hover .feature-img img { transform: scale(1.05); }
    .feature-grad1 { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy), color-mix(in oklch, var(--navy) 40%, transparent) 50%, transparent); }
    .feature-grad2 { position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklch, var(--navy) 70%, transparent), transparent 50%); }
    .feature-body { position: absolute; inset: 0; display: flex; align-items: flex-end; }
    .feature-body .inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 1.5rem 2rem; }
    @media (min-width:640px){ .feature-body .inner { padding-left: 1rem; padding-right: 1rem; } }
    .feature-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--energy); }
    .feature-kicker .line { height: 1px; width: 2rem; background: var(--energy); }
    .feature-title { margin-top: 1rem; max-width: 48rem; font-family: var(--font-serif); font-weight: 700; line-height: 1.05; color: #fff; text-wrap: balance; font-size: 1rem; }
    .feature-excerpt { margin-top: 1rem; max-width: 42rem; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.8); text-wrap: pretty; }
    .feature-cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; transition: color .2s; }
    .feature-link:hover .feature-cta { color: var(--energy); }
    @media (min-width:640px){ .feature-img { aspect-ratio: 16/9; } .feature-title { font-size: 3rem; } .feature-excerpt { font-size: 1.125rem; } .feature-body .inner { padding-bottom: 3rem; } }
    @media (min-width:1024px){ .feature-img { aspect-ratio: 21/9; } .feature-title { font-size: 3.75rem; } .feature-body .inner { padding-bottom: 4rem; } }

    /* Infrastructure */
    .infra { display: grid; gap: 2rem; }
    .infra-aside { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding-top: 1rem; }
    .infra-aside > *:not(.infra-ad) { border-top: 1px solid var(--border); padding: 1rem 0; }
    .infra-aside > *:not(.infra-ad):first-child { border-top: none; padding-top: 0; }
    .infra-ad { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border); }
    .infra-ad .ad-mpu .ad-box { max-width: 300px; margin-inline: auto; }
    @media (min-width:1024px){
      .infra { grid-template-columns: repeat(12, 1fr); }
      .infra-main { grid-column: span 8; }
      .infra-aside { grid-column: span 4; border-top: none; padding-top: 0; border-left: 1px solid var(--border); padding-left: 1.5rem; }
    }

    /* Economy */
    .econ { display: grid; gap: 2rem; }
    .econ-list { display: flex; flex-direction: column; }
    .econ-list > * { border-top: 1px solid var(--border); padding: 1rem 0; }
    .econ-list > *:first-child { border-top: none; padding-top: 0; }
    .econ-list > *:last-child { padding-bottom: 0; }
    .econ-ad { display: flex; justify-content: center; }
    .econ-ad .ad-box { max-width: 300px; width: 100%; }
    @media (min-width:1024px){
      .econ { grid-template-columns: repeat(12, 1fr); align-items: start; }
      .econ-lead { grid-column: span 6; }
      .econ-list { grid-column: span 4; }
      .econ-ad { grid-column: span 2; position: sticky; top: 5.5rem; }
    }
    @media (max-width:1023px){
      .econ-ad .ad-skyscraper .ad-box { aspect-ratio: 300/250; }
    }

    /* Most read block */
    .mostread-block { border-top: 1px solid var(--border); padding: 2.5rem 0; }
    @media (min-width:640px){ .mostread-block { padding: 3.5rem 0; } }
    .mostread-grid { display: grid; gap: 2.5rem; }
    @media (min-width:1024px){ .mostread-grid { grid-template-columns: repeat(12, 1fr); } .mr-main { grid-column: span 8; } .mr-aside { grid-column: span 4; } }
    .mr-ad { margin-top: 0.5rem; }
    .mr-ad .ad-mpu .ad-box { max-width: 300px; margin-inline: auto; }
    .mr-head { margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 2px solid var(--foreground); padding-bottom: 0.75rem; }
    .mr-head .bar { width: 6px; height: 1.5rem; align-self: center; background: var(--energy); }
    .mr-head h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    .mr-tabs { margin-bottom: 0.5rem; display: flex; gap: 0.25rem; border-radius: 2px; background: var(--muted); padding: 0.25rem; }
    .mr-tabs button { flex: 1; border-radius: 2px; padding: 0.375rem 0.75rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-foreground); transition: all .2s; }
    .mr-tabs button.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
    .mr-list > li { border-top: 1px solid var(--border); }
    .mr-list > li:first-child { border-top: none; }
    .mr-list a { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; }
    .mr-rank { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; line-height: 1; color: color-mix(in oklch, var(--energy) 70%, transparent); font-variant-numeric: tabular-nums; transition: color .2s; }
    .mr-list a:hover .mr-rank { color: var(--energy); }
    .mr-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
    .mr-title { margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.4; text-wrap: pretty; transition: color .2s; }
    .mr-list a:hover .mr-title { color: var(--energy); }
    .sponsored-label { margin-bottom: 0.75rem; display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
    .native-card { display: block; border: 1px solid var(--border); }
    .native-card .img-wrap { aspect-ratio: 16/9; }
    .native-body { padding: 1rem; }
    .native-body .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--energy); }
    .native-body h3 { margin-top: 0.375rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; transition: color .2s; }
    @media (min-width:640px){ .native-body h3 { font-size: 1.125rem; } }
    .native-card:hover h3 { color: var(--energy); }
    .aside-stack { display: flex; flex-direction: column; gap: 2rem; }

    /* Real estate */
    .cards-3 { display: grid; gap: 2rem; }
    @media (min-width:768px){ .cards-3 { grid-template-columns: repeat(3, 1fr); } }
    .cards-4 { display: grid; gap: 2rem; }
    @media (min-width:768px){ .cards-4 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width:1024px){ .cards-4 { grid-template-columns: repeat(4, 1fr); } }

    /* Environment */
    .env-grid { display: grid; gap: 2rem; }
    @media (min-width:1024px){ .env-grid { grid-template-columns: repeat(2, 1fr); } }
    .env-feature { position: relative; display: block; }
    .env-feature .img-wrap { aspect-ratio: 16/11; }
    .env-feature .ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 55%, transparent); }
    .env-feature .fc { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; }
    .env-feature .cat { color: var(--energy); }
    .env-feature h3 { margin-top: 0.5rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.25; color: #fff; text-wrap: balance; }
    .env-feature p { margin-top: 0.5rem; max-width: 36rem; font-size: 14px; color: rgba(255,255,255,0.8); text-wrap: pretty; }
    .env-list { display: flex; flex-direction: column; justify-content: center; }
    .env-list > * { border-top: 1px solid var(--border); padding: 1.25rem 0; }
    .env-list > *:first-child { border-top: none; padding-top: 0; }
    .env-list > *:last-child { padding-bottom: 0; }
    @media (min-width:640px){ .env-feature .fc { padding: 1.75rem; } .env-feature h3 { font-size: 1.875rem; } }

    /* Digital (navy) */
    .navy-sec { background: var(--navy); color: var(--navy-foreground); }

    /* My property */
    .prop { display: grid; gap: 2rem; }
    .prop-guides { display: grid; gap: 1rem; }
    .prop-guide { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1rem; transition: border-color .2s; }
    .prop-guide:hover { border-color: var(--energy); }
    .prop-guide .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--energy); }
    .prop-guide h3 { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; transition: color .2s; }
    @media (min-width:640px){ .prop-guide h3 { font-size: 1.125rem; } }
    .prop-guide:hover h3 { color: var(--energy); }
    .prop-arrow { display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); transition: all .2s; }
    .prop-guide:hover .prop-arrow { border-color: var(--energy); color: var(--energy); }
    @media (min-width:1024px){ .prop { grid-template-columns: repeat(12, 1fr); } .prop-lead { grid-column: span 6; } .prop-guides { grid-column: span 6; } }

    /* Interview */
    .interview { display: grid; align-items: stretch; overflow: hidden; border: 1px solid var(--border); }
    .interview .img-wrap { aspect-ratio: 4/3; }
    .interview-body { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--card); padding: 1.5rem; }
    .interview-quote-mark { position: absolute; right: 1.5rem; top: 1rem; font-family: var(--font-serif); font-size: 6rem; line-height: 1; color: color-mix(in oklch, var(--energy) 15%, transparent); }
    .interview-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--energy); }
    .interview blockquote { margin-top: 1rem; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }
    .interview-person { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
    .interview-person .n { font-weight: 600; }
    .interview-person .r { font-size: 14px; color: var(--muted-foreground); }
    .interview-cta { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: color .2s; }
    .interview:hover .interview-cta { color: var(--energy); }
    @media (min-width:768px){ .interview { grid-template-columns: repeat(2, 1fr); } .interview .img-wrap { aspect-ratio: auto; height: 100%; } .interview-body { padding: 2.5rem; } .interview blockquote { font-size: 1.875rem; } .interview-quote-mark { font-size: 8rem; } }

    /* Opinion */
    .opinion-grid { display: grid; gap: 1px; overflow: hidden; background: color-mix(in oklch, var(--navy-foreground) 12%, transparent); }
    .opinion-card { display: flex; flex-direction: column; gap: 1rem; background: var(--navy); padding: 1.5rem; transition: background .2s; }
    .opinion-card:hover { background: var(--navy-muted); }
    .opinion-author { display: flex; align-items: center; gap: 0.75rem; }
    .opinion-avatar { position: relative; width: 3rem; height: 3rem; overflow: hidden; border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--energy) 40%, transparent); }
    .opinion-author .n { font-size: 14px; font-weight: 600; color: var(--navy-foreground); }
    .opinion-author .r { font-size: 12px; color: var(--energy); }
    .opinion-mark { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; color: color-mix(in oklch, var(--energy) 50%, transparent); }
    .opinion-card h3 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--navy-foreground); text-wrap: pretty; transition: color .2s; }
    .opinion-card:hover h3 { color: var(--energy); }
    @media (min-width:640px){ .opinion-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width:1024px){ .opinion-grid { grid-template-columns: repeat(4, 1fr); } }

    /* Insight */
    .insight { background: var(--navy); color: var(--navy-foreground); padding: 3rem 0; }
    @media (min-width:640px){ .insight { padding: 4rem 0; } }
    .insight-head { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.25rem; border-bottom: 1px solid color-mix(in oklch, var(--navy-foreground) 15%, transparent); padding-bottom: 1.25rem; }
    .insight-head .k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--energy); }
    .insight-head h2 { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; }
    @media (min-width:640px){ .insight-head h2 { font-size: 2.25rem; } }
    .insight-grid { display: grid; gap: 2.5rem; }
    @media (min-width:1024px){ .insight-grid { grid-template-columns: repeat(2, 1fr); } }
    .insight h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; }
    .insight .sub { margin-top: 0.25rem; font-size: 14px; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .mix-bar { margin-top: 1.25rem; display: flex; height: 1rem; width: 100%; overflow: hidden; border-radius: 999px; }
    .mix-legend { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    @media (min-width:640px){ .mix-legend { grid-template-columns: repeat(3, 1fr); } }
    .mix-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; }
    .mix-legend .swatch { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
    .mix-legend .lbl { color: color-mix(in oklch, var(--navy-foreground) 80%, transparent); }
    .mix-legend .val { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
    .bars { margin-top: 1.5rem; display: flex; height: 12rem; align-items: flex-end; gap: 0.75rem; }
    .bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.5rem; }
    .bar-fill { width: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(to top, color-mix(in oklch, var(--energy) 40%, transparent), var(--energy)); }
    .bar-col .yr { font-family: var(--font-mono); font-size: 12px; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .insight-articles { margin-top: 2.5rem; display: grid; gap: 1px; overflow: hidden; border-top: 1px solid color-mix(in oklch, var(--navy-foreground) 15%, transparent); }
    @media (min-width:640px){ .insight-articles { grid-template-columns: repeat(3, 1fr); } }
    .insight-article { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.5rem 1.5rem 0; }
    @media (min-width:640px){ .insight-article { border-left: 1px solid color-mix(in oklch, var(--navy-foreground) 15%, transparent); padding-left: 1.5rem; } .insight-article:first-child { border-left: none; padding-left: 0; } }
    .insight-article .m { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--energy); }
    .insight-article h4 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; transition: color .2s; }
    .insight-article:hover h4 { color: var(--energy); }
    .insight-article .go { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); transition: color .2s; }
    .insight-article:hover .go { color: var(--energy); }

    /* Newsletter */
    .newsletter { background: var(--navy); color: var(--navy-foreground); scroll-margin-top: 4rem; }
    .newsletter-inner { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem; }
    .newsletter-grid { max-width: 64rem; margin: 0 auto; display: grid; align-items: center; gap: 2rem; }
    @media (min-width:768px){ .newsletter-grid { grid-template-columns: repeat(2, 1fr); } .newsletter-inner { padding: 5rem 1rem; } }
    .nl-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--energy); }
    .nl-title { margin-top: 1rem; font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; line-height: 1.2; text-wrap: balance; }
    @media (min-width:640px){ .nl-title { font-size: 2.25rem; } }
    .nl-desc { margin-top: 0.75rem; max-width: 28rem; color: color-mix(in oklch, var(--navy-foreground) 70%, transparent); text-wrap: pretty; }
    .nl-form { display: flex; flex-direction: column; gap: 1rem; }
    .nl-row { display: flex; flex-direction: column; gap: 0.75rem; }
    .nl-row input[type=email] { width: 100%; border: 1px solid color-mix(in oklch, var(--navy-foreground) 20%, transparent); background: color-mix(in oklch, var(--navy-muted) 40%, transparent); padding: 0.75rem 1rem; color: var(--navy-foreground); outline: none; transition: border-color .2s; }
    .nl-row input[type=email]::placeholder { color: color-mix(in oklch, var(--navy-foreground) 40%, transparent); }
    .nl-row input[type=email]:focus { border-color: var(--energy); }
    .nl-submit { flex-shrink: 0; background: var(--energy); padding: 0.75rem 1.5rem; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--energy-foreground); transition: opacity .2s; }
    .nl-submit:hover { opacity: 0.9; }
    .nl-consent { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 12px; color: color-mix(in oklch, var(--navy-foreground) 60%, transparent); }
    .nl-consent input { margin-top: 2px; width: 1rem; height: 1rem; accent-color: var(--energy); }
    .nl-success { display: flex; align-items: center; gap: 0.75rem; border: 1px solid color-mix(in oklch, var(--energy) 40%, transparent); background: color-mix(in oklch, var(--energy) 10%, transparent); padding: 1.5rem; }
    .nl-success .ic { display: flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--energy); color: var(--energy-foreground); }
    .nl-success .t { font-weight: 600; }
    .nl-success .s { font-size: 14px; color: color-mix(in oklch, var(--navy-foreground) 70%, transparent); }
    @media (min-width:640px){ .nl-row { flex-direction: row; } }

    /* Single post content */
    .single-main { padding-top: 2.5rem; }
    @media (max-width: 780px) {
      .post { padding: 0 1rem; }
    }
    .single-wrap { max-width: 48rem; margin-inline: auto; padding-bottom: 3rem; }
    .single-header { margin-bottom: 1.5rem; }
    .single-title {
      font-family: var(--font-serif);
      font-size: 1rem;
      line-height: 1.25;
      margin: 0.5rem 0 1rem;
      font-weight: 700;
    }
    @media (min-width:640px){
      .single-title { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; }
    }
    .single-meta { font-size: 13px; color: var(--muted-foreground); }
    .single-thumb { margin-bottom: 1.5rem; }
    .single-thumb img { width: 100%; height: auto; }
    .entry-content { font-size: 1.0625rem; line-height: 1.7; }
    .entry-content p,
    .entry-content ul,
    .entry-content ol,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
      margin-bottom: 1.25rem;
    }
    .entry-content ul,
    .entry-content ol {
      padding-left: 1.5rem;
      list-style: revert;
    }
    .entry-content li + li {
      margin-top: 0.35rem;
    }
    .entry-content h2,
    .entry-content h3,
    .entry-content h4 {
      margin-top: 1.75rem;
      font-family: var(--font-serif);
      line-height: 1.25;
    }
    .single-also { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
    .single-related-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      margin-bottom: 1.25rem;
      color: var(--muted-foreground);
    }
    .single-also-list { display: flex; flex-direction: column; gap: 0; }
    .single-also-list > * { border-top: 1px solid var(--border); padding: 1rem 0; }
    .single-also-list > *:first-child { border-top: none; padding-top: 0; }
    .single-recommended { margin-top: 0; }
    .single-recommended-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: 1fr;
    }
    @media (min-width:640px){
      .single-recommended-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width:1024px){
      .single-recommended-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
    }

    /* Footer */
    .footer { background: var(--foreground); color: var(--background); }
    .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem; }
    @media (min-width:640px){ .footer-inner { padding: 4rem 1rem; } }
    .footer-grid { display: grid; gap: 2.5rem; }
    @media (min-width:1024px){ .footer-grid { grid-template-columns: repeat(12, 1fr); } .fc-brand { grid-column: span 4; } .fc-3 { grid-column: span 3; } .fc-2 { grid-column: span 2; } }
    .footer-logo { display: inline-block; text-decoration: none; }
    .footer-logo .logo-img { width: 12rem; max-width: 12rem; height: auto; }
    .footer-desc { margin-top: 1rem; max-width: 20rem; font-size: 14px; line-height: 1.6; color: color-mix(in oklch, var(--background) 60%, transparent); text-wrap: pretty; }
    .footer-socials { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
    .footer-socials a { color: color-mix(in oklch, var(--background) 60%, transparent); transition: color .2s; }
    .footer-socials a:hover { color: var(--energy); }
    .footer h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in oklch, var(--background) 50%, transparent); }
    .footer-links { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
    .footer-links a { font-size: 14px; color: color-mix(in oklch, var(--background) 80%, transparent); transition: color .2s; }
    .footer-links a:hover { color: var(--energy); }
    .footer-bottom { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; border-top: 1px solid color-mix(in oklch, var(--background) 15%, transparent); padding-top: 1.5rem; font-size: 12px; color: color-mix(in oklch, var(--background) 50%, transparent); }
    @media (min-width:640px){ .footer-bottom { flex-direction: row; } }

    /* Back to top */
    .back-top { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--navy); color: var(--navy-foreground); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); transition: all .3s; opacity: 0; transform: translateY(1rem); pointer-events: none; }
    .back-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .back-top:hover { background: var(--energy); color: var(--energy-foreground); }

    /* Modal / drawer */
    .overlay { position: fixed; inset: 0; background: color-mix(in oklch, var(--navy) 70%, transparent); backdrop-filter: blur(4px); }
    .search-modal { position: fixed; inset: 0; z-index: 70; display: none; }
    .search-modal.open { display: block; }
    .search-panel { position: absolute; inset-inline: 0; top: 0; background: var(--background); padding: 1.25rem; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    .search-inner { max-width: 48rem; margin: 0 auto; }
    .search-topline { display: flex; align-items: center; justify-content: space-between; }
    .search-topline .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
    .search-close { padding: 0.25rem; color: var(--muted-foreground); }
    .search-close:hover { color: var(--foreground); }
    .search-field { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 2px solid var(--foreground); padding-bottom: 0.75rem; }
    .search-field input { width: 100%; background: transparent; border: none; outline: none; font-family: var(--font-serif); font-size: 1.25rem; }
    .search-field input::placeholder { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); }
    .search-tags { margin-top: 1.25rem; }
    .search-tags .h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
    .search-tags .chips { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .search-tags .chips button { border: 1px solid var(--border); border-radius: 2px; padding: 0.375rem 0.75rem; font-size: 14px; transition: all .2s; }
    .search-tags .chips button:hover { border-color: var(--energy); color: var(--energy); }
    @media (min-width:640px){ .search-panel { padding: 2rem; } .search-field input { font-size: 1.5rem; } }

    .drawer { position: fixed; inset: 0; z-index: 70; display: none; }
    .drawer.open { display: block; }
    .drawer-panel { position: absolute; inset-block: 0; left: 0; display: flex; width: 85%; max-width: 24rem; flex-direction: column; background: var(--background); box-shadow: 0 0 40px rgba(0,0,0,0.3); }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 1rem; }
    .drawer-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
    .drawer-nav a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); padding: 0.875rem 1rem; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; transition: all .2s; }
    .drawer-nav a:hover { background: var(--muted); color: var(--energy); }
    .drawer-foot { border-top: 1px solid var(--border); padding: 1rem; }
    .drawer-foot .socials { display: flex; align-items: center; gap: 1rem; }
    .drawer-foot .socials a { color: var(--muted-foreground); transition: color .2s; }
    .drawer-foot .socials a:hover { color: var(--energy); }
    .icon-muted { color: var(--muted-foreground); }

    /* Responsive helpers */
    @media (min-width:640px){
      .topbar-chip { display: inline-flex; }
      .topbar-socials { display: flex; }
      .vsep { display: block; }
      .util-btn.hide-mobile { display: inline-flex; }
      .util-btn .lbl { display: inline; }
    }
    @media (min-width:768px){ .topbar-chip.md { display: inline-flex; } }
    @media (min-width:1024px){
      .logo-img { width: 100%; max-width: 430px; }
    }
    @media (min-width:640px){ .masthead-inner { padding: 2rem 1rem; } .logo.compact .logo-img { width: 10.5rem; max-width: 10.5rem; } }

    /* sticky nav logo reveal on scroll */
    .navbar.scrolled .nav-logo-mobile { opacity: 1; }