/* Hallmark · macrostructure: narrative sequence · tone: quiet editorial · anchor hue: Inkive clay · studied: yes · DNA-source: public reference https://www.thinkwithmark.com/ */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
@import url("tokens.css");

/* Shared foundation for the current home and guide pages. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
::selection { background: var(--tint-honey); color: var(--color-ink); }
.skip-link { position: absolute; top: var(--space-md); left: var(--space-md); z-index: var(--z-skip); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-ink); font: 700 var(--text-sm) / 1 var(--font-label); transform: translateY(-200%); transition: transform var(--dur-short) var(--ease-out); }
.skip-link:focus-visible { transform: translateY(0); }

.story-page { background: var(--color-paper); color: var(--color-ink); }
.story-page:lang(en) { font-family: var(--font-body-en); }
.story-page h1, .story-page h2 { font-family: var(--font-display); font-weight: 500; font-style: normal; line-height: 1.12; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.story-page:lang(zh-CN) h1, .story-page:lang(zh-CN) h2 { text-wrap: balance; overflow-wrap: normal; }
.story-page:lang(en) h1, .story-page:lang(en) h2 { font-family: var(--font-display-en); }
.story-page a { transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.story-page a:focus-visible, .story-page summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.story-kicker { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); }

.story-nav { position: relative; z-index: var(--z-raised); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 78px; padding: var(--space-xs) var(--page-gutter); background: var(--color-paper); color: var(--color-ink); border-bottom: var(--rule-fine) solid var(--color-rule-strong); }
.story-nav__brand { flex: none; color: var(--color-ink); font-family: var(--font-display-en); font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-tight); }
.story-nav nav, .story-nav__end { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.6rem); }
.story-nav nav a, .story-nav__language, .story-nav__cta { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.story-nav nav a:hover, .story-nav__language:hover { color: var(--color-accent-press); }
.story-nav__cta { padding: var(--space-sm) var(--space-md); border: var(--rule-fine) solid var(--color-accent-press); }
.story-nav__cta:hover { background: var(--color-accent-press); color: var(--color-paper); }
.story-nav__mobile { display: none; position: relative; font-size: var(--text-sm); }
.story-nav__mobile summary { list-style: none; cursor: pointer; white-space: nowrap; }
.story-nav__mobile summary::-webkit-details-marker { display: none; }
.story-nav__mobile summary::after { content: "⌄"; padding-left: var(--space-xs); }
.story-nav__mobile > div { position: absolute; right: 0; top: calc(100% + 1.3rem); display: grid; min-width: 170px; padding: var(--space-sm); background: var(--color-paper); border: var(--rule-fine) solid var(--color-rule-strong); box-shadow: var(--shadow-float); }
.story-nav__mobile > div a { padding: var(--space-sm); white-space: nowrap; }

.story-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: min(820px, calc(100svh - 78px)); padding: clamp(4rem, 8vw, 8rem) var(--page-gutter); background: var(--color-paper-2); color: var(--color-ink); overflow: hidden; }
.story-hero__copy { position: relative; z-index: 1; max-width: 760px; }
.story-hero .story-kicker { color: var(--color-accent-press); }
.story-hero h1 { max-width: 11ch; margin-top: var(--space-xl); font-size: clamp(3.2rem, 6.7vw, 7.3rem); }
.story-page:lang(en) .story-hero h1 { max-width: 12ch; font-size: clamp(3.7rem, 6.7vw, 7.3rem); }
.story-hero__lede { max-width: 35ch; margin-top: var(--space-xl); color: var(--color-ink-2); font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.75; }
.story-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.story-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.story-button:hover { background: var(--color-accent-press); transform: translateY(-2px); }
.story-button:active { transform: translateY(0); }
.story-hero__store { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.story-hero__store:hover { color: var(--color-accent-press); }
.story-hero__art { min-width: 0; }
.story-hero__screens { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 1.7vw, 1.6rem); }
.story-hero__screens .shot { width: min(46%, 255px); }
.story-hero__screens .shot:first-child { transform: translateY(2.2rem); }
.story-hero__screens .shot img { width: 100%; filter: drop-shadow(0 24px 35px var(--color-product-shadow)); }
.story-hero__screens .shot figcaption { display: none; }
.story-hero__art > p { margin-top: var(--space-2xl); color: var(--color-muted); font-size: var(--text-xs); text-align: center; }

.story-thesis { padding: clamp(6rem, 12vw, 11rem) var(--page-gutter); background: var(--color-paper); }
.story-thesis__inner { max-width: 970px; margin: 0 auto; text-align: center; }
.story-thesis .story-kicker { margin-bottom: var(--space-xl); color: var(--color-accent-press); }
.story-thesis h2 { font-size: clamp(2.6rem, 5.5vw, 5.8rem); }
.story-thesis__inner > p:last-child { max-width: 48ch; margin: var(--space-xl) auto 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.85; }

.story-journey { background: var(--color-paper-2); }
.story-journey__caption { padding: var(--space-lg) var(--page-gutter); border-block: var(--rule-fine) solid var(--color-rule-strong); color: var(--color-muted); font-size: var(--text-xs); }
.story-scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(3rem, 6vw, 8rem); min-height: 660px; padding: clamp(5rem, 8vw, 8rem) max(var(--page-gutter), calc((100vw - 1440px) / 2)); border-bottom: var(--rule-fine) solid var(--color-rule-strong); }
.story-scene:nth-of-type(even) { background: var(--color-paper); }
.story-scene:nth-of-type(even) .story-scene__copy { order: 2; }
.story-scene:nth-of-type(even) .story-scene__media { order: 1; }
.story-scene__copy { min-width: 0; max-width: 520px; }
.story-scene__label { margin-bottom: var(--space-xl); color: var(--color-accent-press); font-size: var(--text-sm); font-weight: 700; }
.story-scene h2 { max-width: 14ch; font-size: clamp(2.7rem, 4.5vw, 5rem); }
.story-scene__copy > p:last-child { max-width: 37ch; margin-top: var(--space-xl); font-size: clamp(1.04rem, 1.3vw, 1.18rem); line-height: 1.8; }
.story-scene__media { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 2rem); min-width: 0; }
.story-scene__media .shot { width: min(43%, 260px); min-width: 0; }
.story-scene__media .shot:nth-child(2) { transform: translateY(3rem); }
.story-scene__media img { width: 100%; filter: drop-shadow(0 20px 28px var(--color-product-shadow)); }
.story-scene__media figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }

.story-details { padding: clamp(5rem, 9vw, 9rem) var(--page-gutter); background: var(--color-paper); }
.story-details__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: end; gap: var(--space-2xl); max-width: var(--page-max); margin: 0 auto; }
.story-details h2 { max-width: 12ch; font-size: clamp(2.5rem, 4.7vw, 5rem); }
.story-details__heading > p { max-width: 35ch; line-height: 1.75; }
.story-details__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); max-width: var(--page-max); margin: var(--space-3xl) auto 0; }
.story-details article { padding-top: var(--space-lg); border-top: 2px solid var(--color-accent); }
.story-details h3 { font-size: var(--text-lg); }
.story-details article p { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.75; }
.story-details__note { max-width: var(--page-max); margin: var(--space-3xl) auto 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.6; }

.story-close { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: var(--space-3xl) var(--page-gutter); background: var(--color-paper-deep); color: var(--color-ink); text-align: center; }
.story-close > div { max-width: 800px; }
.story-close .story-kicker { color: var(--color-accent-press); }
.story-close h2 { margin-top: var(--space-lg); font-size: clamp(3rem, 6vw, 6.5rem); }
.story-close p:not(.story-kicker) { max-width: 41ch; margin: var(--space-lg) auto var(--space-xl); color: var(--color-ink-2); line-height: 1.75; }
.story-close .story-button { margin-top: var(--space-sm); }
.release-footer { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--page-gutter); background: var(--color-paper-2); border-top: var(--rule-fine) solid var(--color-rule-strong); font-size: var(--text-xs); }
.release-footer > div { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.release-footer a { white-space: nowrap; }
.release-footer a:hover { color: var(--color-accent-press); }

@media (max-width: 1080px) {
  .story-nav nav { display: none; }
  .story-nav__mobile { display: block; }
}
@media (max-width: 820px) {
  .story-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .story-hero h1 { max-width: 14ch; }
  .story-hero__art { max-width: 670px; margin: 0 auto; }
  .story-scene { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .story-scene:nth-of-type(even) .story-scene__copy, .story-scene:nth-of-type(even) .story-scene__media { order: initial; }
  .story-scene__media { max-width: 660px; }
  .story-details__heading { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .story-nav { min-height: 66px; }
  .story-nav__brand { font-size: var(--text-xl); }
  .story-nav__end { gap: var(--space-md); }
  .story-nav__cta { display: none; }
  .story-hero { gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .story-hero h1, .story-page:lang(en) .story-hero h1 { font-size: clamp(3.2rem, 12vw, 4.5rem); }
  .story-hero__lede { margin-top: var(--space-lg); }
  .story-thesis { padding-block: var(--space-3xl); }
  .story-scene { gap: var(--space-2xl); padding-block: var(--space-3xl); }
  .story-scene h2 { font-size: clamp(2.7rem, 9vw, 3.8rem); }
  .story-scene__media { gap: var(--space-sm); }
  .story-scene__media .shot { width: 47%; }
  .story-scene__media .shot:nth-child(2) { transform: translateY(var(--space-lg)); }
  .story-details__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
  .story-details__note { margin-top: var(--space-2xl); }
  .story-close { min-height: 500px; }
  .release-footer { display: block; }
  .release-footer > div { margin-top: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .story-page a { transition-duration: var(--dur-micro); }
  .story-button:hover { transform: none; }
}