/* iPhone 18 Pro story — dark tokens, WCAG-safe on #1c1c1e / #000 */
.ks18-story {
  --ks18-bg: #000;
  --ks18-card: #1c1c1e;
  /* primary ~#f5f5f7 on #1c1c1e ≈ 14:1; body #e8e8ed ≈ 12:1; secondary #c7c7cc ≈ 9:1; muted #aeaeb2 ≈ 7:1 */
  --ks18-text-primary: #f5f5f7;
  --ks18-text-body: #e8e8ed;
  --ks18-text-secondary: #c7c7cc;
  --ks18-text-muted: #aeaeb2;
  --ks18-line: rgba(255, 255, 255, 0.18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  background: var(--ks18-bg);
  color: var(--ks18-text-primary);
  margin: 28px 0 0;
  padding: 56px 0 72px;
  border-radius: 28px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.ks18-story *,
.ks18-story *::before,
.ks18-story *::after { box-sizing: border-box; }

/*
 * FULL contrast fix: parent .ks-upcoming sets p/h2 to gray (#667085).
 * Force every text level inside the dark story — no opacity that kills readability.
 */
.ks-upcoming .ks18-story,
.ks-upcoming.ks18-ml .ks18-story {
  color: var(--ks18-text-primary) !important;
}
.ks-upcoming .ks18-story :where(p, li, dd, dt, span, label, figcaption),
.ks-upcoming.ks18-ml .ks18-story :where(p, li, dd, dt, span, label, figcaption) {
  color: var(--ks18-text-body) !important;
}
.ks-upcoming .ks18-story :where(h2, h3, h4, strong, b),
.ks-upcoming.ks18-ml .ks18-story :where(h2, h3, h4, strong, b) {
  color: var(--ks18-text-primary) !important;
}
.ks-upcoming .ks18-story .ks18-kicker,
.ks-upcoming .ks18-story .ks18-small,
.ks-upcoming .ks18-story .ks18-row dt {
  color: var(--ks18-text-muted) !important;
}
.ks-upcoming .ks18-story .ks18-lead,
.ks-upcoming .ks18-story .ks18-note,
.ks-upcoming .ks18-story .ks18-ap-copy,
.ks-upcoming .ks18-story .ks18-hi p,
.ks-upcoming .ks18-story .ks18-cams p,
.ks-upcoming .ks18-story .ks18-size span,
.ks-upcoming .ks18-story .ks18-chip-label,
.ks-upcoming .ks18-story .ks18-row dd {
  color: var(--ks18-text-secondary) !important;
}
.ks-upcoming .ks18-story .ks18-cams h4,
.ks-upcoming .ks18-story .ks18-col h4,
.ks-upcoming .ks18-story .ks18-panel h3,
.ks-upcoming .ks18-story .ks18-panel h4,
.ks-upcoming .ks18-story .ks18-hi h3,
.ks-upcoming .ks18-story .ks18-color-name,
.ks-upcoming .ks18-story .ks18-size strong {
  color: var(--ks18-text-primary) !important;
}
.ks18-wrap {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}
.ks18-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--ks18-text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.ks18-story h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ks18-text-primary);
}
.ks18-lead,
.ks-upcoming .ks18-story p.ks18-lead {
  max-width: 38em;
  margin: 0 0 36px;
  color: var(--ks18-text-secondary);
  font-size: 19px;
  line-height: 1.4;
}
.ks18-story a { color: #64b5ff; }
.ks18-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 980px;
  background: #0071e3;
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 140ms var(--ease-out), background 140ms var(--ease-out);
}
.ks18-cta:active { transform: scale(0.97); }
.ks18-cta--ghost {
  background: rgba(255, 255, 255, 0.12);
}
.ks18-story button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ks18-hi {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 18px;
  margin: 0 0 48px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.ks18-hi article {
  flex: 0 0 min(78vw, 280px);
  scroll-snap-align: start;
  min-height: 200px;
  padding: 22px 20px;
  border-radius: 22px;
  background: var(--ks18-card);
}
.ks18-hi h3 {
  margin: 0 0 8px;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--ks18-text-primary) !important;
}
.ks18-hi p,
.ks-upcoming .ks18-story .ks18-hi p {
  margin: 0;
  color: var(--ks18-text-secondary) !important;
  font-size: 15px;
  line-height: 1.45;
}

.ks18-panel {
  margin: 0 0 20px;
  padding: 28px 24px 32px;
  border-radius: 28px;
  background: var(--ks18-card);
}
.ks18-panel h3 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ks18-text-primary) !important;
}
.ks18-panel h4,
.ks18-col h4,
.ks18-cams h4 {
  color: var(--ks18-text-primary) !important;
}
.ks18-note,
.ks-upcoming .ks18-story p.ks18-note {
  margin: 0 0 22px;
  color: var(--ks18-text-secondary) !important;
  font-size: 16px;
  line-height: 1.45;
}

.ks18-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  position: relative;
}
.ks18-chip-label { color: var(--ks18-text-secondary) !important; font-size: 14px; }
.ks18-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 980px;
  background: rgba(255,255,255,.08);
  color: var(--ks18-text-primary);
  cursor: pointer;
}
.ks18-chip::after { content: " ▾"; opacity: .7; }
.ks18-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  margin: 0;
  padding: 8px;
  list-style: none;
  min-width: 180px;
  border-radius: 16px;
  background: #2c2c2e;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  color: var(--ks18-text-primary);
}
.ks18-chip-menu li {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ks18-chip-menu li[aria-selected="true"],
.ks18-chip-menu li:hover { background: rgba(255,255,255,.1); }
.ks18-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ks18-col {
  padding: 18px 16px 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}
.ks18-col h4 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.ks18-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--ks18-line);
  font-size: 14px;
}
.ks18-row dt {
  margin: 0;
  color: var(--ks18-text-muted) !important;
}
.ks18-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--ks18-text-secondary) !important;
}
.ks18-win dd { color: #30d158 !important; }

.ks18-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: min(72vw, 520px);
  margin: 8px 0 22px;
  border-radius: 22px;
  overflow: hidden;
  background: #0b0b0d;
}
.ks18-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), filter 200ms var(--ease-out);
  pointer-events: none;
}
.ks18-stage img.is-on {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ks18-color-name {
  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ks18-text-primary) !important;
}
.ks18-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.ks18-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 160ms ease;
}
.ks18-dot[aria-pressed="true"] {
  border-color: #fff;
  transform: scale(1.06);
}
.ks18-dot:active { transform: scale(0.97); }

.ks18-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ks18-size {
  display: block;
  padding: 22px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit !important;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms ease;
}
.ks18-size:active { transform: scale(0.97); }
.ks18-size strong {
  display: block;
  font-size: 28px;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: var(--ks18-text-primary) !important;
}
.ks18-size span { color: var(--ks18-text-secondary) !important; font-size: 15px; }
.ks18-size.is-here { box-shadow: inset 0 0 0 2px #fff; }

.ks18-cams {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
}
.ks18-cams article {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  min-height: 100%;
}
.ks18-cams h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ks18-text-primary) !important;
}
.ks18-cams p,
.ks-upcoming .ks18-story .ks18-cams p {
  margin: 0;
  color: var(--ks18-text-secondary) !important;
  font-size: 14px;
  line-height: 1.45;
}

.ks18-ap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.ks18-ap-tabs button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ks18-text-primary);
  cursor: pointer;
  transition: background 160ms ease, transform 140ms var(--ease-out);
}
.ks18-ap-tabs button[aria-selected="true"] { background: #fff; color: #1d1d1f; }
.ks18-ap-tabs button:active { transform: scale(0.97); }
.ks18-dof {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 380px;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 40%, #3a2a22, #12110f 62%);
}
.ks18-dof-bg,
.ks18-dof-mid,
.ks18-dof-fg {
  position: absolute;
  border-radius: 50%;
  transition: filter 280ms var(--ease-in-out), transform 280ms var(--ease-in-out);
}
.ks18-dof-bg {
  inset: 8% 6% auto auto;
  width: 42%;
  height: 48%;
  background: #6b5344;
}
.ks18-dof-mid {
  left: 38%;
  top: 28%;
  width: 28%;
  height: 38%;
  background: linear-gradient(180deg, #f2d2b6, #c48a6a);
}
.ks18-dof-fg {
  left: 8%;
  bottom: 10%;
  width: 22%;
  height: 22%;
  background: #d7b08c;
}
.ks18-dof[data-f="1.48"] .ks18-dof-bg { filter: blur(18px); }
.ks18-dof[data-f="1.48"] .ks18-dof-fg { filter: blur(10px); }
.ks18-dof[data-f="1.8"] .ks18-dof-bg { filter: blur(11px); }
.ks18-dof[data-f="1.8"] .ks18-dof-fg { filter: blur(6px); }
.ks18-dof[data-f="2.8"] .ks18-dof-bg { filter: blur(5px); }
.ks18-dof[data-f="2.8"] .ks18-dof-fg { filter: blur(2px); }
.ks18-dof[data-f="4.0"] .ks18-dof-bg,
.ks18-dof[data-f="4.0"] .ks18-dof-fg { filter: blur(0); }
.ks18-ap-copy,
.ks-upcoming .ks18-story p.ks18-ap-copy {
  margin: 14px 0 0;
  color: var(--ks18-text-secondary) !important;
  font-size: 15px;
  min-height: 3.2em;
}

.ks18-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ks18-small,
.ks-upcoming .ks18-story p.ks18-small {
  margin: 18px 0 0;
  color: var(--ks18-text-muted) !important;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 734px) {
  .ks18-story { border-radius: 0; margin-left: -16px; margin-right: -16px; padding-top: 40px; }
  .ks18-grid, .ks18-sizes, .ks18-cams { grid-template-columns: 1fr; }
  .ks18-lead { font-size: 17px; }
}
@media (hover: hover) and (pointer: fine) {
  .ks18-cta:hover { background: #147ce5; }
  .ks18-size:hover { background: rgba(255, 255, 255, 0.08); }
  .ks18-dot:hover { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ks18-story *, .ks18-story *::before, .ks18-story *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  .ks18-stage img { transform: none; }
  .ks18-dof-bg, .ks18-dof-mid, .ks18-dof-fg { filter: none !important; }
}