/* 样稿 2 腕上区 · 4px 步长，主表与静态表盘共用 1240px 版心。
   静态卡 → 标题系统字 20/25/600，小屏 17/22/600；正文 --c-muted。
   卡间距 → 16px，小屏 12px；小组件 → 同组间距 8px / 12px；四卡共享标题基线。
   动效 → 只在主表屏幕内轮播，减少动态时保留首页。 */
html[data-concept="stoic"] main > #wrist {
  display: grid;
  align-items: stretch;
  height: 100svh;
  min-height: 620px;
  padding: 84px clamp(40px, 6vw, 96px) 20px;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
#wrist .wrist-gallery {
  width: min(100%, 1240px);
  margin-inline: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 12px;
}
#wrist .wrist-feature, #wrist .wrist-tile {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-surface-subtle);
}
#wrist .wrist-feature {
  display: grid;
  grid-template-columns: 56% 44%;
  background: linear-gradient(110deg, var(--c-purple-50) 0%, var(--c-surface-subtle) 68%);
}
#wrist .wrist-feature-art { position: relative; overflow: hidden; container-type: size; }
#wrist .wrist-feature-rise { position: absolute; inset: 0; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  #wrist .wrist-feature-rise:not([data-rise-shown]) { visibility: hidden; }
}
#wrist .wrist-product {
  display: block;
  position: absolute;
  width: min(118cqw, 148cqh);
  height: auto;
  max-width: none;
  right: 3%;
  top: 4%;
}
#wrist .wrist-product > img { display: block; width: 100%; height: auto; }
/* The alpha mask and the original product photo share a 1315 × 1196 canvas.
   Composite every screen and transition through this one physical opening. */
#wrist .wrist-live-display {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url("wrist-gallery/glass-aperture.svg") center / 100% 100% no-repeat;
  mask: url("wrist-gallery/glass-aperture.svg") center / 100% 100% no-repeat;
}
#wrist .wrist-live-display iframe {
  position: absolute; left: 27.38%; top: 2.63%; border: 0;
  width: 228px; height: 247px; max-width: none; transform-origin: top left;
}
#wrist .wrist-live-display iframe:not([data-ready]) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  #wrist [data-page] .wrist-live-display { opacity: 1; }
}
#wrist .wrist-feature-copy { align-self: center; padding: 24px clamp(24px, 4vw, 80px) 32px 16px; }
#wrist h2, #wrist h3, #wrist p { margin: 0; }
html[data-concept="stoic"] main > #wrist h2 { font-size: clamp(38px, 4vw, 68px); line-height: 1.15; }
#wrist .wrist-feature-copy p { max-width: 23em; margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--c-muted); }
#wrist .wrist-cards { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; }
#wrist .wrist-cards:focus-visible { outline: 2px solid var(--c-purple-700); outline-offset: 2px; }
#wrist .wrist-tile { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
#wrist .wrist-widget-art {
  display: grid; place-items: center; container-type: size;
}
#wrist .wrist-widget-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
  /* Two 216px-wide columns, with original component heights of 100px and 108px. */
  width: min(calc(100cqw - 24px), calc((100cqh - 32px) * 432 / 208 + 12px));
}
#wrist .wrist-widget-grid img { display: block; width: 100%; height: auto; }
/* Transparent complications use the native black face from the watch preview. */
#wrist .wrist-widget-on-black {
  background: black;
  border-radius: 5.56% / 12%;
}
#wrist .wrist-tile-art { position: relative; display: grid; place-items: center; overflow: hidden; container-type: size; }
#wrist .wrist-tile-art > img {
  position: absolute;
  grid-area: 1 / 1;
  width: min(100cqw, calc(100cqh * 280 / 440), clamp(96px, 11vw, 144px));
  height: auto;
  aspect-ratio: 280 / 440;
}
#wrist .wrist-tile-copy { padding: 12px 20px 16px; }
#wrist .wrist-tile-copy h3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.025em; }
#wrist .wrist-tile-copy p { margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--c-muted); }
@media (min-width: 901px) and (max-aspect-ratio: 1/1) {
  #wrist .wrist-gallery { grid-template-rows: min(48svh, 60vw) minmax(0, 1fr); }

}
@media (max-width: 900px) {
  html[data-concept="stoic"] main > #wrist {
    min-height: 0; height: max(100svh, 550px); padding: 80px 24px 16px;
    /* The chapter provides clearance for the fixed navigation itself. */
    scroll-margin-top: -96px;
  }
  #wrist .wrist-gallery { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
  #wrist .wrist-cards {
    grid-template-columns: repeat(3, min(66%, 240px)) min(100%, 360px);
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--c-neutral-300) transparent;
  }
  #wrist .wrist-tile { scroll-snap-align: start; }
}
@media (max-width: 580px) {
  html[data-concept="stoic"] main > #wrist { padding-inline: 16px; padding-bottom: 12px; }
  #wrist .wrist-gallery { grid-template-rows: minmax(0, 2.15fr) minmax(0, 1fr); gap: 8px; }
  #wrist .wrist-feature { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  #wrist .wrist-feature-copy { padding: 12px 20px 20px; }
  html[data-concept="stoic"] main > #wrist h2 { font-size: 34px; }
  #wrist .wrist-feature-copy p { margin-top: 4px; font-size: 15px; line-height: 22px; }
  #wrist .wrist-cards { column-gap: 12px; }
  #wrist .wrist-tile-copy { padding: 8px 12px; }
  #wrist .wrist-tile-copy h3 { font-size: 17px; line-height: 22px; }
  #wrist .wrist-tile-copy p { font-size: 14px; line-height: 20px; }
}
@media (orientation: landscape) and (max-height: 619px) {
  html[data-concept="stoic"] main > #wrist { min-height: 0; height: 100svh; padding-block: 76px 8px; }
  #wrist .wrist-gallery { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
  #wrist .wrist-cards { grid-template-columns: repeat(3, minmax(240px, 1fr)) minmax(320px, 1.5fr); overflow-x: auto; }
  #wrist .wrist-tile-copy { padding: 4px 8px; }
  #wrist .wrist-tile-copy h3 { font-size: 17px; line-height: 22px; }
  #wrist .wrist-tile-copy p { font-size: 14px; line-height: 20px; }
  #wrist .wrist-feature-copy { padding-block: 12px; }
  #wrist .wrist-feature-copy p { margin-top: 8px; }
}

/* Portrait gallery · size the media before allocating remaining viewport
   space. The 152px track fits the existing 96px-wide, 280:440 watch. */
@media (max-width: 580px) and (orientation: portrait) {
  html[data-concept="stoic"] main > #wrist { height: auto; min-height: 100svh; }
  #wrist .wrist-gallery { grid-template-rows: 1fr auto; }
  #wrist .wrist-feature-art { min-height: min(80vw, 44svh); }
  #wrist .wrist-cards { grid-template-rows: 152px auto; }
}