/* Calm + type pass (2026-10-28). Loaded last.
   1. No decorative motion: ambient loops, marquee, parallax leftovers, hover lifts and page transitions are off.
      Breathing tools (breathing timer, studio player, living orb canvas) keep their animation because they guide the breath.
   2. Readability: larger body and lead text, labels in readable sans instead of tiny mono caps,
      sans titles where the thin display serif got too small, looser heading leading. */

/* ---------- 1. Motion ---------- */
html{scroll-behavior:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
.v2-hero .c-sun,.v2-breathe-pill i,.v2-scroll-cue,.c-dosha::after,.v2-el i,.v2-dq-enter,
.v2-quick-result.is-in .v2-quick-thumbs img,.v2-quick-result.is-in h3,.v2-quick-result.is-in [data-quick-summary],
.ds-cmdk[open],.db-thumbs img,.db-q-orb,.ds-error-orb i,.ps-mini-orb i,.ps-floating-cues li,.ps-hold[open],
.yd-orb i,.yd-cue-chips li,.quiet-orbit span,.clay .ys-breath-title>span{animation:none!important}
.v2-scroll-cue{display:none}
.v2-progress{display:none}
.c-header.is-hidden,[data-header].is-hidden{transform:none!important}
.clay .c-figure img{filter:none!important;opacity:1!important}

/* Pose strip: was an endless marquee; now a still row you can scroll sideways */
.v2-marquee{overflow-x:auto;scrollbar-width:thin;-webkit-mask-image:none;mask-image:none}
.v2-marquee-track{animation:none!important;transform:none!important;padding-bottom:8px}
.v2-marquee-track a[aria-hidden="true"]{display:none}

/* Hover: colour and border only, nothing moves */
.clay a:hover,.clay a:focus-visible,.clay button:hover,
.clay .c-card:hover,.clay .c-tile:hover,.clay .c-dosha:hover,.clay .c-pose-card:hover,
.clay .c-card:hover img,.clay .c-pose-card:hover img,.clay .c-figure:hover img,.clay .c-btn:hover,.ds-cta:hover{transform:none!important}

/* Breathing interlude: was a pinned, scroll-scrubbed scene; now a plain band */
.v2-interlude-pin{min-height:0!important;padding:clamp(56px,8vw,96px) 0!important}
.v2-interlude-ring,.v2-interlude-orb{display:none!important}
.v2-interlude-words p{position:static!important;opacity:1!important;transform:none!important}
.v2-interlude-words p[aria-hidden="true"]{display:none}

/* ---------- 2. Typography ---------- */
body.clay{font-size:17px;line-height:1.7;letter-spacing:0}
.clay p,.clay li{text-wrap:pretty}

/* Headings: same serif, a little more air between lines */
.clay h1,.clay h2{line-height:1.04;letter-spacing:-.018em}
.clay .c-hero h1{line-height:.98;letter-spacing:-.028em}
.clay .c-page-head h1{line-height:1}
.clay h3{line-height:1.15;letter-spacing:-.01em}

/* Small titles in sans: the display serif is hairline-thin under ~26px */
.clay .c-card h3,.clay .c-pose-card h3{font:600 clamp(18px,1.4vw,20px)/1.3 var(--sans);letter-spacing:-.012em}
.clay .c-card .c-sanskrit{font:italic 400 18px/1.3 var(--display)}
.clay .c-list .c-t{font:500 clamp(17px,1.3vw,19px)/1.35 var(--sans);letter-spacing:-.01em}

/* Leads and body copy */
.clay .c-lead{font-size:clamp(18px,1.4vw,20.5px);line-height:1.6;color:var(--bark-2)}
.clay .c-page-head .c-lead,body.is-inner.clay .c-page-head .c-lead{font-size:18px;line-height:1.6;max-width:62ch}
.clay .c-head p,.clay .c-tile p,.clay .c-dosha p,.clay .c-card p{font-size:16px;line-height:1.6}
.clay .c-small,.clay .c-count{font-size:14.5px}
.clay .c-prose{max-width:68ch}
.clay .c-prose p,.clay .c-prose li{font-size:18px;line-height:1.75}
.clay .c-prose h2{font-size:clamp(30px,3vw,40px);line-height:1.1;margin:1.6em 0 .5em}
.clay .c-prose h3{font:600 21px/1.3 var(--sans);margin:1.5em 0 .4em}
.clay .c-prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* Labels: readable sans small caps instead of 9–11px mono capitals */
.clay .c-kicker,.ds-label,.clay h4,.clay .c-crumbs,.clay .c-count,.clay .c-stat span,.clay .c-tile small,
.clay .c-card .c-card-foot,.clay .c-list .c-r,.clay .c-el,.clay .c-filter label,.clay .c-head h2::before{
  font-family:var(--sans)!important;font-size:13px!important;font-weight:550!important;line-height:1.3!important;
  letter-spacing:.04em!important;text-transform:uppercase}
.clay .c-kicker,.ds-label,.clay .c-count,.clay .c-stat span,.clay .c-card .c-card-foot,.clay .c-list .c-r{color:var(--bark-2)}
.clay .c-tile small,.clay .c-el{color:inherit;opacity:.85}
.clay .c-crumbs{text-transform:none!important;letter-spacing:0!important;font-weight:450!important;font-size:14px!important;color:var(--bark-3)}
.clay .c-tag{font:550 12px/1 var(--sans);letter-spacing:.03em;padding:6px 9px}
.clay .c-list .c-n{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--bark-3)}
.clay .c-head h2::before{color:var(--clay)!important}

/* Nav and buttons: slightly larger, comfortable tap targets */
.clay .c-nav a{font-size:15px}
.clay .c-btn{font-size:15.5px;font-weight:550}
.clay .c-chip{font-size:14.5px}

/* Focus that is easy to see */
.clay a:focus-visible,.clay button:focus-visible,.clay summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:6px}

@media (max-width:640px){
  body.clay{font-size:17px}
  .clay .c-lead,.clay .c-page-head .c-lead{font-size:17.5px}
  .clay .c-prose p,.clay .c-prose li{font-size:17.5px}
}

/* ---------- 3. Sketch art (ink line on transparent WebP) ---------- */
.ys-sketch{display:block;margin:0;pointer-events:none}
.ys-sketch img{display:block;width:100%;height:auto}
.clay .c-tile .ys-sketch{width:min(100%,240px);margin:0 0 10px -6px}
.clay .c-tile-clay .ys-sketch,.clay .c-tile-olive .ys-sketch,.c-band-dark .ys-sketch,.v2-interlude .ys-sketch,.clay .c-tile-bark .ys-sketch{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
.clay .c-head .ys-sketch-head{grid-column:9/-1;grid-row:1/span 2;align-self:center;justify-self:end;width:min(100%,300px)}
.clay .c-head:has(.ys-sketch-head)>p{grid-column:1/span 7;margin-top:16px}
.ys-sketch-interlude{width:min(70vw,300px);margin:0 auto 8px}
@media (max-width:980px){.clay .c-head .ys-sketch-head{grid-column:1/-1;grid-row:auto;justify-self:start;width:min(70%,260px);margin-top:12px}}
.ys-sketch-error{width:min(80vw,340px);margin:0 auto 8px}
/* Down-arch tiles: keep the last line of text clear of the curve */
@media (min-width:521px){.clay .c-tiles .c-tile:nth-child(even){padding-bottom:clamp(64px,7vw,96px)}}
/* Aside link lists used the hairline display serif at 15px */
.clay .c-aside li,.clay .c-aside li a{font:500 16px/1.45 var(--sans);letter-spacing:-.005em}
