/*
Theme Name: The Global Jigsaw
Theme URI: https://theglobaljigsaw.com
Description: Editorial child theme for The Global Jigsaw — "Where the world clicks into place". Built on Astra. Presentation layer only: all article content is queried dynamically, nothing in the database is modified.
Author: The Global Jigsaw
Version: 1.2.0
Template: astra
Text Domain: tgj
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --navy:#0E3043;
  --navy-deep:#0C2A3D;
  --copper:#B9834B;
  --copper-dark:#A8713C;
  --cream:#F4EFE6;
  --surface:#F8F5EF;
  --line:#D9CFC0;
  --line-soft:#E7DECF;
  --body:#2C3A45;
  --muted:#7A7268;
  --on-dark:#F4EFE6;
  --on-dark-muted:#B9C4CC;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --script:'Caveat',cursive;

  --wrap:1200px;
  --gap:40px;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
html{-webkit-text-size-adjust:100%}
body.tgj{
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.tgj h1,body.tgj h2,body.tgj h3,body.tgj h4{
  font-family:var(--serif);
  color:var(--navy);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
body.tgj a{color:var(--copper-dark);text-decoration:none;transition:color .15s var(--ease)}
body.tgj a:hover{color:var(--navy)}
body.tgj img{max-width:100%;height:auto;display:block}
body.tgj p{margin:0 0 1em}

.tgj-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.tgj-section{padding-block:72px}
.tgj-section--tight{padding-block:48px}

/* Astra chrome we replace */
body.tgj .ast-container,body.tgj #primary{padding:0!important;margin:0!important;max-width:none!important;width:auto!important}
body.tgj #page{background:var(--cream)}
body.tgj .ast-separate-container{background:var(--cream)}
body.tgj .site-content{padding:0}
body.tgj .ast-single-post .entry-header{display:none}

/* Utility type */
.tgj-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper-dark);
  margin:0 0 10px;display:block;
}
.tgj-eyebrow--dark{color:var(--copper)}
.tgj-kicker{
  font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--copper);
}
.tgj-meta{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.tgj-script{font-family:var(--script);font-size:22px;line-height:1.25;color:var(--muted)}
.tgj-script--dark{color:var(--on-dark-muted)}
.tgj-rule{height:1px;background:var(--line);border:0;flex:1}

/* Buttons */
.tgj-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:14px 26px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.tgj-btn--solid{background:var(--copper);color:#fff}
.tgj-btn--solid:hover{background:var(--copper-dark);color:#fff}
.tgj-btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.tgj-btn--ghost:hover{background:var(--navy);color:var(--cream)}
.tgj-btn--onDark{background:transparent;color:var(--cream);border-color:var(--copper)}
.tgj-btn--onDark:hover{background:var(--copper);color:#fff;border-color:var(--copper)}
.tgj-link{
  font-size:14px;font-weight:500;color:var(--copper-dark);
  display:inline-flex;align-items:center;gap:8px;
}
.tgj-link:hover{color:var(--navy)}
.tgj-link .a{transition:transform .2s var(--ease)}
.tgj-link:hover .a{transform:translateX(4px)}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.tgj-header{
  background:var(--cream);
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:200;
}
body.admin-bar .tgj-header{top:32px}
.tgj-header__in{
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:32px;
}
.tgj-brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.tgj-brand__mark{
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--cream);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.02em;
  flex-shrink:0;
}
.tgj-brand__mark img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tgj-brand__name{
  font-family:var(--serif);font-size:21px;font-weight:700;
  color:var(--navy);letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
}
.tgj-brand__tag{
  font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);margin-top:3px;font-weight:500;
}
.tgj-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.tgj-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.tgj-nav a{
  font-size:14px;color:var(--body);font-weight:450;
  padding-block:6px;border-bottom:2px solid transparent;
}
.tgj-nav a:hover{color:var(--navy)}
.tgj-nav .current-menu-item>a,
.tgj-nav .current_page_item>a,
.tgj-nav .tgj-active>a{color:var(--copper-dark);border-bottom-color:var(--copper)}
.tgj-header__tools{display:flex;align-items:center;gap:18px;flex-shrink:0}
.tgj-search{background:none;border:0;padding:6px;cursor:pointer;color:var(--navy);line-height:0}
.tgj-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy);line-height:0}

.tgj-mobilenav{display:none;border-top:1px solid var(--line-soft);background:var(--cream);padding:8px 24px 20px}
.tgj-mobilenav.is-open{display:block}
.tgj-mobilenav ul{list-style:none;margin:0;padding:0}
.tgj-mobilenav a{display:block;padding:12px 0;font-size:16px;color:var(--navy);border-bottom:1px solid var(--line-soft)}

/* Search overlay */
.tgj-searchbar{display:none;border-top:1px solid var(--line-soft);background:var(--surface);padding:18px 24px}
.tgj-searchbar.is-open{display:block}
.tgj-searchbar form{max-width:var(--wrap);margin:0 auto;display:flex;gap:10px}
.tgj-searchbar input{
  flex:1;padding:12px 14px;border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:15px;color:var(--body);border-radius:var(--radius);
}
.tgj-searchbar input:focus{outline:2px solid var(--copper);outline-offset:-2px}

/* ==========================================================================
   4. HERO — HOME
   ========================================================================== */
.tgj-hero{padding-block:64px 40px;overflow:hidden}
.tgj-hero__grid{
  max-width:var(--wrap);margin:0 auto;padding-inline:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.tgj-chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:600;margin-bottom:26px;
}
.tgj-chain span.s{color:var(--copper)}
.tgj-hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.03;letter-spacing:-.025em;margin-bottom:22px}
.tgj-hero h1 .l2{color:var(--copper-dark);display:block}
.tgj-hero__sub{font-size:17px;color:var(--body);max-width:44ch;margin-bottom:32px}
.tgj-hero__btns{display:flex;flex-wrap:wrap;gap:14px}
.tgj-hero__art{position:relative}
.tgj-hero__art img{width:100%;border-radius:var(--radius)}
.tgj-hero__sig{margin-top:20px;text-align:right}

/* annotation list beside the globe */
.tgj-annot{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.tgj-annot li{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);font-weight:600;line-height:1.5;
  padding-left:22px;position:relative;
}
.tgj-annot li::before{
  content:"";position:absolute;left:0;top:6px;width:12px;height:1px;background:var(--copper);
}
.tgj-annot li::after{
  content:"";position:absolute;left:-4px;top:3.5px;width:5px;height:5px;
  border-radius:50%;background:var(--copper);
}
.tgj-hero__figure{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}

/* ==========================================================================
   5. HERO — CATEGORY HUB
   ========================================================================== */
.tgj-chero{position:relative;background:var(--navy-deep);overflow:hidden}
.tgj-chero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.tgj-chero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--cream) 0%,var(--cream) 26%,rgba(244,239,230,.86) 40%,rgba(14,48,67,.72) 66%,var(--navy-deep) 100%);
}
.tgj-chero__in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:72px 24px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;min-height:330px;
}
.tgj-chero h1{font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.025em;margin-bottom:18px}
.tgj-chero h1 .l2{color:var(--copper-dark);display:block}
.tgj-chero__sub{font-size:17px;max-width:38ch;color:var(--body);margin-bottom:26px}
.tgj-chero__tag{display:flex;align-items:center;gap:16px}
.tgj-chero__tag .bar{width:56px;height:1px;background:var(--copper)}
.tgj-chero__topics{
  list-style:none;margin:0;padding:0 0 0 22px;border-left:1px solid var(--copper);
  display:grid;gap:11px;
}
.tgj-chero__topics li{
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--on-dark);font-weight:500;
}
.tgj-chero__sig{position:absolute;right:24px;bottom:26px;z-index:3;text-align:right}

/* ==========================================================================
   6. FILTER TABS
   ========================================================================== */
.tgj-tabs{border-bottom:1px solid var(--line);background:var(--cream)}
.tgj-tabs__in{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;gap:34px;overflow-x:auto;scrollbar-width:none;
}
.tgj-tabs__in::-webkit-scrollbar{display:none}
.tgj-tabs a{
  flex-shrink:0;padding:18px 0;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tgj-tabs a:hover{color:var(--navy)}
.tgj-tabs a.is-active{color:var(--navy);border-bottom-color:var(--copper)}

/* ==========================================================================
   7. SECTION HEADERS
   ========================================================================== */
.tgj-shead{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.tgj-shead__num{
  font-family:var(--serif);font-size:30px;font-weight:700;
  color:var(--copper);line-height:1;flex-shrink:0;
}
.tgj-shead__label{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);flex-shrink:0;
}
.tgj-shead__right{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);flex-shrink:0;
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.tgj-card{display:flex;flex-direction:column;background:transparent}
.tgj-card__media{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  background:var(--navy-deep);margin-bottom:16px;
}
.tgj-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.tgj-card:hover .tgj-card__media img{transform:scale(1.04)}
.tgj-card__title{font-size:21px;line-height:1.25;margin:0 0 10px;transition:color .15s var(--ease)}
.tgj-card:hover .tgj-card__title{color:var(--copper-dark)}
.tgj-card__ex{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 14px}
.tgj-card__foot{margin-top:auto}
.tgj-card--boxed{border:1px solid var(--line-soft);background:var(--surface);padding:0 0 20px}
.tgj-card--boxed .tgj-card__media{margin-bottom:18px}
.tgj-card--boxed .tgj-card__body{padding-inline:20px}
.tgj-card--sm .tgj-card__title{font-size:18px}
.tgj-card--sm .tgj-card__media{aspect-ratio:16/9;margin-bottom:13px}

.tgj-grid{display:grid;gap:32px}
.tgj-grid--2{grid-template-columns:repeat(2,1fr)}
.tgj-grid--3{grid-template-columns:repeat(3,1fr)}
.tgj-grid--4{grid-template-columns:repeat(4,1fr)}

/* Featured block */
.tgj-feat{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.tgj-feat__media{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--navy-deep)}
.tgj-feat__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.tgj-feat:hover .tgj-feat__media img{transform:scale(1.03)}
.tgj-feat__cap{
  position:absolute;left:0;bottom:0;z-index:2;
  background:rgba(12,42,61,.78);color:var(--on-dark);
  font-size:11px;letter-spacing:.06em;padding:7px 13px;
}
.tgj-feat h2{font-size:clamp(26px,2.6vw,33px);line-height:1.18;margin-bottom:16px}
.tgj-feat__ex{font-size:15.5px;line-height:1.65;margin-bottom:16px}
.tgj-feat__meta{margin-bottom:16px}

/* Featured with takeaways (home deep dive) */
.tgj-deep{display:grid;grid-template-columns:1.05fr 1.15fr .8fr;gap:36px;align-items:start}
.tgj-deep__points{border-left:1px solid var(--line);padding-left:26px;display:grid;gap:22px}
.tgj-deep__point{display:flex;gap:14px}
.tgj-deep__point .n{
  font-family:var(--serif);font-size:19px;font-weight:700;color:var(--copper);line-height:1.2;flex-shrink:0;
}
.tgj-deep__point p{font-size:14px;line-height:1.55;margin:0;color:var(--body)}

/* Pillar cards (What we cover) */
.tgj-pillar{border:1px solid var(--line-soft);background:var(--surface);display:flex;flex-direction:column}
.tgj-pillar__media{aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep)}
.tgj-pillar__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.tgj-pillar:hover .tgj-pillar__media img{transform:scale(1.04)}
.tgj-pillar__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.tgj-pillar h3{font-size:23px;margin-bottom:6px}
.tgj-pillar__q{font-family:var(--serif);font-size:17px;color:var(--navy);margin-bottom:12px}
.tgj-pillar p{font-size:14.5px;line-height:1.6;margin-bottom:20px}
.tgj-pillar .tgj-link{margin-top:auto}

/* List-style rows (Power & Markets) */
.tgj-row{
  display:grid;grid-template-columns:290px 1fr auto;gap:30px;
  align-items:start;padding-block:34px;border-bottom:1px solid var(--line-soft);
}
.tgj-row:first-child{padding-top:0}
.tgj-row__media{aspect-ratio:16/10;overflow:hidden;background:var(--navy-deep)}
.tgj-row__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.tgj-row:hover .tgj-row__media img{transform:scale(1.04)}
.tgj-row h3{font-size:clamp(22px,2.2vw,28px);line-height:1.22;margin-bottom:12px}
.tgj-row p{font-size:15px;line-height:1.6;margin-bottom:14px}
.tgj-row__arrow{
  align-self:center;font-size:20px;color:var(--copper);
  transition:transform .2s var(--ease);
}
.tgj-row:hover .tgj-row__arrow{transform:translateX(5px)}

/* ==========================================================================
   9. SIDEBAR
   ========================================================================== */
.tgj-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--gap);align-items:start}
.tgj-side{display:grid;gap:38px;position:sticky;top:100px}

.tgj-sub{background:var(--navy);padding:26px 24px 28px}
.tgj-sub .tgj-kicker{margin-bottom:14px;display:block}
.tgj-sub h3{font-size:23px;line-height:1.3;color:var(--cream);margin-bottom:18px}
.tgj-sub p.i{font-size:14px;color:var(--on-dark-muted);margin-bottom:16px}
.tgj-sub__form{display:flex;border:1px solid rgba(244,239,230,.25)}
.tgj-sub__form input[type=email]{
  flex:1;min-width:0;padding:13px 14px;border:0;background:var(--cream);
  font-family:var(--sans);font-size:14px;color:var(--body);
}
.tgj-sub__form input[type=email]:focus{outline:2px solid var(--copper);outline-offset:-2px}
.tgj-sub__form button{
  border:0;background:var(--copper);color:#fff;padding:13px 20px;
  font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s var(--ease);
}
.tgj-sub__form button:hover{background:var(--copper-dark)}
.tgj-sub__note{font-size:11px;color:var(--on-dark-muted);margin:10px 0 0}

.tgj-mostread h4,.tgj-side__h{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-family:var(--sans);margin:0 0 18px;
}
.tgj-mostread ol{list-style:none;margin:0;padding:0}
.tgj-mostread li{display:flex;gap:16px;padding-block:15px;border-bottom:1px solid var(--line-soft)}
.tgj-mostread li:last-child{border-bottom:0}
.tgj-mostread .n{
  font-family:var(--serif);font-size:24px;font-weight:700;color:var(--copper);
  line-height:1.05;flex-shrink:0;width:32px;
}
.tgj-mostread a{font-family:var(--serif);font-size:15.5px;line-height:1.32;color:var(--navy);font-weight:600}
.tgj-mostread a:hover{color:var(--copper-dark)}

.tgj-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
.tgj-theme{text-align:center;color:var(--navy)}
.tgj-theme .ic{
  width:34px;height:34px;margin:0 auto 8px;display:grid;place-items:center;color:var(--copper);
}
.tgj-theme span{font-size:11px;line-height:1.3;display:block;color:var(--body)}

.tgj-quote{border-top:1px solid var(--line-soft);padding-top:26px}
.tgj-quote .mark{font-family:var(--serif);font-size:52px;color:var(--copper);line-height:.7;display:block;margin-bottom:6px;opacity:.55}
.tgj-quote p{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--navy);margin-bottom:16px}
.tgj-quote__by{display:flex;align-items:center;gap:14px}
.tgj-quote__by .bar{width:36px;height:1px;background:var(--copper)}
.tgj-quote__by span{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================================
   10. CTA BAND + FOOTER
   ========================================================================== */
.tgj-band{position:relative;background:var(--navy-deep);overflow:hidden;color:var(--on-dark)}
.tgj-band__bg{position:absolute;inset:0;opacity:.3;background-size:cover;background-position:center}
.tgj-band__in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:64px 24px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
}
.tgj-band h2{font-size:clamp(28px,3.2vw,38px);line-height:1.2;color:var(--cream);margin:14px 0 0}
.tgj-band h2 span{display:block}
.tgj-band__note{font-size:15px;color:var(--on-dark-muted);max-width:34ch;margin-bottom:20px}

.tgj-sub--band{background:transparent;padding:0}
.tgj-band .tgj-sub__form{border-color:rgba(244,239,230,.3)}

.tgj-footer{background:var(--navy);color:var(--on-dark);padding-block:30px}
.tgj-footer__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:24px;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;
}
.tgj-footer .tgj-brand__name{color:var(--cream)}
.tgj-footer .tgj-brand__tag{color:var(--on-dark-muted)}
.tgj-footer .tgj-brand__mark{background:var(--cream);color:var(--navy)}
.tgj-footer__nav{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.tgj-footer__nav a{font-size:14px;color:var(--on-dark)}
.tgj-footer__nav a:hover{color:var(--copper)}
.tgj-social{display:flex;gap:16px;align-items:center;margin-left:auto}
.tgj-social a{color:var(--on-dark);line-height:0}
.tgj-social a:hover{color:var(--copper)}
.tgj-footer__sig{
  padding-left:34px;border-left:1px solid rgba(244,239,230,.22);
  text-align:right;
}

/* ==========================================================================
   11. SINGLE ARTICLE
   ========================================================================== */
.tgj-article{padding-block:56px}
.tgj-article__head{max-width:760px;margin:0 auto 34px}
.tgj-article__head h1{font-size:clamp(32px,4vw,50px);line-height:1.1;margin-bottom:18px}
.tgj-article__lede{font-size:19px;line-height:1.55;color:var(--body);margin-bottom:18px}
.tgj-article__hero{max-width:1000px;margin:0 auto 40px}
.tgj-article__hero img{width:100%}
.tgj-article__body{max-width:720px;margin:0 auto;font-size:17.5px;line-height:1.75}
.tgj-article__body h2{font-size:29px;margin:1.6em 0 .5em}
.tgj-article__body h3{font-size:23px;margin:1.5em 0 .4em}
.tgj-article__body blockquote{
  border-left:2px solid var(--copper);padding-left:24px;margin:1.6em 0;
  font-family:var(--serif);font-style:italic;font-size:21px;color:var(--navy);
}
.tgj-article__body img{margin-block:1.6em}
.tgj-article__body ul,.tgj-article__body ol{padding-left:1.3em;margin-bottom:1.2em}
.tgj-article__body li{margin-bottom:.5em}
.tgj-article__foot{max-width:720px;margin:46px auto 0;padding-top:26px;border-top:1px solid var(--line)}

/* ==========================================================================
   12. ARCHIVE / SEARCH / EMPTY
   ========================================================================== */
.tgj-empty{
  border:1px dashed var(--line);background:var(--surface);
  padding:48px 32px;text-align:center;
}
.tgj-empty h3{font-size:22px;margin-bottom:8px}
.tgj-empty p{font-size:15px;color:var(--muted);margin:0}
.tgj-pagination{display:flex;gap:8px;justify-content:center;margin-top:48px}
.tgj-pagination .page-numbers{
  padding:9px 15px;border:1px solid var(--line);color:var(--navy);font-size:14px;
}
.tgj-pagination .current{background:var(--navy);color:var(--cream);border-color:var(--navy)}

/* ==========================================================================
   13. MOTION
   ========================================================================== */
.tgj-fade{opacity:0;transform:translateY(14px)}
.tgj-fade.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .tgj-fade,.tgj-fade.in{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .tgj-layout{grid-template-columns:1fr;gap:56px}
  .tgj-side{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .tgj-deep{grid-template-columns:1fr 1fr;gap:30px}
  .tgj-deep__points{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:22px 0 0;
    grid-template-columns:repeat(3,1fr);display:grid}
}
@media(max-width:980px){
  .tgj-nav{display:none}
  .tgj-burger{display:block}
  .tgj-hero__grid{grid-template-columns:1fr;gap:36px}
  .tgj-hero__figure{grid-template-columns:1fr}
  .tgj-annot{grid-template-columns:repeat(2,1fr);gap:16px}
  .tgj-chero__in{grid-template-columns:1fr;padding-block:52px}
  .tgj-chero::after{background:linear-gradient(180deg,rgba(244,239,230,.96) 0%,rgba(244,239,230,.9) 52%,rgba(14,48,67,.86) 100%)}
  .tgj-chero__topics{padding-left:0;border-left:0;border-top:1px solid var(--copper);padding-top:16px;
    grid-template-columns:repeat(2,1fr)}
  .tgj-chero__topics li{color:var(--navy)}
  .tgj-chero__sig{display:none}
  .tgj-grid--4{grid-template-columns:repeat(2,1fr)}
  .tgj-grid--3{grid-template-columns:repeat(2,1fr)}
  .tgj-feat{grid-template-columns:1fr;gap:22px}
  .tgj-band__in{grid-template-columns:1fr;gap:26px}
  .tgj-footer__sig{padding-left:0;border-left:0;text-align:left;width:100%}
}
@media(max-width:720px){
  .tgj-section{padding-block:44px}
  .tgj-wrap{padding-inline:16px}
  .tgj-header__in{padding-inline:16px;gap:14px}
  .tgj-hero__grid,.tgj-chero__in,.tgj-band__in,.tgj-tabs__in,.tgj-footer__in{padding-inline:16px}
  .tgj-brand__name{font-size:17px}
  .tgj-brand__mark{width:38px;height:38px;font-size:14px}
  .tgj-grid--2,.tgj-grid--3,.tgj-grid--4{grid-template-columns:1fr}
  .tgj-side{grid-template-columns:1fr}
  .tgj-deep{grid-template-columns:1fr}
  .tgj-deep__points{grid-template-columns:1fr}
  .tgj-row{grid-template-columns:1fr;gap:16px}
  .tgj-row__arrow{display:none}
  .tgj-annot{grid-template-columns:1fr}
  .tgj-hero{padding-block:38px 20px}
  .tgj-article{padding-block:34px}
  .tgj-footer__in{gap:20px}
  .tgj-social{margin-left:0}
}

/* ==========================================================================
   15. SPECIFICITY CORRECTIONS
   `body.tgj a` (0,1,2) outranks single-class component rules, so every
   link colour that differs from the default is restated here.
   ========================================================================== */

body.tgj .screen-reader-text,
body.tgj .skip-link{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
body.tgj .skip-link:focus{
  position:static!important;width:auto;height:auto;margin:0;clip:auto;
  display:inline-block;padding:12px 18px;background:var(--navy);color:var(--cream);
}

/* Brand lock-up stacks */
body.tgj .tgj-brand__name,
body.tgj .tgj-brand__tag{display:block}
body.tgj .tgj-brand{color:var(--navy)}
body.tgj .tgj-footer .tgj-brand{color:var(--cream)}

/* Navigation */
body.tgj .tgj-nav a{color:var(--body);white-space:nowrap}
body.tgj .tgj-nav a:hover{color:var(--navy)}
body.tgj .tgj-nav .current-menu-item>a,
body.tgj .tgj-nav .current_page_item>a,
body.tgj .tgj-nav .tgj-active>a{color:var(--copper-dark)}
body.tgj .tgj-mobilenav a{color:var(--navy)}

/* Buttons */
body.tgj .tgj-btn--solid{color:#fff}
body.tgj .tgj-btn--solid:hover{color:#fff}
body.tgj .tgj-btn--ghost{color:var(--navy)}
body.tgj .tgj-btn--ghost:hover{color:var(--cream)}
body.tgj .tgj-btn--onDark{color:var(--cream)}
body.tgj .tgj-btn--onDark:hover{color:#fff}

/* Headlines stay navy; copper is for hover and eyebrows only */
body.tgj .tgj-card__title a,
body.tgj .tgj-feat h2 a,
body.tgj .tgj-row h3 a,
body.tgj .tgj-pillar h3 a,
body.tgj .tgj-mostread a,
body.tgj .tgj-deep h2 a{color:var(--navy)}
body.tgj .tgj-card:hover .tgj-card__title a,
body.tgj .tgj-feat h2 a:hover,
body.tgj .tgj-row h3 a:hover,
body.tgj .tgj-pillar h3 a:hover,
body.tgj .tgj-mostread a:hover,
body.tgj .tgj-deep h2 a:hover{color:var(--copper-dark)}

/* On-dark surfaces */
body.tgj .tgj-band h2,
body.tgj .tgj-band h2 span,
body.tgj .tgj-sub h3{color:var(--cream)}
body.tgj .tgj-footer a{color:var(--on-dark)}
body.tgj .tgj-footer a:hover{color:var(--copper)}
body.tgj .tgj-chero__topics li{color:var(--on-dark)}

/* Eyebrows are links too */
body.tgj a.tgj-eyebrow{color:var(--copper-dark)}
body.tgj a.tgj-eyebrow:hover{color:var(--navy)}

/* Hero art sizing */
body.tgj .tgj-hero__figure>div:first-child{min-width:0}
body.tgj .tgj-hero__art svg{max-width:100%}

/* Subscribe form inside the dark band needs room */
body.tgj .tgj-sub--band .tgj-sub__form{width:100%}
.tgj-grid--1{grid-template-columns:minmax(0,520px)}

/* Hub hero: keep the headline out of the dark half */
body.tgj .tgj-chero h1,
body.tgj .tgj-chero__sub{max-width:min(560px,58%)}
body.tgj .tgj-chero__in>div:first-child{min-width:0}
@media(max-width:980px){
  body.tgj .tgj-chero h1,
  body.tgj .tgj-chero__sub{max-width:100%}
}
body.tgj .tgj-chero__bg--motif{opacity:1}
body.tgj .tgj-chero__bg--motif svg{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   16. HUB HERO — let an uploaded photo actually read through the scrim
   ========================================================================== */
body.tgj .tgj-chero__bg{opacity:1}
body.tgj .tgj-chero::after{
  background:linear-gradient(100deg,
    var(--cream) 0%,
    var(--cream) 28%,
    rgba(244,239,230,.72) 40%,
    rgba(244,239,230,.10) 52%,
    rgba(12,42,61,.42) 72%,
    rgba(12,42,61,.88) 92%,
    var(--navy-deep) 100%);
}
body.tgj .tgj-chero__bg--motif{opacity:.9}
@media(max-width:980px){
  body.tgj .tgj-chero::after{
    background:linear-gradient(180deg,
      rgba(244,239,230,.95) 0%,
      rgba(244,239,230,.88) 48%,
      rgba(12,42,61,.80) 100%);
  }
}

/* Hero globe sits on the page ground — no frame, no box */
body.tgj .tgj-hero__art img{background:transparent;max-width:100%;margin-inline:auto}

/* ==========================================================================
   17. HUB HERO — cut-out variant (object floating on cream)
   ========================================================================== */
body.tgj .tgj-chero--object{background:var(--cream)}
body.tgj .tgj-chero--object::after{display:none}
body.tgj .tgj-chero--object .tgj-chero__in{padding-block:56px}
body.tgj .tgj-chero--object .tgj-chero__sig{color:var(--muted)}
body.tgj .tgj-chero--object .tgj-script{color:var(--muted)}

.tgj-chero__object{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.tgj-chero__object img{max-width:420px;width:100%;height:auto}
.tgj-chero__object .tgj-annot li{white-space:nowrap}
.tgj-chero__object .tgj-annot .sub{
  font-size:10px;letter-spacing:.06em;text-transform:none;
  color:var(--muted);font-weight:400;
}
@media(max-width:980px){
  body.tgj .tgj-chero--object .tgj-chero__in{grid-template-columns:1fr}
  .tgj-chero__object{grid-template-columns:1fr;gap:18px}
  .tgj-chero__object .tgj-annot{grid-template-columns:repeat(2,1fr)}
  .tgj-chero__object img{max-width:320px;margin-inline:auto}
}

/* body.tgj img (0,1,2) outranks the component rule — restate it */
body.tgj .tgj-chero__object img{max-width:360px;width:100%;height:auto}
body.tgj .tgj-chero--object .tgj-chero__in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
body.tgj .tgj-chero--object h1,
body.tgj .tgj-chero--object .tgj-chero__sub{max-width:min(460px,100%)}
@media(max-width:980px){
  body.tgj .tgj-chero__object img{max-width:300px;margin-inline:auto}
  body.tgj .tgj-chero--object h1,
  body.tgj .tgj-chero--object .tgj-chero__sub{max-width:100%}
}