/*
Theme Name: Kabar Arunika
Theme URI: http://arunika.local
Author: Arunika
Description: Custom WordPress theme for Kabar Arunika.
Version: 1.0.0
Text Domain: arunika
*/

:root {
      --ink: #17232b;
      --muted: #697982;
      --paper: #f4f6f8;
      --surface: #fff;
      --line: #e3e9ec;
      --brand: #087e76;
      --brand-dark: #05645e;
      --brand-soft: #e0f3f0;
      --hot: #e55b43;
      --shadow: 0 12px 34px rgba(27, 48, 56, .08);
      --radius: 18px;
      --max: 1160px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
    .topline { background: #142b32; color: #d8e5e7; font-size: .78rem; }
    .topline-inner { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    .topline-label { display: flex; align-items: center; gap: 8px; }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #5dd8a2; box-shadow: 0 0 0 4px rgba(93,216,162,.14); }
    #liveDate { color: #fff; font-variant-numeric: tabular-nums; }
    .masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
    .masthead-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--brand); color: white; font-family: Georgia, serif; font-size: 1.85rem; font-weight: 700; letter-spacing: -4px; padding-right: 4px; }
    .brand-name { display: block; font: 800 1.45rem/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.7px; }
    .brand-tagline { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
    .search-form { position: relative; width: min(290px, 30vw); }
    .search-form input { width: 100%; height: 43px; padding: 0 44px 0 16px; border: 1px solid var(--line); border-radius: 999px; outline: none; background: #f8fafb; color: var(--ink); transition: border .2s, box-shadow .2s; }
    .search-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,126,118,.12); }
    .search-form button { position: absolute; right: 5px; top: 5px; width: 33px; height: 33px; border: 0; border-radius: 50%; color: var(--brand-dark); background: var(--brand-soft); display: grid; place-items: center; }
    .search-form svg { width: 16px; height: 16px; }
    .nav-wrap { background: var(--surface); border-bottom: 1px solid var(--line); }
    .nav-inner { min-height: 54px; display: flex; align-items: center; justify-content: space-between; }
    .nav-links { display: flex; align-items: stretch; gap: 30px; height: 54px; }
    .nav-links a { display: inline-flex; align-items: center; position: relative; color: #4c5c63; font-size: .86rem; font-weight: 650; transition: color .2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--brand-dark); }
    .nav-links a.active::after { content: ""; position: absolute; height: 3px; left: 0; right: 0; bottom: 0; background: var(--brand); border-radius: 3px 3px 0 0; }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .dashboard-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border: 1px solid #cfe3df; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: .72rem; font-weight: 800; transition: .2s; }
    .dashboard-link:hover { color: white; border-color: var(--brand); background: var(--brand); }
    .edition { color: var(--muted); font-size: .78rem; }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); }
    .menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; border-radius: 2px; transition: transform .2s; }
    .ticker { position: relative; margin: 20px 0 24px; min-height: 48px; padding: 7px 14px 7px 8px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid #f0d9d4; border-radius: 12px; color: #53636a; background: linear-gradient(100deg, #fff8f6, #fff 74%); font-size: .78rem; }
    .ticker-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; background: #fff0ed; color: #bd4935; border-radius: 8px; font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .ticker-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 4px rgba(229,91,67,.12); animation: tickerPulse 1.8s infinite; }
    .ticker-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .2s, transform .2s; }
    .ticker-text.changing { opacity: 0; transform: translateY(5px); }
    @keyframes tickerPulse { 50% { box-shadow: 0 0 0 7px rgba(229,91,67,0); } }
    .hero { position: relative; min-height: 440px; overflow: hidden; border-radius: 22px; background: #26434a; box-shadow: var(--shadow); }
    .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,29,35,.86) 0%, rgba(11,29,35,.56) 43%, rgba(11,29,35,.05) 100%), linear-gradient(0deg, rgba(11,29,35,.22), transparent 55%); }
    .hero-content { position: relative; z-index: 1; width: min(620px, 70%); min-height: 440px; padding: 54px 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: white; }
    .category { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 5px; background: var(--brand); color: white; font-size: .68rem; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .hero h1 { max-width: 590px; margin: 18px 0 12px; font: 750 clamp(2rem, 4.4vw, 3.35rem)/1.07 Georgia, "Times New Roman", serif; letter-spacing: -1.6px; }
    .hero p { max-width: 520px; margin: 0; color: rgba(255,255,255,.84); font-size: 1rem; }
    .byline { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: rgba(255,255,255,.78); font-size: .76rem; }
    .byline-dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }
    .hero-link { position: absolute; inset: 0; z-index: 2; }
    .sponsor-banner { position: relative; margin-top: 24px; padding: 17px 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; overflow: hidden; border: 1px solid #d9e9e5; border-radius: 16px; background: linear-gradient(105deg, #edf8f4, #fff 68%); }
    .sponsor-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
    .sponsor-copy { display: flex; align-items: center; gap: 15px; }
    .sponsor-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.3rem; }
    .sponsor-label { display: block; color: #6f8386; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .sponsor-copy h2 { margin: 2px 0 2px; font: 700 1.03rem/1.3 Georgia, serif; }
    .sponsor-copy p { margin: 0; color: var(--muted); font-size: .76rem; }
    .sponsor-cta { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 10px 14px; border: 1px solid #c7e2db; border-radius: 9px; color: var(--brand-dark); background: rgba(255,255,255,.8); font-size: .75rem; font-weight: 800; transition: .2s; }
    .sponsor-cta:hover { color: white; border-color: var(--brand); background: var(--brand); }
    .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 5px; color: #fff; font-size: .59rem; line-height: 1; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
    .badge-editor { background: #cb7040; }
    .badge-trending { background: #df5945; }
    .badge-deal { color: #155a42; background: #c9f0d9; }
    .story-badge { position: absolute; top: 13px; right: 13px; z-index: 1; box-shadow: 0 3px 12px rgba(18,39,42,.14); }
    .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 52px 0 22px; }
    .eyebrow { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    .section-heading h2 { margin: 5px 0 0; font: 750 1.8rem/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.6px; }
    .section-note { color: var(--muted); font-size: .82rem; }
    .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; align-items: start; }
    .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .news-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
    .news-card:hover { transform: translateY(-5px); border-color: #d4e1e2; box-shadow: var(--shadow); }
    .card-image-wrap { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #dce6e8; }
    .card-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .news-card:hover .card-image { transform: scale(1.045); }
    .card-image-wrap .category { position: absolute; left: 13px; bottom: 13px; }
    .card-body { padding: 17px 17px 18px; }
    .meta { display: flex; gap: 8px; align-items: center; color: #849198; font-size: .69rem; }
    .meta-dot { width: 3px; height: 3px; background: #a6b0b5; border-radius: 50%; }
    .news-card h3 { margin: 10px 0 8px; font: 730 1.1rem/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.25px; }
    .news-card p { min-height: 3.1em; margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.55; }
    .read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--brand-dark); font-size: .75rem; font-weight: 750; }
    .read-more span { transition: transform .2s; }
    .news-card:hover .read-more span { transform: translateX(3px); }
    .sidebar { display: grid; gap: 22px; }
    .side-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
    .side-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
    .side-title h2 { margin: 0; font: 750 1.2rem Georgia, "Times New Roman", serif; }
    .side-title span { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
    .trending-list { margin: 0; padding: 0; list-style: none; counter-reset: trend; }
    .trending-list li { counter-increment: trend; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #edf0f1; }
    .trending-list li:last-child { padding-bottom: 0; border-bottom: 0; }
    .trending-list li::before { content: counter(trend, decimal-leading-zero); color: #9cabad; font: 700 1.15rem Georgia, serif; }
    .trend-category { display: block; margin: -2px 0 4px; color: var(--brand); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .trend-link { font: 700 .91rem/1.3 Georgia, "Times New Roman", serif; transition: color .2s; }
    .trend-link:hover { color: var(--brand-dark); }
    .trend-views { display: block; margin-top: 5px; color: #93a0a5; font-size: .67rem; }
    .weather-card { position: relative; overflow: hidden; padding: 22px; border-radius: var(--radius); color: white; background: linear-gradient(135deg, #126f75, #1d9b8d); }
    .weather-card::after { content: ""; position: absolute; width: 140px; height: 140px; right: -46px; top: -48px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255,255,255,.06), 0 0 0 36px rgba(255,255,255,.04); }
    .weather-label { color: rgba(255,255,255,.75); font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .weather-main { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
    .weather-icon { font-size: 2.25rem; line-height: 1; }
    .temperature { font: 700 2rem/1 Georgia, serif; }
    .weather-desc { margin-top: 4px; color: rgba(255,255,255,.83); font-size: .75rem; }
    .weather-place { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); font-size: .76rem; }
    .affiliate-panel { padding: 20px; border: 1px solid #d9e9e5; border-radius: var(--radius); background: linear-gradient(155deg, #f1faf7, #fff 75%); }
    .affiliate-panel .side-title { border-color: #e1ece8; }
    .affiliate-panel .side-title span { color: #67877c; font-size: .58rem; }
    .affiliate-disclosure { margin: 10px 0 13px; color: #85938f; font-size: .65rem; line-height: 1.4; }
    .product-list { display: grid; gap: 10px; }
    .product-card { display: grid; grid-template-columns: 72px 1fr; gap: 11px; align-items: center; padding: 9px; border: 1px solid #e7efec; border-radius: 12px; background: rgba(255,255,255,.88); transition: transform .2s, box-shadow .2s; }
    .product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27,48,56,.07); }
    .product-card img { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; background: #e5eeea; }
    .product-name { display: block; font: 700 .82rem/1.25 Georgia, serif; }
    .product-maker { display: block; margin-top: 3px; color: #82908e; font-size: .65rem; }
    .product-price { display: block; margin-top: 5px; color: var(--brand-dark); font-size: .73rem; font-weight: 850; }
    .product-link { display: inline-flex; margin-top: 5px; color: var(--brand-dark); font-size: .65rem; font-weight: 800; }
    .inline-affiliate { grid-column: 1 / -1; padding: 19px; border: 1px solid #d9e9e5; border-radius: var(--radius); background: linear-gradient(115deg, #edf8f4, #fff 82%); }
    .inline-affiliate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .inline-affiliate-head h3 { margin: 3px 0 0; font: 750 1.12rem Georgia, serif; }
    .affiliate-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .affiliate-products .product-card { grid-template-columns: 66px 1fr; }
    .affiliate-products .product-card img { width: 66px; height: 66px; }
    .affiliate-disclosure-inline { margin: 9px 0 0; color: #85938f; font-size: .62rem; }
    .agenda-list { margin: 0; padding: 0; list-style: none; }
    .agenda-item { display: grid; grid-template-columns: 44px 1fr; gap: 11px; padding: 13px 0; border-bottom: 1px solid #edf0f1; }
    .agenda-item:last-child { padding-bottom: 0; border-bottom: 0; }
    .agenda-date { padding: 6px 4px; align-self: start; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); text-align: center; font-size: .58rem; font-weight: 850; line-height: 1.2; text-transform: uppercase; }
    .agenda-date strong { display: block; font-size: 1.05rem; }
    .agenda-name { display: block; font: 700 .85rem/1.25 Georgia, serif; }
    .agenda-place { display: block; margin-top: 4px; color: var(--muted); font-size: .67rem; }
    .review-feature { margin-top: 48px; display: grid; grid-template-columns: minmax(250px, .85fr) 1.15fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(27,48,56,.045); }
    .review-photo { min-height: 330px; width: 100%; height: 100%; object-fit: cover; background: #dce6e8; }
    .review-content { padding: 30px clamp(22px, 4vw, 44px); }
    .review-label { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--brand); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .review-label .badge { letter-spacing: .05em; }
    .review-content h2 { margin: 12px 0 10px; font: 750 clamp(1.55rem, 2.5vw, 2.2rem)/1.13 Georgia, serif; letter-spacing: -.65px; }
    .review-content > p { margin: 0 0 12px; color: #596a71; font-size: .88rem; }
    .review-note { margin: 15px 0 18px; padding: 11px 13px; border-left: 3px solid #d9a36b; border-radius: 0 8px 8px 0; color: #71604c; background: #fff8ef; font-size: .72rem; }
    .review-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .shopee-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border: 1px solid #db5c37; border-radius: 9px; color: #fff; background: #e96943; font-size: .78rem; font-weight: 850; transition: transform .18s, background .18s, box-shadow .18s; }
    .shopee-cta:hover { transform: translateY(-2px); background: #d95532; box-shadow: 0 7px 18px rgba(217,85,50,.2); }
    .review-cta-row small { color: #849198; font-size: .67rem; }
    .empty-state { grid-column: 1 / -1; padding: 34px 20px; border: 1px dashed #cbd6d9; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.65); text-align: center; }
    .empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); font: 700 1.1rem Georgia, serif; }
    .newsletter-band { margin-top: 60px; padding: 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: 22px; color: white; background: #18373c; }
    .newsletter-copy { max-width: 480px; }
    .newsletter-copy .eyebrow { color: #72d5c6; }
    .newsletter-copy h2 { margin: 7px 0 6px; font: 750 1.65rem/1.15 Georgia, serif; }
    .newsletter-copy p { margin: 0; color: #bfd0d1; font-size: .83rem; }
    .newsletter-form { display: flex; flex-wrap: wrap; width: min(440px, 48%); gap: 8px; }
    .newsletter-form input { flex: 1; min-width: 0; height: 46px; padding: 0 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; outline: none; color: white; background: rgba(255,255,255,.09); }
    .newsletter-form input::placeholder { color: #b1c4c5; }
    .newsletter-form input:focus { border-color: #72d5c6; }
    .newsletter-form button { padding: 0 17px; border: 0; border-radius: 9px; color: #123438; background: #83e1d0; font-size: .8rem; font-weight: 800; transition: background .2s; }
    .newsletter-form button:hover { background: white; }
    .form-message { flex-basis: 100%; min-height: 1.2em; margin: 0; color: #9ee8db; font-size: .74rem; }
    .site-footer { margin-top: 54px; background: #fff; border-top: 1px solid var(--line); }
    .footer-main { padding: 38px 0 30px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
    .footer-brand { max-width: 300px; }
    .footer-brand .brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 1.5rem; }
    .footer-brand .brand-name { font-size: 1.2rem; }
    .footer-brand p { margin: 14px 0 0; color: var(--muted); font-size: .79rem; }
    .footer-links { display: flex; gap: 52px; }
    .footer-column h3 { margin: 0 0 13px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
    .footer-column a { display: block; margin: 8px 0; color: var(--muted); font-size: .77rem; transition: color .2s; }
    .footer-column a:hover { color: var(--brand-dark); }
    .socials { display: flex; gap: 8px; margin-top: 16px; }
    .socials a { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #5c6c72; font-size: .65rem; font-weight: 800; transition: .2s; }
    .socials a:hover { color: white; border-color: var(--brand); background: var(--brand); }
    .footer-bottom { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); color: #89969b; font-size: .7rem; }
    .footer-bottom-links { display: flex; gap: 18px; }
    .footer-bottom a:hover { color: var(--brand-dark); }
    .toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; padding: 12px 18px; border-radius: 999px; color: white; background: #17373b; box-shadow: var(--shadow); font-size: .82rem; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .2s, transform .2s; }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }
    @media (max-width: 980px) {
      .nav-links { gap: 20px; }
      .content-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
      .news-grid { gap: 14px; }
      .card-body { padding: 14px; }
      .news-card h3 { font-size: 1rem; }
      .side-panel { padding: 18px; }
    }
    @media (max-width: 760px) {
      .container { width: min(100% - 30px, var(--max)); }
      .topline-inner { min-height: 33px; }
      .topline-label span:last-child { display: none; }
      .masthead-inner { min-height: 76px; }
      .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
      .brand-name { font-size: 1.25rem; }
      .brand-tagline { font-size: .6rem; }
      .search-form { width: 43px; }
      .search-form input { position: absolute; top: 52px; right: 0; z-index: 5; width: min(290px, calc(100vw - 30px)); display: none; box-shadow: var(--shadow); }
      .search-form.open input { display: block; }
      .search-form button { position: relative; inset: auto; width: 40px; height: 40px; border: 1px solid var(--line); background: white; }
      .nav-inner { position: relative; min-height: 56px; justify-content: flex-end; }
      .nav-actions { width: 100%; justify-content: flex-end; }
      .edition { display: none; }
      .dashboard-link { min-height: 40px; padding-inline: 11px; }
      .menu-toggle { display: block; order: 2; margin-left: 4px; }
      .nav-links { position: absolute; top: 55px; left: -15px; right: -15px; z-index: 6; height: auto; display: none; padding: 8px 15px 14px; border-bottom: 1px solid var(--line); background: white; box-shadow: 0 12px 18px rgba(24,45,52,.08); }
      .nav-links.open { display: grid; gap: 0; }
      .nav-links a { min-height: 45px; border-bottom: 1px solid #f0f2f3; }
      .nav-links a:last-child { border-bottom: 0; }
      .nav-links a.active::after { left: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 3px; }
      .ticker { margin: 16px 0 18px; }
      .sponsor-banner { padding: 15px; grid-template-columns: 1fr; gap: 12px; }
      .sponsor-cta { justify-self: start; margin-left: 58px; }
      .hero, .hero-content { min-height: 390px; }
      .hero-content { width: 90%; padding: 35px 28px; }
      .hero::after { background: linear-gradient(90deg, rgba(11,29,35,.78), rgba(11,29,35,.18)), linear-gradient(0deg, rgba(11,29,35,.45), transparent 70%); }
      .hero h1 { font-size: clamp(2rem, 7vw, 2.7rem); }
      .section-heading { margin-top: 40px; }
      .content-layout { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .trending-panel { grid-row: span 2; }
      .inline-affiliate { padding: 15px; }
      .review-feature { grid-template-columns: 1fr; }
      .review-photo { min-height: 230px; max-height: 290px; }
      .affiliate-products { grid-template-columns: 1fr; }
      .newsletter-band { margin-top: 42px; padding: 28px; align-items: flex-start; flex-direction: column; }
      .newsletter-form { width: 100%; }
      .footer-main { flex-direction: column; gap: 30px; }
      .footer-links { width: 100%; justify-content: space-between; gap: 20px; }
    }
    @media (max-width: 500px) {
      .edition { font-size: .7rem; }
      .hero, .hero-content { min-height: 420px; }
      .ticker { gap: 8px; padding-right: 9px; font-size: .7rem; }
      .ticker-label { padding: 7px 8px; font-size: .58rem; }
      .sponsor-copy { align-items: flex-start; }
      .sponsor-copy h2 { font-size: .96rem; }
      .sponsor-cta { margin-left: 0; }
      .hero-content { width: 100%; padding: 30px 22px; }
      .hero h1 { font-size: 2.12rem; letter-spacing: -.8px; }
      .hero p { font-size: .88rem; }
      .section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
      .section-heading h2 { font-size: 1.6rem; }
      .news-grid { grid-template-columns: 1fr; gap: 15px; }
      .card-image-wrap { aspect-ratio: 16 / 9; }
      .card-body { padding: 16px; }
      .news-card h3 { font-size: 1.15rem; }
      .news-card p { min-height: 0; }
      .sidebar { grid-template-columns: 1fr; }
      .trending-panel { grid-row: auto; }
      .newsletter-band { padding: 24px 20px; }
      .newsletter-copy h2 { font-size: 1.45rem; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form button { height: 44px; }
      .footer-links { display: grid; grid-template-columns: 1fr 1fr; }
      .footer-bottom { padding: 14px 0; align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }