/* Gandi — Anatomy section (Home page).
   Same rules as GANDI_ANATOMY_CSS in store/ProductPage.jsx — keep the two in sync.
   Background is the site's light cream (--stone-50 #F4F1EA), not the handoff's #F2EEE6:
   the layer edges carry #F2EEE6, and #F4F1EA is within 4 units of it, so no halo shows.
   Don't switch to the very light cream (#FBF9F4) — that is far enough to outline the layers.
   Persian text uses var(--font-fa) = Yekan Bakh FaNum only. */
.gd-anatomy{ position:relative; height:300vh; background:var(--stone-50, #F4F1EA); color:var(--ink-900,#1B1A15); }
.gd-anatomy__sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden;
  box-sizing:border-box; padding-top:76px; /* clear the fixed site header */ }
.gd-anatomy__inner{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:2rem; display:grid;
  gap:clamp(1.5rem,5vw,4rem); align-items:center; grid-template-columns:minmax(240px,380px) 1fr; }
.gd-stage{ position:relative; margin:0; width:100%; aspect-ratio:1296 / 2304; max-height:86vh; justify-self:start; }
.gd-ly{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  will-change:transform,opacity; transform:translate3d(0,0,0); }
.gd-anatomy__copy{ min-width:0; }
.gd-eyebrow{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.35em;
  font-size:.7rem; font-weight:400; color:#5F5B50; margin:0; }
.gd-eyebrow::after{ content:""; display:block; width:48px; height:1px; background:#C9A063; margin-block-start:.85rem; }
.gd-anatomy__copy h2{ font-family:var(--font-fa); font-weight:300; font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.4; margin:1.5rem 0 0; text-wrap:balance; }
.gd-lede{ font-family:var(--font-fa); font-weight:300; margin:.9rem 0 0; color:#5F5B50; max-width:44ch; line-height:1.9; }
.gd-layers{ list-style:none; margin:clamp(1.25rem,3vw,2.25rem) 0 0; padding:0; }
.gd-layers li{ display:grid; grid-template-columns:2.25rem 1fr auto; align-items:baseline; gap:.75rem;
  padding-block:.5rem; border-block-end:1px solid #E4DCCC; opacity:.2; transform:translateY(5px);
  transition:opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard), color 420ms var(--ease-standard); }
.gd-layers li.is-on{ opacity:1; transform:none; }
.gd-layers li.is-current{ color:#032F20; }
.gd-idx{ font-family:var(--font-fa); font-size:.8rem; color:#C9A063; font-variant-numeric:tabular-nums; }
.gd-nm{ font-family:var(--font-fa); font-size:.98rem; }
.gd-sp{ font-family:var(--font-label); font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:#5F5B50; }
/* Laptop-height screens: the 14-row list must still fit under the header. */
@media (max-height:900px){
  .gd-layers{ margin-top:1rem; } .gd-layers li{ padding-block:.3rem; } .gd-nm{ font-size:.9rem; }
  .gd-anatomy__copy h2{ margin-top:1rem; } .gd-lede{ margin-top:.5rem; }
}
@media (max-height:760px){ .gd-lede{ display:none; } }
/* Phone: stage + heading + list can't all fit in one pinned screen, so the
   sofa is sized to the space left and only the current layer's name shows. */
@media (max-width:820px){
  .gd-anatomy{ height:240vh; }
  .gd-anatomy__inner{ grid-template-columns:1fr; gap:.75rem; padding-inline:1rem; }
  .gd-stage{ width:min(100%, calc((100vh - 76px - 9rem) * 0.5625)); height:auto; max-height:none; max-width:none; justify-self:center; } /* fits both the free height and the column width; keeps 1296:2304 exactly */
  /* closed sofa starts high and the stage settles as the layers open (JS sets --gd-lift) */
  .gd-stage{ transform:translate3d(0, calc(var(--gd-lift, 0) * -1%), 0); will-change:transform; }
  .gd-anatomy__copy{ text-align:center; }
  .gd-eyebrow::after{ margin-inline:auto; margin-block-start:.6rem; }
  .gd-anatomy__copy h2{ margin-top:.6rem; font-size:1.35rem; }
  .gd-lede{ display:none; }
  .gd-layers{ display:none; } /* the complete list follows the section instead */
  .gd-sp{ display:none; }
}
/* Phone: the full 14-row list follows the section, once the animation is done. */
.gd-anatomy-list{ display:none; background:var(--stone-50, #F4F1EA); padding:0 1rem 3.5rem; }
.gd-layers-full{ list-style:none; margin:0 auto; padding:0; max-width:520px; }
.gd-layers-full li{ display:grid; grid-template-columns:2.25rem 1fr; align-items:baseline; gap:.75rem;
  padding-block:.65rem; border-block-end:1px solid #E4DCCC; }
@media (max-width:820px){ .gd-anatomy-list{ display:block; } }
@media (prefers-reduced-motion:reduce){
  .gd-anatomy-list{ display:none !important; }
  .gd-anatomy{ height:auto; }
  .gd-anatomy__sticky{ position:static; height:auto; padding-block:4rem; }
  .gd-stage{ height:auto; width:100%; max-width:320px; }
  .gd-lede{ display:block; }
  .gd-stage{ transform:none; }
  .gd-layers{ display:block; }
  .gd-layers li{ display:grid; opacity:1; transform:none; }
}
/* Home page: its fixed header is taller (~113px) than the store's, so clear that instead. */
#construction .gd-anatomy__sticky{ padding-top:116px; }
#construction .gd-stage{ max-height:calc(100vh - 140px); }
@media (max-width:820px){ #construction .gd-stage{ width:min(100%, calc((100vh - 116px - 9rem) * 0.5625)); } }
@media (prefers-reduced-motion:reduce){ #construction .gd-stage{ height:auto; width:100%; max-width:320px; } }
/* Home, desktop: the next section has no top padding, so give it the page's
   standard rhythm here (margin sits outside the section, so the scroll timing is unchanged). */
@media (min-width:821px){
  #construction{ margin-bottom:var(--rhythm, 112px);
    /* ~88px of the section's own beige under the list; height grows by the same
       amount so the pinned scroll length stays 300vh (app.js excludes the padding) */
    padding-bottom:88px; height:calc(300vh + 88px); }
}