/* Pilates Realm — Kinetic Resistance & Perfect Alignment
   Motion layer. Every rule here is an ENHANCEMENT: if the stylesheet or GSAP fails to
   load, the page must still read and every link must still work. Nothing below hides
   content by default except the two menu surfaces, which are inert until JS wakes them
   (the .links fallback menu stays in charge until then).
   Palette is inherited: --cream --olive --orange --terra --ink --mute --line. */

:root{
  /* a slow controlled stretch, not a bounce — the resistance of a spring under load */
  --ease-stretch: cubic-bezier(.16,.84,.28,1);
  --ease-release: cubic-bezier(.22,1.2,.36,1);
  --dur-drawer: .62s;
}

/* ─────────────────────────────────────────────── 1. THE MENU MATRIX ── */
/* Trigger. Replaces the burger's job on JS-capable browsers; the burger stays in the
   markup as the no-JS fallback and is hidden only once JS confirms it can take over. */
.js-motion .pr-trigger{
  display:inline-flex; align-items:center; gap:.55rem; order:3; margin-left:.5rem;
  background:none; border:0; cursor:pointer; padding:8px 4px; color:var(--ink);
  font:inherit; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
}
.pr-trigger{display:none}
.pr-trigger__bars{display:block; width:22px}
.pr-trigger__bars i{
  display:block; height:2px; background:currentColor; margin:4px 0; border-radius:2px;
  transition:transform .45s var(--ease-stretch), width .45s var(--ease-stretch);
}
.pr-trigger:hover .pr-trigger__bars i:nth-child(1){width:14px}
.pr-trigger:hover .pr-trigger__bars i:nth-child(3){width:18px}
.pr-trigger__label{display:none}
@media(min-width:861px){ .pr-trigger__label{display:inline} }

/* Scrim shared by both surfaces */
.pr-scrim{
  position:fixed; inset:0; z-index:58; background:rgba(42,36,24,.42);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease-stretch), visibility .5s;
}
.pr-scrim.is-open{opacity:1; visibility:visible}

/* — Desktop: the Kinetic Drawer, full height, from the right edge — */
.pr-drawer{
  position:fixed; top:0; right:0; z-index:60; height:100dvh;
  width:min(410px, 88vw); background:var(--cream);
  border-left:1px solid var(--line); box-shadow:-24px 0 60px rgba(42,36,24,.14);
  transform:translate3d(100%,0,0); visibility:hidden;
  transition:transform var(--dur-drawer) var(--ease-stretch), visibility var(--dur-drawer);
  display:flex; flex-direction:column; padding:26px 30px 30px; overflow-y:auto;
  will-change:transform;
}
.pr-drawer.is-open{transform:translate3d(0,0,0); visibility:visible}
.pr-drawer__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px}
.pr-drawer__close{
  background:none;border:0;cursor:pointer;padding:8px;color:var(--ink);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
}
.pr-drawer__nav{display:flex; flex-direction:column; gap:2px}
.pr-drawer__nav a{
  display:block; padding:13px 0; text-decoration:none; color:var(--ink);
  font-size:1.42rem; line-height:1.2; letter-spacing:0;
  border-bottom:1px solid var(--line);
  transition:letter-spacing .5s var(--ease-stretch), color .3s ease, padding-left .5s var(--ease-stretch);
}
.pr-drawer__nav a:hover,.pr-drawer__nav a:focus-visible{
  letter-spacing:.045em; padding-left:.35rem; color:var(--orange);
}
.pr-drawer__nav a[aria-current=page]{color:var(--orange)}
.pr-drawer__foot{margin-top:auto; padding-top:26px; font-size:.9rem; color:var(--mute)}
.pr-drawer__foot a{color:var(--orange)}

/* — Mobile: the Elastic Bottom Sheet, thumb-reachable — */
@media(max-width:860px){
  .pr-drawer{
    top:auto; right:0; left:0; bottom:0; width:auto; height:auto;
    max-height:82dvh; border-left:0; border-top:1px solid var(--line);
    border-radius:22px 22px 0 0; box-shadow:0 -18px 50px rgba(42,36,24,.2);
    padding:12px 22px calc(22px + env(safe-area-inset-bottom));
    transform:translate3d(0,100%,0);
  }
  .pr-drawer.is-open{transform:translate3d(0,0,0)}
  .pr-drawer__grab{
    width:44px;height:4px;border-radius:99px;background:var(--line);
    margin:2px auto 16px; flex:0 0 auto;
  }
  /* 48px minimum touch target — thumbs, not cursors */
  .pr-drawer__nav a{font-size:1.16rem; padding:15px 2px; min-height:48px}
  .pr-drawer__nav a:hover{letter-spacing:0; padding-left:2px}
}
@media(min-width:861px){ .pr-drawer__grab{display:none} }

body.pr-locked{overflow:hidden}

/* ──────────────────────────────────── 2. THE ALIGNMENT SCROLL TIMELINE ── */
.pr-align{position:relative; overflow:hidden}
.pr-align__grid{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0;
}
.pr-align__grid span{
  position:absolute; background:var(--terra); opacity:.38;
}
.pr-align__grid .v{top:0; bottom:0; width:1px; transform:scaleY(0); transform-origin:top}
.pr-align__grid .h{left:0; right:0; height:1px; transform:scaleX(0); transform-origin:left}
.pr-align > *:not(.pr-align__grid){position:relative; z-index:1}

/* ─────────────────────────────────────── 3. THE KINETIC TEXT MARQUEE ── */
.pr-marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding:.85rem 0; background:var(--cream);
  --pr-marquee-x:0px;
}
.pr-marquee__track{
  display:flex; width:max-content; gap:0;
  transform:translate3d(var(--pr-marquee-x),0,0);
  will-change:transform;
}
.pr-marquee__item{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:clamp(.92rem,2.1vw,1.16rem); letter-spacing:.02em; color:var(--olive-2);
  padding:0 1.1rem;
}
.pr-marquee__item::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--terra); margin-left:1.15rem; flex:0 0 auto;
}

/* ──────────────────────────────── 4. ELASTIC RESISTANCE MICRO-INTERACTIONS ── */
.pr-magnetic{
  position:relative; will-change:transform;
  transition:transform .45s var(--ease-release), box-shadow .35s ease;
}
.pr-magnetic > .pr-magnetic__t{
  display:inline-block; will-change:transform;
  transition:transform .45s var(--ease-release);
}
/* thumb press: drop, then spring back on release */
.pr-magnetic:active{transform:scale(.96); transition:transform .09s ease-out}
@media(hover:none){
  .pr-magnetic:active{transform:scale(.96)}
}

/* ───────────────────────────────────────────────── 5. REVEALS ── */
.js-motion .pr-rise{opacity:0; transform:translate3d(0,30px,0)}

/* ───────────────────────── 6. THE FLOOR: motion is never load-bearing ── */
@media(prefers-reduced-motion:reduce){
  .pr-drawer,.pr-scrim{transition:none}
  .pr-marquee__track{transform:none !important}
  .js-motion .pr-rise{opacity:1 !important; transform:none !important}
  .pr-align__grid{display:none}
  .pr-magnetic,.pr-magnetic > .pr-magnetic__t{transition:none}
  .pr-magnetic:active{transform:none}
}


/* ============================ LAYOUT ADDITIONS - 10 September 2026 ==
   Her own photographs arrived, so the homepage stops opening on type alone. */

.pr-hero{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  gap:clamp(20px,4vw,54px); align-content:center;
}
.pr-hero__art{position:relative; border-radius:var(--r); overflow:hidden; background:#EFEADC}
.pr-hero__art picture,.pr-hero__art img{display:block; width:100%; height:100%}
.pr-hero__art img{
  object-fit:cover;
  object-position:50% 26%;
  min-height:min(74vh,620px);
}
@media(max-width:860px){
  .pr-hero{grid-template-columns:1fr; gap:22px}
  .pr-hero__art{order:-1}
  .pr-hero__art img{min-height:0; aspect-ratio:4 / 5}
}

.pr-cap{margin-top:10px; font-size:.82rem; letter-spacing:.02em; color:var(--mute)}

.pr-figure{border-radius:var(--r); overflow:hidden; background:#EFEADC; margin:0}
.pr-figure picture,.pr-figure img{display:block; width:100%; height:auto}

.pr-triptych{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,18px)}
.pr-triptych figure{margin:0; border-radius:var(--r); overflow:hidden; background:#EFEADC}
.pr-triptych img{display:block; width:100%; height:100%; aspect-ratio:4 / 5}
.pr-triptych img{object-fit:cover}
@media(max-width:700px){
  .pr-triptych{grid-template-columns:1fr 1fr; gap:10px}
  .pr-triptych figure:nth-child(3){grid-column:1 / -1}
  .pr-triptych figure:nth-child(3) img{aspect-ratio:16 / 10}
}

.pr-bio{border-left:2px solid var(--terra); padding-left:clamp(16px,3vw,30px); max-width:60ch}
.pr-bio p{
  font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.62; color:var(--olive-2);
  margin:0 0 14px;
}
.pr-bio p:last-child{margin-bottom:0}


/* ================== CROP CORRECTIONS - measured, not eyeballed ==================
   A DOM probe over every cover-fitted image found 130-166px being taken off the top of
   several portrait photographs, because the site's .split rule forces a 4:3 landscape box
   and the triptych asked for 4:5. On the mermaid frame that clipped the model's reaching
   HAND, which is the whole subject of the picture (6 Sep, Warriorz: a people photo in a
   fixed-ratio box needs an explicit focus, and the render pass must measure every slot). */

/* the alignment figure: a full-body vertical reach must not sit in a landscape box */
.pr-align__art img{aspect-ratio:4 / 5 !important; object-position:50% 30%}
@media(max-width:860px){ .pr-align__art img{aspect-ratio:4 / 5 !important} }

/* the triptych: taller boxes, and the crop takes from the floor rather than from
   heads and reaching hands */
.pr-triptych img{aspect-ratio:2 / 3; object-position:50% 32%}
@media(max-width:700px){
  .pr-triptych figure:nth-child(3) img{aspect-ratio:16 / 10; object-position:50% 50%}
}

/* the scrolling gallery: portraits anchor high so a head is never the thing that goes */
.sty__f img{object-position:50% 30%}

/* the middle tile is the arm-arc frame; it needs a touch more headroom than its siblings */
.pr-triptych figure:nth-child(2) img{object-position:50% 24%}


/* ===================== THE STUDIO FILM - 10 September 2026 =====================
   Her own 4K footage of a session on the Cadillac. The source is 2160x3840 portrait,
   so this is shaped to the footage rather than the footage squeezed into a wide band.
   The poster is a frame cut from the same film, so a visitor who never gets the video
   (slow connection, Save-Data, reduced motion) still sees the real thing. */
.pr-film{position:relative; border-radius:var(--r); overflow:hidden; background:#EFEADC}
.pr-film__v{
  display:block; width:100%; height:auto; aspect-ratio:1080 / 1190;
  object-fit:cover; background:#EFEADC;
}
.pr-film .pr-cap{padding:0 2px}
@media(prefers-reduced-motion:reduce){
  /* the poster stays; the film never starts */
  .pr-film__v{pointer-events:none}
}