/* =========================================================================
   BORZ — css/biyografi.css · About page (body[data-page="biyografi"])
   Owner: Agent B. Core tokens only (style.css :root); medal art colours are local (07).
   Prefix: bio-. Hidden-for-reveal states live only under .js and never under .reveal-all.

   01 Hero                06 Numbers               11 Booking (CTA)
   02 Story               07 Awards                12 Reduced motion
   03 Manifesto           08 Press & partners
   04 Journey (timeline)  09 Studio standards
   05 Approach            10 Closing words
   ========================================================================= */

/* Section rails on phones: a long label plus the right-hand note wrap instead of overflowing
   (the note drops to its own line, right-aligned; the hairline then fills the first line). */
@media (max-width:599px){
  #main .rail{flex-wrap:wrap;row-gap:8px}
  #main .rail__meta{margin-left:auto}
}

/* ===== 01 · Hero ======================================================== */
.bio-hero{position:relative;overflow:clip;padding:calc(var(--header-h) + 24px) 0 var(--s-9)}
.bio-hero::before{
  content:"";position:absolute;left:50%;top:calc(var(--header-h) + 50vw);width:110vmin;height:110vmin;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side, rgba(184,146,90,.13), rgba(184,146,90,.04) 55%, transparent 100%);
}
.bio-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px}
.bio-hero__text{position:relative;z-index:2;display:grid;justify-items:start;gap:20px}
/* a little more leading than .h1: diacritics on the second line (Ö, É, Ñ) must clear the first */
.bio-hero__title{max-width:9ch;line-height:1.08}
.bio-hero__title .accent{color:var(--brass-2)}
.bio-hero__name{display:flex;flex-direction:column;gap:12px;max-width:none}
/* the artist name as a small letter-spaced signature line under the real name */
.bio-hero__alias{display:inline-flex;align-items:center;gap:14px;font:700 clamp(1.125rem,.95rem + .8vw,1.625rem)/1 var(--font-sans);letter-spacing:.34em;color:var(--bone)}
.bio-hero__alias::before{content:"";flex:none;width:32px;height:1px;background:var(--brass)}
.bio-hero__role{color:var(--ash);text-wrap:balance}
.bio-hero__lede{max-width:36ch}
.bio-hero__lede .accent{color:var(--brass-2)}
.bio-hero__cue{display:none;align-items:center;gap:12px;min-height:44px;color:var(--ash);transition:color var(--t-s) var(--ease-out)}
.bio-hero__cue .icon{width:16px;height:16px;rotate:90deg;transition:translate 450ms var(--ease-expo)}
@media (hover:hover){
  .bio-hero__cue:hover{color:var(--brass-2)}
  .bio-hero__cue:hover .icon{translate:0 4px}
}

/* Portrait: ink canvas · arch · seam · badge (front) */
.bio-hero__portrait{position:relative;order:-1;justify-self:center;width:min(78vw,440px);margin:0;container-type:inline-size}
.bio-hero__frame{position:relative;z-index:2;isolation:isolate}
.bio-hero__frame::before{
  content:"";position:absolute;z-index:2;inset:-10px;pointer-events:none;
  border:1px solid rgba(184,146,90,.3);border-radius:999px 999px calc(var(--r-l) + 10px) calc(var(--r-l) + 10px);
}
.bio-hero__ink{position:absolute;z-index:0;left:-15%;top:-15%;width:130%;height:130%;max-width:none;pointer-events:none}
.bio-hero__arch{z-index:1;border-radius:var(--r-arch);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.bio-hero__arch img{object-position:50% 30%}
.bio-hero__seam{position:absolute;z-index:3;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--brass);opacity:0;pointer-events:none;transform-origin:50% 50%}
/* opaque seal: the frame hairline and the arch edge pass behind it, never through the ring text */
.bio-hero__badge{position:absolute;z-index:4;left:-20px;top:15%;width:96px;height:96px;border-radius:50%;background:var(--ink-2);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.35)}
.bio-hero__caption{position:relative;z-index:2;margin-top:22px;text-align:center}

@media (min-width:900px){
  .bio-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + 32px) 0 clamp(24px,3svh,48px)}
  .bio-hero::before{left:76%;top:52%}
  .bio-hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .bio-hero__text{grid-column:1 / 7;grid-row:1;align-self:end;gap:24px;padding-bottom:44px}
  /* capped by viewport height so short laptops (1280x720) keep the whole hero in view */
  .bio-hero__title{font-size:min(var(--fs-h1), 12.5vh);font-size:min(var(--fs-h1), 12.5svh)}
  .bio-hero__cue{display:inline-flex}
  /* --bio-fab keeps the frame (and its 10px hairline) left of the fixed Text button (right 16px + 56px) when the gutter is narrower */
  .bio-hero{--bio-fab:max(0px, calc(96px - var(--gutter)))}
  .bio-hero__portrait{order:0;grid-column:7 / 13;grid-row:1;justify-self:end;margin-right:var(--bio-fab);width:min(100% - var(--bio-fab), calc(min(78vh, 900px) * .8));width:min(100% - var(--bio-fab), calc(min(78svh, 900px) * .8))}
  .bio-hero__badge{left:-40px;top:18%;width:120px;height:120px}
  .bio-hero__caption{margin-top:16px;text-align:left}
}
@media (min-width:900px) and (max-height:820px){
  .bio-hero__text{gap:18px;padding-bottom:40px}
  .bio-hero__lede{font-size:1.0625rem;max-width:42ch}
}

/* Entrance. Driven by html.is-revealed (core, at pagereveal) + data-reveal delays on the text. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__seam{opacity:1;transform:scaleY(0)}
  .js.is-revealed:not(.reveal-all) .bio-hero__seam{animation:bio-seam 1200ms both}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__arch{clip-path:inset(0 50% 0 50% round 999px 999px var(--r-l) var(--r-l))}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__arch img{scale:1.3}
  .js.is-revealed .bio-hero__arch{clip-path:inset(0 0 0 0 round 999px 999px var(--r-l) var(--r-l));transition:clip-path 1400ms var(--ease-quart) 300ms}
  .js.is-revealed .bio-hero__arch img{transition:scale 1800ms var(--ease-expo) 300ms,transform 1.4s var(--ease-expo)}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__ink{opacity:0}
  .js.is-revealed .bio-hero__ink{transition:opacity 1200ms var(--ease-out) 400ms}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__frame::before{opacity:0;scale:.96}
  .js.is-revealed .bio-hero__frame::before{transition:opacity 900ms var(--ease-out) 1300ms,scale 1200ms var(--ease-expo) 1300ms}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__badge{opacity:0;scale:.6}
  .js.is-revealed .bio-hero__badge{transition:opacity 800ms var(--ease-expo) 900ms,scale 800ms var(--ease-expo) 900ms}
  .js:not(.is-revealed):not(.reveal-all) .bio-hero__caption{opacity:0}
  .js.is-revealed .bio-hero__caption{transition:opacity 600ms var(--ease-out) 1200ms}
}
@keyframes bio-seam{
  0%{opacity:1;transform:scaleY(0);animation-timing-function:cubic-bezier(.76,0,.24,1)}
  42%{opacity:1;transform:scaleY(1)}
  75%{opacity:1;transform:scaleY(1);animation-timing-function:cubic-bezier(.25,1,.5,1)}
  100%{opacity:0;transform:scaleY(1)}
}

/* ===== 02 · Story ======================================================= */
/* shorter tail: the manifesto below brings its own border and top spacing */
.bio-story{padding-bottom:clamp(56px,7vw,112px)}
.bio-story__grid{row-gap:40px;align-items:start}
.bio-story__title{max-width:12ch}
.bio-story__photo{display:grid;gap:14px;width:100%;max-width:520px;margin:0}
.bio-story__frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-l);background:var(--exhibit);box-shadow:var(--sh-card)}
/* taller than the frame so the scroll parallax never shows an edge */
.bio-story__plx{position:absolute;left:0;right:0;top:-7%;bottom:-7%}
.bio-story__plx img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.bio-story__cap{color:var(--dim)}
.bio-story__col{display:grid;gap:24px}
.bio-story__p{color:var(--ash)}
.bio-story__p--first{font-size:var(--fs-lead);line-height:1.55;color:var(--bone)}
.bio-story__quote{position:relative;max-width:20ch;margin-block:var(--s-5);font-size:clamp(1.875rem,3.4vw,3.5rem);color:var(--bone)}
.bio-story__quote p{max-width:none}
.bio-story__quote .accent{color:var(--brass-2)}
.bio-story__quote::before{content:"\201C";display:block;height:.5em;margin-bottom:.1em;font-size:1.4em;line-height:1;color:var(--brass)}
@media (min-width:900px){
  .bio-story__title{grid-column:1 / 9}
  /* the photo holds still beside the text while it scrolls */
  .bio-story__photo{grid-column:1 / 6;grid-row:2 / span 3;align-self:start;position:sticky;top:calc(var(--header-h) + 32px);margin-top:64px}
  .bio-story__col--a{grid-column:7 / 13;grid-row:2;margin-top:64px}
  .bio-story__quote{grid-column:7 / 13;grid-row:3;margin-block:var(--s-8)}
  .bio-story__col--b{grid-column:7 / 13;grid-row:4}
}

/* ===== 03 · Manifesto (word-scrub) ====================================== */
.bio-manifesto{position:relative;border-top:1px solid var(--line)}
.bio-manifesto__sticky{position:relative;padding-block:var(--section-y)}
.bio-manifesto__sticky::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 32% 56%, rgba(184,146,90,.07), transparent 70%)}
.bio-manifesto .container{position:relative}
.bio-manifesto__body{position:relative;padding-left:clamp(20px,3vw,48px)}
.bio-manifesto__body::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.bio-manifesto__bar{position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--brass);transform-origin:50% 0}
.bio-manifesto__text{font:500 clamp(1.5rem,3.2vw,3.25rem)/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--bone);max-width:none}
.bio-manifesto__text .accent{color:var(--brass-2)}
.bio-manifesto.is-scrub{height:240vh;height:240svh}
.bio-manifesto.is-scrub .bio-manifesto__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;padding-block:calc(var(--header-h) + 8px) 24px}
.bio-manifesto.is-scrub .bio-manifesto__bar{transform:scaleY(0)}
.bio-manifesto.is-scrub .w--accent .accent{color:var(--ash);transition:color 400ms var(--ease-out)}
.bio-manifesto.is-scrub .w--accent.is-lit .accent{color:var(--brass-2)}
@media (min-width:900px){
  .bio-manifesto__body{margin-left:calc((100% + var(--col-gap)) / 12)}
  .bio-manifesto__text{max-width:30ch}
}
@media (min-width:900px) and (min-height:600px){
  /* desktop: hold the text in the upper third instead of centring it, so the pinned stage starts right under the story */
  .bio-manifesto.is-scrub .bio-manifesto__sticky{align-items:start;padding-top:calc(var(--header-h) + clamp(32px, 10svh, 120px))}
}
@media (min-width:600px) and (max-width:899px){ .bio-manifesto.is-scrub{height:190vh;height:190svh} }
@media (min-width:600px) and (max-width:899px) and (min-height:700px){ .bio-manifesto__text{font-size:clamp(1.75rem,5.4vw,2.75rem)} }
@media (max-width:599px) and (max-height:700px){ .bio-manifesto__text{font-size:1.3rem} }

/* ===== 04 · Journey (pinned horizontal / vertical fallback) ============= */
/* Default (no JS, < 900px, reduced motion): a vertical list with a left rail. */
.bio-timeline{position:relative;padding-block:var(--section-y);border-top:1px solid var(--line)}
.bio-timeline__sticky{position:relative}
.bio-timeline__stage{position:relative;width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.bio-timeline__vrail{position:absolute;left:calc(var(--gutter) + 8px);top:8px;bottom:8px;width:1px;background:var(--line);overflow:hidden}
.bio-timeline__vfill{position:absolute;inset:0;background:var(--brass);transform-origin:50% 0}
.bio-timeline__track{position:relative;display:grid;gap:clamp(56px,8vw,96px);padding-left:40px}
.bio-tl{position:relative}
.bio-tl--intro{display:grid;gap:16px;justify-items:start}
.bio-tl--intro .h2{max-width:12ch}
.bio-tl--intro .accent{color:var(--brass-2)}
.bio-tl__hint{display:inline-flex;align-items:center;gap:10px}
.bio-tl__arrow{width:16px;height:16px;color:var(--brass);rotate:90deg}
.bio-timeline.is-pinned .bio-tl__arrow{rotate:0deg}
.bio-tl:not(.bio-tl--intro)::before{
  content:"";position:absolute;left:-36px;top:.75rem;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-strong);transition:background-color 400ms var(--ease-out),border-color 400ms var(--ease-out);
}
.bio-tl.is-seen::before{background:var(--brass);border-color:var(--brass)}
.bio-tl__inner{display:grid;gap:16px}
.bio-tl__no{display:flex;align-items:center;gap:14px;color:var(--dim)}
.bio-tl__no::after{content:"";flex:1;min-width:24px;height:1px;background:var(--line)}
.bio-tl__no .sep{color:var(--dim);margin-inline:.2em}
/* Outline numerals. Manrope is a variable font whose glyphs keep overlapping contours, and a bare text-stroke traces
   them. So: stroke first, then an opaque page-colour fill on top that hides the inner half of the stroke and every
   inner overlap; 3px drawn ≈ 1.5px visible. */
.bio-tl__year{
  display:block;white-space:nowrap;padding-block:.04em;
  font:800 clamp(4rem,22vw,7rem)/.82 var(--font-sans);letter-spacing:-.05em;
  color:var(--ink);-webkit-text-stroke:3px rgba(184,146,90,.6);paint-order:stroke fill;
  transition:-webkit-text-stroke-color 600ms var(--ease-out);
}
/* "Today" / "Hoy" at 70 %: extra bottom room for descenders so they never meet the title below */
.bio-tl--now .bio-tl__year{font-size:calc(clamp(4rem,22vw,7rem) * .7);padding-bottom:.24em}
.bio-tl__body{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.bio-tl__icon{width:48px;height:48px;overflow:visible;fill:none;stroke:var(--bone);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bio-tl__copy{display:grid;gap:10px}
.bio-tl__title{color:var(--bone)}
.bio-tl__text{max-width:44ch;color:var(--ash)}
.bio-timeline__progress{display:none}
@media (min-width:900px){
  /* vertical fallback on desktop (reduced motion): year left, story right */
  .bio-timeline:not(.is-pinned) .bio-tl__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:end}
  .bio-timeline:not(.is-pinned) .bio-tl__no{grid-column:1 / -1}
  .bio-timeline:not(.is-pinned) .bio-tl__year{font-size:clamp(5rem,10vw,9rem)}
  .bio-timeline:not(.is-pinned) .bio-tl--now .bio-tl__year{font-size:calc(clamp(5rem,10vw,9rem) * .7)}
}

/* Pinned: sticky 100svh viewport, the track translates on X (JS sets the section height). */
.bio-timeline.is-pinned{padding-block:0}
.bio-timeline.is-pinned .bio-timeline__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.bio-timeline.is-pinned .bio-timeline__head{padding-top:calc(var(--header-h) + 20px)}
.bio-timeline.is-pinned .bio-timeline__head .rail{margin-bottom:0}
.bio-timeline.is-pinned .bio-timeline__stage{display:flex;align-items:center;min-width:0;min-height:0;max-width:none;margin:0;padding:0}
.bio-timeline.is-pinned .bio-timeline__vrail{display:none}
/* Panels share one top line. The right padding ends the travel with the last stop's content (year + copy, ≈ the left
   78 % of its panel, centre at ≈ 39 %) centred in the viewport. Progress ticks are spaced evenly by the JS whatever this padding is. */
.bio-timeline.is-pinned .bio-timeline__track{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:5vw;padding:0 max(var(--gutter), calc(50% - min(58vw, 800px) * .61)) 0 var(--gutter);will-change:transform}
.bio-timeline.is-pinned .bio-tl{flex:0 0 min(58vw,800px)}
.bio-timeline.is-pinned .bio-tl--intro{flex-basis:min(40vw,560px)}
.bio-timeline.is-pinned .bio-tl::before{display:none}
.bio-timeline.is-pinned .bio-tl__year{font-size:min(clamp(8rem,18vw,20rem), 30vh);font-size:min(clamp(8rem,18vw,20rem), 30svh)}
/* "Today" keeps the full-size line box, so the copy below lines up with the other panels, and is drawn at 70 % hanging
   from the cap line (origin .11em). `scale` composes with the JS inline transform. */
.bio-timeline.is-pinned .bio-tl--now .bio-tl__year{font-size:min(clamp(8rem,18vw,20rem), 30vh);font-size:min(clamp(8rem,18vw,20rem), 30svh);padding-bottom:.04em;scale:.7;transform-origin:0 .11em;-webkit-text-stroke-width:4.3px}
.bio-timeline.is-pinned .bio-tl.is-current .bio-tl__year{-webkit-text-stroke-color:var(--brass)}
.bio-timeline.is-pinned .bio-tl__body{grid-template-columns:64px minmax(0,1fr);gap:28px;padding-left:clamp(24px,5vw,96px);margin-top:clamp(4px,1.5svh,20px)}
.bio-timeline.is-pinned .bio-tl__icon{width:64px;height:64px;stroke-width:1.5}
.bio-timeline.is-pinned .bio-timeline__progress{display:flex;align-items:center;gap:clamp(16px,2vw,32px);padding-top:16px;padding-bottom:max(40px,5svh);padding-right:max(var(--gutter), 104px)} /* clear of the floating buttons */
.bio-timeline__now{flex:none;min-width:5.5em;color:var(--brass-2)}
.bio-timeline__bar{position:relative;flex:1;height:1px;background:var(--line)}
.bio-timeline__fill{position:absolute;inset:0;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}
.bio-timeline__tick{position:absolute;left:var(--x,0%);top:0;translate:-50% 0;padding-top:14px;color:var(--dim);white-space:nowrap;transition:color 400ms var(--ease-out)}
.bio-timeline__tick::before{
  content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-strong);transition:background-color 400ms var(--ease-out),border-color 400ms var(--ease-out),scale 500ms var(--ease-back);
}
.bio-timeline__tick.is-past::before{background:var(--brass);border-color:var(--brass)}
.bio-timeline__tick.is-active{color:var(--bone)}
.bio-timeline__tick.is-active::before{background:var(--brass);border-color:var(--brass);scale:1.6}
/* previous / next stop (pinned mode only: the whole progress row is hidden otherwise) */
.bio-timeline__nav{display:flex;flex:none;gap:10px;margin-left:clamp(8px,1.5vw,24px)}
.bio-timeline__btn{width:44px;height:44px}
.bio-timeline__btn .icon{width:18px;height:18px}
.bio-timeline__btn[aria-disabled="true"]{opacity:.35;cursor:default}

@media (prefers-reduced-motion:no-preference){
  /* icons are drawn by JS (drawPaths) when their panel arrives */
  .js:not(.reveal-all) .bio-timeline:is(.is-pinned,.is-vertical) .bio-tl__icon .draw{stroke-dasharray:1;stroke-dashoffset:1}
  .bio-timeline.is-pinned .bio-tl__arrow{animation:bio-nudge 1.6s var(--ease-soft) infinite}
  /* mobile: IO draw + wipe per item */
  .js:not(.reveal-all) .bio-timeline.is-vertical .bio-tl:not(.bio-tl--intro):not(.is-seen) .bio-tl__year{opacity:0;translate:-32px 0}
  .js:not(.reveal-all) .bio-timeline.is-vertical .bio-tl:not(.is-seen) .bio-tl__no{opacity:0}
  .js:not(.reveal-all) .bio-timeline.is-vertical .bio-tl:not(.is-seen) .bio-tl__title{clip-path:inset(-.3em 100% -.3em 0)}
  .js:not(.reveal-all) .bio-timeline.is-vertical .bio-tl:not(.is-seen) .bio-tl__text{clip-path:inset(0 100% 0 0)}
  .bio-timeline.is-vertical .bio-tl.is-seen .bio-tl__year{transition:opacity 800ms var(--ease-out),translate 1000ms var(--ease-expo)}
  .bio-timeline.is-vertical .bio-tl.is-seen .bio-tl__no{transition:opacity 600ms var(--ease-out)}
  .bio-timeline.is-vertical .bio-tl.is-seen .bio-tl__title{clip-path:inset(-.3em -.3em -.3em 0);transition:clip-path 1000ms var(--ease-quart) 150ms}
  .bio-timeline.is-vertical .bio-tl.is-seen .bio-tl__text{clip-path:inset(-.3em -.3em -.3em 0);transition:clip-path 1000ms var(--ease-quart) 280ms}
}
@keyframes bio-nudge{0%,100%{translate:0 0}50%{translate:6px 0}}

/* ===== 05 · Approach ==================================================== */
.bio-philosophy::before{
  content:"";position:absolute;left:0;right:0;top:30%;bottom:0;pointer-events:none;
  background:radial-gradient(38% 50% at 18% 58%, rgba(184,146,90,.11), transparent 70%),radial-gradient(34% 46% at 84% 42%, rgba(237,230,216,.05), transparent 70%);
}
.bio-philosophy .container{position:relative}
.bio-philosophy .h2 .accent{color:var(--brass-2)}
.bio-philosophy__grid{display:grid;gap:var(--col-gap);margin-top:var(--s-8)}
.bio-principle{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(28px,2.6vw,40px);min-height:clamp(280px,26vw,400px)}
.bio-principle__no{font-size:3rem;line-height:1}
.bio-principle__title{margin-top:auto;max-width:16ch;color:var(--bone)}
.bio-principle p{color:var(--ash)}
@media (min-width:600px){ .bio-philosophy__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .bio-philosophy__grid:is(.bio-philosophy__grid--n3,.bio-philosophy__grid--n5,.bio-philosophy__grid--n6){grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1200px){
  .bio-philosophy__grid--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bio-philosophy__grid--n4 .bio-principle__title{font-size:clamp(1.375rem,.9rem + .8vw,1.875rem)}
}
.bio-philosophy__grid--n1{grid-template-columns:minmax(0,1fr)}

/* ===== 06 · Numbers ===================================================== */
.bio-stats__title{font-size:var(--fs-h3);line-height:1.15;letter-spacing:var(--ls-h3);max-width:20ch}
.bio-stats__title .accent{color:var(--brass-2)}
.bio-stats__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--col-gap);margin-top:var(--s-8)}
.bio-stat .stat__label{max-width:16ch}
@media (min-width:900px){ .bio-stats__list{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ===== 07 · Awards (from the DB, grouped by festival) =================== */
/* Medal art: gold = the brass accent, silver = bone, bronze = a darker brass. Local art colours, never text. */
.bio-medal--p1{--medal:radial-gradient(circle at 30% 26%, #F6E3BC 0%, var(--brass-2) 26%, var(--brass) 60%, var(--brass-deep) 100%);--medal-fg:var(--ink);--medal-rim:rgba(11,10,9,.25)}
.bio-medal--p2{--medal:radial-gradient(circle at 30% 26%, #FFFFFF 0%, var(--bone) 28%, #B9B2A6 62%, #6E685E 100%);--medal-fg:var(--ink);--medal-rim:rgba(11,10,9,.22)}
.bio-medal--p3{--medal:radial-gradient(circle at 30% 26%, #E9BF92 0%, #B98252 30%, #8A5A2E 64%, #4D3218 100%);--medal-fg:#FBF3E6;--medal-rim:rgba(251,243,230,.25)}
.bio-medal--p0{--medal:var(--ink-3);--medal-fg:var(--brass-2);--medal-rim:var(--line-2)}

.bio-awards__head{row-gap:28px;margin-bottom:var(--s-8)}
.bio-awards__head .h2 .accent{color:var(--brass-2)}
.bio-awards__intro{display:grid;gap:24px;align-content:end}
.bio-awards__intro .lead{color:var(--ash)}
.bio-awards__tally{display:flex;flex-wrap:wrap;gap:10px}
.bio-tally{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 9px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font:600 13px/1 var(--font-sans);letter-spacing:.01em;color:var(--bone);white-space:nowrap}
.bio-tally__dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--medal);box-shadow:inset 0 0 0 1px var(--medal-rim)}

.bio-awards__body{row-gap:48px;align-items:start}
.bio-awards__fig{display:grid;gap:16px;width:100%;max-width:440px;margin:0 auto}
.bio-awards__frame{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:var(--r-l);background:var(--exhibit);box-shadow:var(--sh-card)}
.bio-awards__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(184,146,90,.28);pointer-events:none}
.bio-awards__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.bio-awards__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.bio-awards__cap .placard{color:var(--dim)}
.bio-awards__more{font:600 14px/1.3 var(--font-sans);color:var(--bone);min-height:44px}
.bio-awards__more .icon{width:16px;height:16px;color:var(--brass);transition:translate 450ms var(--ease-expo)}
@media (hover:hover){ .bio-awards__more:hover .icon{translate:4px 0} }

.bio-fest + .bio-fest{margin-top:clamp(48px,6vw,88px)}
.bio-fest__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"year meta" "name name";
  align-items:baseline;gap:8px 16px;padding-bottom:20px;border-bottom:1px solid var(--line-strong);
}
.bio-fest__year{grid-area:year;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem)}
.bio-fest__meta{grid-area:meta;justify-self:end;text-align:right;color:var(--ash)}
.bio-fest__meta .sep{color:var(--dim);margin-inline:.35em}
.bio-fest__name{grid-area:name;max-width:none;color:var(--bone)}

.bio-prize{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:18px 4px;border-bottom:1px solid var(--line)}
.bio-prize::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(184,146,90,.08), transparent 70%);opacity:0;pointer-events:none;transition:opacity 400ms var(--ease-out)}
.bio-prize__body{position:relative;display:grid;gap:5px;min-width:0}
.bio-prize__place{color:var(--ash)}
.bio-prize--p1 .bio-prize__place{color:var(--brass-2)}
.bio-prize__cat{font:500 clamp(1.0625rem,.95rem + .5vw,1.375rem)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--bone);overflow-wrap:break-word}
.bio-prize__piece{color:var(--dim)}

/* The medal: a coin with a soft bevel, an inner rim and a shine that sweeps once when it lands. */
.bio-medal{position:relative;display:block;flex:none;width:52px;height:52px;perspective:420px}
.bio-medal__coin{
  position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:var(--medal);color:var(--medal-fg);overflow:hidden;font-size:16px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -3px 7px rgba(0,0,0,.28),0 10px 24px -12px rgba(0,0,0,.9);
}
.bio-medal__coin::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--medal-rim);pointer-events:none}
.bio-medal__coin::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);translate:-110% 0;pointer-events:none}
.bio-medal__face{position:relative;display:inline-flex;align-items:baseline;margin-top:.12em}
.bio-medal__n{font:italic 400 2em/1 var(--font-serif);letter-spacing:-.02em;margin-left:-.1em}
/* en "st/nd/rd": a small raised suffix that starts clear of the italic numeral's overhang */
.bio-medal__sfx{position:relative;top:-1.35em;margin-left:.22em;font:700 .56em/1 var(--font-sans);letter-spacing:.02em}
/* es ".º": the indicator glyph is raised already, so it keeps the numeral's serif face and is lifted only slightly */
.bio-medal__sfx--ind{top:-.3em;margin-left:.02em;font:italic 400 1.05em/1 var(--font-serif);letter-spacing:0}
.bio-medal__icon{width:22px;height:22px}

@media (min-width:900px){
  .bio-awards__head .h2{grid-column:1 / 8}
  .bio-awards__intro{grid-column:8 / 13;align-self:end}
  /* the photo holds still while the festivals scroll past */
  .bio-awards__fig{grid-column:1 / 6;max-width:none;margin:0;position:sticky;top:calc(var(--header-h) + 32px)}
  .bio-awards__frame{max-height:calc(100vh - var(--header-h) - 150px);max-height:calc(100svh - var(--header-h) - 150px)}
  .bio-awards__groups{grid-column:7 / 13}
  .bio-prize{gap:24px;padding:22px 8px}
  .bio-medal{width:60px;height:60px}
  .bio-medal__coin{font-size:18px}
}
@media (hover:hover) and (pointer:fine){
  .bio-prize:hover::before{opacity:1}
  .bio-prize .bio-medal__coin{transition:rotate 600ms var(--ease-back)}
  .bio-prize:hover .bio-medal__coin{rotate:-10deg}
}
@media (prefers-reduced-motion:no-preference){
  /* the coin flips in as its row is wiped in, then catches the light */
  .js:not(.reveal-all) .bio-prize:not(.is-in) .bio-medal__coin{opacity:0;transform:rotateY(-100deg)}
  .js .bio-prize.is-in .bio-medal__coin{animation:bio-coin 1200ms var(--ease-expo) calc(var(--d,0ms) + 160ms) both}
  .js .bio-prize.is-in .bio-medal__coin::after{animation:bio-shine 1100ms var(--ease-out) calc(var(--d,0ms) + 760ms) both}
  .js:not(.reveal-all) .bio-tally:not(.is-in) .bio-tally__dot{scale:0}
  .js .bio-tally.is-in .bio-tally__dot{transition:scale 700ms var(--ease-back) calc(var(--d,0ms) + 200ms)}
}
@keyframes bio-coin{
  0%{opacity:0;transform:rotateY(-100deg)}
  35%{opacity:1}
  100%{opacity:1;transform:rotateY(0deg)}
}
@keyframes bio-shine{from{translate:-110% 0}to{translate:110% 0}}

/* ===== 08 · Press & partners (text only: no logos) ====================== */
.bio-press__head{row-gap:24px;margin-bottom:var(--s-8)}
.bio-press__head .h2 .accent{color:var(--brass-2)}
.bio-press__head .lead{color:var(--ash)}
.bio-press__list{display:grid;border-top:1px solid var(--line)}
.bio-press__item{position:relative;display:grid;align-content:start;gap:12px;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.bio-press__item::after{content:"";position:absolute;left:0;top:-1px;width:48px;height:1px;background:var(--brass);transform-origin:0 50%;transition:width 700ms var(--ease-expo)}
.bio-press__kind{color:var(--brass-2)}
.bio-press__name{font:italic 400 clamp(2.25rem,4.2vw,4.25rem)/1 var(--font-serif);letter-spacing:-.015em;color:var(--bone);overflow-wrap:break-word;text-wrap:balance}
.bio-press__note{color:var(--ash)}
@media (min-width:900px){
  .bio-press__head .h2{grid-column:1 / 8}
  .bio-press__head .lead{grid-column:8 / 13;align-self:end}
  .bio-press__list{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-bottom:1px solid var(--line)}
  .bio-press__item{padding:36px 32px 44px 0;border-bottom:0}
  .bio-press__item + .bio-press__item{padding-left:32px;border-left:1px solid var(--line)}
  .bio-press__item + .bio-press__item::after{left:32px}
}
@media (hover:hover) and (pointer:fine){ .bio-press__item:hover::after{width:calc(100% - 32px)} }

/* ===== 09 · Studio standards ============================================ */
.bio-hygiene__head{row-gap:24px;margin-bottom:var(--s-8)}
.bio-hygiene__head .h2 .accent{color:var(--brass-2)}
.bio-hygiene__head .lead{color:var(--ash)}
.bio-hygiene__grid{display:grid;gap:var(--col-gap);counter-reset:hyg}
.bio-hyg{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:var(--r-l);
  background:var(--ink-2);border:1px solid var(--line);counter-increment:hyg;transition:border-color var(--t-m) var(--ease-out);
}
.bio-hyg::after{
  content:"0" counter(hyg);content:"0" counter(hyg) / "";
  position:absolute;top:28px;right:30px;font:italic 400 1rem/1 var(--font-serif);color:var(--dim);
}
.bio-hyg__icon{width:40px;height:40px;margin-bottom:10px;overflow:visible;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bio-hyg__icon .draw{stroke-dasharray:1;stroke-dashoffset:0}
.bio-hyg__title{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;color:var(--bone)}
.bio-hyg__text{display:grid;gap:10px}
.bio-hyg p{font-size:var(--fs-small);line-height:1.6;color:var(--ash)}
@media (hover:hover){ .bio-hyg:hover{border-color:var(--line-2)} }

/* The studio photo: a tile of the card grid (gloves, barrier film: it shows the standards). Phones: full width, 4:5,
   above the cards. Tablet / desktop: it fills the rows it spans (cards set the height) and crops gently from the sides. */
.bio-hygiene__photo{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-l);background:var(--exhibit);box-shadow:var(--sh-card);isolation:isolate}
.bio-hygiene__photo::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(184,146,90,.28);pointer-events:none}
/* taller than the tile so the scroll parallax never shows an edge */
.bio-hygiene__plx{position:absolute;left:0;right:0;top:-6%;bottom:-6%}
.bio-hygiene__plx img{width:100%;height:100%;object-fit:cover;object-position:46% 34%}
.bio-hygiene__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:baseline;gap:12px;padding:64px 24px 22px;
  font:italic 400 clamp(1.125rem,1rem + .45vw,1.375rem)/1.3 var(--font-serif);color:var(--bone);text-wrap:balance;
  background:linear-gradient(to top, rgba(11,10,9,.9) 0%, rgba(11,10,9,.62) 48%, rgba(11,10,9,0) 100%);
}
.bio-hygiene__cap::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--brass);translate:0 -.2em}

/* Card widths come from the template (data-w-t / data-w-d): rows always end flush, whatever the number of cards.
   Two columns on tablets (with the photo up to 1199px, where a two-track tile would be too narrow): the photo takes
   the right column beside the first two cards. */
@media (min-width:600px){
  .bio-hygiene__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bio-hyg[data-w-t="2"]{grid-column:span 2}
  .bio-hygiene__grid--photo .bio-hygiene__photo{grid-column:2;grid-row:1 / span var(--rows-t,2);aspect-ratio:auto;min-height:440px}
}
/* six tracks: cards take two (three per row); with the photo from 1200px, where it takes the last two tracks of the first rows */
@media (min-width:900px) and (max-width:1199px){
  .bio-hygiene__grid:not(.bio-hygiene__grid--photo){grid-template-columns:repeat(6,minmax(0,1fr))}
  .bio-hygiene__grid:not(.bio-hygiene__grid--photo) .bio-hyg{grid-column:span 2}
  .bio-hygiene__grid:not(.bio-hygiene__grid--photo) .bio-hyg[data-w-d="3"]{grid-column:span 3}
  .bio-hygiene__grid:not(.bio-hygiene__grid--photo) .bio-hyg[data-w-d="6"]{grid-column:span 6}
}
@media (min-width:1200px){
  .bio-hygiene__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bio-hyg{grid-column:span 2}
  .bio-hyg[data-w-d="3"]{grid-column:span 3}
  .bio-hyg[data-w-d="4"]{grid-column:span 4}
  .bio-hyg[data-w-d="6"]{grid-column:span 6}
  .bio-hygiene__grid--photo .bio-hygiene__photo{grid-column:5 / 7;grid-row:1 / span var(--rows-d,2);min-height:460px}
}
@media (min-width:900px){
  /* a lone full-width card reads as one line: icon · title · text */
  .bio-hyg[data-w-d="6"]{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.7fr);align-items:center;column-gap:clamp(24px,3vw,56px);padding-block:30px;padding-right:80px}
  .bio-hyg[data-w-d="6"] .bio-hyg__icon{margin:0}
  .bio-hyg[data-w-d="6"] p{font-size:var(--fs-body)}
  .bio-hyg[data-w-d="6"]::after{top:50%;translate:0 -50%}
  .bio-hygiene__head .h2{grid-column:1 / 8}
  .bio-hygiene__head .lead{grid-column:8 / 13;align-self:end}
}
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-all) .bio-hyg:not(.is-in) .bio-hyg__icon .draw{stroke-dashoffset:1}
  .js .bio-hyg.is-in .bio-hyg__icon .draw{transition:stroke-dashoffset var(--t-4xl) var(--ease-soft) calc(var(--d,0ms) + 200ms + var(--pi,0) * 90ms)}
  /* the photo opens from the gloved hands (iris origin), then its caption rises */
  .js:not(.reveal-all) .bio-hygiene__photo:not(.is-in) .bio-hygiene__cap{opacity:0;translate:0 14px}
  .js .bio-hygiene__photo.is-in .bio-hygiene__cap{transition:opacity 900ms var(--ease-out) calc(var(--d,0ms) + 900ms),translate 1100ms var(--ease-expo) calc(var(--d,0ms) + 900ms)}
}

/* ===== 10 · Closing words (quote + portrait sign-off) =================== */
.bio-sign{border-top:1px solid var(--line)}
.bio-sign__fig{display:grid;justify-items:center;gap:clamp(36px,4vw,56px);text-align:center}
.bio-sign__quote{font-size:clamp(2.25rem,6.4vw,6.75rem);line-height:1.02;max-width:15ch;color:var(--bone)}
.bio-sign__quote p{max-width:none}
.bio-sign__quote .accent{color:var(--brass-2)}
.bio-sign__cite{position:relative;display:grid;justify-items:center;gap:10px}
.bio-sign__avatar{position:relative;display:block;width:112px;height:112px;margin-bottom:14px;border-radius:50%;overflow:hidden;background:var(--exhibit)}
.bio-sign__avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* hand-drawn brass ring around the portrait (draw reveal), starting at 12 o'clock */
.bio-sign__ring{position:absolute;left:50%;top:-9px;width:130px;height:130px;margin-left:-65px;overflow:visible;fill:none;stroke:var(--brass);stroke-width:1.2;rotate:-90deg;pointer-events:none}
.bio-sign__name{color:var(--bone)}
.bio-sign__role{color:var(--ash)}
@media (min-width:900px){
  .bio-sign__avatar{width:132px;height:132px}
  .bio-sign__ring{top:-10px;width:152px;height:152px;margin-left:-76px}
}

/* ===== 11 · Booking (CTA band + Text link) ============================== */
.bio-cta .cta-band__title .accent{color:var(--brass-2)}
.bio-cta__alt{margin-top:-4px}
.bio-cta__sms{min-height:44px;font-weight:600;color:var(--bone)}
.bio-cta__sms .icon{width:20px;height:20px;color:var(--brass)}
.bio-cta .cta-orb__text{max-width:9.5ch;text-align:center;line-height:1.25}

/* ===== 12 · Reduced motion ============================================== */
@media (prefers-reduced-motion:reduce){
  .js:not(.is-revealed):not(.reveal-all) :is(.bio-hero__frame,.bio-hero__badge,.bio-hero__caption){opacity:0}
  .js.is-revealed :is(.bio-hero__frame,.bio-hero__badge,.bio-hero__caption){transition:opacity 300ms linear}
  .bio-tl__year,.bio-timeline__tick,.bio-timeline__tick::before{transition:none}
  .bio-prize::before,.bio-press__item::after,.bio-awards__more .icon{transition:none}
  .bio-prize:hover .bio-medal__coin{rotate:none}
}