.skeletal .content-section{grid-template-columns:minmax(0,670px) minmax(0,670px);gap:120px;padding:135px 0}
.skeletal .content-section{background:#fdfbf7}
.skeletal .content-section.reverse{background:#fcf4f6;box-shadow:0 0 0 100vmax #fcf4f6;clip-path:inset(0 -100vmax)}
.skeletal .content-section .visual{border-radius:42px}
.skeletal .content-section .visual img{height:650px}
.skeletal .copy .num{font-size:120px;line-height:1;color:#eed4da;font-weight:800}
.skeletal .copy .kicker{margin:18px 0 14px;color:#cc7f90;font-size:22px;letter-spacing:.08em}
.skeletal .copy h2{margin:0 0 34px;color:#3d332f;font-size:58px;line-height:1.15;letter-spacing:-.04em}
.skeletal .body-copy{color:#6b615b;font-size:23px;line-height:1.565}
.skeletal .body-copy p{margin:0 0 24px}
.skeletal .body-copy strong{font-weight:700;color:inherit}
/* Figma 1:290–1:294 — filled pink pills (contour/total depth), ivory text */
.skeletal .tags{gap:14px;margin-top:38px}
.skeletal .tags i{
  border:0;
  background:#b85f72;
  color:#fdfbf7;
  font-size:19px;
  font-weight:700;
  padding:15px 28px;
}
.skeletal .principles{padding-top:135px;padding-bottom:135px}
.skeletal .principles h2{font-size:58px;line-height:1.15}
.skeletal .principle-intro{font-size:20px;line-height:1.8;color:#eee}
.skeletal .principle-grid h3{font-size:24px}
.skeletal .principle-grid p{font-size:18px;line-height:1.75}
.skeletal .principle-conclusion{margin:72px auto 0;font-size:22px;line-height:1.8}
.skeletal .recommend{display:block;min-height:1000px;padding:190px max(7vw,calc((100vw - 1366px)/2));background-color:#202122;background-image:linear-gradient(90deg,rgba(25,26,27,.96) 0%,rgba(25,26,27,.84) 43%,rgba(25,26,27,.22) 72%,rgba(25,26,27,.08) 100%),url("assets/asymmetry-exact/recommend-model-bg-optimized.jpg");background-position:center;background-size:cover;background-repeat:no-repeat}
.skeletal .recommend-inner{max-width:750px}
.skeletal .recommend .kicker{font-size:20px;letter-spacing:.06em}
.skeletal .recommend h2{width:max-content;max-width:calc(100vw - 44px);margin:20px 0 28px;font-size:58px;line-height:1.2}
.skeletal .recommend-lead{margin:0 0 45px;color:#ddd;font-size:20px;line-height:1.75}
.skeletal .recommend li{display:flex;align-items:center;min-height:80px;margin:12px 0;padding:20px 26px;border:1px solid #efd8dd;border-radius:16px;background:transparent;color:#fff;font-size:18px;line-height:1.5}
.skeletal .recommend .back{display:block;margin-top:32px;padding:20px 28px;text-align:center;font-size:17px}
@media(max-width:1500px){.skeletal .content-section{width:calc(100% - 80px);grid-template-columns:repeat(2,minmax(0,1fr));gap:6vw}.skeletal .copy h2{font-size:clamp(42px,3.3vw,58px)}.skeletal .body-copy{font-size:20px}}
@media(max-width:900px){.skeletal .content-section{width:auto;grid-template-columns:1fr;gap:40px;padding:76px 22px}.skeletal .content-section.reverse .visual{order:0}.skeletal .content-section .visual img{height:auto;aspect-ratio:1.03/1;object-fit:cover}.skeletal .copy .num{font-size:72px}.skeletal .copy .kicker{font-size:16px;letter-spacing:.04em}.skeletal .copy h2{font-size:clamp(32px,8.5vw,42px)}.skeletal .body-copy{font-size:18px;line-height:1.72}.skeletal .principles h2,.skeletal .recommend h2{font-size:clamp(34px,9vw,46px)}.skeletal .principle-intro{font-size:18px}.skeletal .principle-intro br,.skeletal .principle-conclusion br{display:none}.skeletal .principle-grid p{font-size:18px}.skeletal .principle-conclusion{font-size:18px}.skeletal .recommend{min-height:0;padding:90px 22px}.skeletal .recommend h2{width:auto}.skeletal .recommend-lead{font-size:18px}.skeletal .recommend li{font-size:16px;min-height:74px}}
@media(max-width:900px){.skeletal .recommend{background-image:linear-gradient(90deg,rgba(25,26,27,.96),rgba(25,26,27,.68)),url("assets/asymmetry-exact/recommend-model-bg-optimized.jpg");background-position:68% center}}

/* Mobile readability audit: hero first, then consistent body rhythm. */
@media(max-width:900px){
  .skeletal .sub-hero{display:flex;flex-direction:column;height:auto;min-height:0;margin-top:68px}
  .skeletal .sub-hero-copy{order:1;padding:64px 20px 40px}
  .skeletal .sub-hero-copy>p{margin:0 0 24px;color:#cc7f90;font-size:17px!important;line-height:1.5!important;letter-spacing:-.025em}
  .skeletal .sub-hero h1{margin:0 0 28px;font-size:clamp(38px,10.25vw,44px)!important;font-weight:700!important;line-height:1.18!important;letter-spacing:-.045em}
  .skeletal .sub-hero-copy>span{font-size:17px!important;line-height:1.75!important;letter-spacing:-.025em}
  .skeletal .sub-hero-copy>span br{display:none}
  .skeletal .tags{gap:8px;margin-top:30px}
  .skeletal .tags i{padding:10px 15px;font-size:14px!important;line-height:1.2;border:0;background:#b85f72;color:#fdfbf7;font-weight:700}
  .skeletal .sub-hero-media{order:2}

  .skeletal .content-section{gap:34px;padding:72px 20px}
  .skeletal .content-section .visual{border-radius:24px}
  .skeletal .copy .num{font-size:64px}
  .skeletal .copy .kicker{margin:12px 0 14px;font-size:17px;line-height:1.55;letter-spacing:-.02em}
  .skeletal .copy h2{margin-bottom:26px;font-size:clamp(32px,8.7vw,40px);line-height:1.28}
  .skeletal .body-copy{font-size:18px;line-height:1.75}
  .skeletal .body-copy p{margin-bottom:22px}

  .skeletal .principles{padding:78px 20px}
  .skeletal .principles .kicker{font-size:15px;line-height:1.5}
  .skeletal .principles h2{font-size:clamp(32px,8.7vw,40px);line-height:1.28}
  .skeletal .principle-grid{gap:14px;margin-top:42px}
  .skeletal .principle-grid article{min-height:0;padding:30px 24px}
  .skeletal .principle-grid h3{font-size:22px;line-height:1.4}
  .skeletal .principle-grid p{font-size:17px;line-height:1.75}
  .skeletal .principle-conclusion{margin-top:48px;font-size:18px;line-height:1.75}

  .skeletal .recommend{padding:82px 20px}
  .skeletal .recommend .kicker{font-size:17px}
  .skeletal .recommend h2{margin:16px 0 24px;font-size:clamp(32px,8.7vw,40px);line-height:1.28}
  .skeletal .recommend-lead{margin-bottom:32px;font-size:17px;line-height:1.75}
  .skeletal .recommend li{min-height:0;margin:10px 0;padding:17px 18px;border-radius:12px;font-size:17px;line-height:1.65}
  .skeletal .recommend .back{margin-top:26px;padding:17px 20px;font-size:16px}
}

@media(max-width:420px){
  .skeletal .sub-hero h1 br,.skeletal .copy h2 br{display:none}
}

@media(max-width:900px){
  body.skeletal .sub-hero .sub-hero-copy>span{font-size:17px!important;line-height:1.75!important}
}

/* Figma 1:296 — diagonal leaf frame (TL/BR small, TR/BL large). */
.skeletal .sub-hero-media{
  align-items:center;
  justify-content:center;
  overflow:visible;
  padding:28px 4% 36px;
}
.skeletal .sub-hero{overflow:hidden}
.skeletal .hero-portrait{
  position:relative;
  box-sizing:border-box;
  flex:0 1 auto;
  width:min(100%,630px);
  max-width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:630/678;
  overflow:hidden;
  border-radius:33px 229px 33px 229px;
  background:#fdfbf7;
  box-shadow:0 28px 74px rgba(143,83,98,.18);
}
.skeletal .hero-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  border-radius:inherit;
}

@media(max-width:1500px) and (min-width:901px){
  .skeletal .hero-portrait{width:min(100%,600px)}
}

@media(max-width:900px){
  .skeletal .sub-hero-media{
    height:auto!important;
    min-height:0;
    padding:18px 22px 28px;
  }
  .skeletal .hero-portrait{
    width:min(86vw,520px);
    height:auto;
    aspect-ratio:630/678;
    border-radius:24px clamp(90px,24vw,170px) 24px clamp(90px,24vw,170px);
  }
  .skeletal .hero-portrait img{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    object-position:50% 28%;
  }
}