/* =====================================================================
   The Studio Stage, Decoded — shared design system
   Re-skinned to the Podcast Show London 2026 website system:
   off-white canvas, Space Grotesk + Inter, purple / coral / cyan palette.
   Variable NAMES are preserved (inline HTML references them) but remapped
   to the light brand values.
   ===================================================================== */
:root{
  --ink:#2c2722;          /* primary text (charcoal) */
  --ink-2:#ffffff;        /* card surface */
  --ink-3:#ffffff;
  --paper:#2c2722;        /* strong text — inline HTML uses var(--paper) */
  --paper-dim:#55504a;    /* muted body text */
  --muted:#8a847c;        /* faint labels */
  --canvas:#f7f5f2;       /* off-white canvas */
  --amber:#551fef;        /* PRIMARY accent (brand purple) */
  --terra:#ef5959;        /* secondary accent (coral) */
  --teal:#1f9aa8;         /* tertiary accent (cyan, deepened for light bg) */
  --cyan-soft:#47c9d6;
  --yellow:#f1d864;
  --line:rgba(0,0,0,.10);
  --line-soft:rgba(0,0,0,.06);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--paper);
  font-family:"Inter",sans-serif;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:#fff}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:"Space Grotesk",sans-serif;letter-spacing:.02em}
.serif{font-family:"Space Grotesk",sans-serif}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- persistent cross-page nav ---------- */
.subnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:46px;align-items:stretch}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:8px;padding:0 16px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.subnav a:hover{color:var(--paper)}
.subnav a.active{color:var(--amber);border-bottom-color:var(--amber)}
.subnav a .ix{color:var(--terra);font-weight:700}
.subnav a.active .ix{color:var(--amber)}

/* ---------- hero (full-width purple block) ---------- */
.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
  color:#fff;
  background:radial-gradient(120% 150% at 78% -10%,#6a45f6 0%,var(--amber) 46%,#3f12c9 100%);
}
.hero::after{ /* waveform motif */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:120px;opacity:.14;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 9px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q30,10 60,60 T120,60 T180,60 T240,60 T300,60 T360,60 T420,60 T480,60 T540,60 T600,60 T660,60 T720,60 T780,60 T840,60 T900,60 T960,60 T1020,60 T1080,60 T1140,60 T1200,60' fill='none' stroke='black' stroke-width='40'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q30,10 60,60 T120,60 T180,60 T240,60 T300,60 T360,60 T420,60 T480,60 T540,60 T600,60 T660,60 T720,60 T780,60 T840,60 T900,60 T960,60 T1020,60 T1080,60 T1140,60 T1200,60' fill='none' stroke='black' stroke-width='40'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;
}
.kicker{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-soft);margin-bottom:26px}
h1.title{font-family:"Space Grotesk",sans-serif;font-weight:700;line-height:.98;letter-spacing:-.03em;text-transform:uppercase;font-size:clamp(44px,8.2vw,104px);max-width:13ch;color:#fff}
h1.title em{font-style:normal;font-weight:700;color:var(--cyan-soft)}
.standfirst{margin-top:30px;max-width:52ch;font-size:clamp(18px,2.2vw,22px);color:rgba(255,255,255,.82)}
.thesis{margin-top:32px;max-width:58ch;font-family:"Inter",sans-serif;font-weight:400;font-size:clamp(19px,2.4vw,26px);line-height:1.42;letter-spacing:-.005em;color:var(--paper-dim)}
.thesis b{color:var(--paper);font-weight:600}
.statrow{display:flex;flex-wrap:wrap;gap:38px;margin-top:52px}
.stat .n{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:-.02em;color:#fff}
.stat .l{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:10px}

/* ---------- section scaffolding ---------- */
section{padding:84px 0;border-bottom:1px solid var(--line);position:relative}
.eyebrow{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);display:flex;align-items:center;gap:14px;margin-bottom:24px}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--terra)}
h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.04;letter-spacing:-.025em;max-width:18ch;color:var(--paper)}
.lede{margin-top:22px;max-width:60ch;color:var(--paper-dim);font-size:19px}

/* ---------- analysis-page header ---------- */
.ahead{position:relative;padding:74px 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
.ahead .num{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
.ahead h1{font-family:"Space Grotesk",sans-serif;font-weight:700;line-height:1.0;letter-spacing:-.025em;text-transform:uppercase;font-size:clamp(36px,6vw,72px);max-width:16ch;color:var(--paper)}
.ahead .deck{margin-top:24px;max-width:60ch;font-family:"Inter",sans-serif;font-style:italic;font-weight:400;font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--paper-dim)}

/* analysis header as a full-width purple block (trial: inventory + quotes) */
.ahead--block{
  padding:92px 0 80px;
  border-bottom:none;
  color:#fff;
  background:radial-gradient(120% 150% at 78% -10%,#6a45f6 0%,var(--amber) 46%,#3f12c9 100%);
}
.ahead--block::after{ /* waveform motif, matching the hero */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:110px;opacity:.14;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 9px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q30,10 60,60 T120,60 T180,60 T240,60 T300,60 T360,60 T420,60 T480,60 T540,60 T600,60 T660,60 T720,60 T780,60 T840,60 T900,60 T960,60 T1020,60 T1080,60 T1140,60 T1200,60' fill='none' stroke='black' stroke-width='40'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q30,10 60,60 T120,60 T180,60 T240,60 T300,60 T360,60 T420,60 T480,60 T540,60 T600,60 T660,60 T720,60 T780,60 T840,60 T900,60 T960,60 T1020,60 T1080,60 T1140,60 T1200,60' fill='none' stroke='black' stroke-width='40'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;
}
.ahead--block .num{color:var(--cyan-soft)}
.ahead--block h1{color:#fff}
.ahead--block .deck{color:rgba(255,255,255,.82)}

/* ---------- generic prose for analysis bodies ---------- */
.prose{padding:70px 0}
.prose .block{max-width:760px}
.prose h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(22px,3vw,31px);line-height:1.12;letter-spacing:-.02em;margin:54px 0 18px;color:var(--paper)}
.prose h3:first-child{margin-top:0}
.prose h4{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;margin:34px 0 10px;color:var(--paper)}
.prose p{margin:0 0 16px;color:var(--paper-dim);max-width:68ch}
.prose p strong,.prose li strong{color:var(--paper);font-weight:600}
.prose ul{list-style:none;margin:0 0 20px;max-width:70ch}
.prose ul li{position:relative;padding-left:22px;margin:11px 0;color:var(--paper-dim)}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:2px;background:var(--terra);transform:rotate(45deg)}
.prose a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(85,31,239,.35);transition:border-color .3s}
.prose a:hover{border-bottom-color:var(--amber)}
.prose .divider{height:1px;background:var(--line);margin:48px 0;border:0}

/* ---------- data table ---------- */
.tbl{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.tbl th{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--paper-dim);vertical-align:top}
.tbl tr:hover td{background:rgba(85,31,239,.04)}
.tbl td.num,.tbl th.num{font-family:"Space Grotesk",sans-serif;color:var(--paper);text-align:right;white-space:nowrap}

/* ---------- inventory entry ---------- */
.daygroup{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin:64px 0 6px;display:flex;align-items:center;gap:14px}
.daygroup::after{content:"";flex:1;height:1px;background:var(--line)}
.entry{padding:30px 0;border-bottom:1px solid var(--line)}
.entry .top{display:flex;gap:18px;align-items:baseline}
.entry .en{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:30px;color:var(--amber);line-height:1;min-width:46px;letter-spacing:-.02em}
.entry h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:24px;line-height:1.14;letter-spacing:-.015em;color:var(--paper)}
.entry .meta{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:12px;letter-spacing:.03em;color:var(--muted);margin:8px 0 14px 64px}
.entry p{color:var(--paper-dim);margin:0 0 14px 64px;max-width:70ch}
.entry .topics{margin:0 0 0 64px;display:flex;flex-wrap:wrap;gap:8px}
.entry .topics .t{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--amber);background:rgba(85,31,239,.07);border:1px solid rgba(85,31,239,.16);border-radius:100px;padding:5px 12px}

/* ---------- shared component: cards / quotes / playlists ---------- */
.argument{background:transparent}
.argument .big{font-family:"Space Grotesk",sans-serif;font-weight:500;font-style:normal;font-size:clamp(28px,4.4vw,46px);line-height:1.16;letter-spacing:-.025em;max-width:24ch;margin-top:10px;color:var(--paper)}
.argument .big b{font-weight:700;color:var(--amber)}

.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
.tcard{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:26px 26px 28px;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.05);transition:transform .35s,box-shadow .35s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.10)}
.tcard .vs{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--terra);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.tcard h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:23px;line-height:1.14;letter-spacing:-.015em;margin-bottom:14px;color:var(--paper)}
.tcard p{font-size:15.5px;color:var(--paper-dim)}
.tcard .side{display:block;margin-top:12px;font-size:14.5px;color:var(--paper);padding-left:16px;border-left:2px solid var(--line)}
.tcard .side b{color:var(--amber);font-weight:600}

.quotes{background:transparent}
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 46px;margin-top:48px}
blockquote{font-family:"Inter",sans-serif;font-weight:400;font-style:italic;font-size:clamp(21px,2.5vw,27px);line-height:1.36;letter-spacing:-.01em;position:relative;padding-top:30px;color:var(--paper)}
blockquote::before{content:"\201C";position:absolute;top:-8px;left:-6px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:84px;line-height:1;color:var(--amber);opacity:.32}
blockquote cite{display:block;margin-top:18px;font-family:"Space Grotesk",sans-serif;font-style:normal;font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
blockquote cite b{color:var(--terra);font-weight:600}

.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:46px}
.pl{display:flex;gap:20px;align-items:baseline;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:24px 26px;box-shadow:0 4px 24px rgba(0,0,0,.05);transition:border-color .35s,transform .35s,box-shadow .35s}
.pl:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 12px 36px rgba(85,31,239,.12)}
.pl .pn{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:30px;color:var(--amber);line-height:1;min-width:38px;letter-spacing:-.02em}
.pl h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;margin-bottom:7px;color:var(--paper)}
.pl p{font-size:14.5px;color:var(--paper-dim)}
.pl .tag{display:inline-block;margin-top:12px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- "read more" link ---------- */
.morelink{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);text-decoration:none;border:2px solid var(--amber);border-radius:8px;padding:12px 20px;transition:background .3s,color .3s}
.morelink:hover{background:var(--amber);color:#fff}
.morelink .arw{transition:transform .3s}
.morelink:hover .arw{transform:translateX(4px)}

/* ---------- brand chart ---------- */
.chart{margin-top:46px}
.callout{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);border-left:3px solid var(--amber);border-radius:12px;padding:22px 24px;margin-bottom:42px;box-shadow:0 4px 24px rgba(0,0,0,.05)}
.callout .yt{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(40px,6vw,62px);color:var(--amber);line-height:.9;letter-spacing:-.03em}
.callout p{color:var(--paper-dim);font-size:17px;max-width:46ch}
.callout p b{color:var(--paper)}
.bar{display:grid;grid-template-columns:148px 1fr 54px;align-items:center;gap:16px;padding:9px 0}
.bar .name{font-family:"Inter",sans-serif;font-weight:600;font-size:15px;text-align:right;color:var(--paper)}
.bar .track{height:22px;background:rgba(0,0,0,.06);border-radius:5px;overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:5px;transition:width 1.25s cubic-bezier(.2,.75,.2,1)}
.bar.in .fill{width:var(--w)}
.bar .val{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;color:var(--paper-dim);text-align:left}
.f-platform{background:linear-gradient(90deg,#7d5bf0,var(--amber))}
.f-company{background:linear-gradient(90deg,#f48282,var(--terra))}
.f-tool{background:linear-gradient(90deg,#5cc6d1,var(--teal))}
.legend{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:12px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.legend span{display:inline-flex;align-items:center;gap:9px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.chartnote{margin-top:26px;font-size:14px;color:var(--muted);max-width:70ch}

/* ---------- details / progressive disclosure ---------- */
details{border-top:1px solid var(--line);padding:6px 0}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;color:var(--paper)}
details summary::-webkit-details-marker{display:none}
details summary .plus{font-family:"Space Grotesk",sans-serif;color:var(--amber);transition:transform .3s}
details[open] summary .plus{transform:rotate(45deg)}
details .body{padding:2px 0 26px;color:var(--paper-dim);max-width:74ch}
details .body li{margin:10px 0 10px 18px}
details .body b{color:var(--paper)}

/* ---------- footer ---------- */
footer{padding:70px 0 80px}
footer .fmeta{font-family:"Inter",sans-serif;font-size:15px;color:var(--paper-dim);line-height:1.9;max-width:72ch}
footer .fmeta b{color:var(--paper)}
footer .sig{margin-top:30px;font-family:"Inter",sans-serif;font-style:italic;font-size:20px;color:var(--paper-dim)}
footer .foot-nav{margin-top:34px;display:flex;flex-wrap:wrap;gap:18px}
footer .foot-nav a{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
footer .foot-nav a:hover{border-bottom-color:var(--amber)}

/* ---------- stage switcher (added for the multi-stage build) ---------- */
.stageswitch{display:inline-flex;align-items:center;gap:10px;height:46px;margin-right:14px;padding-right:16px;border-right:1px solid var(--line);flex:0 0 auto}
.stageswitch .swlbl{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stageswitch .seg{display:inline-flex;background:rgba(0,0,0,.05);border-radius:100px;padding:3px}
.subnav .seg a{display:inline-flex;align-items:center;padding:6px 14px;border-radius:100px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:none;transition:background .25s,color .25s,box-shadow .25s}
.subnav .seg a.active{background:var(--amber);color:#fff;box-shadow:0 2px 8px rgba(85,31,239,.28)}
.subnav .seg a:hover:not(.active){color:var(--paper)}

@media(max-width:760px){
  .tgrid,.qgrid,.plist{grid-template-columns:1fr}
  .bar{grid-template-columns:96px 1fr 42px;gap:11px}
  .bar .name{font-size:13px}
  .statrow{gap:26px}
  section,.prose{padding:62px 0}
  .callout{flex-direction:column;gap:8px}
  .entry .meta,.entry p,.entry .topics{margin-left:0}
  .entry .en{min-width:auto}
  .stageswitch .swlbl{display:none}
}