/*
Theme Name:     The True Post
Theme URI:      http://localhost/eunewsforge
Author:         The True Post
Description:    News aggregation theme with a three-column briefing homepage, coverage bars, blindspot panels and topic sections. Built so posts, menus and the auto-import plugin keep working unchanged.
Version:        1.1.0
Requires PHP:   7.4
License:        GPL-2.0-or-later
Text Domain:    truepost
Tags:           news, magazine, three-columns, custom-menu, featured-images
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --tan:#d4c19a;
  --ink:#1a1a1a;
  --bg:#eeebe4;          /* page ground — warm beige-grey, not white */
  --surface:#fff;        /* cards sit on top of it */
  --bg-alt:#e4e1d9;
  --line:#dbd7ce;
  --line-2:#c7c2b7;
  --text:#16150f;
  --muted:#6b6862;
  --kicker:#877a5c;      /* warm khaki, as the reference kickers read */
  --panel:#2e2c27;       /* warm dark for the footer and newsletter box */
  --left:#b4262c;
  --left-deep:#8f1f24;
  --center:#f4f2ee;
  --right:#2b5fb8;
  --link:#14306e;
  --r:10px;              /* card radius */
  --r-sm:8px;            /* control radius */
  --maxw:1440px;         /* 1312px of content at 1920, 304px clear each side */
  --pad:64px;
  --rail:17px;           /* half the gutter; the column rule sits between two */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
[data-theme="dark"]{
  --bg:#131313; --surface:#1c1c1c; --bg-alt:#242424;
  --line:#2f2f2f; --line-2:#3d3d3d;
  --text:#f0efec; --muted:#a3a099; --kicker:#b3a582; --panel:#232220;
  --center:#2a2a2a;
  --link:#8fb0ff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.2}
ul{margin:0;padding:0;list-style:none}
.tp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ============================================================
   2. PROMO BAR + UTILITY BAR
   ============================================================ */
.tp-promo{background:var(--tan);color:#241f14}
.tp-promo .tp-wrap{display:flex;align-items:center;justify-content:center;gap:16px;min-height:60px}
.tp-promo b{font-weight:600;font-size:17px}
.tp-promo .tp-cta{
  background:#1f1f1f;color:#fff;border-radius:var(--r-sm);
  padding:11px 19px;font-size:15px;font-weight:500;white-space:nowrap;
}
.tp-promo .tp-cta:hover{background:#000;text-decoration:none}

.tp-util{background:var(--ink);color:#c9c6c0;font-size:13px}
.tp-util .tp-wrap{display:flex;align-items:center;gap:20px;height:38px}
.tp-util a:hover{color:#fff}
.tp-util .tp-util-r{margin-left:auto;display:flex;align-items:center;gap:20px}
.tp-theme-set{display:flex;align-items:center;gap:9px}
.tp-theme-set .lab{color:#c9c6c0}
.tp-theme-set button{background:none;border:0;color:#8f8c86;padding:0;font-size:13px}
.tp-theme-set button:hover{color:#fff}
.tp-theme-set button[aria-pressed="true"]{color:#fff;font-weight:600}
.tp-edition{display:flex;align-items:center;gap:7px}

/* ============================================================
   3. MASTHEAD
   ============================================================ */
/*
 * The masthead rides along on scroll. The promo strip and utility bar are
 * allowed to leave — only the row with the logo, nav and search stays.
 */
.tp-head{
  background:var(--bg);position:sticky;top:0;z-index:50;
  transition:box-shadow .18s ease;
}
.tp-head.is-stuck{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(0,0,0,.07)}

/* Sit below the admin bar, which is fixed on desktop but scrolls away on
   small screens, so the offset only applies above 782px. */
.admin-bar .tp-head{top:32px}
@media screen and (max-width:782px){
  .admin-bar .tp-head{top:0}
}

/* The sentinel is what tells the script the header has left its resting place. */
.tp-stick-probe{height:1px;margin-bottom:-1px}
.tp-head .tp-wrap{display:flex;align-items:center;gap:26px;height:74px}
.tp-burger{background:none;border:0;padding:6px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tp-burger span{display:block;height:2px;background:var(--text);border-radius:2px}
.tp-burger span:nth-child(1){width:20px}
.tp-burger span:nth-child(2){width:15px}
.tp-burger span:nth-child(3){width:11px}
.tp-logo{display:flex;align-items:center;flex:0 0 auto}
.tp-logo img{max-height:34px;width:auto}
.tp-logo .tp-word{
  font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1;
}
.tp-nav-main{display:flex;gap:26px;font-size:15px;font-weight:500}
.tp-nav-main a{padding:26px 0;display:block;white-space:nowrap;position:relative}
.tp-nav-main a:hover{text-decoration:none}
/* Small badge dot, as the reference carries on "For You". */
.tp-nav-dot::before{
  content:"";position:absolute;top:20px;right:-7px;width:6px;height:6px;
  border-radius:50%;background:var(--tan);
}
.tp-nav-main .current-menu-item>a::after,.tp-nav-main a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--text);
}
.tp-head-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.tp-search{position:relative;display:flex;align-items:center}
.tp-search input{
  width:250px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);padding:0 14px 0 40px;font-size:15px;
}
.tp-search input::placeholder{color:var(--muted)}
.tp-search svg{position:absolute;left:14px;width:17px;height:17px;opacity:.6;pointer-events:none}
.tp-btn{
  height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;
  border-radius:var(--r-sm);font-size:15px;font-weight:500;border:1px solid var(--ink);
}
.tp-btn:hover{text-decoration:none}
.tp-btn--fill{background:var(--ink);color:#fff}
.tp-btn--fill:hover{background:#000}
.tp-btn--ghost{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.tp-btn--ghost:hover{border-color:var(--text)}
[data-theme="dark"] .tp-btn--fill{background:#fff;color:#111;border-color:#fff}

/* topic ticker — rounded pills with an add control */
.tp-topics{background:var(--bg);border-bottom:1px solid var(--line)}
.tp-topics .tp-wrap{display:flex;align-items:center;gap:12px;height:56px;overflow:hidden}
.tp-topics .tp-trend{flex:0 0 auto;width:18px;height:18px;opacity:.7}
.tp-topics ul{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.tp-topics ul::-webkit-scrollbar{display:none}
.tp-topics li{flex:0 0 auto}
.tp-topics li a{
  display:inline-flex;align-items:center;gap:9px;background:var(--bg-alt);
  border-radius:999px;padding:7px 14px;font-size:14px;color:var(--text);white-space:nowrap;
}
.tp-topics li a:hover{background:var(--line-2);text-decoration:none}
.tp-topics li a .plus{font-size:15px;line-height:1;color:var(--muted)}

/* ============================================================
   4. COVERAGE BAR
   ============================================================ */
.tp-cov{
  display:flex;width:100%;overflow:hidden;font-size:12px;font-weight:600;
  border:1px solid var(--line);background:var(--center);
}
.tp-cov i{
  display:flex;align-items:center;height:23px;padding:0 8px;font-style:normal;white-space:nowrap;
  overflow:hidden;
}
.tp-cov .l{background:var(--left);color:#fff;justify-content:flex-start}
.tp-cov .c{background:var(--center);color:var(--text);justify-content:center;flex:1;min-width:0}
.tp-cov .r{background:var(--right);color:#fff;justify-content:flex-end}
.tp-cov--muted i{background:var(--center);color:var(--muted);justify-content:flex-start;width:100%}
.tp-cov--lean-left{border-left:4px solid var(--left)}
.tp-cov--lean-right{border-left:4px solid var(--right)}
.tp-cov--lean-center{border-left:4px solid var(--line-2)}

/* compact variant used in list rows */
.tp-cov--mini{border:0;background:none;gap:0}
.tp-cov--mini i{height:7px;padding:0;font-size:0}
.tp-cov--mini .l{background:var(--left)}
.tp-cov--mini .c{background:var(--line-2)}
.tp-cov--mini .r{background:var(--right)}
.tp-covline{display:flex;align-items:center;gap:11px;margin-top:11px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
/* Keep each phrase whole so a narrow column breaks between them, not inside. */
.tp-covline>span{white-space:nowrap}
.tp-covline .tp-cov--mini{width:82px;flex:0 0 82px}
.tp-cov--mini i{height:9px}
/* The left rail is narrow — trim the bar and drop the timestamp there. */
.tp-rail .tp-covline{gap:9px;font-size:12.5px}
.tp-rail .tp-covline .tp-cov--mini{width:58px;flex:0 0 58px}
.tp-rail .tp-covline>span:last-child{display:none}

.tp-srcline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-top:7px;flex-wrap:wrap}
.tp-lean{display:inline-flex;align-items:center;gap:6px}
.tp-lean i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tp-lean b{font-weight:600;color:var(--text)}
.tp-lean--left i{background:var(--left)}
.tp-lean--center i{background:var(--line-2)}
.tp-lean--right i{background:var(--right)}
.tp-kicker{font-size:13.5px;color:var(--kicker);margin-bottom:8px}

/* blindspot chip — carries the same two-ring mark as the section brand */
.tp-bs-pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-top:9px}
.tp-bs-pill--l{color:var(--left)}
.tp-bs-pill--r{color:var(--right)}
.tp-bs-pill--n{color:var(--muted)}

/* factuality note — prints only when an editor has rated the sources */
.tp-fact{
  display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--muted);
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);line-height:1.35;
}
.tp-fact svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;fill:var(--muted)}
.tp-fact--mixed svg,.tp-fact--low svg{fill:#b8860b}
.tp-fact--high svg{fill:#3f7a3f}
.tp-bs-pill .dot{
  width:20px;height:14px;flex:0 0 auto;border-radius:999px;
  background:
    radial-gradient(circle 5.5px at 6.5px 7px, transparent 4.1px, currentColor 4.3px 5.5px, transparent 5.7px),
    radial-gradient(circle 5.5px at 13.5px 7px, transparent 4.1px, currentColor 4.3px 5.5px, transparent 5.7px);
}
.tp-bs-pill .dot--l{color:var(--left)}
.tp-bs-pill .dot--r{color:var(--right)}
.tp-bs-pill .dot--n{color:var(--muted)}
/* The small round "about this story" control the reference puts on card art. */
.tp-bs-x{
  position:absolute;top:10px;right:10px;z-index:2;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font-size:13px;font-style:italic;
  font-family:var(--serif);line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.tp-bs-x:hover{background:rgba(0,0,0,.55);text-decoration:none}
.tp-hero-info{font-style:italic;font-family:var(--serif)}

/* ============================================================
   5. SECTION FURNITURE
   ============================================================ */
.tp-sec{border-top:1px solid var(--line);padding:38px 0}
.tp-sec-head{display:flex;align-items:center;margin-bottom:22px}
.tp-sec-title{font-family:var(--sans);font-size:31px;font-weight:600;letter-spacing:-.022em}
.tp-sec-head .tp-sec-act{margin-left:auto;display:flex;gap:12px}
.tp-sec-act .tp-btn{height:46px;font-size:15px;padding:0 26px;border-radius:6px}
.tp-colhead{font-size:17px;font-weight:600;margin-bottom:16px;color:var(--text)}

/* headline scale — stories are sans, furniture is serif */
.t{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;display:block}

/* ============================================================
   6. HOMEPAGE GRID
   ============================================================ */
/*
 * Column rules sit exactly halfway between two columns: no grid gap, each
 * column carries half the gutter as padding, and the rule rides the border of
 * every column after the first.
 */
.tp-grid3,.tp-grid2,.tp-topic{display:grid;gap:0}
.tp-grid3>*,.tp-grid2>*,.tp-topic>*{padding:0 var(--rail);min-width:0}
.tp-grid3>*:first-child,.tp-grid2>*:first-child,.tp-topic>*:first-child{padding-left:0}
.tp-grid3>*:last-child,.tp-grid2>*:last-child,.tp-topic>*:last-child{padding-right:0}
.tp-grid3>*+*,.tp-grid2>*+*,.tp-topic>*+*{border-left:1px solid var(--line)}

.tp-grid3{grid-template-columns:318px minmax(0,1fr) 322px;padding:26px 0}
.tp-grid2{grid-template-columns:minmax(0,1fr) 322px}

/* Daily Briefing */
.tp-brief-h{font-family:var(--sans);font-size:31px;font-weight:600;letter-spacing:-.022em;margin-bottom:16px}
.tp-brief{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--surface)}
.tp-brief .n{font-size:17px;font-weight:600}
.tp-brief .tp-brief-meta{font-size:14px;color:var(--muted);margin-bottom:14px}
.tp-brief li{margin-bottom:10px}
.tp-brief li a{
  display:flex;gap:12px;align-items:stretch;background:var(--bg-alt);
  border-radius:var(--r-sm);overflow:hidden;
}
.tp-brief li a:hover{text-decoration:none}
.tp-brief li img{width:86px;height:74px;object-fit:cover;flex:0 0 auto}
.tp-brief li .t{font-size:14.5px;line-height:1.28;padding:10px 12px 10px 0;align-self:center}
.tp-brief-more{
  font-size:14px;line-height:1.45;color:var(--text);margin:14px 0 0;
  padding-top:14px;border-top:1px solid var(--line);
}
.tp-brief-more a{text-decoration:underline}
.tp-brief .tp-brief-foot{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:14px;
}
.tp-brief .tp-brief-foot svg{width:15px;height:15px;flex:0 0 auto;fill:var(--kicker);margin-top:1px}

/* Left rail */
.tp-rail li{padding:16px 0;border-top:1px solid var(--line)}
.tp-rail li:first-child{border-top:0}
.tp-rail .t{font-size:19px;line-height:1.25}

/* Hero */
.tp-hero{position:relative;margin-bottom:18px}
.tp-hero-media{display:block;position:relative;background:#2a2a2a;aspect-ratio:16/9;overflow:hidden}
.tp-hero-media img{width:100%;height:100%;object-fit:cover}
.tp-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 40%,rgba(0,0,0,.78) 100%);
}
.tp-hero-txt{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2}
.tp-hero-txt h2{
  font-family:var(--sans);color:#fff;font-size:41px;line-height:1.13;
  font-weight:700;letter-spacing:-.02em;
}
.tp-hero-info{
  position:absolute;top:14px;right:14px;z-index:3;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;border:0;
}

/* Story rows */
.tp-rows li{display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--line)}
.tp-rows li:first-child{border-top:0}
/* The mid-page list runs without rules — spacing alone separates the rows. */
.tp-rows--plain li{border-top:0;padding:26px 0}
.tp-rows--plain li:first-child{padding-top:0}
.tp-rows--plain img{width:120px;height:84px}
.tp-rows .tp-rows-b{flex:1;min-width:0}
.tp-rows .t{font-size:22px;line-height:1.24;margin-bottom:4px}
.tp-rows img{width:160px;height:106px;object-fit:cover;flex:0 0 auto}

/* Blindspot rail */
.tp-blind-brand{
  display:flex;align-items:center;gap:9px;font-size:24px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:10px;
}
.tp-blind-brand .mark{
  width:26px;height:18px;flex:0 0 auto;border-radius:999px;
  background:
    radial-gradient(circle 7px at 8px 9px, transparent 5.4px, currentColor 5.6px 7px, transparent 7.2px),
    radial-gradient(circle 7px at 18px 9px, transparent 5.4px, currentColor 5.6px 7px, transparent 7.2px);
}
.tp-blind-intro{font-size:14.5px;color:var(--text);margin:0 0 18px;line-height:1.42}
.tp-blind-intro a{text-decoration:underline}
.tp-blind-card{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-bottom:16px}
.tp-blind-card>a:first-child{display:block}
.tp-blind-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tp-blind-card .tp-bs-body{padding:12px 14px 16px}
.tp-blind-card .tp-bs-pill{margin:0 0 9px}
.tp-blind-card .t{font-size:17px;line-height:1.27}
.tp-blind-card .tp-cov{margin-bottom:11px}
/* Cards in a topic section run a little wider and shallower. */
.tp-blind-pair .tp-blind-card img{aspect-ratio:5/3}

/* My news bias */
.tp-mybias{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:18px;background:var(--surface)}
.tp-mybias h3{font-family:var(--sans);font-size:24px;font-weight:600;margin-bottom:10px}
.tp-mybias .n{font-size:14px;font-weight:600}
.tp-mybias .s{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.tp-meter{display:flex;height:26px;overflow:hidden;font-size:11.5px;font-weight:700;color:#fff;border:1px solid var(--line)}
.tp-meter i{display:flex;align-items:center;justify-content:center;font-style:normal}
.tp-meter .l{background:var(--left)}
.tp-meter .c{background:var(--center);color:var(--text)}
.tp-meter .r{background:var(--right)}

/* ============================================================
   7. TOPIC SECTIONS
   ============================================================ */
.tp-topic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tp-topic-lead .tp-topic-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.tp-topic-lead .tp-topic-media img{width:100%;height:100%;object-fit:cover}
.tp-topic-lead h3{font-family:var(--sans);font-size:40px;line-height:1.14;font-weight:700;margin-top:20px;letter-spacing:-.025em}
.tp-blind-pair{display:grid;grid-template-columns:1fr 1fr;gap:34px}

.tp-note{background:var(--panel);color:#fff;border-radius:var(--r-sm);padding:28px;margin-top:30px}
.tp-note .tp-blind-brand{color:#fff;font-size:20px;font-weight:700;margin-bottom:14px}
.tp-note p{font-size:16px;color:#c8c5be;margin:0 0 22px;line-height:1.45}
.tp-note form{display:flex;gap:18px}
.tp-note input{
  flex:1;min-width:0;height:48px;border:1px solid #3d3d3d;
  background:#242424;color:#fff;padding:0 16px;font-size:15px;border-radius:6px;
}
.tp-note input::placeholder{color:#8b8880}
.tp-note button{
  height:48px;padding:0 26px;border:0;background:#4a4a48;color:#c4c1ba;
  font-size:15px;border-radius:6px;
}
.tp-note button:hover{background:#5c5c58;color:#fff}

/* Sidebar cards — bordered box for widgets, bare for the local-news panel */
.tp-side-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--surface)}
.tp-side-card h3{font-family:var(--sans);font-size:24px;font-weight:600;margin-bottom:8px}
.tp-side-card p{font-size:13.5px;color:var(--muted);margin:0 0 14px}

/* Daily Local News sits directly on the page, no card chrome. */
.tp-local h3{font-family:var(--sans);font-size:31px;font-weight:600;letter-spacing:-.022em;margin-bottom:14px}
.tp-local p{font-size:17px;color:var(--text);margin:0 0 20px;line-height:1.4}
.tp-local form{display:flex}
.tp-local input{
  flex:1;min-width:0;height:46px;border:1px solid var(--line-2);border-right:0;
  border-radius:4px 0 0 4px;background:var(--surface);color:var(--text);padding:0 14px;font-size:15px;
}
.tp-local input::placeholder{color:var(--muted)}
.tp-local .tp-sub{
  height:46px;padding:0 24px;background:#6f6f6a;color:#fff;border:0;
  border-radius:0 4px 4px 0;font-size:15px;
}
.tp-local .tp-sub:hover{background:#5c5c58}
.tp-geo{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--ink);color:#fff;border:0;border-radius:4px;height:44px;margin-top:16px;
  font-size:15px;font-weight:500;
}
.tp-geo:hover{background:#000;text-decoration:none}
.tp-geo svg{width:15px;height:15px;fill:currentColor}
[data-theme="dark"] .tp-geo{background:#f0efec;color:#111}

/* Similar topics */
.tp-topiclist li{display:flex;align-items:center;gap:18px;padding:17px 0;border-top:1px solid var(--line)}
.tp-topiclist li:first-child{border-top:0}
.tp-topiclist .av{
  width:52px;height:52px;border-radius:50%;background:var(--bg-alt);flex:0 0 auto;
  object-fit:cover;overflow:hidden;
}
.tp-topiclist .n{font-size:19px;font-weight:500;flex:1}
.tp-topiclist .p{color:var(--text);font-size:22px;line-height:1;font-weight:300}

/* Compact list */
.tp-compact li{display:flex;gap:22px;padding:18px 0;border-top:1px solid var(--line)}
.tp-compact li:first-child{border-top:0}
.tp-compact .b{flex:1;min-width:0}
.tp-compact .t{font-size:24px;line-height:1.24;margin-bottom:4px}
.tp-compact img{width:120px;height:84px;object-fit:cover;flex:0 0 auto}
.tp-more{margin-top:20px}

/* ============================================================
   8. FOOTER
   ============================================================ */
.tp-foot{background:var(--panel);color:#ddd9d0;margin-top:44px;font-size:15px}
.tp-foot a{color:#ddd9d0}
.tp-foot a:hover{color:#fff}
.tp-foot-top{padding:48px 0 40px}
.tp-foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:34px}
.tp-foot h4{font-size:21px;font-weight:600;color:#fff;margin-bottom:20px;letter-spacing:-.015em}
.tp-foot li{margin-bottom:14px;color:#ddd9d0}
.tp-foot-mid{border-top:1px solid #45423b;padding:44px 0}
.tp-foot-mid-grid{display:grid;grid-template-columns:290px repeat(3,1fr);gap:34px}
.tp-foot-mid h4{font-size:21px}
.tp-foot-mid .tp-word{font-family:var(--sans);font-size:28px;font-weight:700;color:#fff;letter-spacing:-.02em}
.tp-foot-mid img{max-height:40px;width:auto}
.tp-foot-logo{display:inline-block}
.tp-foot-bot{border-top:1px solid #45423b;padding:22px 0 34px}
.tp-foot-bot .tp-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tp-foot-legal{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.tp-foot-edition{margin-left:auto;font-size:13px}
.tp-foot-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.tp-foot-social{margin-left:auto;display:flex;gap:20px;align-items:center}
.tp-foot-social svg{width:18px;height:18px;fill:#ddd9d0}
.tp-foot-social a:hover svg{fill:#fff}
.tp-foot-apps{display:flex;gap:10px}
.tp-foot-apps span{
  display:inline-flex;align-items:center;gap:7px;border:1px solid #55514a;border-radius:6px;
  padding:9px 15px;font-size:13px;color:#ddd9d0;
}
.tp-copy{font-size:13px;color:#8f8b82;margin-top:18px}

/* ============================================================
   9. ARCHIVE / SINGLE / PAGE
   ============================================================ */
.tp-page{padding:30px 0}
.tp-page-title{font-family:var(--sans);font-size:38px;font-weight:600;letter-spacing:-.022em;margin-bottom:8px}
.tp-page-sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.tp-single{max-width:800px;margin:0 auto;padding:34px 0}
.tp-single h1{font-family:var(--sans);font-size:44px;line-height:1.13;letter-spacing:-.02em;margin-bottom:14px}
.tp-single .tp-meta{
  display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.tp-single .tp-thumb{margin:0 0 24px}
.tp-content{font-size:18px;line-height:1.68}
.tp-content p{margin:0 0 1.1em}
.tp-content a{color:var(--link);text-decoration:underline}
.tp-content h2{font-family:var(--serif);font-size:28px;margin:1.5em 0 .5em}
.tp-content h3{font-family:var(--serif);font-size:22px;margin:1.4em 0 .5em}
.tp-content blockquote{border-left:3px solid var(--left);margin:1.4em 0;padding:2px 0 2px 18px;color:var(--muted)}
.tp-content img{margin:1.2em 0}
.tp-src{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:30px;font-size:14px;background:var(--surface)}
.tp-src b{display:block;margin-bottom:6px}
.tp-arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tp-card .tp-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);margin-bottom:11px;border-radius:var(--r-sm)}
.tp-card .tp-card-media img{width:100%;height:100%;object-fit:cover}
.tp-card .t{font-size:20px;line-height:1.25;margin-bottom:4px}
.tp-pag{display:flex;gap:9px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.tp-pag .page-numbers{padding:8px 15px;border:1px solid var(--line-2);font-size:14px;border-radius:var(--r-sm);background:var(--surface)}
.tp-pag .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- off-canvas drawer ---------- */
.tp-drawer{
  position:fixed;inset:0 auto 0 0;width:360px;max-width:88vw;background:var(--surface);
  transform:translateX(-100%);transition:transform .22s ease;
  z-index:90;overflow-y:auto;padding:0;box-shadow:2px 0 14px rgba(0,0,0,.14);
}
.tp-drawer.is-open{transform:none}
/*
 * WordPress pushes <html> down for the admin bar but leaves fixed elements
 * where they are, so the drawer's first row and its close button end up
 * underneath it. Start below the bar whenever it is on screen.
 */
.admin-bar .tp-drawer{top:32px}
@media screen and (max-width:782px){
  .admin-bar .tp-drawer{top:46px}
}

.tp-drawer-grp{border-bottom:1px solid var(--line);padding:8px 0}
.tp-drawer-grp:last-child{border-bottom:0}
.tp-drawer-head{display:flex;align-items:center;padding-right:14px}

.tp-drawer-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 24px;font-size:19px;font-weight:600;color:var(--text);
  letter-spacing:-.01em;line-height:1.25;
}
.tp-drawer-item:hover{background:var(--bg-alt);text-decoration:none}
.tp-drawer-head .tp-drawer-item{flex:1}
.tp-drawer-item .chev{margin-left:auto;color:var(--muted);font-size:23px;line-height:1}

.tp-drawer-row{display:flex;align-items:center}
.tp-drawer-row .tp-drawer-item{flex:1}
.tp-drawer-chev{
  background:none;border:0;padding:13px 24px 13px 8px;font-size:23px;line-height:1;
  color:var(--muted);transition:transform .18s ease;
}
.tp-drawer-chev:hover{color:var(--text)}
.tp-drawer-chev[aria-expanded="true"]{transform:rotate(90deg)}

.tp-drawer-kids{background:var(--bg-alt)}
.tp-drawer-kids .tp-drawer-item{font-size:16.5px;font-weight:500;padding-left:44px}

.tp-drawer-x{
  background:none;border:0;font-size:27px;line-height:1;color:var(--text);
  padding:4px 8px;flex:0 0 auto;
}
.tp-drawer-x:hover{color:var(--muted)}

/* Menu-driven fallback keeps the same rhythm. */
.tp-drawer .menu-item a{display:block;padding:13px 24px;font-size:19px;font-weight:600}
.tp-drawer .sub-menu a{padding-left:44px;font-size:16.5px;font-weight:500}

.tp-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.14);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:80;
}
.tp-scrim.is-open{opacity:1;pointer-events:auto}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media(max-width:1400px){
  .tp-wrap{--pad:32px}
  .tp-grid3{grid-template-columns:292px minmax(0,1fr) 300px}
  .tp-grid2{grid-template-columns:minmax(0,1fr) 300px}
  .tp-hero-txt h2{font-size:34px}
  .tp-rows .t{font-size:20px}
}
@media(max-width:1180px){
  .tp-grid3{grid-template-columns:280px minmax(0,1fr)}
  .tp-grid3 .tp-col-blind{
    grid-column:1/-1;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:28px;margin-top:28px;
  }
}
@media(max-width:900px){
  .tp-nav-main,.tp-search{display:none}
  .tp-grid3,.tp-grid2,.tp-topic{grid-template-columns:minmax(0,1fr)}
  .tp-wrap{--pad:20px}
  .tp-grid3>*,.tp-grid2>*,.tp-topic>*{padding-left:0;padding-right:0}
  .tp-grid2>aside,.tp-topic>*+*,.tp-grid3>*+*{
    border-left:0;border-top:1px solid var(--line);padding-top:28px;margin-top:28px;
  }
  .tp-grid2>aside:empty{border-top:0;padding-top:0;margin-top:0}
  .tp-topic-lead h3{font-size:27px}
  .tp-blind-pair{gap:18px}
  .tp-arch-grid{grid-template-columns:1fr 1fr}
  .tp-foot-cols{grid-template-columns:repeat(2,1fr)}
  .tp-foot-mid-grid{grid-template-columns:1fr}
  .tp-hero-txt h2{font-size:25px}
  .tp-hero-txt{padding:18px}
  .tp-single h1{font-size:31px}
  .tp-sec-title,.tp-brief-h{font-size:25px}
  .tp-promo .tp-wrap{padding:12px 24px;flex-wrap:wrap;text-align:center}
  .tp-promo b{font-size:15px}
}
/*
 * Below ~760px the masthead can no longer hold logo + Subscribe + Login on
 * one line, and the overflow widens the whole document. Login already lives
 * in the drawer, so it stands down and the remaining controls shrink.
 */
@media(max-width:760px){
  .tp-head .tp-wrap{gap:14px;height:64px}
  .tp-logo img{max-height:26px}
  .tp-head-r{gap:8px}
  .tp-head-r .tp-btn--ghost{display:none}
  .tp-btn{height:40px;padding:0 16px;font-size:14px}
  .tp-topics .tp-wrap{height:50px}
  .tp-topics li a{font-size:13px;padding:6px 12px}
}

@media(max-width:560px){
  .tp-arch-grid{grid-template-columns:1fr}
  .tp-foot-cols{grid-template-columns:1fr}
  .tp-rows img{width:104px;height:74px}
  .tp-rows .t,.tp-compact .t{font-size:17px}
  .tp-compact img{width:96px;height:66px}
  .tp-util .tp-util-r{display:none}
  .tp-cov i{font-size:11px;padding:0 7px}
  .tp-rows li,.tp-compact li{gap:14px}
  .tp-rows--plain img{width:96px;height:66px}
  .tp-brief li img{width:74px;height:66px}
  .tp-brief li .t{font-size:13.5px}
  .tp-topic-lead h3{font-size:23px}
  .tp-foot-strip{gap:14px}
  .tp-foot-social{margin-left:0;gap:16px}
}

@media(max-width:420px){
  .tp-head .tp-wrap{gap:10px}
  .tp-logo img{max-height:22px}
  .tp-btn{height:36px;padding:0 12px;font-size:13px}
  .tp-promo b{font-size:14px}
  .tp-promo .tp-cta{padding:9px 15px;font-size:14px}
  .tp-brief-h,.tp-sec-title{font-size:22px}
  .tp-hero-txt h2{font-size:21px}
}