/* nikai-standard — The NIKAI™ Standard (brief/nikai-standard.md)
   Pattern C: nested in science-index's main column — NO .container, no own padding/margin (D-NS-1).
   Mobile-first: base = mobile (390 anchor), 768–1023 pseudo-tablet, 1024+ desktop (vw-base 1920).
   Δ = (var(--max-vw) - 390px) * 0.015 · T = (var(--max-vw) - 768px) * 0.025 · s = var(--max-vw) / var(--vw-base) */

/* ============ MOBILE (base) ============ */
.nikai-standard {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 40px);
  color: var(--color-graphite);
}

.nikai-standard p,
.nikai-standard h2,
.nikai-standard h3,
.nikai-standard h4,
.nikai-standard ol {
  margin: 0;
}

/* ---- head ---- */
.nikai-standard__head {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
}
.nikai-standard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.nikai-standard__lead,
.nikai-standard__p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}

/* ---- visual: lockup → softgel → diagram ---- */
.nikai-standard__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  padding-bottom: clamp(21px, calc(25.86px + (var(--max-vw) - 390px) * 0.015), 87.62px); /* D-NS-8 */
}
.nikai-standard__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, calc(7px + (var(--max-vw) - 390px) * 0.015), 7px);
  color: var(--color-ink);
  text-align: center;
}
.nikai-standard__lockup-text {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px); /* 16 on both layers (D-NS-6) */
  line-height: 1.32;
  letter-spacing: 0;
  white-space: nowrap;
}
.nikai-standard__logo {
  display: block;
  width: 175.89px;
  height: auto;
}
.nikai-standard__softgel {
  display: block;
  width: clamp(76px, calc(92.76px + (var(--max-vw) - 390px) * 0.015), 140.25px);
  height: auto;
  aspect-ratio: 2 / 3;
}
.nikai-standard__diagram {
  position: relative;
  width: 91.06%;               /* 326 / 358 */
  aspect-ratio: 2 / 1;
  container-type: inline-size; /* labels' type may not outgrow the drawing (below) */
}
.nikai-standard__arc {
  display: block;
  width: 100%;
  height: auto;
}
.nikai-standard__label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  /* h4 token, but never larger than the drawn label:arc ratio (24 / 326 = 7.3626cqi) — at 390 / 768+ this
     is exactly the token; below 390 the % label boxes shrink faster than the h4 clamp and "01 / Studied"
     would break to 3 lines and run off the arc */
  font-size: min(var(--text-h4), 7.3626cqi);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-ink);
  text-align: center;
}
/* mobile label geometry (% of the 326 x 163 box) — also used on the tablet band (D-NS-7) */
.nikai-standard__label--1 { left: 5.21%;  top: 65.33%; width: 34.97%; }
.nikai-standard__label--2 { left: 30.67%; top: 10.72%; width: 38.34%; }
.nikai-standard__label--3 { left: 50.92%; top: 65.34%; width: 42.64%; }

/* ---- text column ---- */
.nikai-standard__text {
  display: flex;
  flex-direction: column;
  gap: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 40px);
}
.nikai-standard__why,
.nikai-standard__closing {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
}
.nikai-standard__subtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
.nikai-standard__parts {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  list-style: none;
  padding: 0;
}
.nikai-standard__part {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);
}
.nikai-standard__part-title {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}

/* ---- "Read the full standard →" (Action/Button text variant) ---- */
.nikai-standard__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: 2px;
  padding-inline: 0;
  background: none;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
}
.nikai-standard__more-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px); /* 16 on both layers (D-NS-6) */
  line-height: 1.32;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}
.nikai-standard__more-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---- stats: 4 drawer-trigger cells (D-NS-3 / D-NS-9) ---- */
.nikai-standard__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(17px, calc(20px + (var(--max-vw) - 390px) * 0.015), 32px);
  row-gap: clamp(17px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  align-items: start;
  color: var(--color-coal);
}
.nikai-standard__stat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.nikai-standard__stat-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
}
.nikai-standard__stat-figure {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 38px);
  line-height: 1.22;
  letter-spacing: -0.0045em;
}
.nikai-standard__stat-icon {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
}
.nikai-standard__stat-caption {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ============ PSEUDO-TABLET (768–1023) ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .nikai-standard { gap: clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 40px); }
  .nikai-standard__head { gap: 24px; }
  .nikai-standard__visual {
    gap: 16px;
    padding-bottom: clamp(31.52px, calc(31.52px + (var(--max-vw) - 768px) * 0.025), 87.62px);
  }
  .nikai-standard__lockup { gap: 7px; }
  .nikai-standard__lockup-text { font-size: 16px; }
  .nikai-standard__softgel { width: clamp(98.42px, calc(98.42px + (var(--max-vw) - 768px) * 0.025), 140.25px); }
  .nikai-standard__diagram { width: 68.57%; }   /* desktop proportion; mobile label table kept (D-NS-7) */
  .nikai-standard__text { gap: 40px; }
  .nikai-standard__why,
  .nikai-standard__closing { gap: 16px; }
  .nikai-standard__parts { gap: 24px; }
  .nikai-standard__part { gap: 8px; }
  .nikai-standard__more-label { font-size: 16px; }
  .nikai-standard__stats {
    column-gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    row-gap: 20px;
  }
  .nikai-standard__stat { gap: 12px; }
  .nikai-standard__stat-row { gap: 12px; }
  .nikai-standard__stat-figure { font-size: clamp(27.66px, calc(27.66px + (var(--max-vw) - 768px) * 0.025), 38px); }
}

/* ============ DESKTOP (1024+) ============ */
@media (min-width: 1024px) {
  .nikai-standard { gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px); }
  .nikai-standard__head { gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px); }
  .nikai-standard__visual {
    gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
    padding-bottom: clamp(47px, calc(87.62px * (var(--max-vw) / var(--vw-base))), 87.62px);
  }
  .nikai-standard__lockup { gap: clamp(4px, calc(7px * (var(--max-vw) / var(--vw-base))), 7px); }
  .nikai-standard__lockup-text { font-size: var(--text-body); }
  .nikai-standard__logo { width: clamp(94px, calc(175.89px * (var(--max-vw) / var(--vw-base))), 175.89px); }
  .nikai-standard__softgel { width: clamp(75px, calc(140.25px * (var(--max-vw) / var(--vw-base))), 140.25px); }
  .nikai-standard__diagram { width: 68.57%; }   /* 720 / 1050 */
  /* desktop label geometry (% of the 720 x 360 box) — one line each, label 01 left-aligned */
  .nikai-standard__label--1 { left: 6.94%;  top: 60.37%; width: 32.78%; text-align: left; }
  .nikai-standard__label--2 { left: 32.36%; top: 10.09%; width: 35.28%; }
  .nikai-standard__label--3 { left: 58.33%; top: 60.37%; width: 35%; }

  .nikai-standard__text { gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px); }
  .nikai-standard__why,
  .nikai-standard__closing { gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px); }
  .nikai-standard__parts { gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px); }
  .nikai-standard__part { gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px); }

  .nikai-standard__more {
    gap: clamp(3px, calc(5px * (var(--max-vw) / var(--vw-base))), 5px);
    padding-block: clamp(1px, calc(2px * (var(--max-vw) / var(--vw-base))), 2px);
  }
  .nikai-standard__more-label { font-size: var(--text-body); }
  .nikai-standard__more-icon {
    width: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    height: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  }

  .nikai-standard__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    row-gap: 0;
    padding-block: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
  }
  .nikai-standard__stat { gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px); }
  .nikai-standard__stat-row { gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px); }
  .nikai-standard__stat-figure {
    font-size: clamp(20px, calc(38px * (var(--max-vw) / var(--vw-base))), 38px); /* unstyled in Figma: 38 / 41.8 / −0.6px */
    line-height: 1.1;
    letter-spacing: -0.0158em;
  }
  .nikai-standard__stat-icon {
    width: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    height: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
  }
}