/* ============================================================================
   YogaPath — site layer on top of the shared styles.css / data.css.
   Pure CSS and inline SVG. No external images, no icon fonts, no libraries:
   the target is a mid-range Android phone on a slow Indian connection.
   ========================================================================== */

/* AAA+++ 2026-07-31. The site used to run TWO purples: the shared accent
   (#7B3F6B, contrast-tuned plum) and a much brighter violet ramp of its own
   (#7e22ce). Two unrelated purples on one page is the cheapest tell there is,
   so the whole yp ramp is now derived from the accent and the site reads as
   one dyed cloth. Values are literal rather than color-mix() so the ramp
   holds where a step needs to be darker than a mix can reach. */
:root {
  --yp: #7B3F6B;
  --yp-2: #9A5C88;
  --yp-3: #BC8DAC;
  --yp-soft: #F6F0F4;
  --yp-line: #E4D2DE;
  --yp-ink: #4A2540;
  --sky-1: #F1E9EE;
  --sky-2: #FBF6F2;
  --fig: #7B3F6B;
  --fig-2: #9A5C88;
  --mat: #E4D2DE;
  /* the site's drawing hand — 1.6px, round cap, nobody else's in the ring */
  --hand: 1.6;
}

[data-theme="dark"] {
  --yp: #C58FBA;
  --yp-2: #B078A4;
  --yp-3: #8A5A7C;
  --yp-soft: #241A21;
  --yp-line: #3B2C36;
  --yp-ink: #EDD9E6;
  --sky-1: #1E181C;
  --sky-2: #221A20;
  --fig: #C58FBA;
  --fig-2: #A9749B;
  --mat: #3B2C36;
}

/* ====================================================== THE SESSION STRIP
   The set piece (AAA+++ §5, "yoga | Ashram timetable"). A practice laid out
   on a time ruler in the site's own 1.6px round hand. Every stroke here is
   the same weight and the same terminal; no fills except the hold band.   */
.yp-strip { margin: 22px 0 0; padding: 0; }
.yp-strip svg { display: block; width: 100%; height: auto; }
.yp-strip-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  justify-content: space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 6px;
}
.yp-strip-head .spec { color: var(--muted); }

.yp-strip path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.yp-strip .rule  { stroke: var(--line-2); stroke-width: 1; }
.yp-strip .tick  { stroke: var(--line-2); stroke-width: 1; }
.yp-strip .comb  { stroke: var(--yp-3); stroke-width: 1; }
.yp-strip .lead  { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.yp-strip .glyph path { stroke: var(--ink-2); stroke-width: var(--hand); }
.yp-strip .seg   { stroke: var(--yp); stroke-width: calc(var(--hand) * 2); }
.yp-strip .band  { fill: var(--yp-soft); stroke: none; }
.yp-strip text {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  fill: var(--muted); font-variant-numeric: tabular-nums lining-nums;
}
.yp-strip .idx { font-size: 11px; fill: var(--faint); }
.yp-strip .unit { fill: var(--faint); }
/* the current pose, when a strip is drawn around one */
.yp-strip .st.on .glyph path { stroke: var(--yp); }
.yp-strip .st.on .idx { fill: var(--yp); }
.yp-strip .st.on .lead { stroke: var(--yp-3); stroke-dasharray: none; }

.yp-strip-key {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line);
  font-size: .84rem;
}
.yp-strip-key li { color: var(--ink-2); }
.yp-strip-key li.on { color: var(--ink); font-weight: 650; }
.yp-strip-key .n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--faint); margin-right: 6px;
}
.yp-strip-key a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.yp-strip-key a:hover { border-bottom-color: var(--yp); }

@media (max-width: 560px) {
  .yp-strip text { font-size: 15px; }
  .yp-strip .idx { font-size: 14px; }
}

/* ------------------------------------------------------------------- hero 3D
   A seated figure built from ellipses and paths, given depth by stacked
   shadow layers and a radial ground glow. The only motion is a slow float and
   a breathing ring — both removed for prefers-reduced-motion.               */
.yp-scene {
  margin: 26px auto 6px;
  max-width: 460px;
}
.yp-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.yp-cap {
  text-align: center; color: var(--muted); font-size: .86rem;
  margin: 2px 0 0; max-width: 460px; margin-inline: auto;
}

.yp-float-a { animation: ypFloat 7s ease-in-out infinite; transform-origin: center; }
.yp-float-b { animation: ypFloat 9s ease-in-out infinite reverse; transform-origin: center; }
.yp-breathe { animation: ypBreathe 8s ease-in-out infinite; transform-origin: 210px 150px; }
.yp-glow    { animation: ypGlow 8s ease-in-out infinite; }

@keyframes ypFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes ypBreathe { 0%,100% { transform: scale(1); opacity:.55 } 50% { transform: scale(1.07); opacity:.85 } }
@keyframes ypGlow { 0%,100% { opacity:.35 } 50% { opacity:.6 } }

@media (prefers-reduced-motion: reduce) {
  .yp-float-a, .yp-float-b, .yp-breathe, .yp-glow { animation: none; }
}

/* ------------------------------------------------------------- name block */
.yp-names {
  display: grid; gap: 10px; margin: 18px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.yp-name {
  background: var(--yp-soft); border: 1px solid var(--yp-line);
  border-radius: 12px; padding: 12px 14px;
}
.yp-name .k {
  display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 3px;
}
.yp-name .v { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.yp-name .v.dev { font-size: 1.3rem; }
.yp-name .s { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------- fact strip */
.yp-facts {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.yp-fact {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--card);
}
.yp-fact b { display: block; font-size: 1.22rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.yp-fact span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.yp-fact em { display: block; font-style: normal; font-size: .78rem; color: var(--muted); margin-top: 3px; }

/* ---------------------------------------------------------------- the steps */
.yp-steps { counter-reset: ypstep; list-style: none; padding: 0; margin: 0; }
.yp-steps li {
  counter-increment: ypstep; position: relative;
  padding: 0 0 18px 46px; margin: 0;
  border-left: 2px solid var(--yp-line); margin-left: 15px;
}
.yp-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.yp-steps li::before {
  content: counter(ypstep);
  position: absolute; left: -16px; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--yp); color: #fff;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 800;
}
.yp-steps li p { margin: 4px 0 0; }

/* ------------------------------------------------------- contraindications
   Deliberately the loudest block on the page. On a yoga site this is the
   part that matters most and the part everybody else buries.                */
/* AAA+++ §7.4: contraindications are a SAFETY SURFACE, not an alert. The
   amber-on-yellow box read as liability panic — the register that makes a
   reader discount the warning. Hairline rules, an accent keel and ordinary
   ink carry more weight, because they read as a page that always says this
   rather than a page that has just been frightened. */
.yp-care {
  border: 0; background: none; border-radius: 0; padding: 0; margin: 0;
  border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--line);
  padding: 18px 0 20px;
}
.yp-care h2, .yp-care h3 {
  margin: 0 0 12px; font-size: 1.12rem; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.yp-care h2 svg, .yp-care h3 svg { width: 18px; height: 18px; flex: none; color: var(--yp); stroke-width: 1.6; }
.yp-care ul { margin: 0; padding-left: 0; list-style: none; }
.yp-care li {
  margin: 0; color: var(--ink); padding: 9px 0 9px 20px;
  border-top: 1px solid var(--line); position: relative;
}
.yp-care li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 10px; height: 1.6px; background: var(--yp); border-radius: 1px;
}
.yp-care .yp-care-note { margin: 14px 0 0; font-size: .86rem; color: var(--muted); }

/* -------------------------------------------------------------- mistakes */
.yp-mis { display: grid; gap: 12px; }
.yp-mis-row {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--card);
}
.yp-mis-row p { margin: 0; padding: 12px 14px; }
.yp-mis-row .m { border-bottom: 1px solid var(--line); }
.yp-mis-row .m b, .yp-mis-row .f b {
  display: inline-block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; margin-right: 8px; font-weight: 800;
}
.yp-mis-row .m b, .yp-mis-row .f b {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; font-weight: 400;
}
.yp-mis-row .m b { color: var(--muted); }
.yp-mis-row .f b { color: var(--yp); }
.yp-mis-row .f { background: var(--yp-soft); }

/* --------------------------------------------------------------- muscles */
.yp-muscles { display: grid; gap: 8px; }
.yp-muscle {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card);
}
.yp-muscle i {
  width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--yp-3);
}
.yp-muscle.pri i { background: var(--yp); }
.yp-muscle span { font-weight: 600; color: var(--ink); }
.yp-muscle small { margin-left: auto; color: var(--muted); font-size: .76rem; }

/* --------------------------------------------------------------- filters */
.yp-filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 18px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.yp-filter label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: var(--muted); margin-right: 2px;
}
.yp-filter button {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: .86rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.yp-filter button:hover { border-color: var(--yp-2); }
.yp-filter button[aria-pressed="true"] { background: var(--yp); border-color: var(--yp); color: #fff; }
.yp-count { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }

.yp-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.yp-card {
  display: block; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; background: var(--card); text-decoration: none;
  border-left: 4px solid var(--yp-3);
}
.yp-card:hover { border-color: var(--yp-2); border-left-color: var(--yp); }
.yp-card .en { display: block; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.yp-card .sa { display: block; color: var(--yp); font-size: .88rem; font-weight: 600; margin-top: 1px; }
.yp-card .me { display: block; color: var(--muted); font-size: .78rem; margin-top: 6px; }
.yp-card[data-lvl="intermediate"] { border-left-color: var(--yp-2); }
.yp-card[data-lvl="advanced"] { border-left-color: var(--yp-ink); }

.yp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.yp-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--yp-soft);
  color: var(--yp-ink); border: 1px solid var(--yp-line);
}

/* -------------------------------------------------------------- sequence */
.yp-seq { list-style: none; padding: 0; margin: 0; counter-reset: ypseq; }
.yp-seq > li {
  counter-increment: ypseq; display: grid; gap: 4px;
  grid-template-columns: 44px 1fr auto; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.yp-seq > li:last-child { border-bottom: 0; }
.yp-seq .n {
  grid-row: span 2; width: 32px; height: 32px; border-radius: 50%;
  background: var(--yp-soft); border: 1px solid var(--yp-line);
  color: var(--yp-ink); display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
}
.yp-seq .nm { font-weight: 700; color: var(--ink); }
.yp-seq .nm a { color: inherit; }
.yp-seq .nm em { font-style: normal; color: var(--yp); font-weight: 600; }
.yp-seq .st {
  grid-column: 3; font-size: .8rem; color: var(--muted); font-weight: 600;
  white-space: nowrap; padding-left: 12px;
}
.yp-seq .no { grid-column: 2 / span 2; color: var(--muted); font-size: .9rem; margin: 0; }

@media (max-width: 560px) {
  .yp-seq > li { grid-template-columns: 36px 1fr; }
  .yp-seq .st { grid-column: 2; padding-left: 0; }
  .yp-seq .no { grid-column: 2; }
}

/* ------------------------------------------------------------ misc bits */
.yp-quick {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.yp-quick a {
  border: 1px solid var(--yp-line); background: var(--yp-soft); color: var(--yp-ink);
  border-radius: 999px; padding: 7px 14px; font-size: .85rem; font-weight: 700;
  text-decoration: none;
}
.yp-quick a:hover { border-color: var(--yp); }

.yp-lvl {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--yp); color: #fff;
}
.yp-lvl.intermediate { background: var(--yp-2); }
.yp-lvl.advanced { background: var(--yp-ink); }
[data-theme="dark"] .yp-lvl { color: #1a1024; }

.hindi, .dev { font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif; }

.yp-two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .yp-two { grid-template-columns: 1fr; } }

.yp-src {
  font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 16px; margin: 0;
}

/* ================================================ AAA+++ site-local adopts
   The mechanics themselves live in data.css §20; these are the three places
   this site has to say how they attach to ITS markup.                      */

/* 1. entrance choreography. The classes are on inline elements inside the
   shared hero, so they need a block box or the translate does nothing. */
.hero .eyebrow .reveal,
.hero h1 .reveal { display: block; }

/* 2. the answer, unboxed. The hold or the session length is the figure the
   page exists to give, so it is set as display type with the unit in the
   mono voice beneath it — not as a bolded run of body copy. */
.yp-answer { margin: 22px 0 0; }
.yp-answer .stat-display { display: block; margin: 0; color: var(--ink); }
.yp-answer .stat-display .u { display: block; margin: 6px 0 0; vertical-align: baseline; }
.yp-answer p { margin: 12px 0 0; color: var(--ink-2); max-width: 62ch; }
.yp-answer .srcline { max-width: 62ch; }

/* 3. in-content links draw their underline (§3.6) rather than swapping a
   colour. Applied by class in the markup; this makes the accent the plum. */
.prose a.draw, .tnote a.draw, .yp-strip-head a.draw { color: var(--ink); }

/* the timetable rule above a wall-posted section heading */
.yp-hours {
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em;
  color: var(--faint); text-transform: uppercase; margin: 0 0 4px;
}

/* ============================================================================
   CINEMA LAYER -- 2026-08-07. "Cinematic Bollywood", briefed off
   theshilpashetty.com: generous ivory, ONE vivid accent, editorial display
   type, image-forward rhythm. Everything below is additive and lives only in
   this file, so the shared ring stylesheet (styles.css) is untouched and no
   other site in the portfolio moves.

   Two hard constraints from the existing build are respected on purpose:
     - ZERO new network requests. The "cinematic" grade is gradients, a CSS
       grain and a vignette -- no webfont, no hero photograph, no library. The
       target is still a mid-range Android phone on a slow Indian connection.
     - Contrast stays AAA-grade. --accent carries white text, so it is the
       deep rose-crimson, not the marigold; the marigold is ORNAMENT ONLY
       (hairlines, eyebrows, rules) and never sits under text on light.
   ========================================================================== */
:root {
  /* the film stock */
  --bg: #FAF5EF;            /* ivory paper, warm */
  --bg-tint: #F4EAE0;
  --surface: #FFFDFA;
  --surface-2: #F6EFE7;
  --surface-sunken: #F1E8DE;
  --ink: #17101A;           /* aubergine-black -- 17.9:1 on surface */
  --ink-2: #43303F;         /*  9.6:1 */
  --muted: #6B5462;         /*  5.9:1 */
  --line: #E6D8CC;
  --line-2: #CDB8A6;
  --accent: #A3123E;        /* deep rose-crimson -- 8.4:1; #fff on it = 8.4:1 */
  --accent-2: #7C0C2E;
  --accent-3: #A3123E;
  --accent-soft: #FBEDF0;
  --accent-line: #EBC9D2;
  --ink-num: #17101A;
  /* ornament only -- never text on light */
  --gold: #C08A2E;
  --gold-soft: #F6E9CE;
  /* the site ramp is re-dyed from the new accent so the page reads as one
     cloth, exactly as the plum ramp did before it */
  --yp: #A3123E;
  --yp-2: #B94465;
  --yp-3: #D89BAC;
  --yp-soft: #FBEDF0;
  --yp-line: #EBC9D2;
  --yp-ink: #5C0A24;
  --sky-1: #F4E6DA;
  --sky-2: #FBF4EC;
  --fig: #A3123E;
  --fig-2: #B94465;
  --mat: #E6D8CC;
  /* the display voice -- a system serif stack, so it costs nothing to load and
     still reads as a poster rather than a dashboard */
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"], [data-theme="dark"] {
  --bg: #0C0910;            /* cinema-black, warm */
  --bg-tint: #1A1119;
  --surface: #16101A;
  --surface-2: #1E1622;
  --surface-sunken: #120C16;
  --ink: #F6EDE6;
  --ink-2: #D3C0C9;
  --muted: #A18F9A;
  --line: #2E2231;
  --line-2: #453346;
  --accent: #F0A44E;        /* marigold carries on black; ink on it = 9.9:1 */
  --accent-2: #D98A34;
  --accent-3: #F0A44E;
  --accent-soft: #241A1F;
  --accent-line: #4A3427;
  --ink-num: #F6EDE6;
  --gold: #F0A44E;
  --gold-soft: #2A1E16;
  --yp: #F0A44E;
  --yp-2: #D98A34;
  --yp-3: #A97638;
  --yp-soft: #241A1F;
  --yp-line: #3E2C33;
  --yp-ink: #F6E0C6;
  --sky-1: #1A1119;
  --sky-2: #16101A;
  --fig: #F0A44E;
  --fig-2: #D98A34;
  --mat: #3E2C33;
}

/* ---------------------------------------------------------------- the type
   Display serif on the headline voice only. Body copy, data and the mono
   voice are left alone -- the numbers are the product and they stay in the
   engineered register. */
h1, .sec, .yp-answer .stat-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 { line-height: 1.06; }
h1 em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.sec { font-weight: 600; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- the hero
   A lit stage rather than a page top: a warm key light from upper-left, a
   rose fill from the right, a vignette closing the corners, and one gold
   hairline as the letterbox rule. All gradients -- 0 bytes of imagery. */
.hero {
  padding: 64px 0 34px;
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 150%;
  z-index: -2;
  background:
    radial-gradient(58% 46% at 22% 8%,  color-mix(in srgb, var(--gold) 26%, transparent) 0%, transparent 68%),
    radial-gradient(52% 44% at 84% 22%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 66%),
    radial-gradient(90% 70% at 50% 0%,  var(--bg-tint) 0%, transparent 72%);
  opacity: 1;
  pointer-events: none;
}
/* the vignette + the grain, one pseudo-element, so the top of the page has
   the falloff of a frame instead of the flatness of a div */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 42%, color-mix(in srgb, var(--ink) 9%, transparent) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.32'/></svg>");
  background-size: auto, 120px 120px;
  mix-blend-mode: multiply;
  opacity: .5;
}
[data-theme="dark"] .hero::after { mix-blend-mode: screen; opacity: .28; }

/* the letterbox rule under the eyebrow -- the one piece of gold that shows */
.hero .eyebrow::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ------------------------------------------------------- section rhythm
   Shilpa's page alternates a plain band and a tinted band so the eye is
   handed a beat. Same move here, but the ring's border rule is kept. */
.section:nth-of-type(even) { background: color-mix(in srgb, var(--bg-tint) 55%, transparent); }
.section + .section { border-top: 1px solid var(--line); }
.section .sec::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 0 14px;
  background: var(--gold);
  opacity: .85;
}

/* ------------------------------------------------------- cards, on film
   The library cards pick up a warm edge and a slow lift instead of the flat
   utility box. Radius is untouched -- CLS stays 0. */
.grid > a, .card {
  border-color: var(--line);
  background: var(--surface);
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.grid > a:hover, .card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
              0 20px 40px -28px color-mix(in srgb, var(--accent) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .grid > a, .card { transition: none; }
  .grid > a:hover, .card:hover { transform: none; }
}

/* the chip row reads as a marquee strip rather than a tag cloud */
.chip { border-color: var(--line-2); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip b { color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------- the frame
   A hairline gold border on the drawn set piece, so the timetable reads as a
   plate in a book. The drawing itself is unchanged. */
.yp-strip { border-top: 1px solid var(--gold); padding-top: 14px; }
.yp-strip-head { border-bottom-color: var(--line); }

/* --------------------------------------------- the model slot (reserved)
   Empty by design until the AI model stills exist. `.yp-still` is a 4:5
   editorial plate with a film grade over it; the moment a still is dropped
   into the markup it inherits the whole treatment and nothing else moves.
   Aspect-ratio is declared so adding the image cannot shift layout. */
.yp-still {
  position: relative;
  /* 3:4 is NOT a style choice — it is the aspect Flow's Nano Banana 2 emits
     (896x1200). The plate was briefly 4:5, which made object-fit:cover shave
     ~35px off the top of the frame; on a standing asana that is the top of the
     head. Matching the generator means the plate never crops. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--sky-1), var(--surface-2));
  border: 1px solid var(--line);
}
.yp-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yp-still::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--ink) 62%, transparent) 100%),
    radial-gradient(100% 80% at 50% 20%, transparent 50%, color-mix(in srgb, var(--ink) 22%, transparent) 100%);
}
.yp-still figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  font-family: var(--mono); font-size: .72rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #fff; opacity: .92;
}


/* THE ACCENT PLUMBING. Worth stating, because the :root block above is NOT
   where this site's accent actually comes from and half an hour was lost to
   that. shell() writes the hue INLINE -- <body style="--site-accent:#A3123E">
   from the registry row in globalsite.mjs -- and data.css binds
   `body { --accent: var(--site-accent) }`. An inline custom property outranks
   every stylesheet, so re-declaring --accent at :root does nothing below the
   body. Two consequences:

     1. The LIGHT accent is changed in globalsite.mjs (the registry row), not
        here. The :root value above is only the fallback for chrome that sits
        outside <body>.
     2. The DARK accent needs a selector that outranks `body`, which is why
        the rule below is written the long way. Crimson on cinema-black is
        2.3:1 and would have failed AAA everywhere; marigold is 9.9:1. */
:root[data-theme="dark"] body[data-site="yoga"] {
  --accent: #F0A44E;
  --accent-2: #D98A34;
  --accent-3: #F0A44E;
  --accent-soft: #241A1F;
  --accent-line: #4A3427;
  --site-accent: #F0A44E;
}

/* The cinema hero costs ~30px of vertical chrome (padding + the gold rule).
   On a 375x812 phone that is real estate the fold cannot spare, so the stage
   is lit just as hard but sits tighter. Measured, not guessed. */
@media (max-width: 560px) {
  .hero { padding: 40px 0 26px; }
  .hero .eyebrow::after { margin-top: 9px; width: 44px; }
  .section .sec::before { margin-bottom: 11px; }
}

/* the AI-provenance line inside a pose plate caption. Deliberately quiet but
   never hidden — it must survive a screenshot, so it is IN the caption. */
.yp-still figcaption .yp-ai {
  display: block;
  margin-top: 3px;
  font-size: .66rem;
  letter-spacing: .08em;
  opacity: .78;
}

/* the photographed-pose marker on a card. A small filled dot, not a badge or a
   camera glyph: the list is dense and a loud marker on 209 cards would read as
   noise. It only ever appears on the minority that HAVE a photograph. */
.yp-card .yp-shot {
  display: inline-block;
  margin-left: 7px;
  font-size: .55em;
  vertical-align: middle;
  color: var(--accent);
  opacity: .85;
}
.yp-card.has-shot { border-color: var(--accent-line); }

/* ============================================================================
   CINEMA-2 — AI provenance, the follow band, and scroll-driven depth.
   Appended 2026-08-09. Additive only; the CINEMA LAYER above is untouched.

   "Epic 3D cinematic" here means DEPTH, not geometry. No WebGL, no three.js,
   no video, no webfont — the target is still a mid-range Android on a slow
   Indian connection, and the shipped grade already proved that light and grain
   from gradients read as film for 0 bytes. Depth comes from scroll-driven
   animation, which is GPU-composited and costs no JavaScript at all.
   ========================================================================== */

/* -------------------------------------------------- AI PROVENANCE, LAYER 1
   The hallmark on the plate. Amit asked for the disclosure sentence to move to
   the bottom of the page and it has (layer 2). This stays because a caption
   and a footer are not equivalent: the plate gets screenshotted, the footer
   does not travel with it. Sized and weighted like a photographer's corner
   stamp — present, legible, not shouting. */
.yp-still .yp-hallmark {
  position: absolute;
  right: 10px;
  bottom: 42px;            /* clear of the figcaption band */
  z-index: 2;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.yp-still figcaption .yp-by {
  display: block;
  margin-top: 3px;
  font-size: .66rem;
  letter-spacing: .08em;
  opacity: .78;
}

/* ============================================================ SCROLL DEPTH
   Everything below is progressive enhancement, gated twice: on @supports for
   scroll-driven timelines, and on prefers-reduced-motion. A browser without
   either gets the finished frame — never a half-applied transform, never a
   blank element waiting for an animation that will not arrive. That ordering
   is the whole safety property: the static state IS the design. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Pose plates tilt up out of the page as they enter. The single most
       "3D cinematic" move available, and it costs ~12 lines. `entry 0% → 55%`
       so it has finished well before the plate is centred and being read. */
    .yp-still {
      animation: yp-plate-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      transform-origin: 50% 100%;
      will-change: transform, opacity;
    }
    @keyframes yp-plate-rise {
      from { opacity: 0; transform: perspective(1100px) rotateX(7deg) translateY(26px) scale(.985); }
      to   { opacity: 1; transform: perspective(1100px) rotateX(0)    translateY(0)    scale(1); }
    }

    /* Section headings lift in. Small amplitude on purpose — the design bible
       is explicit that motion must not steal attention from the content. */
    .section .sec {
      animation: yp-lift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes yp-lift {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* The hero key light pans as the hero scrolls away. The TYPE never moves:
       only the light rig does, which is what makes it read as a lit stage
       rather than as a parallax gimmick. */
    .hero::before {
      animation: yp-keylight linear both;
      animation-timeline: scroll();
      animation-range: 0 620px;
    }
    @keyframes yp-keylight {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(-3.5%, 2%, 0); }
    }
  }
}

/* ============================================================================
   CINEMA-3 — mobile alignment repair + a compact follow strip. 2026-08-09.

   THE BUG, measured rather than guessed: at 375px the page mixed two
   alignments, and it mixed them INSIDE the hero. Computed text-align was:

       .hero .wrap      center
       .hero .eyebrow   center
       .yp-answer       LEFT      <- the answer block
       .srcline         LEFT
       .search          center
       .stats           center
       every .section   LEFT

   So a phone user reads centre, centre, left, left, centre, centre, then left
   for the whole rest of the page. On a wide screen a centred hero over
   left-aligned body is a normal editorial device, because the hero reads as a
   distinct band with air around it. At 375px there is no air: everything is
   full-bleed, so the same device just looks like broken alignment. It was.

   Fix: below 560px the hero aligns LEFT like everything else. Not the reverse
   (centring the body) — long centred paragraphs on a narrow column rag on both
   edges and are measurably harder to scan, and the answer block was already
   left, so left is also the smaller change.
   ========================================================================== */
@media (max-width: 560px) {
  .hero,
  .hero .wrap,
  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero .search,
  .hero .stats {
    text-align: left;
  }

  /* the gold letterbox rule under the eyebrow was centred with `margin: auto`;
     left-align it so it starts at the text edge instead of floating mid-column */
  .hero .eyebrow::after { margin-left: 0; margin-right: auto; }

  /* the stat row is a flex/grid of items that were centre-justified */
  .hero .stats { justify-items: start; }
  .hero .stats .stat { text-align: left; }

  /* the search field sits full-width already; just kill the inherited centring
     on its placeholder row */
  .hero .search { justify-content: flex-start; }
}

}

/* ============================================================================
   CINEMA-4 — the hero plate, the film strip, and the timetable that draws
   itself. 2026-08-09. Additive; nothing above is modified.
   ========================================================================== */

/* ------------------------------------------------------------- THE HERO GRID
   Text left, one photographed pose right, from 760px up. Below that the plate
   drops under the answer and is capped at 40vh so the fold — fought for and
   won at 375×812 — does not get eaten by an image. */
.yp-herogrid { display: block; }
.yp-hero-plate { margin: 20px 0 0; }
.yp-hero-plate a { display: block; }

@media (min-width: 760px) {
  .yp-herogrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 30px;
    align-items: start;
    text-align: left;          /* the hero centres above 560px; this column doesn't */
  }
  .yp-herogrid-text { text-align: left; }
  .yp-hero-plate { margin: 0; }
}

@media (max-width: 759px) {
  /* keep the hero image from pushing the search + stats off the first screen */
  .yp-hero-plate { max-width: 260px; }
}

/* --------------------------------------------------------------- FILM STRIP
   A scroll-snap contact sheet. No carousel library and no dots: a horizontal
   scroller with snap points is the native control, it is keyboard- and
   touch-accessible for free, and it costs no JavaScript.
   `overflow-x: auto` on THIS element only — the page body must never scroll
   sideways, which is the rule the whole ring is built on. */
.yp-film {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 210px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 14px;
  margin: 18px 0 0;
  scrollbar-width: thin;
}
.yp-film-item {
  scroll-snap-align: center;
  text-decoration: none;
  display: block;
}
.yp-film-shot {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;         /* matches the generator; no crop, no CLS */
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--sky-1), var(--surface-2));
}
.yp-film-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yp-film-shot::after {           /* the same film grade as the full plate */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ink) 42%, transparent) 100%);
}
.yp-film-item .en {
  display: block; margin-top: 9px;
  font-family: var(--display); font-size: 1rem; color: var(--ink);
}
.yp-film-item .sa {
  display: block; margin-top: 1px;
  font-size: .8rem; color: var(--muted);
}
.yp-film-item:hover .yp-film-shot { border-color: var(--accent-line); }
.yp-film .yp-hallmark { bottom: 8px; }

/* ============================================ THE TIMETABLE DRAWS ITSELF
   The session strip is inline SVG of the site's own data, which makes it the
   one set piece a competitor cannot screenshot-copy. Giving its strokes a
   dash-offset that resolves on scroll makes the practice appear to be drawn.

   Gated on @supports AND prefers-reduced-motion, and — critically — the
   dasharray is only ever applied INSIDE that gate. A browser without
   scroll-timelines must never be left holding a half-drawn diagram: outside
   the gate the SVG renders complete, exactly as it does today. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .yp-strip .seg,
    .yp-strip .glyph path {
      stroke-dasharray: 320;
      animation: yp-draw linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
    @keyframes yp-draw {
      from { stroke-dashoffset: 320; opacity: .25; }
      to   { stroke-dashoffset: 0;   opacity: 1; }
    }

    /* the film strip plates settle as the strip scrolls into view */
    .yp-film-shot {
      animation: yp-plate-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

/* ---------------------------------------------- AI PROVENANCE, FOOTER SIZE
   Amit asked twice for this to be small and to sit down with the footer, so it
   does. The SENTENCE is unchanged — shrinking type is a layout decision,
   shrinking the claim would be a different thing — and the alt text plus the
   JSON-LD carry the same statement to crawlers at any type size. */
.yp-aifoot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 20px 26px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--faint, var(--muted));
  border-top: 1px solid var(--line);
}
.yp-aifoot strong { color: var(--muted); font-weight: 600; }