/* ===========================================================================
   מרחב המאסטרמיינד — בשביל ההורות

   Palette sampled from the live brand site (2-parents.co.il, 22.10.2026):
   the teal of the wordmark and the section bands, the green of the brush
   stroke above it, and the pale cyan used for buttons and tinted panels.
   Nothing here is invented — every working shade is derived from those three.

   The one decorative device on the site is "the trail": the brush stroke out
   of the logo, drawn as a single hairline. It appears behind the hero, as the
   marker beside list items and steps, and as the station dot on a recording
   card. It is never filled, never coloured outside the brand, and nothing
   else on the page is allowed to compete with it.
   ========================================================================= */

:root {
  --teal: #00809d;
  --teal-deep: #065a6f;
  --leaf: #6aa343;
  --mist: #e4f6fa;
  --paper: #ffffff;
  --ink: #16232a;
  --muted: #566a72;

  --line: rgba(6, 90, 111, 0.16);
  --line-soft: rgba(6, 90, 111, 0.08);
  --shadow: 0 14px 34px rgba(6, 90, 111, 0.09);
  --shadow-lift: 0 20px 44px rgba(6, 90, 111, 0.16);

  --wrap: 1180px;
  --gutter: clamp(18px, 5vw, 48px);
  --radius: 18px;
  --radius-lg: 26px;

  --font-display: "Secular One", "Assistant", system-ui, sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;

  --icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6.5 8-6.5s7 2.5 8 6.5'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

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

/* `hidden` has to win over any class that sets `display`. Without this, a form
   with `display: flex` stays on screen after the script hides it, and a nav
   link made `display: flex` for the phone menu shows to people who must not
   see it. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--teal-deep);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.05rem, 5vw, 3.45rem);
  line-height: 1.14;
  color: var(--teal-deep);
}

h2 {
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  line-height: 1.24;
  color: var(--teal-deep);
}

h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.35;
  color: var(--teal-deep);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Keeps the heading ladder intact where a visible heading would only repeat
   what the page title already says. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}

.skip-link:focus {
  inset-inline-start: 50%;
  transform: translateX(50%);
}

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* No tracking: letter-spacing pulls Hebrew words apart and reads as a
   Latin-typography habit carried over by mistake. */
.eyebrow {
  margin: 0 0 0.6em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
}

main:focus {
  outline: none;
}

.lede {
  font-size: clamp(1.03rem, 1.5vw, 1.22rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 62ch;
}

.fine-print {
  margin-top: 28px;
  font-size: 0.94rem;
  color: var(--muted);
  max-width: 68ch;
}

.source-note {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Inline link inside a sentence: the negative margin gives it a 44px hit area
   without pushing the surrounding lines apart. */
.source-note a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}

/* An honest marker for anything the brief says still needs a real connection
   or a real asset. Visible on purpose — it is a handover note, not a badge. */
.todo-chip {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 10px;
  border: 1px dashed var(--teal);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal-deep);
  background: var(--mist);
  white-space: nowrap;
}

/* ------------------------------- buttons ------------------------------- */

.primary-button,
.secondary-button,
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.primary-button {
  background: var(--teal);
  color: #fff;
}

.primary-button:hover {
  background: var(--teal-deep);
}

.secondary-button,
.pill-button {
  background: transparent;
  color: var(--teal-deep);
  border-color: var(--teal);
}

.secondary-button:hover,
.pill-button:hover {
  background: var(--mist);
}

.primary-button.full {
  width: 100%;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid var(--leaf);
  align-self: flex-start;
  line-height: 1.3;
  border-radius: 0;
}

.text-button:hover {
  color: var(--teal);
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

/* ------------------------------- header -------------------------------- */

.preview-banner {
  background: var(--teal-deep);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 10px var(--gutter);
  text-align: center;
}

.preview-banner strong {
  font-weight: 700;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: block;
  flex: 0 0 auto;
}

.brand-logo {
  height: clamp(46px, 6vw, 68px);
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-inline-start: auto;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--teal-deep);
}

.site-nav a.is-current {
  color: var(--teal-deep);
  border-bottom-color: var(--leaf);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The sign-in button. It has to out-rank `.site-nav a` (which strips padding
   and draws an underline for plain links), so it is scoped under the nav. A
   filled pill with a person mark: it is the one action in the header, so it is
   the only filled thing there. The icon is a CSS mask because the label is
   rewritten by script when the visitor signs in or out. */
.site-nav .nav-actions a {
  gap: 9px;
  min-height: 46px;
  padding: 10px 24px 10px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0, 128, 157, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.site-nav .nav-actions a::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-person) center / contain no-repeat;
  mask: var(--icon-person) center / contain no-repeat;
}

.site-nav .nav-actions a:hover {
  background: var(--teal-deep);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 90, 111, 0.28);
  transform: translateY(-1px);
}

.site-nav .nav-actions a:active {
  transform: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-inline-start: auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--teal-deep);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* ------------------------------ the trail ------------------------------ */

.trail {
  position: absolute;
  color: var(--leaf);
  opacity: 0.5;
  pointer-events: none;
}

/* The shell clips the oversized trail at the viewport edge, which is what
   keeps the document from scrolling sideways. */
.hero-shell {
  position: relative;
  overflow: hidden;
}

/* Anchored to the bottom of the hero so it always runs beneath the title,
   whatever the title's size: in from the right behind the portrait, out to the
   left under the headline. */
.trail-hero {
  inset-block-end: 0;
  inset-inline: -6%;
  width: 112%;
  height: auto;
  z-index: 0;
}

/* The one orchestrated moment: the trail is drawn once when the home view
   opens, starting from the right edge — the direction Hebrew is read in. */
@media (prefers-reduced-motion: no-preference) {
  .view.is-active .trail-hero path {
    stroke-dasharray: 1;
    animation: trail-draw 1700ms cubic-bezier(0.45, 0, 0.2, 1) 150ms both;
  }
}

@keyframes trail-draw {
  from {
    stroke-dashoffset: 1.05;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ------------------------------ the hero ------------------------------- */

/* The portrait takes the first track, which is the right-hand side in a
   right-to-left page; the title gets the open space on the left and nothing
   else. Areas are named so the DOM can keep the title first for readers. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  grid-template-areas: "figure text";
  align-items: center;
  column-gap: clamp(28px, 6vw, 88px);
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: clamp(36px, 6vw, 84px) var(--gutter) clamp(28px, 4vw, 56px);
}

.hero-text {
  grid-area: text;
  position: relative;
  z-index: 1;
}

.hero-text h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}

.hero-figure {
  grid-area: figure;
  position: relative;
  z-index: 1;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}

/* The welcome line and the main button, directly under the hero. */
.band-welcome {
  padding-block: clamp(30px, 4vw, 54px);
  border-block: 1px solid var(--line-soft);
}

.welcome-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}

.welcome-row .lede {
  margin: 0;
  max-width: none;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* The rounded outline the brand site draws around its photography, redrawn
   here as a frame the portrait sits inside rather than on top of. */
.portrait-frame {
  position: relative;
  border-radius: 50% 50% 32px 32px / 44% 44% 32px 32px;
  background: var(--mist);
  overflow: hidden;
  isolation: isolate;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(0, 128, 157, 0.35);
  border-radius: inherit;
  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  display: block;
}

.portrait-frame.compact {
  max-width: 260px;
}

.hero-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
  text-align: center;
}

.figcaption-name {
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-size: 1.1rem;
}

.figcaption-role {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ------------------------------- bands --------------------------------- */

.band {
  padding-block: clamp(44px, 6.5vw, 92px);
}

.band-mist {
  background: var(--mist);
}

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

.band-head h2 {
  margin-bottom: 0;
}

.band-intro {
  border-block: 1px solid var(--line-soft);
}

.intro-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(20px, 4vw, 64px);
}

.intro-lead h2 {
  margin-bottom: 0;
}

/* List items sit on the trail: a hairline with a station dot, not a bullet.
   Everything is keyed to the inline-start side, so the rail lands on the
   right in Hebrew and would flip correctly in an LTR locale. */
.trail-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-inline-start: 2px solid var(--line);
}

.trail-list li {
  position: relative;
  padding-inline-start: 24px;
  padding-block-end: 16px;
}

.trail-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leaf);
}

.trail-list li:last-child {
  padding-block-end: 0;
}

/* ------------------------------- topics -------------------------------- */

/* Five topics fit one row at full width. Narrower than that the count is
   rebalanced below so the opening five never leave a lone card on its own row. */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  gap: 18px;
}

@media (min-width: 700px) and (max-width: 1099px) {
  .topic-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .topic-card {
    grid-column: span 2;
  }

  .topic-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 699px) {
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .topic-card {
    padding-inline: 10px;
  }

  .topic-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* A topic card is a mark and a name, both on the centre line. The mark sits in
   a tinted disc so five different drawings read as one family. */
.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 16px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.topic-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.topic-card h3 {
  margin: 0;
}

.topic-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal-deep);
  transition: background-color 160ms ease;
}

.topic-card:hover .topic-icon {
  background: #d3eef4;
}

/* Two strokes per drawing: the main line in the deep teal, one detail in the
   brand green. The green is a flourish, never what carries the meaning. */
.topic-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic-icon svg .accent {
  stroke: var(--leaf);
}

.topic-card .topic-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-deep);
}

.band-mist .topic-card {
  border-color: rgba(6, 90, 111, 0.12);
}

/* -------------------------------- steps -------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--line);
}

.step-mark {
  position: absolute;
  top: -7px;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--leaf);
}

.step h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.step p {
  color: var(--muted);
  margin: 0;
}

/* ------------------------------- people -------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.person-card h2 {
  margin: 0;
}

.person-card p {
  margin: 0;
  color: var(--muted);
}

/* ----------------------------- page heads ------------------------------ */

.page-head {
  padding-block: clamp(34px, 5vw, 72px) clamp(20px, 3vw, 36px);
  background: var(--paper);
}

.page-head h1 {
  margin-bottom: 0.4em;
}

/* ------------------------------ community ------------------------------ */

.community-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.community-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
}

.community-copy h2 {
  margin-top: 0;
}

.community-copy p {
  color: var(--muted);
}

.values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.values-row li {
  padding: 10px 22px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-size: 1rem;
}

.bio-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.bio-portrait {
  text-align: center;
}

.bio-name {
  margin: 16px 0 0;
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-size: 1.15rem;
}

.bio-role {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.bio-copy p {
  color: var(--muted);
}

/* -------------------------------- CTA ---------------------------------- */

.band-cta {
  background: var(--teal-deep);
  color: #fff;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.band-cta h2 {
  color: #fff;
  margin-bottom: 0.2em;
}

.band-cta p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 58ch;
  margin-bottom: 20px;
}

.band-cta .primary-button {
  background: #fff;
  color: var(--teal-deep);
}

.band-cta .primary-button:hover {
  background: var(--mist);
}

/* ------------------------------- library ------------------------------- */

.library-body {
  padding-bottom: clamp(48px, 7vw, 96px);
}

.gate-card {
  max-width: 620px;
  margin-bottom: clamp(48px, 7vw, 96px);
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.gate-card h2 {
  margin-top: 0;
}

.gate-card p {
  color: var(--muted);
  margin-bottom: 22px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  align-items: start;
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.search-field label,
.topic-filter legend {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--teal-deep);
  padding: 0;
}

.search-field input {
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.search-field input:focus {
  border-color: var(--teal);
}

.topic-filter {
  margin: 0;
  padding: 0;
  border: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.chip {
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chip:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.chip[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.result-count {
  margin: 22px 0 18px;
  font-size: 0.92rem;
  color: var(--muted);
}

.recording-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.recording-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.recording-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mist);
  overflow: hidden;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Branded stand-in when a recording has no cover image yet: the trail arc on
   a tinted panel, tinted with that topic's shade. No stock photography and
   nothing that pretends to be a frame from the session. */
.card-cover-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.card-topic {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-deep);
}

.card-demo {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(22, 35, 42, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 20px 22px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.card-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

.card-body h3 {
  margin: 0;
}

.card-summary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-tags li {
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
}

.card-action {
  margin-top: auto;
  padding-top: 14px;
}

.card-action .primary-button {
  width: 100%;
  min-height: 44px;
  padding-inline: 18px;
  font-size: 0.97rem;
}

.empty-state {
  max-width: 560px;
  margin-top: 36px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px dashed var(--teal);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.empty-state h2 {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.empty-state p {
  color: var(--muted);
}

.topic-empty {
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--mist);
}

/* -------------------------------- watch -------------------------------- */

.watch-wrap {
  padding-block: clamp(22px, 3vw, 40px) clamp(48px, 7vw, 96px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  color: var(--teal);
}

.watch-head {
  margin: 18px 0 22px;
  max-width: 70ch;
}

.watch-head h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  margin-bottom: 0.3em;
}

.watch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--muted);
}

.watch-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--teal-deep);
}

.player-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stand-in for a recording with no Vimeo link attached yet. It is deliberately
   not a play button: it must not read as a player that is merely slow. */
.player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 28px;
  color: #fff;
  text-align: center;
}

.player-placeholder strong {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 400;
}

.player-placeholder span {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.player-error {
  padding: 22px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--teal-deep);
}

.watch-body {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 3vw, 40px);
}

.watch-summary h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.watch-summary p {
  color: var(--muted);
}

.watch-files {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.watch-files a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 18px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
}

.watch-aside h2 {
  font-size: 1.05rem;
}

.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.related-list a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.related-list a:hover {
  color: var(--teal);
}

.related-list .related-date {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

/* -------------------------------- login -------------------------------- */

.login-wrap {
  padding-block: clamp(40px, 6vw, 88px);
  display: flex;
  justify-content: center;
}

.login-card {
  width: min(520px, 100%);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.login-card h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.login-intro {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.97rem;
}

.login-form label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-deep);
}

.login-form input {
  min-height: 50px;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.login-form input:focus {
  border-color: var(--teal);
}

.code-input {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.login-form .primary-button {
  margin-top: 8px;
}

.login-form .text-button {
  align-self: center;
  margin-top: 4px;
}

.login-status {
  margin: 16px 0 0;
  min-height: 1.5em;
  font-size: 0.95rem;
  color: var(--teal-deep);
}

.login-status.is-error {
  color: #a3314f;
}

.login-help {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--muted);
}

/* -------------------------------- footer ------------------------------- */

.site-footer {
  margin-top: clamp(40px, 6vw, 80px);
  background: var(--mist);
  border-top: 1px solid var(--line-soft);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(22px, 4vw, 56px);
  padding-block: clamp(32px, 4vw, 52px);
}

.footer-brand img {
  height: 56px;
  width: auto;
}

.footer-brand p {
  margin: 14px 0 0;
  font-size: 0.93rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px 28px;
}

.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--teal-deep);
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-base {
  border-top: 1px solid var(--line);
}

.footer-base p {
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  padding: 16px var(--gutter);
  font-size: 0.86rem;
  color: var(--muted);
}

/* -------------------------------- sheet -------------------------------- */

.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
}

.sheet::backdrop {
  background: rgba(6, 90, 111, 0.45);
}

.sheet-close {
  display: flex;
  justify-content: flex-start;
  padding: 14px 14px 0;
}

.sheet-body {
  padding: 4px clamp(20px, 4vw, 32px) clamp(22px, 4vw, 32px);
}

.sheet-body h2 {
  margin-top: 0;
}

.account-email {
  font-weight: 600;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.account-role {
  color: var(--muted);
  font-size: 0.92rem;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ------------------------------- routing ------------------------------- */

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: view-in 260ms ease both;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 1000px) {
  .intro-grid,
  .welcome-row,
  .community-grid,
  .watch-body,
  .bio-grid {
    grid-template-columns: 1fr;
  }

  .bio-grid {
    justify-items: start;
  }

  .filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
  }

  .site-nav a.is-current {
    border-bottom-color: var(--leaf);
  }

  .nav-actions {
    margin-top: 14px;
  }

  .site-nav .nav-actions a {
    justify-content: center;
    min-height: 50px;
  }

  .nav-actions a {
    flex: 1;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "figure";
    row-gap: 28px;
    padding-top: clamp(26px, 5vw, 44px);
  }

  /* On a phone the title comes first and the portrait follows; with the
     portrait on top the title started below the fold of a 375x812 screen. */
  .hero-figure {
    max-width: 240px;
    justify-self: start;
  }

  .hero-figure figcaption {
    text-align: start;
  }

  /* Lifted clear of the caption, so on a phone the trail runs beside the
     portrait rather than under the name. */
  .trail-hero {
    inset-block-end: 110px;
    opacity: 0.4;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .recording-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    gap: 14px;
  }

  .hero-actions .primary-button {
    width: 100%;
  }

  .values-row li {
    font-size: 0.94rem;
    padding: 8px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}