/* ========================================================
   Ash Murrell - Theme
   Colours, type, components and page layouts.
   ======================================================== */

:root {
  /* Dark surfaces */
  --bg-main: #0c0407;
  --bg-card: #181410;
  --bg-card-alt: #14100d;
  --bg-card-hover: #221c17;
  --bg-surface: #171717;
  --bg-navbar: rgba(12, 4, 7, 0.75);

  /* Light surfaces */
  --bg-cream: #f4efe6;
  --bg-cream-alt: #edeae3;

  /* Deep teal surfaces, and ink on light surfaces */
  --bg-teal: #0f2b2c;
  --bg-teal-deep: #0b1e1c;

  /* Text */
  --text-main: #f3f0e8;
  --text-pure-white: #ffffff;
  --text-warm-white: #f5f2eb;
  --text-muted: #a3a3a3;
  --text-subtle: #737373;
  --text-dark: #181410;
  --text-on-light: #0f2b2c;
  --text-on-light-muted: #5a554f;

  /* Accents */
  --accent: #de9e3b;         /* Burnt yellow: fills, and text on dark surfaces */
  --accent-hover: #c98a2b;
  --accent-on-light: #906118; /* Same hue, darkened to stay readable on cream */
  --accent-orange: #cc5500;  /* Burnt orange: the ASH box and the Episode Zero highlights */
  --accent-live: #e0621a;    /* The "on air" dot and the waveform's playhead */
  --accent-sand: #e4d7a9;
  --accent-yellow: #edd040;

  /* Three-band burnt orange stripe, darkest on top */
  --stripe-1: #7b1e00;
  --stripe-2: #a64400;
  --stripe-3: #be6e0e;

  /* Borders */
  --border-light: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(222, 158, 59, 0.5);

  /* Type */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Geist', 'Inter', sans-serif;
  --font-mono: 'Red Hat Mono', monospace;

  /* Shape and motion */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --max-width: 1420px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-main);
  color: var(--text-main);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main {
  flex-grow: 1;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.container-narrow {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* Type */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-warm-white);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 16px;
}

.eyebrow-accent {
  color: var(--accent);
}

.eyebrow-sand {
  color: var(--accent-sand);
}

/* Highlighted words: a burnt yellow block behind the text */
.mark {
  padding: 0 0.18em;
  border-radius: 4px;
  background-color: var(--accent);
  color: var(--bg-main);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

h1:has(.mark),
h2:has(.mark) {
  line-height: 1.24;
}

/* Three touching stripes */
.stripes {
  display: block;
  height: 12px;
  background: linear-gradient(to bottom, var(--stripe-1) 0 4px, var(--stripe-2) 4px 8px, var(--stripe-3) 8px 12px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-main);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-card);
  color: var(--text-warm-white);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-text {
  color: var(--text-muted);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.btn-text:hover {
  color: var(--text-warm-white);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1100;
  padding: 10px 16px;
  background: var(--text-warm-white);
  color: var(--text-dark);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}

/* Header: a fixed brand, phrase, links and button over a black bar that fades in once the brand docks */
:root {
  --header-h: 76px;
  --header-cta-h: 40px;
  /* The site's side margin, following the container once the screen outgrows it */
  --gutter: max(clamp(16px, 4vw, 48px), calc((100vw - var(--max-width)) / 2 + 48px));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);

  /* The header's colours: the bar is always black */
  --header-ink: var(--text-warm-white);
  --header-ink-2: #d4d0c8;
  --header-accent: var(--accent);
  --header-line: var(--border-card);
}

@media (min-width: 1600px) {
  :root { --header-h: 84px; --header-cta-h: 46px; }
}

@media (min-width: 2000px) {
  :root { --header-h: 92px; --header-cta-h: 52px; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; --header-cta-h: 36px; }
}

/* ...and with the cream drawer open behind them */
.drawer-open {
  --header-ink: var(--text-on-light);
  --header-ink-2: var(--text-on-light-muted);
  --header-accent: var(--accent-on-light);
  --header-line: rgba(15, 43, 44, 0.22);
}

.site-header-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 900;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* The three bands, hanging just below the bar */
.site-header-bar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 12px;
  background: linear-gradient(to bottom, var(--stripe-1) 0 4px, var(--stripe-2) 4px 8px, var(--stripe-3) 8px 12px);
}

.brand-docked .site-header-bar {
  opacity: 1;
}

/* With the drawer open, the bar comes above it as solid cream, so the drawer's content scrolls
   under it rather than under the brand and the button */
.drawer-open .site-header-bar {
  z-index: 960;
  opacity: 1;
  background: var(--bg-cream);
  transition: opacity 0.35s ease, background-color 0.35s ease;
}

/* Docked and visible by default, so it still works without JavaScript */
.dynamic-brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: block;
  width: 241px;
  color: var(--header-ink);
  transform: translate3d(var(--gutter), 22px, 0);
  transform-origin: 0 0;
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.35s ease, color 0.35s ease;
}

.dynamic-brand svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Only the ASH box docks. Once MURRELL has glitched out, the link is clipped to the box, so the
   empty space where MURRELL was can't be hovered or clicked. Coming back, it opens up at once. */
.dynamic-brand {
  clip-path: inset(0 0 0 0);
}

.dynamic-brand.is-docked,
html:not(.js) .dynamic-brand {
  clip-path: inset(0 68.3% 0 0); /* The box is the first 31.7% of the wordmark */
}

.dynamic-brand.is-docked {
  transition: transform 0.48s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.35s ease, color 0.35s ease, clip-path 0s linear 0.5s;
}

.wm-split {
  opacity: 0;
  mix-blend-mode: screen;
}

.dynamic-brand.is-docked .wm-murrell,
html:not(.js) .wm-murrell {
  opacity: 0;
}

/* The glitch: bands of MURRELL thrown sideways with the colours splitting off, until it's gone.
   Played backwards, it glitches back in. */
.murrell-out .wm-murrell > path,
.murrell-in .wm-murrell > path {
  animation: 0.5s steps(1, end) both;
}

.dynamic-brand.murrell-out .wm-murrell,
.dynamic-brand.murrell-in .wm-murrell {
  opacity: 1;
}

.murrell-in .wm-murrell > path {
  animation-direction: reverse;
}

.murrell-out .wm-murrell > path:not(.wm-split),
.murrell-in .wm-murrell > path:not(.wm-split) { animation-name: wm-glitch-main; }
.murrell-out .wm-murrell > .wm-split-l,
.murrell-in .wm-murrell > .wm-split-l { animation-name: wm-glitch-l; }
.murrell-out .wm-murrell > .wm-split-r,
.murrell-in .wm-murrell > .wm-split-r { animation-name: wm-glitch-r; }

@keyframes wm-glitch-main {
  0%   { opacity: 1; transform: translateX(0);      clip-path: inset(0 0 0 0); }
  12%  { opacity: 1; transform: translateX(-30px);  clip-path: inset(0 0 0 0); }
  24%  { opacity: 1; transform: translateX(50px);   clip-path: inset(30% 0 0 0); }
  36%  { opacity: 1; transform: translateX(-110px); clip-path: inset(0 0 40% 0); }
  48%  { opacity: 1; transform: translateX(70px);   clip-path: inset(45% 0 20% 0); }
  60%  { opacity: 0.9; transform: translateX(-180px); clip-path: inset(10% 0 60% 0); }
  72%  { opacity: 0.8; transform: translateX(140px);  clip-path: inset(60% 0 25% 0); }
  84%  { opacity: 0.6; transform: translateX(-260px); clip-path: inset(30% 0 62% 0); }
  100% { opacity: 0; transform: translateX(0);      clip-path: inset(0 0 0 0); }
}

@keyframes wm-glitch-l {
  0%   { opacity: 0; transform: translateX(0);      clip-path: inset(0 0 0 0); }
  12%  { opacity: 1; transform: translateX(-60px);  clip-path: inset(50% 0 10% 0); }
  24%  { opacity: 1; transform: translateX(-20px);  clip-path: inset(0 0 55% 0); }
  36%  { opacity: 1; transform: translateX(-150px); clip-path: inset(20% 0 30% 0); }
  48%  { opacity: 1; transform: translateX(-50px);  clip-path: inset(70% 0 0 0); }
  60%  { opacity: 1; transform: translateX(-240px); clip-path: inset(35% 0 45% 0); }
  72%  { opacity: 1; transform: translateX(-110px); clip-path: inset(0 0 80% 0); }
  84%  { opacity: 1; transform: translateX(-330px); clip-path: inset(75% 0 15% 0); }
  100% { opacity: 0; transform: translateX(0);      clip-path: inset(0 0 0 0); }
}

@keyframes wm-glitch-r {
  0%   { opacity: 0; transform: translateX(0);     clip-path: inset(0 0 0 0); }
  12%  { opacity: 1; transform: translateX(40px);  clip-path: inset(15% 0 60% 0); }
  24%  { opacity: 1; transform: translateX(90px);  clip-path: inset(55% 0 5% 0); }
  36%  { opacity: 1; transform: translateX(30px);  clip-path: inset(5% 0 75% 0); }
  48%  { opacity: 1; transform: translateX(170px); clip-path: inset(25% 0 50% 0); }
  60%  { opacity: 1; transform: translateX(60px);  clip-path: inset(80% 0 0 0); }
  72%  { opacity: 1; transform: translateX(230px); clip-path: inset(40% 0 35% 0); }
  84%  { opacity: 1; transform: translateX(120px); clip-path: inset(0 0 70% 0); }
  100% { opacity: 0; transform: translateX(0);     clip-path: inset(0 0 0 0); }
}

/* Without JavaScript the home hero shows its own wordmark, so this would be a second one */
html:not(.js):has(.hero) .dynamic-brand {
  display: none;
}

.js .dynamic-brand {
  opacity: 0;
}

.js .dynamic-brand.is-ready {
  opacity: 1;
}

.js .dynamic-brand.is-ready.is-docked:hover {
  opacity: 0.7;
}

.dynamic-brand.no-transition {
  transition: none;
}

/* While the wordmark is large in the hero, it stays white whatever is behind the header */
.dynamic-brand:not(.is-docked) {
  color: var(--text-pure-white);
}

/* The phrase beside the docked brand: site.js sizes and places it */
.brand-phrase {
  position: fixed;
  top: var(--phrase-y, 0px);
  left: var(--phrase-x, 0px);
  z-index: 1001;
  display: none;
  overflow: hidden;
  height: 1.3em;
  font-family: var(--font-mono);
  font-size: var(--phrase-size, 13px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--header-ink-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -10px 0;
  transition: opacity 0.25s ease, translate 0.4s var(--ease), color 0.35s ease;
}

.js .brand-phrase {
  display: grid;
}

.brand-docked .brand-phrase {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease 0.38s, translate 0.8s var(--ease) 0.38s, color 0.35s ease;
}

.phrase-word {
  grid-area: 1 / 1;
}

.phrase-word.is-in { animation: phrase-in 0.6s var(--ease) both; }
.phrase-word.is-out { animation: phrase-out 0.45s var(--ease-in-out) both; }

@keyframes phrase-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes phrase-out { to { transform: translateY(-100%); opacity: 0; } }

/* Never runs into the button: site.js gives it the room up to the button */
.brand-phrase {
  max-width: var(--phrase-max, none);
}

.js .brand-phrase.is-cramped {
  display: none;
}

.header-nav {
  position: fixed;
  top: calc((var(--header-h) - var(--header-cta-h)) / 2);
  right: calc(var(--gutter) + 158px);
  z-index: 1001;
  display: flex;
  align-items: center;
  height: var(--header-cta-h);
}

.nav-links {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
}

.nav-link {
  color: var(--header-ink);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--header-accent);
}

/* Over the hero's video, before the bar is there, the links need their own help */
html:not(.brand-docked) .nav-link {
  color: var(--text-pure-white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

html:not(.brand-docked) .nav-link:hover {
  color: var(--accent);
}

@media (max-width: 1080px) {
  .header-nav { display: none; }
}

.header-cta {
  position: fixed;
  top: calc((var(--header-h) - var(--header-cta-h)) / 2);
  right: var(--gutter);
  z-index: 1001;
  height: var(--header-cta-h);
  min-width: 140px;
  padding: 0 clamp(16px, 1.25vw, 26px);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--bg-main);
  font-size: 0.875rem;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.header-cta:hover {
  background: var(--header-ink);
  color: var(--bg-cream);
}

html:not(.drawer-open) .header-cta:hover {
  color: var(--bg-main);
}

.header-cta .label-close,
.header-cta .label-narrow {
  display: none;
}

.header-cta .cta-icon {
  transition: transform 0.45s var(--ease);
}

.header-cta[aria-expanded="true"] {
  background: transparent;
  border-color: var(--header-ink);
  color: var(--header-ink);
}

.header-cta[aria-expanded="true"]:hover {
  background: var(--header-ink);
  color: var(--bg-cream);
}

.header-cta[aria-expanded="true"] .label-open { display: none; }
.header-cta[aria-expanded="true"] .label-close { display: inline; }
.header-cta[aria-expanded="true"] .cta-icon { transform: rotate(45deg); }

@media (max-width: 1080px) {
  .header-cta { min-width: 0; }
  .header-cta .label-wide { display: none; }
  .header-cta .label-narrow { display: inline; }
}

/* Top-down drawer */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.drawer-panel {
  position: absolute;
  inset: 0 0 auto 0;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) 0 clamp(32px, 5vw, 64px);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-in-out);
}

.site-drawer.is-open .drawer-backdrop { opacity: 1; }
.site-drawer.is-open .drawer-panel { transform: none; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 6vw, 96px);
}

.drawer-grid > * {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.site-drawer.is-open .drawer-grid > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.site-drawer.is-open .drawer-grid > *:nth-child(2) {
  transition-delay: 0.33s;
}

@media (max-width: 800px) {
  .drawer-grid { grid-template-columns: minmax(0, 1fr); }
}

.drawer-title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

.drawer-copy {
  margin-top: 20px;
  max-width: 30em;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* The links move in here when the header has no room for them */
.drawer-nav {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--header-line);
}

.drawer-nav a {
  padding: 6px 0;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.drawer-nav a:hover,
.drawer-nav a[aria-current="page"] {
  color: var(--accent-on-light);
}

@media (max-width: 1080px) {
  .drawer-nav { display: flex; }
}

/* The contact form on cream */
.section-light .form {
  padding: 0;
  background: none;
  border: 0;
}

.section-light .form input,
.section-light .form select,
.section-light .form textarea {
  color: var(--text-on-light);
  background: #fffdf9;
  border-color: rgba(15, 43, 44, 0.28);
}

.section-light .form input::placeholder {
  color: var(--text-on-light-muted);
}

.section-light .form input:focus,
.section-light .form select:focus,
.section-light .form textarea:focus {
  outline-color: var(--accent-on-light);
}

.section-light .form-note {
  color: var(--text-on-light-muted);
}

.section-light .form-note a {
  color: var(--accent-on-light);
  text-decoration: underline;
}

/* Home hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--bg-main);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 4, 7, 0.62) 0%, rgba(12, 4, 7, 0.1) 40%, rgba(12, 4, 7, 0.9) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding-top: 108px;
  padding-bottom: clamp(32px, 6vw, 64px);
}

.hero-wordmark img {
  width: 100%;
  height: auto;
}

/* It holds the wordmark's place and the page's heading; the dynamic brand is what shows */
.js .hero-wordmark img {
  opacity: 0;
}

.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-pure-white);
  max-width: 18em;
}

/* Sections */
.section {
  padding: clamp(64px, 9vw, 128px) 0;
}

.section-light {
  background: var(--bg-cream);
  color: var(--text-on-light);
}

.section-light h2,
.section-light h3 {
  color: var(--text-on-light);
}

.section-light .eyebrow {
  color: var(--accent-on-light);
}

.section-light .btn-secondary {
  background: var(--bg-teal);
  border-color: var(--bg-teal);
  color: var(--text-warm-white);
}

.section-light .btn-secondary:hover {
  background: var(--bg-teal-deep);
}

/* Home photography carousel: one row at a common height, starting on the content edge and
   running off the right of the screen. Swipe, trackpad, keyboard, or the arrow buttons. */
.photo-track {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.photo-track::-webkit-scrollbar {
  display: none;
}

.photo-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.photo-slide {
  flex: none;
  scroll-snap-align: start;
}

.photo-slide img {
  display: block;
  width: auto;
  height: clamp(280px, 38vw, 560px);
  max-width: calc(100vw - 2 * var(--gutter));
  object-fit: cover;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
}

.carousel-controls {
  display: flex;
  gap: 10px;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-card);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-warm-white);
  cursor: pointer;
  transition: var(--transition);
}

.carousel-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.split-reverse {
  grid-template-columns: 1fr 1fr;
}

.split-top {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.split-image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.split-image-tall {
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .split,
  .split-reverse,
  .split-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

.statement {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 1em;
}

.statement a {
  color: var(--accent);
}

.section-light :focus-visible {
  outline-color: var(--accent-on-light);
}

.section-light .statement a {
  color: var(--accent-on-light);
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-main);
  margin-top: 20px;
  max-width: 38em;
}

.location {
  font-size: 1.05rem;
  margin: 8px 0 28px;
  color: var(--text-on-light-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Inner page tops: clear the fixed navbar */
.page-top {
  padding: clamp(116px, 13vw, 168px) 0 clamp(64px, 8vw, 112px);
}

.page-title {
  max-width: 19em;
}

.page-lead {
  color: var(--text-muted);
}

.wide-image {
  width: 100%;
  margin-top: clamp(40px, 5vw, 72px);
  border-radius: var(--radius-lg);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
}

.card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.list-grid {
  margin-top: clamp(48px, 6vw, 80px);
}

@media (max-width: 1100px) {
  .card-grid,
  .card-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .card-grid,
  .card-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-media {
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1); /* Episode thumbnails have red in them; this keeps the grid on palette */
  transition: var(--transition);
}

.card:hover .card-media img {
  transform: scale(1.03);
}

/* Episode thumbnails come back into colour */
.card-episode:hover .card-media img,
.card-episode:focus-visible .card-media img {
  filter: none;
}

.card:hover .card-title {
  color: var(--accent);
}

.card-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-warm-white);
  transition: var(--transition);
}

.card-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Cards on cream */
.section-light .card-media {
  border-color: rgba(15, 43, 44, 0.16);
}

.section-light .card-meta {
  color: var(--accent-on-light);
}

.section-light .card-title {
  color: var(--text-on-light);
}

.section-light .card:hover .card-title {
  color: var(--accent-on-light);
}

.section-light .card-sub {
  color: var(--text-on-light-muted);
}

/* Home page About: Episode Zero */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.episode-zero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(40px, 6vw, 88px);
  background: #000;
}

.ez-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: grayscale(1);
  opacity: 0.34;
}

.episode-zero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25) 40%, #000 96%);
}

.ez-inner {
  position: relative;
  z-index: 1;
}

.ez-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ez-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}

.ez-live i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-live);
}

.episode-zero.is-playing .ez-live i {
  animation: ez-pulse 1.4s ease-in-out infinite;
}

@keyframes ez-pulse {
  50% { opacity: 0.25; }
}

.ez-stage {
  display: grid;
  gap: 24px;
  min-height: clamp(280px, 34vw, 460px);
  align-items: center;
  padding: clamp(32px, 5vw, 64px) 0;
}

.ez-cap {
  max-width: 21em;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.2; /* Room for the highlight boxes, so they don't touch the lines around them */
  letter-spacing: -0.035em;
  color: var(--text-pure-white);
}

.ez-cap a:hover {
  text-decoration: underline;
}

.ez-cap .mark {
  background-color: var(--accent-orange);
  color: #000;
}

/* With JavaScript the captions share one spot and take turns. Without it, they all show. */
.js .ez-cap {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 18px;
  pointer-events: none;
  transition: opacity 0.45s ease, translate 0.6s var(--ease);
}

.js .ez-cap.is-on {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

html:not(.js) .ez-bars,
html:not(.js) .ez-play,
html:not(.js) .ez-chapters,
html:not(.js) .ez-time {
  display: none;
}

.ez-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 84px;
  cursor: pointer;
  touch-action: none;
}

.ez-bars i {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.15s linear;
}

.ez-bars i.is-done {
  background: var(--accent);
}

.ez-bars i.is-now {
  background: var(--accent-live);
}

.ez-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px 20px;
  padding: 18px 0 clamp(32px, 4vw, 56px);
}

.ez-play {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
}

.ez-play:hover {
  background: var(--text-warm-white);
}

.ez-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.ez-chapters button {
  padding: 8px 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.ez-chapters button:hover {
  color: var(--text-warm-white);
}

.ez-chapters button[aria-current="true"] {
  color: var(--accent);
}

.ez-time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .ez-bars { height: 56px; gap: 2px; }
  .ez-controls { grid-template-columns: auto minmax(0, 1fr); }
  .ez-time { display: none; }
  .ez-more { grid-column: 1 / -1; }
}

/* About page story: paper storyboard panels on a dark table */
.storyboard {
  padding: clamp(56px, 8vw, 128px) 0;
  background: var(--bg-card-alt);
}

.sb-board {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px) clamp(24px, 5vw, 88px);
  list-style: none;
}

.sb-panel {
  padding: 14px 14px 22px;
  background: var(--bg-cream);
  color: var(--text-dark);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  rotate: var(--r, 0deg);
}

.sb-panel:nth-child(even) {
  margin-top: clamp(0px, 7vw, 110px);
}

/* With JavaScript, each panel lands as it's reached and its pencil mark draws itself */
.js .sb-panel {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.6s ease, translate 0.8s var(--ease);
}

.js .sb-panel.is-seen {
  opacity: 1;
  translate: 0 0;
}

.sb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #000;
  background: #000;
}

.sb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.sb-frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sb-frame path {
  fill: none;
  stroke: var(--accent-live);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.js .sb-frame path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-in-out) 0.35s;
}

.js .sb-panel.is-seen .sb-frame path {
  stroke-dashoffset: 0;
}

.sb-shot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sb-shot span:last-child {
  color: var(--accent-on-light);
}

.sb-text {
  margin: 0 4px;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

.sb-text a {
  color: var(--accent-on-light);
}

.sb-text a:hover {
  text-decoration: underline;
}

.sb-end {
  margin-top: clamp(32px, 5vw, 72px);
  text-align: center;
}

@media (max-width: 760px) {
  .sb-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-panel {
    rotate: 0deg;
  }

  .sb-panel:nth-child(even) {
    margin-top: 0;
  }
}

/* Full-width photo feature */
.feature {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 14vw, 200px) 0;
}

.feature-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 4, 7, 0.92) 0%, rgba(12, 4, 7, 0.72) 55%, rgba(12, 4, 7, 0.4) 100%);
}

.feature-content {
  position: relative;
  z-index: 1;
}

.feature-content h2 {
  max-width: 15em;
}

/* Speaking page: poster-sized statements, each screen sliding up over the last */
.poster {
  --poster-top: calc(var(--header-h) + 12px); /* Clears the header and its stripes */
  position: sticky;
  top: var(--poster-top);
  min-height: calc(100vh - var(--poster-top));
  min-height: calc(100svh - var(--poster-top));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(24px, 4vh, 56px) 0;
}

/* A screen too short for its words simply scrolls (site.js) */
.poster.is-tall {
  position: static;
}

.poster h2 {
  max-width: 12em;
  font-size: clamp(2.1rem, min(7.6vw, 13vh), 7.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: inherit;
}

.poster p {
  margin-top: clamp(16px, 2.6vh, 32px);
  max-width: 37em;
  font-size: clamp(1.05rem, 1.65vw, 1.5rem);
  line-height: 1.38;
}

.poster .poster-before {
  margin: 0 0 16px;
}

.poster-cream {
  background: var(--bg-cream);
  color: var(--text-dark);
}

.poster-orange {
  background: var(--accent-orange);
  color: #000;
}

.poster-yellow {
  background: var(--accent);
  color: #000;
}

.poster-photo {
  color: var(--text-pure-white);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.3)), url("/images/blog/stop-waiting-to-be-ready.jpg") center 22% / cover;
}

.poster-btn {
  margin-top: clamp(20px, 3vh, 36px);
  background: #000;
  color: var(--text-pure-white);
}

.poster-btn:hover {
  background: var(--bg-cream);
  color: #000;
}

/* Articles */
.article-title {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
}

.article-meta {
  margin-top: 16px;
  color: var(--text-muted);
}

.article-image,
.video-frame {
  width: 100%;
  margin-top: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-frame {
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose {
  margin-top: 40px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 1.8em;
  line-height: 1.15;
}

.prose h2 {
  font-size: 1.75rem;
}

.prose h3 {
  font-size: 1.4rem;
}

.prose h4 {
  font-size: 1.15rem;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose img {
  border-radius: var(--radius-md);
}

.prose blockquote {
  padding-left: 1em;
  border-left: 3px solid var(--accent);
  color: var(--text-warm-white);
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border-card);
}

.pager a {
  display: block;
  max-width: 48%;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-warm-white);
}

.pager a:hover {
  color: var(--accent);
}

.pager .eyebrow {
  display: block;
  margin-bottom: 8px;
}

.pager-next {
  text-align: right;
  margin-left: auto;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 500px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
}

.form input::placeholder {
  color: var(--text-subtle);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-note {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* A field only bots fill in (functions/api/contact.js drops those messages) */
.form .form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile sizes itself: nothing unless it needs the visitor to click (site.js adds .is-visible
   then). Until then, cancel the form's gap so the empty slot leaves no extra space. */
.form-turnstile:not(.is-visible) {
  margin-top: -20px;
}
.form-status:empty {
  display: none;
}

.form-status {
  padding: 12px 14px;
  border-left: 3px solid var(--accent-orange);
  border-radius: var(--radius-sm);
  background: rgba(204, 85, 0, 0.1);
  font-size: 0.95rem;
  font-weight: 500;
}

.form-status[data-kind="success"] {
  border-left-color: var(--accent);
  background: rgba(222, 158, 59, 0.12);
}

.form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Footer */
.footer > .stripes {
  width: 100%;
}

/* At least a screen tall less the header bar, so at the bottom of the page the footer's stripes
   land exactly on the header's, which hang just below the bar. The CTA takes up the extra room. */
.footer {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  background: var(--bg-card-alt);
}

.footer > .container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.footer > .container > .footer-cta {
  flex: 1;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  padding: clamp(36px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--border-light);
}

.footer-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
}

/* "Survive" glitches every 4s, the same pattern as MURRELL leaving the header (wm-glitch-*):
   bands thrown sideways with burnt orange and yellow splitting off. It plays over the first
   0.5s of each cycle, then holds still, and settles back each time rather than vanishing. */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch-main,
.glitch-split {
  display: inline-block;
  animation: 4s steps(1, end) infinite;
}

.glitch-split {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

.glitch-l { color: #cc5500; animation-name: glitch-l; }
.glitch-r { color: #de9e3b; animation-name: glitch-r; }
.glitch-main { animation-name: glitch-main; }

@keyframes glitch-main {
  0%    { transform: translateX(0);       clip-path: inset(0 0 0 0); }
  1.5%  { transform: translateX(-0.09em); clip-path: inset(0 0 0 0); }
  3%    { transform: translateX(0.15em);  clip-path: inset(30% 0 0 0); }
  4.5%  { transform: translateX(-0.33em); clip-path: inset(0 0 40% 0); }
  6%    { transform: translateX(0.21em);  clip-path: inset(45% 0 20% 0); }
  7.5%  { transform: translateX(-0.54em); clip-path: inset(10% 0 60% 0); }
  9%    { transform: translateX(0.42em);  clip-path: inset(60% 0 25% 0); }
  10.5% { transform: translateX(-0.78em); clip-path: inset(30% 0 62% 0); }
  12.5%, 100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes glitch-l {
  0%    { opacity: 0; transform: translateX(0);       clip-path: inset(0 0 0 0); }
  1.5%  { opacity: 1; transform: translateX(-0.18em); clip-path: inset(50% 0 10% 0); }
  3%    { opacity: 1; transform: translateX(-0.06em); clip-path: inset(0 0 55% 0); }
  4.5%  { opacity: 1; transform: translateX(-0.45em); clip-path: inset(20% 0 30% 0); }
  6%    { opacity: 1; transform: translateX(-0.15em); clip-path: inset(70% 0 0 0); }
  7.5%  { opacity: 1; transform: translateX(-0.72em); clip-path: inset(35% 0 45% 0); }
  9%    { opacity: 1; transform: translateX(-0.33em); clip-path: inset(0 0 80% 0); }
  10.5% { opacity: 1; transform: translateX(-0.99em); clip-path: inset(75% 0 15% 0); }
  12.5%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes glitch-r {
  0%    { opacity: 0; transform: translateX(0);      clip-path: inset(0 0 0 0); }
  1.5%  { opacity: 1; transform: translateX(0.12em); clip-path: inset(15% 0 60% 0); }
  3%    { opacity: 1; transform: translateX(0.27em); clip-path: inset(55% 0 5% 0); }
  4.5%  { opacity: 1; transform: translateX(0.09em); clip-path: inset(5% 0 75% 0); }
  6%    { opacity: 1; transform: translateX(0.51em); clip-path: inset(25% 0 50% 0); }
  7.5%  { opacity: 1; transform: translateX(0.18em); clip-path: inset(80% 0 0 0); }
  9%    { opacity: 1; transform: translateX(0.69em); clip-path: inset(40% 0 35% 0); }
  10.5% { opacity: 1; transform: translateX(0.36em); clip-path: inset(0 0 70% 0); }
  12.5%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.2vw, 44px) 0;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-contact {
    grid-column: 1 / -1;
  }
}

.footer-grid nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.footer-grid .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* A small burnt orange block, echoing the ASH box in the wordmark */
.footer-grid .eyebrow::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent-orange);
}

.footer-grid nav a,
.footer-email {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-warm-white);
}

.footer-email {
  overflow-wrap: anywhere;
}

.footer-grid nav a:hover,
.footer-email:hover {
  color: var(--accent-orange);
}

.footer address {
  margin-top: 8px;
  font-size: 1.125rem;
  font-style: normal;
  color: var(--text-muted);
}

.footer-legal {
  padding: 18px 0;
  border-top: 1px solid var(--border-light);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* 404 */
.starter {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 120px 0 64px;
}

.starter-tagline {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--text-muted);
  margin-top: 20px;
}

.starter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}