/* ===================================================================
   UKEcho News — stylesheet  (NewsPortal-style: clean, light, boxed)
   =================================================================== */

:root{
    --ink:        #0f1729;
    --ink-soft:   #5b6472;
    --ink-faint:  #8b94a3;
    --bg:         #f4f5f7;
    --card:       #ffffff;
    --line:       #e6e8ec;
    --line-soft:  #eef0f3;
    --red:        #e0252a;
    --red-dark:   #b91d22;
    --navy:       #0f1729;
    --maxw:       1180px;
    --radius:     10px;
    --shadow:     0 1px 3px rgba(15,23,41,.06), 0 4px 16px rgba(15,23,41,.05);
    --sans:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }
body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    font-size:15px;
    overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.site-main{ min-height:50vh; padding-bottom:10px; }

.progress-bar{
    position:fixed; top:0; left:0; height:3px; width:0;
    background:var(--red); z-index:300; transition:width .1s linear;
}

.flash{
    font-size:.92rem; font-weight:600;
    border-bottom:1px solid rgba(15,23,41,.06);
    animation:flash-in .4s ease-out;
}
.flash .wrap{
    padding:14px 20px;
    display:flex; align-items:center; gap:9px;
}
.flash .wrap::before{
    font-weight:800; font-size:1rem; flex-shrink:0;
}
.flash--success{ background:#e7f6ec; color:#1c7a3e; }
.flash--success .wrap::before{ content:"\2713"; }   /* check mark */
.flash--error{ background:#fdecec; color:#b91d22; }
.flash--error .wrap::before{ content:"\26A0"; }     /* warning sign */
@keyframes flash-in{
    from{ opacity:0; transform:translateY(-8px); }
    to{   opacity:1; transform:translateY(0); }
}

/* ---- TICKER ------------------------------------------------------- */
.ticker{ background:var(--red); color:#fff; }
.ticker__inner{ display:flex; align-items:center; height:38px; }
.ticker__label{
    font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    font-size:.72rem; display:flex; align-items:center; gap:7px;
    padding-right:18px; flex-shrink:0;
}
.ticker__label::before{
    content:""; width:7px; height:7px; border-radius:50%; background:#fff;
    animation:pulse 1.6s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.ticker__viewport{ overflow:hidden; flex:1; }
.ticker__track{
    display:flex; align-items:center; white-space:nowrap; gap:12px;
    animation:ticker 40s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ font-size:.82rem; font-weight:500; }
.ticker__item:hover{ text-decoration:underline; }
.ticker__sep{ opacity:.45; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- MASTHEAD ----------------------------------------------------- */
.masthead{ background:var(--card); }
.masthead__top{ background:var(--navy); color:#c5cbd6; }
.masthead__top-inner{
    display:flex; justify-content:space-between; align-items:center;
    height:34px; font-size:.76rem;
}
.masthead__date{ display:flex; align-items:center; gap:7px; }
.masthead__account{ display:flex; align-items:center; gap:16px; }
.masthead__account a{ font-weight:500; }
.masthead__account a:hover{ color:#fff; }
.masthead__cta{
    background:var(--red); color:#fff !important; padding:5px 13px;
    border-radius:5px; font-weight:600;
}
.masthead__cta:hover{ background:var(--red-dark); }
.masthead__hello{ color:#fff; }

.masthead__brand{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    gap:26px; padding:18px 0;
}
.logo{ display:flex; align-items:center; gap:11px; }
.logo__icon{
    width:40px; height:40px; border-radius:9px; background:var(--red);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; flex-shrink:0;
}
.logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.logo__mark{ font-weight:800; font-size:1.5rem; letter-spacing:-.02em; }
.logo__tag{ font-size:.72rem; color:var(--ink-faint); font-weight:500; }
.logo img{ max-height:46px; }

.masthead__search{
    display:flex; align-items:center; background:var(--bg);
    border:1px solid var(--line); border-radius:30px; overflow:hidden;
    width:100%; max-width:420px; justify-self:center;
}
.masthead__search input{
    border:0; padding:10px 18px; font-family:var(--sans); font-size:.88rem;
    flex:1; background:transparent; outline:none;
}
.masthead__search button{
    border:0; background:var(--red); color:#fff; width:38px; height:38px;
    border-radius:50%; cursor:pointer; font-size:.95rem; margin-right:3px;
    flex-shrink:0;
}
.masthead__search button:hover{ background:var(--red-dark); }

.nav-toggle{
    display:none; flex-direction:column; gap:5px; background:none;
    border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ---- MAIN NAVIGATION --------------------------------------------- */
/* The bar spans the full window width (not capped to --maxw) so all
   menu items sit on ONE centred line. If items ever exceed the window
   width (tablets / many items) the bar scrolls horizontally instead of
   wrapping. On phones it collapses to the hamburger menu (see @680). */
.mainnav{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;            /* Firefox: hide scrollbar */
}
.mainnav::-webkit-scrollbar{ display:none; }   /* Chrome/Safari */

.mainnav__inner{
    display:flex;
    flex-wrap:nowrap;                /* never wrap to a second line */
    align-items:center;
    justify-content:center;          /* centred when it fits */
    width:max-content;               /* shrink-to-fit the links... */
    min-width:100%;                  /* ...but never narrower than the bar */
    max-width:none;                  /* override .wrap's 1180px cap if present */
    margin:0 auto;
    padding:0 12px;
}
.mainnav__link{
    flex:0 0 auto;
    font-weight:600; font-size:.82rem; padding:11px 11px;
    border-bottom:2px solid transparent; transition:.15s; color:var(--ink-soft);
    white-space:nowrap;
}
.mainnav__link:hover,.mainnav__link.is-active{
    color:var(--ink); border-bottom-color:var(--cat,var(--red));
}

/* ---- LAYOUT ------------------------------------------------------- */
.layout-2col{
    display:grid; grid-template-columns:1fr 340px; gap:30px;
    padding:26px 20px;
}
.layout-2col__side{ display:flex; flex-direction:column; gap:22px; }

/* ---- HERO --------------------------------------------------------- */
.hero{ padding:26px 0 4px; }
.hero__grid{ display:grid; grid-template-columns:1fr 360px; gap:24px; }
.hero__lead{
    background:var(--card); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow);
}
.hero__media{ position:relative; display:block; }
.hero__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.hero__cat,.card__cat{
    position:absolute; top:14px; left:14px;
    background:var(--cat,var(--red)); color:#fff;
    text-transform:uppercase; font-weight:700; font-size:.68rem;
    letter-spacing:.05em; padding:5px 11px; border-radius:4px;
}
.hero__text{ padding:20px 22px 24px; }
.hero__title{
    font-weight:800; line-height:1.22; font-size:1.65rem;
    letter-spacing:-.02em; margin-bottom:9px;
}
.hero__title a:hover{ color:var(--red); }
.hero__excerpt{ font-size:.95rem; color:var(--ink-soft); margin-bottom:14px; }
.hero__meta,.card__meta{
    font-size:.78rem; color:var(--ink-faint); display:flex; gap:7px;
    align-items:center; flex-wrap:wrap;
}
.hero__meta .by,.card__meta .by{ color:var(--red); font-weight:600; }
.hero__side{
    background:var(--card); border-radius:var(--radius); padding:6px 16px;
    box-shadow:var(--shadow); display:flex; flex-direction:column;
}

.side-item{
    display:grid; grid-template-columns:74px 1fr; gap:13px;
    padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.side-item:last-child{ border-bottom:0; }
.side-item__media{ border-radius:6px; overflow:hidden; }
.side-item__media img{ width:74px; height:62px; object-fit:cover; }
.side-item__kicker{
    text-transform:uppercase; font-weight:700; font-size:.66rem;
    letter-spacing:.05em; color:var(--cat,var(--red));
}
.side-item__title{
    font-weight:700; font-size:.88rem; line-height:1.32; margin:3px 0 4px;
}
.side-item__title a:hover{ color:var(--red); }
.side-item__time{ font-size:.72rem; color:var(--ink-faint); }

/* ---- TRENDING ----------------------------------------------------- */
.trending{ background:var(--navy); color:#fff; border-radius:var(--radius);
    margin:18px 0 4px; }
.trending__inner{
    display:flex; align-items:center; gap:18px; padding:12px 20px;
    overflow:hidden;
}
.trending__label{
    text-transform:uppercase; font-weight:800; letter-spacing:.05em;
    color:var(--red); flex-shrink:0; font-size:.74rem;
}
.trending__list{ display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; }
.trending__list::-webkit-scrollbar{ display:none; }
.trending__item{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.trending__num{ font-weight:800; color:rgba(255,255,255,.25); font-size:1rem; }
.trending__title{
    font-size:.82rem; white-space:nowrap; max-width:230px;
    overflow:hidden; text-overflow:ellipsis; color:#dfe3ea;
}
.trending__item:hover .trending__title{ color:#fff; }

/* ---- SECTION BLOCKS ---------------------------------------------- */
.block{ margin-bottom:32px; }
.block__head{
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:2px solid var(--line); margin-bottom:18px;
}
.block__title{
    font-weight:800; font-size:1.15rem; letter-spacing:-.01em;
    padding-bottom:10px; border-bottom:2px solid var(--cat,var(--red));
    margin-bottom:-2px; display:flex; align-items:center; gap:8px;
}
.block__title::before{
    content:""; width:9px; height:9px; border-radius:50%;
    background:var(--cat,var(--red));
}
.block__more{
    text-transform:uppercase; font-weight:700; font-size:.72rem;
    letter-spacing:.04em; color:var(--ink-faint); padding-bottom:10px;
}
.block__more:hover{ color:var(--red); }

/* ---- CARDS -------------------------------------------------------- */
.card{
    background:var(--card); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s;
}
.card:hover{ transform:translateY(-3px);
    box-shadow:0 6px 22px rgba(15,23,41,.1); }
.card__media{ position:relative; display:block; }
.card__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__flag{
    position:absolute; top:12px; right:12px; background:var(--red);
    color:#fff; text-transform:uppercase; font-weight:700; font-size:.62rem;
    padding:4px 8px; border-radius:4px; letter-spacing:.04em;
}
.card__body{ padding:15px 16px 17px; }
.card__kicker{
    text-transform:uppercase; font-weight:700; font-size:.66rem;
    letter-spacing:.05em; color:var(--cat,var(--red));
}
.card__title{
    font-weight:700; line-height:1.3; font-size:1rem;
    margin:7px 0 7px; letter-spacing:-.01em;
}
.card__title a:hover{ color:var(--red); }
.card__excerpt{ font-size:.86rem; color:var(--ink-soft); margin-bottom:10px; }
.card__meta .by{ color:var(--red); font-weight:600; }

.card--wide{ grid-column:1 / -1; }
.card--wide .card__media img{ aspect-ratio:16/8.2; }
.card--wide .card__title{ font-size:1.4rem; }
.card--wide .card__excerpt{ font-size:.95rem; }
.card--wide .card__body{ padding:18px 20px 20px; }

.card--compact{
    display:grid; grid-template-columns:120px 1fr; gap:0;
    box-shadow:var(--shadow);
}
.card--compact .card__media img{ height:100%; aspect-ratio:auto;
    min-height:104px; }
.card--compact .card__body{ padding:13px 15px; }
.card--compact .card__title{ font-size:.92rem; margin-top:4px; }
.card--compact .card__cat{ display:none; }

.card--minimal{
    box-shadow:none; background:transparent;
    border-bottom:1px solid var(--line-soft);
    border-radius:0; padding-bottom:13px; margin-bottom:13px;
}
.card--minimal:hover{ transform:none; box-shadow:none; }
.card--minimal:last-child{ border-bottom:0; margin-bottom:0; }
.card--minimal .card__title{ font-size:.92rem; margin:0 0 5px; }

.latest-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cat-lead{ margin-bottom:20px; }
.cat-lead .card--compact{ grid-template-columns:230px 1fr; }
.cat-lead .card__title{ font-size:1.2rem; }

/* ---- SIDEBAR WIDGETS --------------------------------------------- */
.widget{
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px;
}
.widget__title{
    font-weight:800; font-size:.95rem; margin-bottom:14px;
    padding-bottom:9px; border-bottom:2px solid var(--line);
    display:flex; align-items:center; gap:8px;
}
.widget__title::before{
    content:""; width:4px; height:15px; border-radius:2px; background:var(--red);
}
.mostread{ list-style:none; }
.mostread__item{
    display:flex; gap:12px; padding:11px 0;
    border-bottom:1px solid var(--line-soft); align-items:flex-start;
}
.mostread__item:last-child{ border-bottom:0; padding-bottom:0; }
.mostread__item:first-child{ padding-top:0; }
.mostread__num{
    font-weight:800; font-size:1.3rem; color:var(--line);
    line-height:1; min-width:26px;
}
.mostread__link{ font-weight:700; font-size:.86rem; line-height:1.32; }
.mostread__link:hover{ color:var(--red); }
.mostread__views{ font-size:.72rem; color:var(--ink-faint); margin-top:3px; }

.widget--newsletter{
    background:linear-gradient(150deg,var(--red),var(--red-dark)); color:#fff;
}
.widget--newsletter .widget__title{ color:#fff;
    border-bottom-color:rgba(255,255,255,.25); }
.widget--newsletter .widget__title::before{ background:#fff; }
.widget__lead{ font-size:.86rem; color:rgba(255,255,255,.9);
    margin-bottom:13px; }
.widget-news-form{ display:flex; flex-direction:column; gap:9px; }
.widget-news-form input{
    padding:11px 13px; border:0; border-radius:6px;
    font-family:var(--sans); font-size:.86rem;
}
.widget-news-form button{
    padding:11px; border:0; border-radius:6px; background:var(--navy);
    color:#fff; font-weight:700; cursor:pointer; font-size:.85rem;
}
.widget-news-form button:hover{ background:#000; }
.widget__fineprint{ font-size:.72rem; color:rgba(255,255,255,.7);
    margin-top:8px; }

/* Inline newsletter result message (shown after AJAX subscribe).
   Both the sidebar widget and the footer band sit on a red ground,
   so the note uses a translucent white panel that reads on red. */
.news-note{
    margin-top:11px; padding:10px 13px; border-radius:6px;
    font-size:.84rem; font-weight:600; line-height:1.45;
    animation:flash-in .35s ease-out;
}
.news-note--ok{
    background:rgba(255,255,255,.95); color:#1c7a3e;
}
.news-note--err{
    background:rgba(255,255,255,.95); color:#b91d22;
}

.topics{ display:flex; flex-wrap:wrap; gap:8px; }
.topic-pill{
    font-weight:600; font-size:.76rem; padding:6px 13px;
    border:1.5px solid var(--cat,var(--line)); color:var(--cat,var(--ink-soft));
    border-radius:30px; transition:.15s;
}
.topic-pill:hover{ background:var(--cat,var(--red)); color:#fff; }

/* ---- PODCAST BAND ------------------------------------------------- */
.podcast-band{ background:var(--navy); color:#fff; padding:34px 0;
    margin-top:8px; }
.podcast-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.podcast-card{
    display:flex; gap:13px; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09); border-radius:8px;
    padding:16px; align-items:center;
}
.podcast-card__play{
    width:42px; height:42px; border-radius:50%; background:var(--red);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:.8rem;
}
.podcast-card h3{ font-size:.95rem; margin-bottom:3px; }
.podcast-card p{ font-size:.8rem; color:#9aa3b2; }

/* ---- FOOTER ------------------------------------------------------- */
.footer-band{ background:var(--red); color:#fff; }
.footer-band__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:28px; padding:26px 20px; flex-wrap:wrap;
}
.footer-band__text h3{ font-size:1.35rem; font-weight:800; }
.footer-band__text p{ color:rgba(255,255,255,.85); font-size:.88rem; }
.footer-band__form{ display:flex; gap:9px; flex:1; min-width:280px;
    max-width:430px; }
.footer-band__form input{
    flex:1; border:0; border-radius:6px; padding:12px 14px;
    font-family:var(--sans); font-size:.88rem;
}
.footer-band__form button{
    border:0; border-radius:6px; background:var(--navy); color:#fff;
    padding:12px 22px; font-weight:700; cursor:pointer; font-size:.86rem;
}
.footer-band__form button:hover{ background:#000; }

.site-footer{ background:var(--navy); color:#9aa3b2; }
.footer-main{
    display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:34px;
    padding:42px 20px 32px;
}
.footer-logo{ display:flex; align-items:center; gap:10px;
    color:#fff; margin-bottom:13px; }
.footer-logo .logo__icon{ width:34px; height:34px; font-size:1rem; }
.footer-logo span{ font-weight:800; font-size:1.25rem; }
.footer-about{ font-size:.86rem; line-height:1.7; margin-bottom:15px; }
.footer-social{ display:flex; gap:9px; }
.footer-social a{
    width:34px; height:34px; border-radius:7px;
    background:rgba(255,255,255,.07); display:flex; align-items:center;
    justify-content:center; font-size:.7rem; font-weight:700; color:#c5cbd6;
}
.footer-social a:hover{ background:var(--red); color:#fff; }
.footer-col h4{
    color:#fff; font-size:.82rem; text-transform:uppercase;
    letter-spacing:.05em; margin-bottom:14px; display:flex;
    align-items:center; gap:7px;
}
.footer-col h4::before{ content:""; width:14px; height:2px; background:var(--red); }
.footer-col ul{ list-style:none; }
.footer-col li{ padding:5px 0; font-size:.85rem; }
.footer-col li::before{ content:"\203A"; margin-right:7px; color:var(--ink-faint); }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:9px; }
.footer-contact li::before{ content:none; }
.footer-stats{ display:flex; gap:10px; margin-top:14px; }
.footer-stat{
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    border-radius:7px; padding:11px 16px; text-align:center; flex:1;
}
.footer-stat strong{ display:block; color:#fff; font-size:1.15rem;
    font-weight:800; }
.footer-stat span{ font-size:.7rem; }
.footer-legal{ border-top:1px solid rgba(255,255,255,.08); }
.footer-legal__inner{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 20px; font-size:.8rem; flex-wrap:wrap; gap:10px;
}
.footer-legal nav{ display:flex; gap:18px; }
.footer-legal a:hover{ color:#fff; }

/* ---- BUTTONS / NOTICES ------------------------------------------- */
.btn{
    display:inline-block; font-weight:700; font-size:.85rem;
    padding:11px 24px; border-radius:7px; cursor:pointer;
    border:1.5px solid var(--ink); transition:.15s;
}
.btn--primary{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--block{ width:100%; text-align:center; }

.notice{ padding:12px 15px; border-radius:7px; margin-bottom:16px;
    font-size:.88rem; border:1px solid; }
.notice--ok{ background:#e7f6ec; border-color:#bfe3cc; color:#1c7a3e; }
.notice--err{ background:#fdecec; border-color:#f3c9c9; color:#b91d22; }
.notice ul{ margin-left:1.1rem; }

.empty-note{ text-align:center; padding:54px 20px; color:var(--ink-faint);
    font-size:1rem; }

/* ---- GENERIC PAGE HEAD ------------------------------------------- */
.page-head{ background:var(--card); border-bottom:1px solid var(--line);
    padding:30px 0; margin-bottom:24px; }
.page-head--dark{ background:var(--navy); border-bottom:0; }
.page-head--dark .page-head__title{ color:#fff; }
.page-head--dark .page-head__sub{ color:#9aa3b2; }
.page-head__eyebrow{ text-transform:uppercase; letter-spacing:.07em;
    color:var(--red); font-weight:700; font-size:.76rem; }
.page-head__title{ font-weight:800; font-size:1.9rem; letter-spacing:-.02em; }
.page-head__sub{ color:var(--ink-soft); margin-top:4px; font-size:.95rem; }

/* ---- ARTICLE PAGE ------------------------------------------------- */
.post{ padding-bottom:10px; }
/* Article hero: boxed to the content width with rounded corners + soft
   shadow so it matches the site's card aesthetic instead of stretching
   edge-to-edge across the whole screen. */
.post__hero{
    position:relative;
    max-width:var(--maxw);
    width:calc(100% - 40px);
    margin:26px auto 4px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.post__hero-img img{ width:100%; height:430px; object-fit:cover; }
.post__hero-overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end;
    background:linear-gradient(to top,rgba(15,23,41,.93),rgba(15,23,41,.35) 55%,transparent);
    padding-bottom:32px; color:#fff;
}
.post__cat{
    display:inline-block; background:var(--cat,var(--red)); color:#fff;
    text-transform:uppercase; font-weight:700; letter-spacing:.05em;
    font-size:.72rem; padding:5px 12px; border-radius:4px; margin-bottom:12px;
}
.post__title{ font-weight:800; font-size:2.1rem; line-height:1.18;
    letter-spacing:-.02em; max-width:880px; }
.post__standfirst{ font-size:1.05rem; color:#dfe3ea; margin-top:11px;
    max-width:740px; }
.post__byline{ font-size:.8rem; margin-top:13px; display:flex; gap:8px;
    flex-wrap:wrap; color:#aab2bf; }
.post__dept{ color:#fff; font-weight:700; }

.post__video{ position:relative; padding-bottom:56.25%; margin-bottom:22px;
    border-radius:var(--radius); overflow:hidden; }
.post__video iframe{ position:absolute; inset:0; width:100%; height:100%;
    border:0; }

.post__main-card{
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:26px 30px;
}
.post__share{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding-bottom:16px; border-bottom:1px solid var(--line);
    margin-bottom:20px;
}
.post__share-label{ font-weight:700; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.04em; }
.post__share a,.post__copy{
    font-weight:600; font-size:.74rem; padding:6px 12px; border-radius:5px;
    border:1px solid var(--line); background:var(--card); cursor:pointer;
}
.post__share a:hover,.post__copy:hover{ background:var(--ink); color:#fff;
    border-color:var(--ink); }

.article-body{ font-size:1.05rem; line-height:1.8; color:#283040; }
.article-body p{ margin-bottom:1.15rem; }
.article-body h2{ font-weight:800; font-size:1.4rem; margin:1.7rem 0 .8rem;
    letter-spacing:-.01em; }
.article-body h3{ font-weight:700; font-size:1.18rem; margin:1.4rem 0 .6rem; }
.article-body a{ color:var(--red); text-decoration:underline;
    text-underline-offset:2px; }
.article-body a.kw-link{ text-decoration:none;
    border-bottom:1px dotted var(--red); }
.article-body ul,.article-body ol{ margin:0 0 1.15rem 1.35rem; }
.article-body li{ margin-bottom:.4rem; }
.article-body blockquote{
    border-left:3px solid var(--red); padding:.3rem 0 .3rem 1.2rem;
    margin:1.4rem 0; font-style:italic; color:var(--ink-soft);
    font-size:1.15rem;
}
.article-body img{ margin:1.4rem 0; width:100%; border-radius:8px; }

.post__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.tag-pill{ font-weight:600; font-size:.76rem; padding:6px 12px;
    background:var(--bg); border:1px solid var(--line); border-radius:30px; }
.tag-pill:hover{ background:var(--red); color:#fff; border-color:var(--red); }

.post__resources{
    background:var(--bg); border:1px solid var(--line);
    border-left:4px solid var(--red); border-radius:8px;
    padding:17px 20px; margin:24px 0;
}
.post__resources h3{ font-weight:800; font-size:.95rem; margin-bottom:10px;
    text-transform:uppercase; letter-spacing:.04em; }
.post__resources ul{ list-style:none; }
.post__resources li{ padding:6px 0; border-bottom:1px dashed var(--line);
    font-size:.9rem; }
.post__resources li:last-child{ border-bottom:0; }
.post__resources a{ color:var(--red); font-weight:600; }
.post__resources span{ color:var(--ink-soft); }

.post__dept-card{
    background:var(--navy); color:#fff; padding:20px 22px;
    border-radius:8px; margin:24px 0;
}
.post__dept-card-label{ text-transform:uppercase; letter-spacing:.06em;
    font-size:.72rem; color:var(--red); font-weight:700; }
.post__dept-card strong{ display:block; font-size:1.2rem; margin:3px 0 6px; }
.post__dept-card p{ color:#9aa3b2; font-size:.86rem; }

.post__nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px;
    margin:24px 0; }
.post__nav-link{ border:1px solid var(--line); border-radius:8px;
    padding:14px 16px; background:var(--card); }
.post__nav-link:hover{ border-color:var(--red); }
.post__nav-link span{ text-transform:uppercase; font-size:.7rem;
    color:var(--red); font-weight:700; }
.post__nav-link strong{ display:block; font-size:.92rem; margin-top:4px; }
.post__nav-link--next{ text-align:right; }

.comments{ margin-top:26px; padding-top:22px; border-top:2px solid var(--line); }
.comments__title{ font-weight:800; font-size:1.3rem; margin-bottom:16px; }
.comments__title span{ color:var(--ink-faint); font-weight:500; }
.comments__login,.comments__empty{ color:var(--ink-soft); background:var(--bg);
    padding:13px 16px; border-radius:7px; font-size:.9rem; }
.comments__login a{ color:var(--red); font-weight:600; }
.comment-form{ margin-bottom:22px; }
.comment-form textarea{
    width:100%; border:1px solid var(--line); border-radius:7px;
    padding:12px; font-family:var(--sans); font-size:.95rem;
    margin-bottom:11px; resize:vertical;
}
.comment-list{ list-style:none; }
.comment{ display:flex; gap:13px; padding:16px 0;
    border-bottom:1px solid var(--line-soft); }
.comment__avatar{
    width:40px; height:40px; flex-shrink:0; border-radius:50%;
    background:var(--red); color:#fff; display:flex; align-items:center;
    justify-content:center; font-weight:700; font-size:1.05rem;
}
.comment__head{ display:flex; gap:9px; align-items:baseline; margin-bottom:3px; }
.comment__head span{ font-size:.76rem; color:var(--ink-faint); }
.comment__body p{ font-size:.92rem; color:var(--ink-soft); }

/* ---- CATEGORY PAGE ------------------------------------------------ */
.cat-hero{ background:var(--navy); color:#fff; padding:36px 0;
    border-bottom:4px solid var(--cat,var(--red)); margin-bottom:26px; }
.cat-hero__eyebrow{ text-transform:uppercase; letter-spacing:.08em;
    color:var(--cat,var(--red)); font-weight:700; font-size:.76rem; }
.cat-hero__title{ font-weight:800; font-size:2.2rem; letter-spacing:-.02em; }
.cat-hero__desc{ color:#9aa3b2; margin-top:6px; max-width:620px;
    font-size:.95rem; }
.cat-feature{ display:grid; grid-template-columns:1.5fr 1fr; gap:24px;
    margin-bottom:32px; }
.cat-feature__lead .card__title{ font-size:1.35rem; }
.cat-feature__side{ display:flex; flex-direction:column; gap:14px; }
@media(max-width:900px){ .cat-feature{ grid-template-columns:1fr; } }

/* ---- PAGINATION --------------------------------------------------- */
.pager{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    margin:32px 0; }
.pager__link{ font-weight:600; font-size:.86rem; padding:8px 14px;
    border:1px solid var(--line); border-radius:6px; background:var(--card); }
.pager__link:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pager__link.is-active{ background:var(--red); color:#fff;
    border-color:var(--red); }
.pager__gap{ padding:8px 5px; color:var(--ink-faint); }

/* ---- SEARCH ------------------------------------------------------- */
.search-box{ display:flex; gap:9px; max-width:560px; margin:14px 0 12px; }
.search-box input{ flex:1; border:1px solid var(--line); border-radius:7px;
    padding:11px 14px; font-family:var(--sans); font-size:.95rem; }
.search-filters{ display:flex; gap:7px; flex-wrap:wrap; }
.filter-pill{ font-weight:600; font-size:.76rem; padding:5px 12px;
    border:1px solid var(--line); border-radius:30px; background:var(--card); }
.filter-pill:hover{ background:var(--bg); }
.filter-pill.is-active{ background:var(--red); color:#fff;
    border-color:var(--red); }
.search-count{ font-weight:600; color:var(--ink-soft); margin-bottom:16px;
    font-size:.9rem; }

/* ---- AUTHOR ------------------------------------------------------- */
.author-head{ background:var(--card); border-bottom:1px solid var(--line);
    padding:32px 0; margin-bottom:24px; }
.author-head__inner{ display:flex; gap:22px; align-items:center; }
.author-head__avatar{
    width:84px; height:84px; border-radius:50%; flex-shrink:0;
    background:var(--red); color:#fff; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:2.2rem; overflow:hidden;
}
.author-head__avatar img{ width:100%; height:100%; object-fit:cover; }
.author-head__role{ color:var(--red); font-weight:600; font-size:.88rem; }
.author-head__bio{ color:var(--ink-soft); margin-top:5px; max-width:600px;
    font-size:.92rem; }

/* ---- STATIC PAGE -------------------------------------------------- */
.static-page{ padding-bottom:40px; }
.static-page__body{
    max-width:780px; background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:30px 34px; font-size:1.02rem;
    line-height:1.8; color:#283040;
}
.static-page__body h2{ font-weight:800; font-size:1.4rem;
    margin:1.5rem 0 .7rem; }
.static-page__body h3{ font-weight:700; font-size:1.15rem;
    margin:1.3rem 0 .5rem; }
.static-page__body p{ margin-bottom:1.1rem; }
.static-page__body a{ color:var(--red); }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    margin-bottom:26px; }
.stat{ background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px; text-align:center; }
.stat strong{ font-size:1.8rem; color:var(--red); display:block;
    font-weight:800; }
.stat span{ font-size:.78rem; color:var(--ink-faint); }
@media(max-width:680px){ .stat-row{ grid-template-columns:1fr 1fr; } }

/* ---- FORMS -------------------------------------------------------- */
.form label{ display:block; font-weight:600; font-size:.85rem;
    margin-bottom:13px; }
.form input,.form textarea{
    width:100%; border:1px solid var(--line); border-radius:7px;
    padding:11px 13px; font-family:var(--sans); font-size:.95rem;
    margin-top:5px;
}
.form input:focus,.form textarea:focus{ outline:2px solid var(--red);
    border-color:var(--red); }
.form small{ color:var(--ink-faint); font-size:.78rem; font-weight:400; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media(max-width:680px){ .form-row{ grid-template-columns:1fr; } }
.hp-field{ position:absolute; left:-9999px; }

.contact-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:34px;
    padding-bottom:40px; }
.contact-form-wrap{ background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:26px 28px; }
.contact-info{ background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px; height:fit-content; }
.contact-info h3{ font-weight:800; margin-bottom:13px; padding-bottom:9px;
    border-bottom:2px solid var(--line); }
.contact-info p{ margin-bottom:13px; font-size:.9rem; }
.contact-info strong{ font-size:.74rem; text-transform:uppercase;
    color:var(--red); }
.contact-info a{ color:var(--red); }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.auth-wrap{ padding:44px 20px; display:flex; justify-content:center; }
.auth-card{ background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:34px; max-width:420px; width:100%; }
.auth-card__title{ font-weight:800; font-size:1.7rem; }
.auth-card__sub{ color:var(--ink-soft); margin-bottom:20px; font-size:.92rem; }
.auth-card__foot{ text-align:center; margin-top:16px; font-size:.9rem;
    color:var(--ink-soft); }
.auth-card__foot a{ color:var(--red); font-weight:600; }

/* ---- MEDIA GRID --------------------------------------------------- */
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    padding-bottom:40px; }
@media(max-width:900px){ .media-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .media-grid{ grid-template-columns:1fr; } }
.media-card{ background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; }
.media-card__thumb{ position:relative; aspect-ratio:16/9; background:var(--navy);
    display:flex; align-items:center; justify-content:center; }
.media-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.media-card__thumb--audio{ background:linear-gradient(135deg,#5b2d9c,#9333ea); }
.media-card__play{
    position:absolute; width:50px; height:50px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.media-card__video{ position:relative; padding-bottom:56.25%; }
.media-card__video iframe{ position:absolute; inset:0; width:100%;
    height:100%; border:0; }
.media-card__body{ padding:16px; }
.media-card__ep{ text-transform:uppercase; color:var(--red); font-weight:700;
    font-size:.7rem; letter-spacing:.04em; }
.media-card__body h3{ font-size:1.05rem; margin:4px 0 7px; font-weight:700; }
.media-card__body p{ font-size:.86rem; color:var(--ink-soft);
    margin-bottom:10px; }
.media-card__body audio{ width:100%; }

/* ---- ERROR PAGE --------------------------------------------------- */
.error-page{ text-align:center; padding:80px 20px; }
.error-page__code{ font-weight:800; font-size:6rem; color:var(--red);
    line-height:1; }
.error-page__title{ font-weight:800; font-size:1.7rem; margin:6px 0 9px; }
.error-page__text{ color:var(--ink-soft); margin-bottom:22px; }
.error-page__actions{ display:flex; gap:12px; justify-content:center; }

/* ---- RESPONSIVE --------------------------------------------------- */
@media(max-width:980px){
    .hero__grid{ grid-template-columns:1fr; }
    .layout-2col{ grid-template-columns:1fr; }
    .footer-main{ grid-template-columns:1fr 1fr; }
    .podcast-row{ grid-template-columns:1fr; }
    .cat-grid{ grid-template-columns:repeat(2,1fr); }
}

/* On screens too narrow to show every menu item, the nav bar becomes a
   tidy left-aligned horizontal-scroll strip rather than wrapping. */
@media(max-width:1024px) and (min-width:681px){
    .mainnav__inner{ justify-content:flex-start; }
}

@media(max-width:680px){
    body{ font-size:14px; }
    .masthead__brand{ grid-template-columns:auto 1fr auto; gap:12px; }
    .masthead__search{ display:none; }
    .nav-toggle{ display:flex; }

    /* nav collapses into the hamburger panel */
    .mainnav{ display:none; overflow-x:visible; }
    .mainnav.is-open{ display:block; }
    .mainnav__inner{
        flex-direction:column; flex-wrap:nowrap; align-items:stretch;
        justify-content:flex-start;
        width:auto; min-width:0; padding:0;
    }
    .mainnav__link{
        width:100%; padding:13px 18px;
        border-bottom:1px solid var(--line-soft);
    }

    .latest-grid,.cat-grid{ grid-template-columns:1fr; }
    .cat-lead .card--compact,.card--compact{ grid-template-columns:1fr; }
    .card--compact .card__media img{ aspect-ratio:16/9; min-height:0; }
    .footer-main{ grid-template-columns:1fr; }
    .footer-band__inner{ flex-direction:column; align-items:stretch; }
    .post__hero{ width:calc(100% - 24px); border-radius:12px; margin-top:16px; }
    .post__hero-img img{ height:260px; }
    .post__title{ font-size:1.5rem; }
    .post__nav{ grid-template-columns:1fr; }
    .post__main-card{ padding:20px; }
    .page-head__title{ font-size:1.5rem; }
}

/* article main column rendered as a white card */
.post .layout-2col__main{
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:26px 30px; align-self:start;
}
@media(max-width:680px){ .post .layout-2col__main{ padding:20px; } }