/* ==========================================================================
   The Temi Blueprint — site styles
   --------------------------------------------------------------------------
   Brand tokens come from the Aug 24 handoff. Green does the structural work,
   terracotta is the action colour, gold only ever appears as dots + overlines.
   ========================================================================== */

:root {
  --green: #2E4230;
  --cream: #F7F4EC;
  --gold: #D8B24A;
  --terracotta: #C05A3C;
  --terracotta-dark: #A84B30;
  --ink: #2A2A26;
  --muted: #6B6B62;
  --line: #DCD7C9;
  --white: #ffffff;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --page: 1180px;
  --gutter: 24px;
}

@media (min-width: 900px) {
  :root { --gutter: 64px; }
}

/* --- reset ---------------------------------------------------------------- */

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

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--green); color: var(--cream);
  padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- typography ----------------------------------------------------------- */

.serif { font-family: var(--serif); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--green);
  line-height: 1.12;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.35rem, 6vw, 3.375rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 2.375rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.375rem); }

p { color: var(--muted); }
p.lead { font-size: clamp(1rem, 1.6vw, 1.0625rem); line-height: 1.65; }

.overline {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--terracotta);
}

.micro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- layout --------------------------------------------------------------- */

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(48px, 8vw, 76px); }

/* Full-width green band — the site's structural rhythm, straight from the
   coaching-plan documents so print and web read as one system. */
.band { background: var(--green); }
.band:not(.band-cream) h2, .band:not(.band-cream) h3 { color: var(--cream); }
.band:not(.band-cream) p { color: rgba(247, 244, 236, 0.8); }
.band:not(.band-cream) .overline { color: var(--gold); }

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

/* Full-bleed photograph used as a section break. Kept short so it reads as a
   band in the page's rhythm, the same role the green bands play. */
/* Taller than a typical band, on purpose: the photo is a wide landscape and
   Temi stands in the lower third, so a short strip cut her off at the chest.
   This height plus the low focal point keeps her whole figure in frame and
   still leaves the mountains behind her. */
.photo-band {
  height: clamp(320px, 46vw, 620px);
  overflow: hidden;
}
.photo-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 88%;
}
/* Temi sits on the floor in the gym shot, so that band has to hold the
   bottom edge or the crop takes her legs off. */
.photo-band--floor img { object-position: 60% 100%; }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* For pairings where one side is much taller than the other, centring leaves
   the short side stranded in the middle. */
.split-top { align-items: start; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-wide-left { grid-template-columns: 1.15fr 1fr; }
}

.cols {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 760px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* --- the hexagon mark ----------------------------------------------------- */

.hex-mark { width: 30px; height: 34px; flex-shrink: 0; }

.hex-portrait { width: min(100%, 420px); margin-inline: auto; }

/* A straight photograph rather than the hexagon crop — used where the point
   is the work itself, not the portrait. */
.coach-shot { width: min(100%, 420px); margin-inline: auto; }
.coach-shot img { width: 100%; height: auto; display: block; }
.hex-portrait figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--green);
  text-align: center;
  margin-top: 12px;
}

/* --- nav ------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px);
  list-style: none; padding: 0;
  font-size: 0.845rem;
}
.nav-links a { text-decoration: none; color: var(--ink); padding-block: 4px; }
.nav-links a:hover { color: var(--terracotta); }
.nav-links a[aria-current="page"] {
  color: var(--green); font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--gold);
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line);
  padding: 9px 11px; cursor: pointer;
  color: var(--green);
}

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-block: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    font-size: 1rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-bottom: 1px solid rgba(46, 66, 48, 0.08); }
  .nav-links li:last-child { border-bottom: 0; padding-top: 14px; }
  .nav-links a { display: block; padding-block: 13px; }
}

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 15px 30px;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--terracotta); color: var(--white); }
.btn-primary:hover { background: var(--terracotta-dark); }

.btn-ghost { border-color: var(--green); color: var(--green); background: none; }
.btn-ghost:hover { background: var(--green); color: var(--cream); }

.band .btn-ghost { border-color: var(--cream); color: var(--cream); }
.band .btn-ghost:hover { background: var(--cream); color: var(--green); }

.btn-sm { font-size: 0.8125rem; padding: 10px 20px; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* On a phone, stacked buttons of different widths look like a mistake.
   Give them the full width so the calls to action stay confident. */
@media (max-width: 479px) {
  .btns .btn { flex: 1 1 100%; }
}

/* Inline text link that still reads as an action. */
.link-action {
  color: var(--terracotta);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 90, 60, 0.35);
  padding-bottom: 2px;
}
.link-action:hover { border-bottom-color: var(--terracotta); }

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

.hero { padding-block: clamp(40px, 6vw, 68px) clamp(48px, 7vw, 76px); }
.hero h1 { margin: 18px 0; }
.hero p.lead { margin-bottom: 28px; max-width: 46ch; }
.hero .micro { margin-top: 16px; }

/* On a phone the hero stacks, and the photo used to land after the headline,
   the lead, both buttons and the note under them. That left Temi's face as
   the last thing on a screen plenty of people never scroll to. It goes first
   now, and it's smaller than on desktop so the headline and both buttons
   still fit on the opening screen. */
@media (max-width: 899px) {
  .hero .split > figure { order: -1; }
  .hero .hex-portrait,
  .hero .coach-shot { width: min(62vw, 240px); margin-top: 0; }

  /* Everything above the buttons is tightened by a few pixels each so that
     the photo, the headline, the promise and BOTH buttons land on the first
     screen of a phone. Measured at 375x812, the smallest phone worth
     designing for. */
  .hero { padding-top: 32px; }
  .hero h1 { margin: 14px 0; }
  .hero p.lead { margin-bottom: 20px; }
}

/* --- gold-dot column list (the "method" pattern) -------------------------- */

.dot-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.dot-lg { width: 9px; height: 9px; }

/* --- cards ---------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(46, 66, 48, 0.13);
}

/* Plan preview — deliberately reuses the coaching plan's table language. */
.card-head {
  background: var(--green);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 13px 18px;
}
.card-head b {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--cream);
}
.card-head i {
  font-family: var(--serif); font-size: 0.72rem; color: var(--gold); white-space: nowrap;
}
.card-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 11px 18px;
  font-size: 0.8125rem;
}
.card-row:nth-child(odd) { background: rgba(46, 66, 48, 0.03); }
.card-row b { color: var(--green); font-weight: 600; }
.card-row span { color: var(--muted); font-size: 0.78rem; text-align: right; }

/* Content card — workouts, recipes, classes, pricing. */
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  height: 100%;
}
.tile h3 { margin-bottom: 10px; }
.tile p { font-size: 0.9rem; flex-grow: 1; }
.tile .btn, .tile .link-action { margin-top: 20px; align-self: flex-start; }
.tile-meta {
  font-family: var(--serif); font-style: italic;
  font-size: 0.85rem; color: var(--terracotta);
  margin-bottom: 6px;
}

.tile-featured { border-color: var(--green); border-width: 2px; }

/* A story slot with nobody in it yet. Deliberately looks unfinished so it can
   never be mistaken for a real client quote. Nothing uses this right now —
   kept because it's the right way to hold a space for a testimonial you're
   still waiting on. Add class="tile--awaiting" to a tile to use it again. */
.tile--awaiting {
  background: transparent;
  border-style: dashed;
  border-color: #c9c3b3;
}
.tile--awaiting h3 { color: #8d8a80; }
.tile--awaiting p { color: #8d8a80; font-style: italic; }

.price {
  font-family: var(--serif);
  font-size: 2rem; font-weight: 600; color: var(--green);
  margin-block: 6px 4px;
}
.price small { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); font-weight: 400; }

/* Checklist */
.ticks { list-style: none; padding: 0; margin-block: 14px; }
.ticks li {
  position: relative; padding-left: 22px;
  font-size: 0.9rem; color: var(--muted);
  margin-bottom: 9px;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.band .ticks li { color: rgba(247, 244, 236, 0.82); }

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative; padding-left: 54px;
  margin-bottom: 28px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif); font-size: 1.05rem; color: var(--green);
}
.band .steps li::before { color: var(--gold); }
.steps h3 { margin-bottom: 6px; }

/* --- email capture -------------------------------------------------------- */

.capture { max-width: 560px; }
.capture-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
.capture-form input[type="email"],
.capture-form input[type="text"] {
  flex: 1 1 220px;
  font-family: var(--sans); font-size: 0.9375rem;
  padding: 15px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.band .capture-form input { border-color: rgba(247, 244, 236, 0.3); }
.capture-form input::placeholder { color: #9a9a90; }
/* Inputs share the first row; the button takes the full width beneath them,
   so it never wraps into a lonely half-row. */
.capture-form .btn { flex: 1 0 100%; }
.capture-note { font-size: 0.78rem; margin-top: 12px; }

/* --- FAQ / disclosure ----------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: var(--serif); font-size: 1.2rem; color: var(--green);
  padding: 20px 36px 20px 0;
  cursor: pointer; list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 18px;
  font-size: 1.4rem; color: var(--terracotta); font-family: var(--sans);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; font-size: 0.9375rem; max-width: 68ch; }

/* --- notices -------------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--terracotta);
  background: rgba(192, 90, 60, 0.05);
  padding: 18px 22px;
  font-size: 0.875rem;
}
.notice strong { color: var(--green); }

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

.footer { background: var(--green); text-align: center; padding-block: 48px 44px; }
.footer .wm {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--cream);
}
.footer .tagline {
  font-family: var(--serif); font-style: italic;
  font-size: 0.8125rem; letter-spacing: 2px; color: var(--gold);
  margin-block: 8px;
}
.dots { display: flex; gap: 10px; justify-content: center; margin-block: 12px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(216, 178, 74, 0.6); }
.dots i:first-child { background: var(--terracotta); }

.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  list-style: none; padding: 0;
  margin-block: 26px 22px;
  font-size: 0.85rem;
}
.footer-nav a { color: rgba(247, 244, 236, 0.85); text-decoration: none; }
.footer-nav a:hover { color: var(--gold); }

.socials { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }
.socials a { color: rgba(247, 244, 236, 0.85); }
.socials a:hover { color: var(--gold); }
.socials svg { width: 19px; height: 19px; }

.footer-meta {
  font-size: 0.7rem; letter-spacing: 1.5px;
  color: rgba(247, 244, 236, 0.55);
  line-height: 1.9;
}
.footer-meta a { color: rgba(247, 244, 236, 0.7); }

/* --- utilities ------------------------------------------------------------ */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 36px; }
.mb-2 { margin-bottom: 24px; }
.mb-3 { margin-bottom: 36px; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .measure, .center .capture { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- before and after pair ------------------------------------------------- */

.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 28px;
}
/* Three steps rather than two. The middle photo is the point: it shows the
   work still going on, instead of a jump that looks like a trick. Three
   across stays three across on a phone — stacking them would destroy the
   comparison, which is the only reason the photos are here. */
.ba--three { grid-template-columns: repeat(3, 1fr); }
.ba figure { margin: 0; }
.ba .shot { overflow: hidden; aspect-ratio: 3 / 4; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The two photos were taken at different distances — a small bathroom in
   2020, a large open gym in 2026. Both are zoomed so Temi is the same size
   in each frame, because a pair where one figure is bigger reads as a trick
   rather than a comparison. The odd-looking origins are what put her in the
   same place in both: the scaled point that stays fixed has to sit outside
   the frame to lift her up it. */
/* All three are zoomed to put Temi at the same height in every frame — she
   measures the same in all three. The 2024 shot needs no zoom because she's
   already closest to the camera in it; it just sits on the bottom edge so
   her feet stay in. The origins sit outside the frame on purpose: that's
   what lifts her up it. */
.ba .shot--before img { transform: scale(1.40); transform-origin: 38% 77%; }
.ba .shot--mid    img { object-position: center bottom; }
.ba .shot--after  img { transform: scale(1.78); transform-origin: 60% 94%; }

.ba figcaption {
  background: var(--green);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-align: center;
  padding: 14px 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* Terracotta point marks the later photo — the same accent as the top point
   of the hexagon. Gold stays reserved for dots and overlines. */
.ba figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }

/* The same pair, sized to sit inside a story card on the Results page.
   Smaller type on the labels so they don't shout next to the quote. */
.ba--inline { margin: 4px 0 18px; gap: 3px; }
.ba--inline figcaption { font-size: 0.62rem; letter-spacing: 1.6px; padding: 9px 4px; gap: 7px; }
.ba--inline figcaption i { width: 6px; height: 6px; }

/* --- forms clients fill in and sign ---------------------------------------- */

.form-q {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  display: flex; gap: 20px; align-items: flex-start;
  font-size: 0.9375rem;
}
.form-q p { color: var(--ink); flex: 1; margin: 0; }
.form-q .yn {
  display: flex; gap: 14px; flex-shrink: 0;
  font-size: 0.8125rem; color: var(--muted);
}
.form-q .yn span { display: flex; align-items: center; gap: 6px; }
.box {
  width: 15px; height: 15px;
  border: 1px solid var(--green);
  display: inline-block; flex-shrink: 0;
}
.write-line {
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  margin-top: 8px;
}
.sign-grid {
  display: grid; gap: 26px 32px;
  grid-template-columns: 1fr;
  margin-top: 26px;
}
@media (min-width: 620px) { .sign-grid { grid-template-columns: 2fr 1fr; } }
.sign-grid label {
  font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.sign-grid .write-line { min-height: 44px; }

@media print {
  .nav, .footer, .skip-link, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  section { padding-block: 12px !important; }
  .wrap { max-width: none; padding-inline: 0; }
  .band, .band-cream { background: #fff !important; }
  .band h2, .band h3 { color: var(--green) !important; }
  .band p { color: var(--ink) !important; }
  .notice { border-left-color: #999; background: #f4f4f4; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  .page-break { page-break-before: always; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==================== MOVEMENT AND MOTIF ====================
   Everything below is additive. It changes no colours, no copy and no
   layout; it only decides how things arrive and how they answer a cursor. */

/* Sections arrive rather than appear. Elements start slightly low and
   fade up as they enter the viewport. */
.reveal { opacity: 0; transform: translateY(20px);
          transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                      transform .5s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* A short stagger so a row of cards lands one after another. */
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }

/* Anything card-shaped answers the cursor. */
.tile, .card, .box, .so-way, .loop-card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s cubic-bezier(.22,.61,.36,1),
              border-color .3s ease;
}
.tile:hover, .card:hover, .box:hover, .so-way:hover, .loop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(46,66,48,.13);
}

.btn { transition: transform .22s cubic-bezier(.22,.61,.36,1),
                   box-shadow .22s ease, background-color .22s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46,66,48,.20); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Links draw their underline instead of switching it on. */
main a:not(.btn):not(.brand) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%;
  background-repeat: no-repeat; transition: background-size .3s ease;
}
main a:not(.btn):not(.brand):hover { background-size: 100% 1px; }

/* The hexagon is the mark on the logo and the crop on the portrait.
   Here it also becomes the bullet and the rhythm dot. */
.dots i, .dot {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0 !important;
}

/* A faint hex lattice inside the dark bands, so they read as surface
   rather than a block of flat colour. */
.band:not(.band-cream) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z' fill='none' stroke='%23F7F4EC' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 64px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile:hover, .card:hover, .box:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   PHOTO CARDS
   A recipe card that leads with the food. The whole card is the link, so
   the picture is the thing you click, not a line of text underneath it.
   ========================================================================== */

a.tile-photo {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* The card is already the link, so it must not draw the underline that
   every other link in main draws across itself on hover. */
main a.tile-photo { background-image: none; }

a.tile-photo img {
  display: block;
  flex: none;                 /* the card is a flex column; don't squash it */
  width: 100%;
  height: auto;              /* the width/height attributes are a size hint;
                                without this the 1750px height wins and the
                                aspect-ratio below never applies */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 45%;   /* the bowl sits a touch above centre */
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
a.tile-photo:hover img { transform: scale(1.05); }

a.tile-photo .tile-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; flex-grow: 1;
}
a.tile-photo h3 { margin-bottom: 8px; }
a.tile-photo p  { flex-grow: 1; }

/* Looks and sits like the old text link, but it is not a link any more —
   you cannot nest one inside the card's own anchor. */
a.tile-photo .link-action {
  margin-top: 18px;
  align-self: flex-start;
  border-bottom-color: rgba(192, 90, 60, 0.35);
}
a.tile-photo:hover .link-action { border-bottom-color: var(--terracotta); }

a.tile-photo:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.tile-photo img { transition: none; }
  a.tile-photo:hover img { transform: none; }
}

/* ==========================================================================
   MOVEMENT LIBRARY
   Filmed demonstrations on the workouts page. Nothing downloads until
   somebody presses play — the poster is a still lifted from the clip and
   preload is off — so eight videos cost about 300KB on arrival, not 11MB.
   ========================================================================== */

.moves { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .moves { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .moves { grid-template-columns: repeat(4, 1fr); } }

.move {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: 0;
}
.move video {
  display: block; width: 100%;
  height: auto;          /* the width/height attributes count as real CSS, and
                            without this the 960px height wins and aspect-ratio
                            below never gets a say */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #1d1d1b;   /* the clip is dark at the edges; match it while loading */
}
.move figcaption { padding: 16px 18px 20px; }
.move h3 { font-size: 1rem; margin-bottom: 6px; }
.move p  { font-size: 0.85rem; margin: 0; }