/* AMinsider pages v1.2.0. GENERATED by build-wp.py from parts/am-insider.css.
   Edit the source and rebuild; do not edit this file. */
@font-face{font-family:'AMI Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ArchivoBlack-400.woff2) format('woff2')}
@font-face{font-family:'AMI Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/Poppins-300.woff2) format('woff2')}
@font-face{font-family:'AMI Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Poppins-400.woff2) format('woff2')}
@font-face{font-family:'AMI Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Poppins-600.woff2) format('woff2')}

.ami-root{
  --red-cherry:#EA1B23; --red-cherry-hover:#C5161D; --red-cherry-tint:#FEF0F0;
  --dark-grey:#1D1B1D; --ink-soft:#5A575A; --muted:#8A878A; --ghost:#B5B2B5;
  --white-grey:#DEDEDF; --border-soft:#ECECED;
  --bg-white:#FFFFFF; --bg-light-grey:#F8F8F8; --bg-warm:#FCFBF4;
  --font-heading:'AMI Archivo Black','Archivo Black','Archivo',sans-serif;
  --font-body:'AMI Poppins','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:16px;
  --text-lg:18px; --text-xl:20px; --text-2xl:24px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:50px;
  --shadow-sm:0 2px 8px rgba(29,27,29,.07); --shadow-md:0 4px 20px rgba(29,27,29,.09);
  --shadow-lg:0 12px 40px rgba(29,27,29,.11);
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-sm:180ms; --duration-md:280ms;
  --z-nav:100; --z-dropdown:250; --z-modal:500; --z-skip:600;
  --max-width:1240px; --nav-h:64px; --util-h:34px;
  --tap:48px;
}
.ami-root{font-family:var(--font-body);font-size:var(--text-base);font-weight:300;
  line-height:1.7;color:var(--dark-grey);-webkit-font-smoothing:antialiased;text-align:left}
:where(.ami-root) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,section,details,summary,label,input,button,audio,img,svg,a,span,b,i,em,div){box-sizing:border-box;margin:0;padding:0}
:where(.ami-root) :is(img,svg){display:block;max-width:100%;height:auto}
:where(.ami-root) :is(ul,ol){list-style:none}
:where(.ami-root) :is(a){color:inherit;text-decoration:none}
:where(.ami-root) :is(button){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:where(.ami-root) :is(h1,h2,h3,h4){font-family:var(--font-heading);font-weight:900;
  letter-spacing:-.04em;line-height:1.05;color:inherit}
:where(.ami-root) :is(label){font-size:inherit;color:inherit}
.ami-root ::selection{background:rgba(234,27,35,.14)}
.ami-root :focus-visible{outline:2px solid var(--red-cherry);outline-offset:2px;border-radius:2px}
.ami-root .wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--s6)}
@media (max-width:760px){.ami-root .wrap{padding:0 var(--s4)}}
.ami-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Materialize replaces the native slider with its own teal thumb. Put the native one
   back, so accent-color in the player styles it. */
.ami-root input[type=range].amp-seek{-webkit-appearance:auto;appearance:auto;margin:0;
  border:0;padding:0;background:transparent;height:auto}

/* =========================================================================
   MATERIALIZE / THEME NEUTRALISATION
   Loaded FIRST, before any of our component CSS.

   The live theme loads Materialize site-wide, and Materialize styles bare elements
   hard — header, footer, main, section, aside, button, input, h3, h4. Our markup uses
   those elements, so its rules reach straight into the new header and footer.

   What this already cost, on the first dev install:
     nav            height:64px + a box-shadow -> a grey slab behind the menu
     nav ul li      float:left                 -> footer links running together on one line
     nav a          height:56px;line-height:56px

   The <nav> elements are gone (replaced by <div role="navigation">, which is the same
   landmark to assistive tech but invisible to an element selector). This file covers
   the rest.

   EVERY RULE IS WRAPPED IN :where() ON PURPOSE. :where() contributes zero specificity,
   so each rule below scores exactly the same as the bare Materialize rule it is
   cancelling — and wins only because our stylesheet loads later. That means it can
   never outrank our own component rules. Without :where(), `.bar button` would score
   0,1,1 and would quietly beat `.btn-sub` at 0,1,0, killing the red newsletter button.
   ========================================================================= */

:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) {
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
}

/* Materialize gives headings its own line-height and margins. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h2,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h3,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h4 {
  margin: 0;
  line-height: inherit;
  font-weight: inherit;
}

/* Materialize buttons carry a height, uppercase transform and their own radius. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) button {
  height: auto;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Materialize inputs are 48px tall with a bottom border and a box-shadow on focus. */
:where(.bar, .drawer, .ntv-band, .ntv-main) input,
:where(.bar, .drawer, .ntv-band, .ntv-main) input:focus {
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  box-sizing: border-box;
  background-color: transparent;
}

/* Lists: Materialize floats and pads list items in several contexts. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) ul,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) li {
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}

/* Bare <header>, <footer>, <main>, <section>, <aside> all carry Materialize rules. */
:where(.ntv-main) section,
:where(.ntv-main) aside {
  padding: 0;
}

/* =========================================================================
   AM INSIDER — page styles
   Layered on top of the 3Dnatives shell. Every colour, space and radius below
   is a design-kit token; nothing new is invented. These pages live INSIDE
   3dnatives.com, so they must read as ours, not as a guest brand's microsite.
   ========================================================================= */

/* ---------- shared page furniture ---------- */
.ami-band{padding:var(--s16) 0}
.ami-band--warm{background:var(--bg-warm)}
.ami-band--dark{background:var(--dark-grey);color:#fff}
.ami-band--tight{padding:var(--s12) 0}

.ami-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-cherry);margin-bottom:var(--s3)}
.ami-band--dark .ami-eyebrow{color:#fff;opacity:.65}

/* The design kit allows ONE eyebrow per view. These pages use it once, in the hero.
   Section headings below carry their own weight without a label above them. */

.ami-h2{font-size:clamp(25.6px,3.2vw,40px);line-height:1.03;margin-bottom:var(--s4)}
.ami-lede{font-size:var(--text-base);color:var(--ink-soft);max-width:62ch;line-height:1.75}
.ami-band--dark .ami-lede{color:rgba(255,255,255,.72)}

/* ---------- the mark. One place, per the swap note in _mark.svg ----------
   Elliot, 12 Aug: the mark used to open every page as an "AM Insider by 3Dnatives"
   lockup. That put a second logo directly under the 3Dnatives masthead, and had the
   page tell a reader "by 3Dnatives" immediately after they had looked at the 3Dnatives
   logo. It now appears ONCE, in the band that explains the show, with no "by" line.
   Sub-pages use .ami-back instead — a text link, which navigates better anyway. */
.ami-mark{display:flex;align-items:center;gap:var(--s4);color:var(--dark-grey)}
/* 300px since the mark carries "powered by 3DNATIVES" (19.5% of the cap height):
   at the old 196px that line was 6px tall; here it is about 9px. */
.ami-mark-svg{width:300px;max-width:100%;height:auto;display:block}
.ami-mark--band{margin-bottom:var(--s5)}

/* The three approved variants, all off parts/_mark.svg. Guidelines §01:
   Primary = red AM, ink INSIDER, red voxel. Knockout = all white, for red fields and
   dark surfaces. Quiet = all ink, red voxel only. Colour lives here rather than in the
   SVG so the one file serves all three and Lucia's rework inherits them. */
.ami-am{fill:var(--red-cherry)}
.ami-tag{fill:var(--muted)}   /* "powered by 3DNATIVES", #8A878A as in the logo file */
.ami-band--dark .ami-tag,.ami-mark--ko .ami-tag{fill:#fff}
.ami-vox{fill:var(--red-cherry)}
.ami-band--dark .ami-mark,.ami-mark--ko{color:#fff}
.ami-band--dark .ami-am,.ami-mark--ko .ami-am,
.ami-band--dark .ami-vox,.ami-mark--ko .ami-vox{fill:#fff}
.ami-mark--quiet{color:var(--dark-grey)}
.ami-mark--quiet .ami-am{fill:var(--dark-grey)}

.ami-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s6);
  min-height:36px;padding:0 var(--s4) 0 var(--s3);border:1px solid var(--white-grey);
  border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  transition:all var(--duration-sm) var(--ease)}
.ami-back:hover{border-color:var(--red-cherry);color:var(--red-cherry)}
.ami-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   HERO — square artwork left, episode rail right
   Lucia: "Let's keep the square version of this image to differentiate it from
   our HP. If we can have the title of the episode with a little description
   could be great." The square is also what the artwork actually is: every
   episode ships a designed 1:1 cover carrying the guest's name and headshot.
   Cropping it to a widescreen hero would throw that away.
   ========================================================================= */
.ami-hero{padding:var(--s10) 0 0}
.ami-hero-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:var(--s12);align-items:start}

.ami-cover{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--dark-grey);box-shadow:var(--shadow-md)}
.ami-cover img{width:100%;height:100%;object-fit:cover}
.ami-cover-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,#2a1113,#1D1B1D 55%);color:rgba(255,255,255,.32);
  font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase}
.ami-cover-tag{position:absolute;left:var(--s4);bottom:var(--s4);z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  background:var(--red-cherry);color:#fff;border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

.ami-hero-meta{margin-top:var(--s5)}
.ami-hero-title{font-size:clamp(24px,2.6vw,32px);line-height:1.05;margin-bottom:var(--s3)}
.ami-hero-desc{font-size:var(--text-base);color:var(--ink-soft);line-height:1.7;max-width:52ch}
.ami-hero-sub{margin-top:var(--s3);font-size:var(--text-sm);color:var(--muted)}

/* ---------- episode rail ----------
   Lucia: "Let's reduce the padding between the episodes and add a little
   description (one line). Let's add a tiny CTA like 'Listen to it' or play."
   Padding drops from 28px to 14px a side and the row becomes a real link target. */
.ami-rail-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--white-grey)}
.ami-rail-head h2{font-size:var(--text-lg)}

.ami-ep{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s4);
  align-items:center;padding:var(--s3) var(--s2);border-bottom:1px solid var(--border-soft);
  border-radius:var(--radius-md);transition:background var(--duration-sm) var(--ease)}
.ami-ep:hover{background:var(--bg-light-grey)}
.ami-ep-face{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;
  background:var(--bg-light-grey);filter:none}
.ami-ep-ph{width:56px;height:56px;border-radius:var(--radius-md);display:grid;
  place-items:center;background:var(--bg-light-grey);color:var(--ghost);
  font-size:var(--text-xs);font-weight:600}
.ami-ep-t{font-family:var(--font-heading);font-weight:900;letter-spacing:-.03em;
  font-size:var(--text-md);line-height:1.2}
.ami-ep-d{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ami-ep-m{font-size:var(--text-xs);color:var(--muted);margin-top:4px}

/* The tiny CTA she asked for. Text on wide screens, a play glyph when space is short —
   same target either way, never below 44px. */
.ami-ep-cta{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);white-space:nowrap;
  font-size:var(--text-xs);font-weight:600;color:var(--ink-soft);
  transition:all var(--duration-sm) var(--ease)}
.ami-ep:hover .ami-ep-cta{border-color:var(--red-cherry);color:var(--red-cherry)}
.ami-ep-cta svg{width:11px;height:11px;fill:currentColor}
.ami-rail-all{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s5);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-cherry)}
.ami-rail-all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}

/* =========================================================================
   PLAYER + PLATFORMS
   Lucia: "I put here the platforms, but let's try to make them more visible."
   They were an 11px grey sentence. They are now the second thing in the band,
   as bordered pills at 36px. Her reasoning on the call: as a podcast listener
   she would never come to a website to listen — the job of this strip is to
   send people to the app they already use, so hiding it defeats the page.
   ========================================================================= */
.ami-play{border-top:1px solid var(--border-soft);margin-top:var(--s10);padding:var(--s6) 0}

/* One wrapping row: play button, label, waveform, then "Listen on" and the platform
   pills pushed to the right. Elliot, 13 Aug: pills back beside the waveform "when
   possible" — so the row wraps rather than being forced, and on a narrow screen the
   pills drop to a second line by themselves.

   What made this fit again is dropping LinkedIn: three pills instead of four. The
   earlier version had the waveform boxed into ~300px between the button and four pills,
   which is why the bars came out fat and Lucia preferred the old design.

   The bars stay thin at any width because there are now 120 of them and they have no
   max-width — they divide whatever space is left rather than being sized individually.
   Fewer, fatter bars is exactly the look she rejected. */
.ami-play-row{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  row-gap:var(--s4)}

/* Lucia: "Where does this button will link? The last episode?" It now says so. */
.ami-play-label{flex:0 0 auto}
.ami-play-t{display:block;font-size:var(--text-sm);font-weight:600;line-height:1.3}
.ami-play-m{display:block;font-size:var(--text-xs);color:var(--muted);line-height:1.4}
.ami-play-btn{width:56px;height:56px;border-radius:50%;background:var(--red-cherry);
  display:grid;place-items:center;flex:0 0 auto;box-shadow:var(--shadow-sm);
  transition:transform var(--duration-sm) var(--ease),background var(--duration-sm) var(--ease)}
.ami-play-btn:hover{background:var(--red-cherry-hover);transform:scale(1.05)}
.ami-play-btn svg{width:18px;height:18px;fill:#fff;margin-left:2px}
/* flex-basis 220px is the wrap trigger: above it the pills sit alongside, below it they
   drop to their own line instead of crushing the waveform. */
.ami-wave{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:2px;height:40px;
  opacity:.45;overflow:hidden}
/* Bounded both ways. Unbounded, the bars collapsed to 1px hairlines the moment the
   pills shared the row, and ballooned when they did not. min 2px keeps them visible —
   past that the surplus bars are simply clipped by the overflow, which still reads as a
   waveform — and max 4px stops them going back to the fat look Lucia rejected. */
.ami-wave span{flex:1 1 2px;min-width:2px;max-width:4px;background:var(--red-cherry);
  border-radius:1px}

.ami-platforms{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  flex:0 0 auto;margin-left:auto}
.ami-platforms-l{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.ami-plat{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);background:var(--bg-white);
  font-size:var(--text-sm);font-weight:600;color:var(--dark-grey);
  transition:all var(--duration-sm) var(--ease)}
.ami-plat:hover{border-color:var(--dark-grey);box-shadow:var(--shadow-sm)}
.ami-plat svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* =========================================================================
   WHAT IS AM INSIDER
   Lucia: "Here, what's AM Insider. Based on the storytelling you thought plus
   their claim. Let's keep it only as a small paragraph with SEO/GEO goals."
   So: no 3-line display headline, no timeline graphic. On the call she was
   explicit that the timeline reads as "this episode covers 1994", which is
   false. The storytelling survives as prose; the years survive as plain facts.
   ========================================================================= */
.ami-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--s12);align-items:start}
.ami-claim{font-size:clamp(24px,2.8vw,33.6px);line-height:1.05}
.ami-claim em{font-style:normal;color:var(--red-cherry)}
.ami-about p{font-size:var(--text-base);color:var(--ink-soft);line-height:1.75}
.ami-about p+p{margin-top:var(--s4)}
.ami-facts{display:flex;gap:var(--s8);flex-wrap:wrap;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--white-grey)}
.ami-fact b{display:block;font-family:var(--font-heading);font-weight:900;
  font-size:var(--text-xl);letter-spacing:-.03em;line-height:1}
.ami-fact span{font-size:var(--text-xs);color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase}

/* =========================================================================
   GUESTS — "Keep this section as it is." So the structure is untouched;
   only the tokens are re-pointed at the design kit so it matches the rest
   of 3dnatives.com.
   ========================================================================= */
.ami-guests-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s8);flex-wrap:wrap;margin-bottom:var(--s8)}
.ami-guests-all{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;
  border-bottom:2px solid var(--red-cherry);font-size:var(--text-sm);font-weight:600}
.ami-strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s4);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ami-strip::-webkit-scrollbar{height:4px}
.ami-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:2px}
.ami-guest{position:relative;flex:0 0 152px;aspect-ratio:3/4;border-radius:var(--radius-md);
  overflow:hidden;background:#2a282a;scroll-snap-align:start;
  transition:transform var(--duration-sm) var(--ease)}
.ami-guest:hover{transform:translateY(-3px)}
.ami-guest img{width:100%;height:100%;object-fit:cover;filter:none;
  transition:filter var(--duration-md) var(--ease)}
/* No headshot exists for three guests: their episodes ran under a shared series
   cover, which carries no photograph. A red monogram tile rather than a grey "Photo"
   box — guidelines §02, "a full red field is a normal surface here rather than an
   exception" — so the gap reads as designed instead of broken. */
.ami-guest-mono{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--red-cherry);color:#fff;font-family:var(--font-heading);
  font-weight:900;font-size:32px;letter-spacing:-.04em}
.ami-guest-ph{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.2);font-size:var(--text-xs)}
.ami-guest-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s4) var(--s3) var(--s3);
  background:linear-gradient(transparent,rgba(0,0,0,.88) 55%)}
.ami-guest-n{font-family:var(--font-heading);font-weight:900;font-size:var(--text-sm);
  letter-spacing:-.02em;line-height:1.15;color:#fff}
.ami-guest-c{font-size:10px;color:rgba(255,255,255,.6);margin-top:2px;line-height:1.3}

/* =========================================================================
   HOSTS
   Lucia: "About us section here, let's reduce a bit their bio, and maybe put
   one next to the other to keep the page short?" Two up, bios cut to roughly
   a third. Everything removed is recoverable from the guest-page template if
   a longer version is ever wanted.
   ========================================================================= */
/* Three hosts from 30 Sept (Ryan Hayford joins). Three columns, photo above the text:
   beside it, a 132px photo left each bio about 250px wide at desktop. */
.ami-hosts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10);align-items:start}
.ami-host{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start;align-content:start}
.ami-host-img{width:132px;aspect-ratio:1/1;border-radius:var(--radius-md);object-fit:cover;
  background:var(--bg-light-grey)}
.ami-host-mono{width:132px;aspect-ratio:1/1;border-radius:var(--radius-md);display:grid;
  place-items:center;background:var(--red-cherry);color:#fff;font-family:var(--font-heading);
  font-weight:900;font-size:32px;letter-spacing:-.04em}
.ami-host-ph{width:132px;aspect-ratio:1/1;border-radius:var(--radius-md);display:grid;
  place-items:center;background:var(--bg-light-grey);color:var(--ghost);font-size:var(--text-xs)}
.ami-host-n{font-size:var(--text-xl);margin-bottom:4px}
.ami-host-r{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red-cherry);margin-bottom:var(--s3);line-height:1.5}
.ami-host-b{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.7}

/* =========================================================================
   EPISODE ARCHIVE — the sub-page. Netflix pattern from the call: filter by
   season, and by topic, rather than an endless flat list.
   ========================================================================= */
.ami-filters{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--white-grey);margin-bottom:var(--s8)}
.ami-fgroup{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.ami-flabel{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-right:var(--s1)}
.ami-fchip{min-height:34px;padding:0 var(--s4);border:1px solid var(--white-grey);
  border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;
  color:var(--ink-soft);background:var(--bg-white);transition:all var(--duration-sm) var(--ease)}
.ami-fchip:hover{border-color:var(--dark-grey);color:var(--dark-grey)}
.ami-fchip[aria-pressed="true"]{background:var(--red-cherry);border-color:var(--red-cherry);color:#fff}
.ami-fsearch{flex:1 1 200px;min-width:180px;position:relative}
.ami-fsearch input{width:100%;min-height:38px;padding:0 var(--s4) 0 38px;
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);
  font-family:inherit;font-size:var(--text-sm);color:var(--dark-grey);background:var(--bg-white)}
.ami-fsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.8}
.ami-count{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s5)}

.ami-season{margin-bottom:var(--s12)}
.ami-season-h{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5);
  padding-bottom:var(--s3);border-bottom:2px solid var(--dark-grey)}
.ami-season-h h2{font-size:var(--text-xl)}
.ami-season-h span{font-size:var(--text-xs);color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase}
.ami-elist{display:grid;gap:2px}
.ami-erow{display:grid;grid-template-columns:52px 48px minmax(0,1fr) auto;gap:var(--s4);
  align-items:center;padding:var(--s3);border-radius:var(--radius-md);
  transition:background var(--duration-sm) var(--ease)}
.ami-erow:hover{background:var(--bg-light-grey)}
.ami-erow[hidden]{display:none}
.ami-enum{font-size:var(--text-xs);font-weight:600;color:var(--ghost);letter-spacing:.06em}
.ami-eface{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;filter:none;
  background:var(--bg-light-grey)}
.ami-eph{width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--bg-light-grey);color:var(--ghost);font-size:10px;font-weight:600}
/* These two are spans inside a span (the grid cell), so they need to be told to
   stack — without display:block the title and the guest line run together. */
.ami-et{display:block;font-family:var(--font-heading);font-weight:900;letter-spacing:-.03em;
  font-size:var(--text-base);line-height:1.2}
.ami-eg{display:block;font-size:var(--text-sm);color:var(--ink-soft);margin-top:2px}
.ami-enum,.ami-eph,.ami-emeta{align-self:center}
.ami-emeta{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;text-align:right}
.ami-empty{padding:var(--s12) 0;text-align:center;color:var(--muted);font-size:var(--text-sm)}
.ami-empty[hidden]{display:none}

/* =========================================================================
   GUEST PAGE
   The idea Lucia backed on the call: a guest gets a page they can share, and
   that page links back into 3Dnatives content. "I like these… I agree this is
   nice to have." The share row is the whole point — it is what turns 21 guests
   into 21 people posting our URL to LinkedIn.
   ========================================================================= */
.ami-gp-head{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s10);
  align-items:start}
.ami-gp-img{width:220px;aspect-ratio:1/1;border-radius:var(--radius-lg);object-fit:cover;
  background:var(--bg-light-grey)}
.ami-gp-fig{margin:0;width:220px}
.ami-gp-fig figcaption{margin-top:var(--s2);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.ami-gp-ph{width:220px;aspect-ratio:1/1;border-radius:var(--radius-lg);display:grid;
  place-items:center;background:var(--bg-light-grey);color:var(--ghost);font-size:var(--text-xs)}
.ami-gp-n{font-size:clamp(28.8px,3.4vw,41.6px);line-height:1.02;margin-bottom:var(--s3)}
.ami-gp-r{font-size:var(--text-md);color:var(--ink-soft);line-height:1.6;margin-bottom:var(--s5)}
.ami-gp-links{display:flex;gap:var(--s2);flex-wrap:wrap}

.ami-gp-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s12);align-items:start;margin-top:var(--s12)}
.ami-h3{font-family:var(--font-heading);font-weight:900;letter-spacing:-.03em;
  font-size:var(--text-lg);margin-bottom:var(--s4)}
.ami-keys{display:grid;gap:var(--s4)}
.ami-key{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--border-soft)}
.ami-key-t{font-size:var(--text-xs);font-weight:600;color:var(--red-cherry);
  font-variant-numeric:tabular-nums;padding-top:2px}
.ami-key p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.65}
.ami-notes p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.75}
.ami-notes p+p{margin-top:var(--s3)}

.ami-side{position:sticky;top:calc(var(--nav-h) + var(--s5));
  background:var(--bg-warm);border-radius:var(--radius-lg);padding:var(--s6)}
.ami-more{display:grid;gap:var(--s3)}
.ami-more a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:start;padding:var(--s3);border-radius:var(--radius-md);
  background:var(--bg-white);transition:box-shadow var(--duration-sm) var(--ease)}
.ami-more a:hover{box-shadow:var(--shadow-sm)}
.ami-more .k{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--red-cherry);border-radius:2px;padding:3px 6px;margin-top:2px}
.ami-more .t{font-size:var(--text-sm);font-weight:600;line-height:1.35}

.ami-share-l{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.ami-share-row{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .ami-hero-grid,.ami-about-grid,.ami-gp-body{grid-template-columns:1fr;gap:var(--s10)}
  .ami-cover{max-width:420px}
  .ami-side{position:static}
}
@media(max-width:820px){
  .ami-hosts{grid-template-columns:1fr;gap:var(--s8)}
  .ami-host{grid-template-columns:132px minmax(0,1fr)}
  .ami-play-row{gap:var(--s4)}
  .ami-gp-head{grid-template-columns:1fr;gap:var(--s6)}
  .ami-band{padding:var(--s12) 0}
}
@media(max-width:640px){
  .ami-ep{grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s3)}
  .ami-ep-face,.ami-ep-ph{width:48px;height:48px}
  /* The CTA label is dropped, not the control — the play glyph and the 44px
     target both survive, so the row is still one tap to listen. */
  .ami-ep-cta{padding:0;width:44px;min-height:44px;justify-content:center;border-radius:50%}
  .ami-ep-cta span{display:none}
  .ami-erow{grid-template-columns:44px minmax(0,1fr);row-gap:var(--s2)}
  .ami-enum,.ami-emeta{display:none}
  .ami-host{grid-template-columns:88px minmax(0,1fr);gap:var(--s4)}
  .ami-host-img,.ami-host-ph,.ami-host-mono{width:88px;font-size:22.4px}
  .ami-wave{display:none}

  /* Mobile: platform pills lose their text and become icon-only circles. Three words
     across a 375px screen forced a wrap and ate a whole line for no information — the
     Spotify and Apple marks are recognised without being named.
     Scoped to .ami-platforms deliberately: .ami-plat is reused on the guest page for
     "Listen to the episode" and the share row, where the text IS the button and hiding
     it would leave three anonymous circles.
     Each link carries an aria-label, so the accessible name survives the text going. */
  .ami-platforms .ami-plat{width:44px;height:44px;min-height:44px;padding:0;
    justify-content:center;border-radius:50%}
  .ami-platforms .ami-plat-t{display:none}
  .ami-platforms{gap:var(--s2)}
  .ami-platforms-l{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ami-guest:hover,.ami-play-btn:hover{transform:none}
}

/* =========================================================================
   PLAYER
   Sticky bar, hidden until something plays, shared by every page. The design
   already had a play button and a waveform in the hero; this is what makes
   them mean something. Audio streams from Buzzsprout, so their download
   numbers keep counting and we host no files.
   ========================================================================= */
.amp{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--bg-white);
  border-top:1px solid var(--white-grey);box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.amp[hidden]{display:none}
.amp-in{max-width:1280px;margin:0 auto;padding:10px var(--s5);display:flex;
  align-items:center;gap:var(--s4)}
.amp-cov{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex:0 0 auto}
.amp-cov[hidden]{display:none}
.amp-btn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--red-cherry);color:#fff;display:grid;place-items:center}
.amp-btn svg{width:13px;height:13px;fill:currentColor}
.amp-meta{min-width:0;flex:0 1 260px}
.amp-t{font-family:var(--font-heading);font-weight:900;letter-spacing:-.02em;
  font-size:var(--text-sm);line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.amp-s{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
.amp-seek{flex:1 1 auto;min-width:60px;accent-color:var(--red-cherry);cursor:pointer}
.amp-time{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.amp-x{flex:0 0 auto;border:0;background:none;cursor:pointer;font-size:22px;line-height:1;
  color:var(--muted);padding:0 4px}
.amp-x:hover{color:var(--dark-grey)}

/* Which row is playing. */
.is-playing .ami-ep-cta,.is-playing.ami-plat{border-color:var(--red-cherry);
  color:var(--red-cherry)}
.ami-erow.is-playing,.ami-ep.is-playing{background:var(--red-cherry-tint)}
[data-ep]{cursor:pointer}

@media(max-width:720px){
  .amp-meta{flex:1 1 auto}
  .amp-time,.amp-cov{display:none}
  .amp-seek{flex:0 0 100%;order:5;margin-top:2px}
}

/* =========================================================================
   GUESTS INDEX
   The strip on the main page is a shop window. This is the actual list, and
   it is what "All guests" now points at.
   ========================================================================= */
.ami-gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--s5);margin-top:var(--s10)}
.ami-gcard{display:block;border:1px solid var(--border-soft);border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-white);transition:all var(--duration-sm) var(--ease)}
.ami-gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);
  border-color:var(--white-grey)}
.ami-gcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:none;
  transition:filter var(--duration-md) var(--ease)}
.ami-gcard-mono{width:100%;aspect-ratio:1/1;display:grid;place-items:center;
  background:var(--red-cherry);color:#fff;font-family:var(--font-heading);font-weight:900;
  font-size:35.2px;letter-spacing:-.04em}
.ami-gcard-b{padding:var(--s4)}
.ami-gcard-n{font-family:var(--font-heading);font-weight:900;letter-spacing:-.02em;
  font-size:var(--text-md);line-height:1.15}
.ami-gcard-c{font-size:var(--text-xs);color:var(--ink-soft);margin-top:4px;line-height:1.4}
.ami-gcard-e{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-cherry);font-weight:600;margin-top:var(--s3)}

/* Guest page: the monogram stand-in, same logic as the strip. */
.ami-gp-mono{width:220px;aspect-ratio:1/1;border-radius:var(--radius-lg);display:grid;
  place-items:center;background:var(--red-cherry);color:#fff;
  font-family:var(--font-heading);font-weight:900;font-size:48px;letter-spacing:-.04em}
.ami-notes-p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.75}
@media(max-width:900px){
  .ami-gp-mono{width:140px}
}

/* =========================================================================
   GUEST PAGE — the editorial layer
   Hook, show notes, topic tags and the 3Dnatives cross-references, all
   recovered from the standalone site. The cross-references are the part that
   earns this page its place: they are the only thing pointing from the
   podcast back into our own content.
   ========================================================================= */
.ami-gp-c{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-cherry);margin-bottom:var(--s4);line-height:1.5}
.ami-gp-strand{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--s3);
  padding-left:var(--s4);border-left:2px solid var(--red-cherry)}

.ami-epb{padding-bottom:var(--s6);margin-bottom:var(--s6);
  border-bottom:1px solid var(--border-soft)}
.ami-epb:last-child{border-bottom:0;margin-bottom:0}
.ami-epb-t{font-family:var(--font-heading);font-weight:900;letter-spacing:-.03em;
  font-size:var(--text-md);line-height:1.2;margin-bottom:4px}
.ami-epb-m{font-size:var(--text-xs);color:var(--muted);margin-bottom:var(--s3)}
.ami-epb-h{font-size:var(--text-base);color:var(--ink-soft);line-height:1.7}
.ami-epb-go{margin-top:var(--s4)}

/* Show notes are the feed's own HTML and can run long, so they open on demand
   rather than pushing the cross-references off the screen. */
.ami-notes{margin-top:var(--s4)}
.ami-notes summary{cursor:pointer;font-size:var(--text-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  padding:var(--s2) 0;list-style:none}
.ami-notes summary::-webkit-details-marker{display:none}
.ami-notes summary::before{content:"+ ";color:var(--red-cherry);font-weight:900}
.ami-notes[open] summary::before{content:"- "}
.ami-notes summary:hover{color:var(--red-cherry)}
.ami-notes-body{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.75;
  padding:var(--s3) 0 0}
.ami-notes-body p{margin-bottom:var(--s3)}
.ami-notes-body ul,.ami-notes-body ol{margin:0 0 var(--s3) var(--s5)}
.ami-notes-body li{margin-bottom:6px}
.ami-notes-body a{color:var(--red-cherry);text-decoration:underline}

.ami-cxs{margin-top:var(--s5)}
.ami-cx-h{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.ami-cx{display:grid;gap:2px;padding:var(--s4);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);margin-bottom:var(--s2);
  transition:all var(--duration-sm) var(--ease)}
.ami-cx:hover{border-color:var(--red-cherry);background:var(--red-cherry-tint)}
.ami-cx-k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-cherry)}
.ami-cx-t{font-size:var(--text-sm);font-weight:600;color:var(--dark-grey);line-height:1.35}
.ami-cx-m{font-size:var(--text-xs);color:var(--muted)}

.ami-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.ami-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);background:var(--bg-light-grey);border-radius:var(--radius-pill);
  padding:5px 10px}

/* =========================================================================
   COLOUR TEST, 2 Oct (Filippos: "not the biggest fan of the black and white"; Elliot:
   go for colour to test). Every grayscale filter is now filter:none. To go back to the
   30 Sept black and white, set them to grayscale(1) again. Earlier note follows.
   BLACK AND WHITE, Carol and Lucia, 30 Sept; hover and hosts, Elliot same day
   "We feel like there is a lot of colours." Every guest on a listing is black and
   white until hovered, when it turns to colour: the episode rail, the archive, the
   guest strip, the guest index. In colour always: the latest episode at the top of
   the main page, the hosts, and the guest's own photo on their page.
   Where there is no photograph (a series cover, no guest, or no artwork) the page
   shows assets/ph-mic.jpg, the microphone from the series art. The file is in colour
   and greyed here, so it answers hover like every other picture. Replace that one
   file when Lucia's own placeholder art is ready.
   ========================================================================= */
.ami-ph-img{width:100%;height:100%;object-fit:cover;display:block}
.ami-gp-ph{width:220px;aspect-ratio:1/1;border-radius:var(--radius-lg);object-fit:cover;display:block}
@media(max-width:900px){.ami-gp-ph{width:140px}}
.ami-ep-face,.ami-eface,.ami-guest img,.ami-gcard img,.ami-gp-ph{filter:none;
  transition:filter var(--duration-md) var(--ease)}
.ami-ep:hover .ami-ep-face,.ami-erow:hover .ami-eface,.ami-guest:hover img,
.ami-gcard:hover img,.ami-gp-ph:hover{filter:grayscale(0)}

/* =========================================================================
   TEAM REVIEW, 2 Oct (Slack thread and Carol's HQ notes)
   ========================================================================= */
/* Intro line above the hero: says "podcast" before anything else, with the follow
   row and the sponsor button (Jessica). */
.ami-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5) var(--s8);
  flex-wrap:wrap;padding-bottom:var(--s6);margin-bottom:var(--s8);border-bottom:1px solid var(--border-soft)}
.ami-intro-t{flex:1 1 420px;min-width:0}
.ami-intro-h{font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em}
.ami-intro-p{margin-top:var(--s2);font-size:var(--text-base);color:var(--ink-soft);line-height:1.6;max-width:60ch}
.ami-intro-a{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ami-sponsor{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s5);
  border-radius:var(--radius-pill);background:var(--red-cherry);color:#fff;
  font-size:var(--text-sm);font-weight:600;transition:all var(--duration-sm) var(--ease)}
.ami-sponsor:hover{background:var(--dark-grey);color:#fff}

/* Replaces the figures row (Carol, pin 4). */
.ami-cadence{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--white-grey);
  font-family:var(--font-heading);font-weight:900;font-size:var(--text-lg);letter-spacing:-.02em;
  color:var(--dark-grey)!important}

/* Guest strip arrows (Carol, pin 7). */
.ami-guests-nav{display:flex;align-items:center;gap:var(--s3)}
.ami-arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;padding:0;
  transition:all var(--duration-sm) var(--ease)}
.ami-arrow:hover{background:#fff;color:var(--dark-grey);border-color:#fff}
.ami-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ami-guests-nav .ami-guests-all{margin-left:var(--s3)}

/* Episodes: one compact header (Filippos). */
.ami-arch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4) var(--s8);
  flex-wrap:wrap;margin-bottom:var(--s4)}
.ami-arch-head .ami-back{margin-bottom:var(--s2)}
.ami-arch-tools{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;flex:1 1 460px;
  justify-content:flex-end}
.ami-arch-tools .ami-fsearch{flex:0 1 300px}
.ami-fselect,.ami-ftoggle{min-height:38px;padding:0 var(--s4);border:1px solid var(--white-grey);
  border-radius:var(--radius-pill);background:var(--bg-white);font:inherit;font-size:var(--text-sm);
  font-weight:600;color:var(--dark-grey);cursor:pointer}
.ami-fselect{padding-right:var(--s8);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='3,5 6,8 9,5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.ami-ftoggle[aria-expanded="true"]{background:var(--dark-grey);border-color:var(--dark-grey);color:#fff}
.ami-topics{margin-bottom:var(--s5)}
.ami-topics[hidden]{display:none}
@media(max-width:640px){
  .ami-intro-a .ami-platforms-l{width:100%}
  .ami-arch-tools{justify-content:flex-start}
  .ami-arch-tools .ami-fsearch{flex:1 1 100%}
}
/* Guest index: the mic stand-in took the full card height and pushed the name out of
   view on the six cards without a photo (Jessica, 30 Sept). Square, like the photos. */
.ami-gcard .ami-ph-img{height:auto;aspect-ratio:1/1}

/* Host bios in full behind "Read more" (Elliot, 2 Oct). */
.ami-host-b p+p,.ami-host-b .ami-host-rest{margin-top:var(--s3)}
.ami-host-rest[hidden]{display:none}
.ami-more{margin-top:var(--s2);padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--red-cherry)}
.ami-more:hover{text-decoration:underline}

/* Guest page header (Elliot, 2 Oct): listen row, LinkedIn row, Share top right. */
.ami-gp-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s6)}
.ami-gp-bar .ami-back{margin-bottom:0}
.ami-gp-links{align-items:center}
.ami-gp-li{margin-top:var(--s3)}
.ami-share{position:relative}
.ami-share-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);background:var(--bg-white);
  font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--dark-grey);cursor:pointer;
  transition:all var(--duration-sm) var(--ease)}
.ami-share-btn:hover,.ami-share-btn[aria-expanded="true"]{border-color:var(--dark-grey);box-shadow:var(--shadow-sm)}
.ami-share-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.ami-share-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:180px;
  display:flex;flex-direction:column;padding:var(--s2);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);background:var(--bg-white);box-shadow:var(--shadow-md)}
.ami-share-menu[hidden]{display:none}
.ami-share-menu a,.ami-share-menu button{display:block;width:100%;text-align:left;padding:10px var(--s3);
  border:0;background:none;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);
  color:var(--dark-grey);cursor:pointer}
.ami-share-menu a:hover,.ami-share-menu button:hover{background:var(--bg-light-grey)}

/* Show notes as an excerpt with Read more (Carol, note 12). */
.ami-notes-body.is-clamped{max-height:calc(1.75em * 3 + var(--s3));overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}

/* Episode rows: a click plays (Elliot, 2 Oct); "About the guest" opens the guest page,
   and the Play button is the keyboard route to playing. */
.ami-ep[data-ep],.ami-erow[data-ep]{cursor:pointer}
.ami-ep .ami-ep-cta,.ami-erow .ami-ep-cta{cursor:pointer;font:inherit;font-size:var(--text-xs);font-weight:600}
.ami-row-guest{display:inline-block;font-size:var(--text-xs);font-weight:600;color:var(--red-cherry);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ami-erow .ami-row-guest{margin-top:4px}
.ami-row-guest:hover{color:var(--dark-grey)}
.ami-erow{grid-template-columns:52px 48px minmax(0,1fr) auto auto}
.ami-erow .ami-ep-cta{align-self:center}
.ami-ep-cta.is-playing{border-color:var(--red-cherry);color:var(--red-cherry)}
@media(max-width:640px){
  .ami-erow{grid-template-columns:44px minmax(0,1fr) auto}
  .ami-erow .ami-ep-cta{padding:0;width:44px;min-height:44px;justify-content:center;border-radius:50%}
  .ami-erow .ami-ep-cta span{display:none}
}