/*
Theme Name: TechBullion
Theme URI: https://techbullion.com/
Author: TechBullion
Description: The TechBullion news theme. Executive interviews lead the homepage, articles read in a clean three-column layout, and paid content is labelled and kept apart from editorial.
Version: 1.12.5
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techbullion
*/

/* ---------- 1. Tokens and base ---------- */
:root{
  --night:#001A2E; --navy:#002F56; --header:#104561; --link:#22698F; --sky:#66CCFF; --gold:#FFC45C; --gold-80:#CC9D4A;
  /* --ink is the heading colour: a dark grey pulled toward the brand navy, so headings sit with the blues instead of shouting in pure black. */
  --ink:#1A2836; --text:#222222; --muted:#666666; --ground:#EFEFEF; --paper:#FFFFFF; --line:#DCE1E6; --zebra:#F6F7F8;
  --ease:cubic-bezier(.16,1,.3,1);
  --pic:15/7;
  --head:Montserrat,"Helvetica Neue",Arial,sans-serif; --body:Lato,"Helvetica Neue",Arial,sans-serif;
  --bar:0px;          /* height of the WordPress admin bar, when it shows */
  --top:76px;         /* height of the main navigation */
  color-scheme:light;
}
body.admin-bar{--bar:32px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* The page width is a setting (Customize, "TechBullion: homepage layout"); the head rules set --tb-wrap. */
.wrap{max-width:var(--tb-wrap,1392px);margin:0 auto;padding-inline:24px}
/* The cover row and the news rows share one split and one gap, so Latest posts sits under the big cover and Most read under the four side tiles. */
:root{--tb-split:minmax(0,2.2fr) minmax(0,1fr);--tb-col-gap:28px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;padding:12px 16px;background:var(--paper);color:var(--ink);border-radius:6px}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;border:0;font:700 14px/1 var(--head);background:var(--gold);color:#000;white-space:nowrap;cursor:pointer;transition:background .6s var(--ease)}
.btn:hover{background:var(--gold-80)}
.btn svg{width:15px;height:15px}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--header)}

/* ---------- 2. Main navigation ---------- */
.topwrap{position:sticky;top:calc(var(--bar) + env(safe-area-inset-top,0px));z-index:50}
/* The header is the brand navy, with the links in light capitals. */
/* position and z-index keep it bright above the dimmed page while the menu drawer is open. */
.top{position:relative;z-index:1;height:var(--top);padding:0 28px;display:flex;align-items:center;gap:40px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
.top__logo{flex-shrink:0;display:block}
.top__logo img{height:54px;width:auto;display:block}
.top__nav{margin-inline:auto;align-self:stretch;display:flex}
.top__nav ul{list-style:none;margin:0;padding:0}
/* The links never wrap or squeeze: they tighten as the window narrows, and below 1400px (room for an eleven-link menu) the menu button takes over. */
.top__nav>ul{display:flex;gap:clamp(14px,1.5vw,26px);font:400 clamp(12.5px,.95vw,14px)/1 var(--head);text-transform:uppercase;letter-spacing:.01em;color:#fff;white-space:nowrap}
.top__nav>ul>li{position:relative;display:flex;align-items:center}
.top__nav>ul>li>a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 0}
.top__nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.top__nav>ul>li:hover>a::after,.top__nav>ul>li:focus-within>a::after,
.top__nav>ul>li.current-menu-item>a::after,.top__nav>ul>li.current-menu-ancestor>a::after,.top__nav>ul>li.current-menu-parent>a::after{transform:scaleX(1)}
.top__nav>ul>li.menu-item-has-children>a::before{content:"";order:2;width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .6s var(--ease)}
.top__nav>ul>li.menu-item-has-children:hover>a::before,.top__nav>ul>li.menu-item-has-children:focus-within>a::before{transform:translateY(2px) rotate(-135deg)}
.top__nav .sub-menu{position:absolute;top:100%;left:-20px;min-width:230px;display:grid;grid-template-columns:1fr;gap:2px;background:var(--paper);color:var(--text);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px rgba(0,26,46,.18);padding:12px 8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s linear .5s;z-index:10}
.top__nav .sub-menu:has(>li:nth-child(7)){min-width:440px;grid-template-columns:repeat(2,minmax(0,1fr))}
.top__nav li:hover>.sub-menu,.top__nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s}
.top__nav .sub-menu a{display:block;padding:9px 12px;border-radius:6px;font:400 14px/1.25 var(--head);text-transform:none;letter-spacing:0;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease)}
.top__nav .sub-menu a:hover,.top__nav .sub-menu a:focus-visible{background:var(--ground);color:var(--navy)}
.top__nav .sub-menu .sub-menu{display:none}
.top__tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Google's "Add to Preferred Sources" button, drawn the way Google draws it: a white pill with the G. */
.gps{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 18px 0 14px;border:1px solid #C9CED4;border-radius:20px;background:#fff;color:#1F1F1F;font:500 14px/1 var(--body);white-space:nowrap;transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.gps:hover{border-color:#9AA3AD;box-shadow:0 2px 10px rgba(0,26,46,.18);color:#1F1F1F}
.gps svg{width:20px;height:20px;flex-shrink:0}
.gps--wide{display:flex;width:100%}
.fly .gps{margin-top:12px;color:#1F1F1F}
.pg-intro .gps{justify-self:start;margin-top:4px}
.gps--meta{align-self:center;height:36px;font-size:13px}
.foot .gps{margin-top:4px}
.top__ico{width:44px;height:44px;border:0;border-radius:7px;background:none;color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .6s var(--ease)}
.top__ico:hover{background:rgba(255,255,255,.12)}
.top__ico svg{width:20px;height:20px}
.top__menu{margin-left:-10px}
@media (min-width:1401px){.top__menu{margin-right:-24px}}
/* The search bar is plain: white, one grey field, no coloured band. */
.sbar{background:var(--paper);padding:16px 28px;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,26,46,.12)}
.sbar[hidden]{display:none}
.sbar .sform{margin:0 auto}
/* The menu panel: a navy drawer that opens from the left under the header. Account buttons, the menu,
   every category (those with sub-categories open on click), and the pages. The page behind is dimmed. */
.fly{position:fixed;left:0;top:calc(var(--bar) + env(safe-area-inset-top,0px) + var(--top));bottom:0;width:min(380px,100%);background:var(--navy);color:#fff;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 40px;box-shadow:0 0 0 100vmax rgba(0,26,46,.5)}
.fly[hidden]{display:none}
/* While the drawer is open the page behind it does not scroll. */
html.tb-locked{overflow:hidden}
/* The share plugin's floating bar steps aside while the drawer is open. */
body:has(#tb-menu:not([hidden])) .et_social_sidebar_networks{display:none}
/* On a wide screen the header already shows the menu, so the drawer does not repeat it. */
@media (min-width:1401px){.fly__nav{display:none}}
.fly h2{margin:28px 0 6px;font:700 12px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.fly ul{list-style:none;margin:0;padding:0}
.fly a{color:#fff;transition:color .4s var(--ease)}
.fly a:hover{color:var(--gold)}
.fly__acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fly__acct a{height:44px;border-radius:7px;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font:700 14px/1 var(--head);transition:background .5s var(--ease),border-color .5s var(--ease)}
.fly__acct a:first-child{background:var(--gold);border-color:var(--gold);color:#000}
.fly__acct a:first-child:hover{background:#fff;border-color:#fff;color:#000}
.fly__acct a:hover{border-color:#fff;color:#fff}
.fly__nav li>a,.fly__cat,.fly summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-bottom:1px solid rgba(255,255,255,.12);font:500 16px/1.25 var(--head)}
.fly summary{cursor:pointer;list-style:none}
.fly summary::-webkit-details-marker{display:none}
.fly summary::after{content:"";flex-shrink:0;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--ease)}
.fly details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.fly details ul{padding:8px 0 10px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.fly details li a{display:block;padding:7px 0;font:400 15px/1.3 var(--body);color:rgba(255,255,255,.82)}
.fly__pages ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding-top:6px}
.fly__pages a{display:block;padding:6px 0;font:400 14px/1.3 var(--body);color:rgba(255,255,255,.82)}

/* ---------- 3. Shared pieces ---------- */
.pg-head{padding-block:44px 36px;display:flex;flex-direction:column;gap:18px}
.pg-top{display:flex;justify-content:space-between;align-items:stretch;gap:clamp(40px,6vw,96px);margin-bottom:10px}
/* Wide screens: the heading block takes the left, the panel the right third, with clear air between; both start on one line. */
@media (min-width:1101px){
  .pg-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,33%);column-gap:clamp(56px,8vw,140px);align-items:start}
}
/* The intro line is never wider than its heading: the column is as wide as the heading's text, and the
   paragraph (width:0, min-width:100%) takes that width without adding to it. A long heading simply wraps,
   and beside a very short one ("AI") the paragraph still gets a readable 34 characters on wider screens.
   On a phone the heading already fills the line, so the paragraph simply takes the full width. */
.pg-intro,.more__intro{display:grid;grid-template-columns:minmax(0,max-content);align-content:start;gap:12px;min-width:0}
.pg-intro>p,.more__intro>p{width:0;min-width:100%}
@media (min-width:701px){.pg-intro>p,.more__intro>p{min-width:max(100%,34ch)}}
@media (max-width:700px){.pg-intro,.more__intro{grid-template-columns:minmax(0,1fr)}}
.pg-h1{margin:0;font:800 clamp(38px,5vw,64px)/1.02 var(--head);letter-spacing:-.035em;color:var(--ink);overflow-wrap:anywhere}
.pg-lede{margin:0;font:400 18px/1.55 var(--body);color:var(--text)}
.pg-lede--wide{max-width:56ch}
.pg-note{margin:0;max-width:62ch;font:400 14px/1.5 var(--body);color:var(--muted)}
.pg-rule{border:0;border-top:1px solid var(--line);margin:0}
.sec-h{margin:0 0 20px;font:800 26px/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}

/* follow rows (top right of listing pages, and the cards on the article page) */
.follow{border-bottom:1px solid var(--line)}
.follow__row{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:10px 0;border-top:1px solid var(--line)}
.pg-top .follow__row{min-height:68px}
.follow__l{font:400 17px/1.2 var(--body);color:var(--text)}
.follow__r{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;font:400 16px/1.2 var(--body);color:var(--text);text-align:right;transition:color .6s var(--ease)}
.follow__r svg{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.follow__r>span{min-width:0;overflow-wrap:anywhere}
a.follow__row:hover .follow__r{color:var(--link)}
.follow__icons{display:flex;gap:8px}
.follow__icons a,.ico{width:38px;height:38px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.follow__icons a:hover,.ico:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.follow__icons svg,.ico svg{width:16px;height:16px}

/* one-line filter and topic bars */
.fbar{display:flex;align-items:center;gap:18px;padding:18px 0 0;border-top:1px solid var(--line)}
.fl{flex-shrink:0;height:36px;padding:0 14px;border-radius:6px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;font:700 12px/1 var(--head);letter-spacing:.08em;text-transform:uppercase}
.fopts{flex:1;min-width:0;display:flex;align-items:center;gap:28px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.fopts::-webkit-scrollbar{display:none}
.fopts.is-fade{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.fopt{flex-shrink:0;position:relative;padding:6px 0;font:400 16px/1.3 var(--body);color:var(--text);transition:color .6s var(--ease)}
.fopt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fopt:hover{color:var(--navy)}
.fopt:hover::after,.fopt.is-on::after{transform:scaleX(1)}
.fopt.is-on{color:var(--ink)}
.fnext{flex-shrink:0;width:36px;height:36px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);display:grid;place-items:center;padding:0;cursor:pointer;transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.fnext[hidden]{display:none}
.fnext svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.fnext:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.fnext.is-back svg{transform:rotate(180deg)}
.fyear{flex-shrink:0;display:flex;align-items:center;gap:10px;font:400 15px/1 var(--body);color:var(--muted)}
.fyear select{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:400 15px/1 var(--body);color:var(--ink)}

/* story cards */
.grid3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cc{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;transition:border-color .6s var(--ease),transform .8s var(--ease)}
.cc:hover{border-color:var(--navy);transform:translateY(-3px)}
.cc>a{display:flex;flex-direction:column;height:100%}
/* TechBullion's featured images are wide banners (about 15:7) with the headline drawn on them, so every
   story picture box keeps that shape. A taller box would crop the words off the sides. */
.li-img{display:block;aspect-ratio:var(--pic);overflow:hidden;background:var(--ground)}
.li-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.cc:hover .li-img img{transform:scale(1.05)}
.li-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.li-meta{font:400 13px/1.3 var(--body);color:var(--muted)}
.li-meta b{font:700 12px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--link);margin-right:6px}
/* Card headlines are medium weight, not bold: many of them sit together and bold made the page heavy. */
.li-t{font:500 17px/1.38 var(--head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.li-read{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--head);color:var(--link)}
.li-read svg{width:14px;height:14px}
.cc--lead .li-body{padding:24px 28px 28px;gap:12px}
.cc--lead .li-t{font:600 30px/1.18 var(--head);letter-spacing:-.02em}
.cc__x{margin:0;font:400 17px/1.55 var(--body);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cc--ad{display:grid;place-items:center;min-height:300px;padding:20px;background:var(--ground);border-color:transparent}
.cc--ad:hover{transform:none;border-color:transparent}
.tag-paid{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--gold);color:#000;font:700 12px/1 var(--head);letter-spacing:.06em;text-transform:uppercase;margin-right:8px}

/* page numbers */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding-block:44px 64px;font:700 14px/1 var(--head)}
.pager .page-numbers{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.pager a.page-numbers:hover,.pager .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.pager .page-numbers.dots{border:0;min-width:auto;padding:0 4px;color:var(--muted)}
.pager svg{width:14px;height:14px}

/* ad slots */
.adslot{display:flex;justify-content:center;max-width:100%;overflow:hidden}
.adslot>*{max-width:100%}
/* An ad unit Google could not fill closes up instead of leaving a blank box (Google's own data-ad-status flag). */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.adslot:has(>ins.adsbygoogle[data-ad-status="unfilled"]:only-of-type){margin:0!important}
/* The editor's placeholder for an empty ad space. Sidebar spaces are 336 x 280; the two inside content stay 300 x 250. */
.ad{width:336px;max-width:100%;height:280px;border:1px dashed #B9C2CB;border-radius:4px;background:var(--paper);display:grid;place-content:center;text-align:center;padding:12px;font:600 12px/1.6 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ad--tall{width:300px;height:600px}
.ad--mpu{width:300px;height:250px}
.ad--lb{width:728px;height:90px}
.lb{display:flex;justify-content:center;padding-block:32px}

/* page with a sidebar */
.lay{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:40px;align-items:stretch;padding-bottom:16px}
.lay__main{min-width:0}
.lay .grid3{gap:20px}
.side2{display:flex}
.side2__in{flex:1;display:flex;flex-direction:column;gap:32px}
.sp-last{position:sticky;top:calc(var(--bar) + var(--top) + 28px)}
.sp h2{margin:0 0 4px;font:800 20px/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.sp ul{list-style:none;margin:0;padding:0}
.sp li{border-top:1px solid var(--line)}
.sp li:first-child{border-top:0}
.sp li a{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
/* Most read: the top story's picture, then headlines; each row has the same section and date line as a card. */
.pop li a{display:flex;flex-direction:column;gap:6px;padding:14px 0}
.sp img{width:118px;height:auto;aspect-ratio:var(--pic);object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--ground)}
.sp li a>span{display:flex;flex-direction:column;gap:5px;min-width:0}
/* List titles are set light, as the old site set them: regular weight, not bold. */
.sp-t{font:400 14.5px/1.4 var(--head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .6s var(--ease)}
.sp li a:hover .sp-t{color:var(--link)}
.sp-links{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.sp-links a{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;font:400 15px/1 var(--body);color:var(--text);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.sp-links a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.sp-tools{background:var(--navy);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sp-tools__k{font:700 12px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.sp-tools__t{font:800 20px/1.25 var(--head);color:#fff}

/* search form */
.sform{display:flex;gap:10px;max-width:720px}
.sform__f{flex:1;position:relative}
.sform__f svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sform input[type=search]{width:100%;height:52px;padding:0 16px 0 46px;border:1px solid #BFC7CF;border-radius:9px;background:var(--paper);font:400 18px/1 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none}
.sform button{height:52px;padding:0 24px;border:0;border-radius:9px;background:var(--navy);color:#fff;font:700 15px/1 var(--head);cursor:pointer;transition:background .6s var(--ease)}
.sform button:hover{background:var(--header)}
.sform input[type=search]:focus-visible{outline:0;border-color:var(--navy)}

/* ---------- 4. Interview tiles ---------- */
.tile{position:relative;display:block;overflow:hidden;background:var(--header);isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,26,46,.94) 0%,rgba(0,26,46,.72) 32%,rgba(0,26,46,0) 62%)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:var(--night);opacity:0;transition:opacity 1s var(--ease)}
.tile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(16px,2.4vw,36px) clamp(20px,2.6vw,38px);color:#fff}
.tile__meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:8px;font:700 13px/1.2 var(--head)}
.tile__topic{color:var(--gold)}
.tile__date{font:400 13px/1.2 var(--body);color:#fff;opacity:.85}
/* The colours are set outright, not inherited: a plugin's cached heading rule from another theme must not turn them black. */
.tile__name{margin:0;font:900 clamp(30px,3.5vw,54px)/.95 var(--head);color:#fff;text-transform:uppercase;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.tile--title .tile__name{font-size:clamp(20px,1.9vw,28px);line-height:1.12;text-transform:none;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tile__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease)}
.tile__more-in{overflow:hidden;min-height:0}
.tile__title{margin:16px 0 0;font:700 17px/1.35 var(--head);color:#fff;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.tile__snip{margin:10px 0 0;font:400 15px/1.5 var(--body);color:#fff;max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .06s,transform 1s var(--ease) .06s}
.tile__cta{display:inline-block;margin-top:14px;font:700 14px/1 var(--head);color:var(--gold);opacity:0;transition:opacity .8s var(--ease) .12s}
.tile--sm{aspect-ratio:3/4;border-radius:8px}
/* Small enough that a long surname stays on one line instead of breaking mid-word. */
.tile--sm .tile__name{font-size:clamp(15px,1.2vw,18px);line-height:1.05;letter-spacing:-.01em}
.tile--sm .tile__body{padding:0 16px 18px}
/* In the small and grid tiles the section and the date each take one line, so every tile's name starts at the same height. */
.tile--sm .tile__meta,.tile--md .tile__meta{flex-direction:column;flex-wrap:nowrap;gap:3px}
.tile--sm .tile__topic,.tile--md .tile__topic,.tile--sm .tile__date,.tile--md .tile__date{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile--sm .tile__title{font-size:14px;margin-top:10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tile--md{aspect-ratio:3/4;border-radius:8px}
.tile--md .tile__name{font-size:clamp(22px,2.1vw,30px)}
.tile--md.tile--title .tile__name{font-size:clamp(17px,1.5vw,21px)}
.tile--md .tile__body{padding:0 20px 22px}
.tile--md .tile__panel{margin-top:12px;padding:14px 16px 16px;border-radius:8px;background:var(--paper)}
.tile--md .tile__title{margin:0;font-size:15px;color:var(--ink)}
.tile--md .tile__snip{font-size:14px;color:var(--text)}
.tile--md .tile__cta{color:var(--link)}
/* Standing tiles: the interviews slider ('feat') and the homepage cover ('cover') show their text without hover. */
.tile--feat,.tile--cover{aspect-ratio:21/11.2}
.tile--feat img{object-position:50% 22%}
.tile--feat .tile__body,.tile--cover .tile__body{padding:0 clamp(20px,3vw,44px) clamp(24px,3vw,44px)}
.tile--feat .tile__name{font-size:clamp(34px,4.4vw,64px)}
.tile--feat.tile--title .tile__name,.tile--cover.tile--title .tile__name{font-size:clamp(24px,2.8vw,40px)}
.tile--feat .tile__more,.tile--cover .tile__more{grid-template-rows:1fr}
.tile--feat .tile__title,.tile--feat .tile__snip,.tile--feat .tile__cta,.tile--cover .tile__title,.tile--cover .tile__cta{opacity:1;transform:none}
.tile--feat .tile__title{font-size:19px;max-width:none}
/* A slide's opening lines run the width; the link ends their second line (see data-tb-fit below). */
.tile--feat .tile__snip{max-width:none;display:block;overflow:visible}
/* The cover has no opening lines. Its text sits low and tight under the face, the headline runs two lines across the
   width, and "Read the interview" ends the second line: theme.js trims the headline by whole words so the two fit. */
.tile--cover{flex:1;aspect-ratio:auto;min-height:clamp(380px,36vw,540px);border-radius:12px}
.tile--cover img{object-position:50% 4%}
.tile--cover .tile__body{padding-bottom:clamp(18px,2vw,26px)}
.tile--cover .tile__name{font-size:clamp(30px,3.4vw,52px)}
.tile--cover .tile__title{margin-top:8px;font-size:18px;font-weight:400;line-height:1.3}
/* A fitted text carries the link on its last line. */
[data-tb-fit] .tile__cta{display:inline;margin:0 0 0 .5em;white-space:nowrap}
@media (hover:hover){
  .tile:hover img,.tile:focus-visible img{transform:scale(1.07)}
  .tile:hover::after,.tile:focus-visible::after{opacity:.35}
  .tile--md:hover::after,.tile--md:focus-visible::after{opacity:.6}
  .tile:hover .tile__more,.tile:focus-visible .tile__more{grid-template-rows:1fr}
  .tile:hover .tile__title,.tile:hover .tile__snip,.tile:hover .tile__cta,
  .tile:focus-visible .tile__title,.tile:focus-visible .tile__snip,.tile:focus-visible .tile__cta{opacity:1;transform:none}
}
@media (hover:none){
  .tile__more{grid-template-rows:1fr}
  .tile__title,.tile__snip,.tile__cta{opacity:1;transform:none}
}

/* "More executive interviews" strip */
.more{background:var(--ground);padding-bottom:56px}
main>.more:last-child{margin-bottom:56px}
.more__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:44px 40px}
.more__head h2{margin:0;font:800 32px/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.more__intro p{margin:0;font:400 17px/1.55 var(--body);color:var(--text);text-wrap:pretty}
.more__all{font:600 14px/1 var(--head);color:var(--link);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.more__all svg{width:16px;height:16px}
.more__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

/* ---------- 5. Homepage ---------- */
/* The homepage cover: one interview given the lead, four smaller ones beside it. It sits inside the page
   width with room around it, so it reads as a front page with one lead and not a wall of faces. */
.cover{padding-top:28px}
.cover__grid{display:grid;grid-template-columns:var(--tb-split);gap:var(--tb-col-gap);align-items:stretch}
.cover__lead{position:relative;display:flex}
.cover__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.cover__side .tile{aspect-ratio:auto;min-height:180px;border-radius:10px}
.cover__side .tile__name{font-size:clamp(15px,1.25vw,20px)}
.news{padding-block:56px 64px}
/* Homepage sections sit one after another; every second one is tinted so each reads as its own block. */
.news+.news{padding-top:56px}
.news--alt{background:var(--ground)}
/* After a tinted section the interviews strip goes white, so two grey bands never touch. */
.news--alt+.more,.related+.more,.band+.more{background:var(--paper)}
.news__grid.news__grid--full{grid-template-columns:minmax(0,1fr)}
/* In a category section the list is spread to end level with the cards beside it. */
.news--sec .pop{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.news__grid{display:grid;grid-template-columns:var(--tb-split);gap:var(--tb-col-gap);align-items:stretch}
.news h2{margin:0;min-height:32px;font:800 24px/1.1 var(--head);color:var(--ink);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:baseline}
.news h2 a{font:600 14px/1 var(--head);color:var(--link)}
.latest,.mostread{display:flex;flex-direction:column}
.latest__grid{flex:1;list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
/* Editor's choice: one story across the full width, picture beside the text, then a row of four cards. */
.pick{list-style:none;margin:16px 0 0;padding:0}
.cc--wide>a{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}
.cc--wide .li-img{height:100%}
.cc--wide .li-body{justify-content:center;padding:24px 36px}
.cc--wide .li-t{font-size:clamp(24px,2.2vw,32px);-webkit-line-clamp:3}
.cc--wide .li-read{margin-top:8px}
@media (max-width:900px){.cc--wide>a{display:flex}.cc--wide .li-body{padding:22px 20px 24px}}
.latest__grid--row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.latest__grid--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.latest__grid .cc{border-radius:8px}
.latest__grid .li-body{padding:16px 18px 20px;gap:6px}
.latest__grid .li-t{font-size:16px}
.mostread .adslot,.mostread>.ad{margin:0 auto 32px}
/* Under Most read: the follow card, then a second ad, so the column is filled to the foot of Latest. */
.mostread .follow{margin-block:28px}
.mostread .follow~.adslot,.mostread .follow~.ad{margin:auto auto 0}
.pop{list-style:none;margin:16px 0 0;padding:0}
.pop li{border-top:1px solid var(--line)}
.pop .li-t{font:500 16px/1.35 var(--head);color:var(--ink);transition:color .6s var(--ease)}
.pop li a:hover .li-t{color:var(--link)}
.pop li.pop__lead{border-top:0}
.pop li.pop__lead a{padding-top:0}
.pop li.pop__lead img{width:100%;height:auto;aspect-ratio:var(--pic);object-fit:cover;border-radius:6px;margin-bottom:6px;background:var(--ground)}
.pop li.pop__lead .li-t{font-size:20px;font-weight:600;line-height:1.28}

/* ---------- 6. Article ---------- */
.progress{position:fixed;left:0;right:0;top:calc(var(--bar) + env(safe-area-inset-top,0px) + var(--top));height:3px;background:var(--gold);transform-origin:left;transform:scaleX(0);z-index:49}
.a-head{padding-top:44px;display:flex;flex-direction:column;gap:20px}
.a-kicker{align-self:flex-start;font:700 13px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.a-head h1{margin:0;font:800 clamp(34px,4.4vw,60px)/1.06 var(--head);letter-spacing:-.035em;color:var(--ink);text-wrap:pretty}
.a-stand{margin:0;max-width:62ch;font:400 21px/1.5 var(--body);color:var(--text)}
.a-meta{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.m-l{font:600 12px/1 var(--head);color:var(--muted);margin-bottom:8px}
.m-v{font:700 14px/1.3 var(--head);color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.m-v a:hover{color:var(--link)}
.m-v img{width:22px;height:22px;border-radius:50%;object-fit:cover}
/* On a phone the details sit in two tidy lines: author, read time and date across the first;
   the section and the Google button across the second. Long values are cut with an ellipsis, never wrapped. */
@media (max-width:700px){
  .a-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 10px;align-items:end}
  .a-meta>div{grid-column:span 4;min-width:0}
  .a-meta>.m-filed{grid-column:span 5}
  .a-meta>.gps--meta{grid-column:span 7;justify-self:end;align-self:end;height:34px;padding:0 12px 0 10px;gap:7px;font-size:12px;max-width:100%}
  .a-meta>.gps--meta svg{width:16px;height:16px}
  .a-meta .m-l{font-size:12px;margin-bottom:6px}
  .a-meta .m-v{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .a-meta .m-v img{display:none}
}
.a-paid{margin-top:8px;padding:16px 18px;border-radius:8px;background:#FDF4E3;font:400 15px/1.5 var(--body);color:var(--ink)}
.a-hero{position:relative;margin:36px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ground)}
.a-hero img{width:100%;height:auto;display:block}
/* The caption sits on the picture itself, bottom left, over a shade that keeps it readable on any image. */
.a-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 24px 18px;font:400 15px/1.4 var(--body);color:#fff;background:linear-gradient(to top,rgba(0,26,46,.86),rgba(0,26,46,0))}
.a-hero figcaption a{color:#fff;text-decoration:underline}
.a-body{display:grid;grid-template-columns:200px minmax(0,720px) 336px;justify-content:space-between;gap:40px;padding-block:52px 72px}
.a-body--notoc{grid-template-columns:minmax(0,720px) 336px;justify-content:center;gap:80px}
.toc{position:sticky;top:calc(var(--bar) + var(--top) + 36px);align-self:start}
.toc h2{margin:0;padding-bottom:16px;border-bottom:1px solid var(--line);font:600 15px/1.2 var(--head);color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:22px 0 0;display:flex;flex-direction:column;gap:20px}
.toc a{display:block;font:600 14px/1.45 var(--head);color:var(--muted);transition:color .6s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a.is-on{color:var(--ink);font-weight:700}
.prose{font:400 19px/1.75 var(--body);color:var(--text);overflow-wrap:break-word}
.prose>*{margin:0 0 1.25em}
.prose h2{font:800 28px/1.2 var(--head);letter-spacing:-.02em;color:var(--ink);margin:1.9em 0 .6em;text-wrap:balance;scroll-margin-top:calc(var(--bar) + var(--top) + 34px)}
.prose h3{font:800 22px/1.25 var(--head);letter-spacing:-.01em;color:var(--ink);margin:1.7em 0 .5em}
.prose h4{font:700 18px/1.3 var(--head);color:var(--ink);margin:1.5em 0 .4em}
.prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .5s var(--ease)}
.prose a:hover{color:var(--navy)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin-inline:0;padding:20px 24px;border-radius:8px;background:var(--ground);font-size:20px;color:var(--ink)}
.prose blockquote>:last-child{margin-bottom:0}
.prose figure{margin-inline:0}
.prose figcaption,.prose .wp-caption-text{margin-top:8px;font:400 13px/1.4 var(--body);color:var(--muted)}
.prose img{border-radius:8px}
.prose iframe,.prose video{max-width:100%}
.prose .wp-caption{max-width:100%}
.prose .alignleft{float:left;margin:6px 24px 12px 0}
.prose .alignright{float:right;margin:6px 0 12px 24px}
.prose .aligncenter{display:block;margin-inline:auto}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.prose table{width:100%;border-collapse:collapse;font:400 16px/1.45 var(--body);min-width:520px}
.prose td,.prose th{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
/* A table's heading row is navy with white text. Both are set together and firmly, on any heading cell wherever
   it sits in the table, because pasted tables bring their own colours and one without the other hides the words. */
.prose table th,.prose table thead td{background:var(--navy)!important;color:#fff!important;font:700 14px/1.3 var(--head)}
.prose table th *,.prose table thead td *{color:#fff!important}
.prose tbody tr:nth-child(even) td{background:var(--zebra)}
.prose tr:last-child td{border-bottom:0}
.a-pages{font:700 14px/1 var(--head);display:flex;gap:10px;align-items:center}
.a-pages .post-page-numbers{min-width:36px;height:36px;border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.a-pages .post-page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.a-end{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.a-end__l{font:600 13px/1 var(--head);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{height:40px;padding:0 14px;border:1px solid var(--line);border-radius:7px;background:var(--paper);display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--head);color:var(--ink);cursor:pointer;transition:border-color .6s var(--ease),background .6s var(--ease),color .6s var(--ease)}
.chip svg{width:16px;height:16px;color:var(--navy);transition:color .6s var(--ease)}
.chip:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.chip:hover svg{color:#fff}
.a-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.a-tags a{height:34px;padding:0 12px;border-radius:6px;background:var(--ground);display:inline-flex;align-items:center;font:600 13px/1 var(--head);color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease)}
.a-tags a:hover{background:var(--navy);color:#fff}
.a-author{display:flex;gap:16px;align-items:flex-start;margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:12px}
.a-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.a-author h3{margin:0 0 6px;font:800 17px/1.2 var(--head);color:var(--ink)}
.a-author p{margin:0 0 10px;font:400 15px/1.55 var(--body);color:var(--text)}
.a-author__more{font:700 14px/1 var(--head);color:var(--link)}
/* The byline's links: more stories, the author's website and contact, and their social accounts, on one wrapping row. */
.a-author__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:600 14px/1.3 var(--head)}
.a-author__links>a{color:var(--link)}
.a-author__links .follow__icons a{width:34px;height:34px}
/* The sidebar runs the height of the article (336px wide, the width of the ads). Its last block, the tall ad, stays in view. */
.side{display:flex;flex-direction:column;gap:20px}
.side__stick{position:sticky;top:calc(var(--bar) + var(--top) + 24px)}
.side .ad,.side .adslot{margin-inline:auto}
.lb--article{padding-block:0 48px}
.lb--top{padding-block:16px 0}
/* The email sign-up form comes from the TechBullion platform plugin; these rules fit it into a card or a follow block. */
.tb-news .tb-subscribe{margin:0;padding:0;background:none;border:0;box-shadow:none;max-width:none}
.tb-news .tb-subscribe-head{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.tb-news .tb-subscribe-head strong{font:700 16px/1.25 var(--head);color:var(--ink)}
.tb-news .tb-subscribe-head span{font:400 14px/1.45 var(--body);color:var(--text)}
.tb-news .tb-subscribe-row{display:flex;gap:8px;margin:0}
.tb-news .tb-subscribe-row input[type=email]{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid #BFC7CF;border-radius:7px;background:var(--paper);font:400 15px/1 var(--body);color:var(--ink)}
.tb-news .tb-subscribe-row input[type=email]:focus-visible{outline:0;border-color:var(--navy)}
.tb-news .tb-subscribe-row button{flex-shrink:0;height:42px;padding:0 16px;border:0;border-radius:7px;background:var(--navy);color:#fff;font:700 14px/1 var(--head);cursor:pointer}
.tb-news .tb-subscribe-row button:hover{background:var(--header)}
.tb-news .tb-subscribe-legal{margin:8px 0 0;font:400 12px/1.4 var(--body);color:var(--muted)}
.follow .tb-news{padding:14px 0;border-top:1px solid var(--line)}
.card2 .tb-news{border-top:0;padding:12px 0 14px}
/* In an article the same form sits in the sidebar, so the plugin's full-width copy under the article is not shown twice. */
main:has(.card--news) .tbcg-article-subscribe{display:none}
.card{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--paper)}
.card h2{margin:0 0 14px;font:700 13px/1 var(--head);color:var(--muted)}
.card p{margin:12px 0 0;font:400 14px/1.45 var(--body);color:var(--text)}
.card--paid{background:var(--navy);border-color:var(--navy)}
.card--paid h2{color:var(--sky)}
.card--paid p{margin:0 0 14px;color:#fff;font-size:15px}
.row{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);display:flex;align-items:center;justify-content:space-between;font:700 13px/1 var(--head);color:var(--ink);cursor:pointer;transition:border-color .6s var(--ease)}
.row+.row{margin-top:8px}
.row svg{width:15px;height:15px;transition:transform .6s var(--ease)}
.row:hover{border-color:var(--navy)}
.row[aria-expanded="true"] svg{transform:rotate(180deg)}
.socials{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.socials.is-open{grid-template-rows:1fr}
.socials>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .7s}
.socials.is-open>div{visibility:visible;transition-delay:0s}
.icons{display:flex;flex-wrap:wrap;gap:8px}
.socials .icons{padding-top:10px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,20px);opacity:0;max-width:calc(100% - 32px);background:var(--ink);color:#fff;font:600 14px/1.3 var(--head);padding:14px 18px;border-radius:8px;transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none;z-index:60}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.related{background:var(--ground);padding-block:56px}
.related .eyebrow{font:600 13px/1 var(--head);color:var(--muted);margin-bottom:10px}
.related h2{margin:0 0 24px;font:800 32px/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.comments{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.comments h2,.comments h3{font:800 22px/1.2 var(--head);color:var(--ink);margin:0 0 16px}
.comments ol{list-style:none;padding:0;margin:0 0 24px}
.comments .comment-body{padding:16px 0;border-top:1px solid var(--line)}
.comments .children{list-style:none;margin:0;padding-left:24px}
.comments textarea,.comments input[type=text],.comments input[type=email],.comments input[type=url]{width:100%;padding:12px 14px;border:1px solid #BFC7CF;border-radius:8px;font:400 16px/1.4 var(--body)}
.comments input[type=submit]{height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:700 15px/1 var(--head);cursor:pointer}

/* ---------- 7. Category, tag and author pages ---------- */
.feat{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;list-style:none;margin:0;padding:0}
.feat__side{display:grid;grid-template-rows:1fr 1fr;gap:24px;list-style:none;margin:0;padding:0}
.c-sec{padding-block:48px 16px}
.c-sec--tight{padding-top:8px}
.c-sec h2{margin:0 0 22px;font:800 28px/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}
/* Author head: the photo level with the name, "Author" centred under the photo, the bio under the name. */
/* The text column is as wide as the name, so the bio stops where the name stops (the same trick as .pg-intro). */
.au{display:grid;grid-template-columns:var(--au-pic,112px) minmax(0,max-content);gap:12px 24px;align-items:center}
.au--bare{display:block}
.au__img{grid-area:1/1}
.au__img img{display:block;width:var(--au-pic,112px);height:var(--au-pic,112px);border-radius:50%;object-fit:cover;background:var(--ground)}
.au .pg-h1{grid-area:1/2;font-size:clamp(28px,3.8vw,52px)}
.pg-h1 .nw{display:inline-block}
.au__role{grid-area:2/1;align-self:start;justify-self:center;font:700 13px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.au .pg-lede{grid-area:2/2;align-self:start;width:0;min-width:100%}
.empty{padding:40px 0 64px;font:400 18px/1.5 var(--body);color:var(--text)}

/* ---------- 8. Interviews page ---------- */
.ivhero{position:relative;margin:8px 0 0;overflow:hidden;border-radius:12px}
.ivtrack{display:flex;transition:transform 1.2s var(--ease);will-change:transform}
.ivslide{flex:0 0 100%;min-width:0}
/* The flag ("Executive interview", "Latest interviews") sits in the meta line by the date; the slider controls sit top right. */
.tile__flag{height:24px;padding:0 9px;border-radius:5px;background:var(--gold);color:#000;display:inline-flex;align-items:center;font:700 12px/1 var(--head);letter-spacing:.06em;text-transform:uppercase}
.ivctl{position:absolute;right:20px;top:20px;z-index:4;display:flex;align-items:center;gap:12px}
.ivarrow{width:40px;height:40px;border-radius:7px;border:1px solid rgba(255,255,255,.5);background:rgba(0,26,46,.55);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.ivarrow:hover{background:var(--gold);border-color:var(--gold);color:#000}
.ivarrow svg{width:18px;height:18px}
/* The dots share the arrows' dark backing so they read on a light photo. */
.ivdots{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:7px;background:rgba(0,26,46,.55)}
.ivdot{width:26px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.45);cursor:pointer;transition:background .6s var(--ease),width .6s var(--ease)}
.ivdot.is-on{background:var(--gold);width:40px}
.ivlay{margin-top:28px}
.ivgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ---------- 9. Search, 404 and standard pages ---------- */
.nf{padding-block:72px 56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.nf__k{font:700 13px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.nf__t{display:flex;flex-direction:column;gap:18px}
.nf__num{font:900 clamp(120px,18vw,240px)/.85 var(--head);letter-spacing:-.06em;color:var(--navy);text-align:right}
.nf__num span{color:var(--gold)}
.band{background:var(--ground);padding-block:48px}
.std{display:grid;grid-template-columns:minmax(0,760px) 336px;justify-content:space-between;gap:56px;padding-bottom:64px}
.std .prose>p:first-child{font-size:22px;line-height:1.6;color:var(--ink)}
.card2{border:1px solid var(--line);border-radius:12px;padding:6px 18px}
.card2 .follow__row:first-child{border-top:0}
.card2 .follow__row{min-height:52px;gap:10px}
.card2 .follow__l{font-size:15px}
.card2 .follow__r{font-size:14px;gap:6px}
.card2 .follow__icons{gap:6px}
.card2 .follow__icons a{width:32px;height:32px}

/* ---------- 10. Footer ---------- */
.foot{background:var(--ground);color:var(--text);border-top:1px solid var(--line);padding-block:48px 28px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-bottom:36px}
.foot__brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot__logo img{height:40px;width:auto;display:block}
.foot__about{margin:0;max-width:34ch;font:400 15px/1.55 var(--body);color:var(--text)}
.foot__social{display:flex;gap:10px}
.foot__social a{width:40px;height:40px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;transition:background .6s var(--ease),transform .8s var(--ease)}
.foot__social a:hover{background:var(--link);transform:translateY(-2px)}
.foot__social svg{width:18px;height:18px}
.foot h2{margin:0 0 14px;font:700 12px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot li a{font:400 15px/1.3 var(--body);color:var(--text);transition:color .6s var(--ease)}
.foot li a:hover{color:var(--link)}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #D2D9E1;padding-top:20px;font:400 14px/1.4 var(--body);color:var(--text)}

/* ---------- 11. Smaller screens ---------- */
@media (max-width:1400px){
  .top{gap:16px}
  .top__nav{display:none}
  .top__tools{margin-left:auto}
}
@media (max-width:1240px){
  /* Narrower windows: the right column stays wide enough for its 336px ad. */
  :root{--tb-split:minmax(0,1.6fr) minmax(0,1fr)}
  .a-body{grid-template-columns:minmax(0,720px) 336px}
  .a-body--notoc{gap:40px;justify-content:space-between}
  .toc{display:none}
}
@media (max-width:1100px){
  .more__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root{--tb-split:minmax(0,1.3fr) minmax(0,1fr);--tb-col-gap:20px}
  .lay,.std{grid-template-columns:minmax(0,1fr)}
  .sp-last{position:static}
  .pg-top{flex-direction:column}
  .nf{grid-template-columns:minmax(0,1fr)}
  .nf__num{text-align:left}
  .tile--feat{aspect-ratio:16/10}
}
@media (max-width:1000px){
  .feat{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad--lb{width:100%;max-width:728px}
}
@media (max-width:900px){
  /* Below this the Most read column is narrower than its 336px ad, so the two columns stack. */
  .news__grid{grid-template-columns:minmax(0,1fr)}
  .a-body,.a-body--notoc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:782px){
  body.admin-bar{--bar:46px}
}
@media (max-width:700px){
  :root{--top:60px}
  .wrap{padding-inline:16px}
  .top{padding:0 8px 0 16px}
  .top__logo img{height:40px}
  .sbar{padding:12px 16px}
  /* Phones: the cover interview first, then the four others two across. */
  .cover{padding-top:16px}
  .cover__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .tile--cover{min-height:0;aspect-ratio:4/4.4}
  .tile--cover .tile__name{font-size:30px}
  .tile--cover .tile__title{font-size:16px}
  /* On a phone a slider tile shows the name, headline and link; the opening lines would push the text up under the flag. */
  .tile--feat .tile__snip .tile__t{display:none}
  .tile--feat .tile__snip .tile__cta{margin-left:0}
  .tile--feat .tile__title{font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cover__side{gap:10px}
  .cover__side .tile{min-height:0;aspect-ratio:3/4}
  .tile--feat{aspect-ratio:4/5}
  .tile--md .tile__body,.tile--sm .tile__body{padding:0 12px 14px}
  .tile--md .tile__name,.tile--sm .tile__name{font-size:15px;line-height:1.08;letter-spacing:-.01em;overflow-wrap:break-word;text-wrap:wrap}
  .tile--md.tile--title .tile__name{font-size:13.5px;line-height:1.2;-webkit-line-clamp:4}
  .tile--md .tile__meta,.tile--sm .tile__meta{margin-bottom:6px;font-size:12px}
  .tile--md .tile__date,.tile--sm .tile__date{font-size:12px}
  /* No hover on a phone, and no room for the pop-up text in a tile this size: the name and date are the tile. */
  .tile--md .tile__more,.tile--sm:not(.tile--anon) .tile__more{display:none}
  .tile--anon .tile__title{font-size:13px;-webkit-line-clamp:3;margin-top:4px}
  .tile--anon .tile__cta{display:none}
  .follow__l{white-space:nowrap;font-size:15px}
  .pg-top .follow__l{white-space:normal}
  .foot li a{display:inline-block;padding:5px 0}
  .foot ul{gap:4px}
  .more__grid,.ivgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more__head{flex-direction:column;align-items:flex-start}
  .more__head h2{font-size:28px}
  .news__grid,.latest__grid,.grid3{grid-template-columns:minmax(0,1fr)}
  .cc--lead .li-t{font-size:24px}
  .prose{font-size:18px}
  .a-stand{font-size:18px}
  .au{--au-pic:72px;column-gap:16px}
  .au .pg-lede{grid-area:3/1/auto/-1}
  .sform{flex-direction:column}
  /* The year filter drops to its own line under the topics. */
  .fbar{flex-wrap:wrap}
  .fyear{flex-basis:100%;justify-content:space-between;order:9}
  .fyear select{flex:1;max-width:220px}
  .ivctl{right:12px;top:12px}
  .ivdots{display:none}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
  .a-author{flex-direction:column}
}
@media (max-width:600px){
  body.admin-bar{--bar:0px}  /* WordPress stops pinning its admin bar at this width, so nothing sits above ours */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  .progress{display:none}
}