/* The desktop JPEGs were cropped below the printed sample navigation. The real
   shared site header remains above this board at every viewport size. */
.cn-story-v3 { display: none; }
.brand-story-lead > .brand-mission-text { margin: 0; max-width: 84%; color: var(--story-gold); font-size: clamp(18px, 1.65vw, 41px); font-weight: 500; line-height: 1.7; letter-spacing: .055em; text-wrap: balance; }
@media (max-width: 767px) { .brand-story-lead > .brand-mission-text { max-width: 100%; font-size: 18px; line-height: 1.8; letter-spacing: .025em; } }
.cn-story-v3[data-view="reader"] .cn-story-mission-text { color: var(--accent); }
html:not(:lang(en)) .brand-story:has(.cn-story-v3)::before,
html:not(:lang(en)) .brand-story > .cn-story-v3 ~ .brand-story-hero,
html:not(:lang(en)) .brand-story > .cn-story-v3 ~ .brand-story-content { display: none; }
html:not(:lang(en)) .cn-story-v3 {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: clip;
  background-image: var(--board);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.cn-story-v3 section, .cn-story-v3 p { margin: 0; padding: 0; border: 0; }
.cn-story-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cn-story-target {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  left: var(--desktop-x);
  top: var(--desktop-y);
  width: var(--desktop-w);
  height: var(--desktop-h);
  border-radius: .25em;
}
.cn-story-target::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
}
.cn-story-target:focus-visible { outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 0 5px #25413d; }
.cn-story-target:hover { background: #fff2; }
.cn-story-target[data-cn-story-link="draw"] { border-radius: 999px; }
.cn-story-mode-dock {
  position: sticky;
  height: 0;
  z-index: 3;
  top: .5rem;
}
.cn-story-mode {
  position: absolute;
  top: clamp(10px, 1.3vw, 22px);
  right: clamp(10px, 2vw, 36px);
  padding: .5rem .95rem;
  min-height: 44px;
  font: 600 .9375rem/1.4 system-ui, sans-serif;
  color: #fff;
  background: #14232de8;
  border: 1px solid #fff9;
  border-radius: 999px;
  cursor: pointer;
}
.cn-story-mode[hidden], .cn-story-reading-hero { display: none; }
.cn-story-mode:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.cn-story-v3[data-cn-story-v3="free"] {
  aspect-ratio: 2560 / 4705;
  --board-width: 2560;
  --board-height: 4705;
  --ground: #08283c;
  --panel: #0b3145;
  --accent: #f6d6a4;
  --sun-x: 31.5%;
  --sun-y: 15.51%;
  --correction: url("free-desktop-copy.png");
  --board: image-set(url("free-story-desktop-1440.webp") 1x, url("free-story-desktop-2560.webp") 1.5x);
  --cloud-mask: radial-gradient(ellipse 14% 3% at 73% 5%, black 10%, transparent 100%);
}
.cn-story-v3[data-cn-story-v3="heart"] {
  aspect-ratio: 2560 / 4847;
  --board-width: 2560;
  --board-height: 4847;
  --ground: #31221d;
  --panel: #422f25;
  --accent: #ffde92;
  --sun-x: 29.75%;
  --sun-y: 12.29%;
  --correction: url("heart-desktop-copy.png");
  --board: image-set(url("heart-story-desktop-1440.webp") 1x, url("heart-story-desktop-2560.webp") 1.5x);
  --cloud-mask: radial-gradient(ellipse 11% 2% at 76% 3%, black 10%, transparent 100%);
}
@media (min-width: 1441px) {
  .cn-story-v3[data-cn-story-v3="free"] { --board: url("free-story-desktop-2560.webp"); }
  .cn-story-v3[data-cn-story-v3="heart"] { --board: url("heart-story-desktop-2560.webp"); }
}
@media (max-width: 767px) {
  .cn-story-v3[data-cn-story-v3="free"] {
    aspect-ratio: 1440 / 6058;
    --board-width: 1440;
    --board-height: 6058;
    --sun-x: 55.25%;
    --sun-y: 13.61%;
    --correction: url("free-mobile-copy.png");
    --board: image-set(url("free-story-mobile-800.webp") 1x, url("free-story-mobile-1440.webp") 2x);
    --cloud-mask: radial-gradient(ellipse 13% 1.6% at 81% 11%, black 10%, transparent 100%);
  }
  .cn-story-v3[data-cn-story-v3="heart"] {
    aspect-ratio: 1440 / 6112;
    --board-width: 1440;
    --board-height: 6112;
    --sun-x: 55%;
    --sun-y: 13.02%;
    --correction: url("heart-mobile-copy.png");
    --board: image-set(url("heart-story-mobile-800.webp") 1x, url("heart-story-mobile-1440.webp") 2x);
    --cloud-mask: radial-gradient(ellipse 12% 1.5% at 86% 9%, black 10%, transparent 100%);
  }
  .cn-story-target { left: var(--mobile-x); top: var(--mobile-y); width: var(--mobile-w); height: var(--mobile-h); }
}
.cn-story-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: var(--board-width) / var(--board-height);
  overflow: hidden;
  pointer-events: none;
}
.cn-story-correction {
  position: absolute;
  pointer-events: none;
  left: calc(100% * 638 / 2560);
  top: calc(100% * 1778 / var(--board-height));
  width: calc(100% * 481 / 2560);
  aspect-ratio: 481 / 37;
  background: var(--correction) 0 0 / 100% 100% no-repeat;
}
@media (max-width: 767px) {
  .cn-story-correction {
    left: calc(100% * 401 / 1440);
    top: calc(100% * 2508 / var(--board-height));
    width: calc(100% * 592 / 1440);
    aspect-ratio: 592 / 46;
  }
}
/* A mask confines drift to open sky. Lettering, portraits and interactive
   areas are never animated. JS enables motion only after checking preferences. */
.cn-story-weather {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mask-image: var(--cloud-mask);
}
.cn-story-v3[data-motion] .cn-story-weather::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--board) 0 0 / 100% 100% no-repeat;
  animation: cn-story-cloud 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.cn-story-v3[data-motion="playing"] .cn-story-weather::before { animation-play-state: running; }
.cn-story-sun {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: 9%;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9cd 0, #ffda7e90 14%, #ffc67540 34%, transparent 68%);
  mix-blend-mode: screen;
}
.cn-story-v3[data-motion] .cn-story-sun {
  animation: cn-story-sun 5s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.cn-story-v3[data-motion="playing"] .cn-story-sun { animation-play-state: running; }
@keyframes cn-story-sun {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to { opacity: .35; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes cn-story-cloud { to { transform: translateX(1.2%); } }
html:lang(en) .cn-story-toggle,
html:not(:lang(en)) .story-atmosphere-toggle:not(.cn-story-toggle),
.cn-story-toggle[hidden] { display: none !important; }

/* The reading view uses flowing native headings, paragraphs and anchors.
   Only the illustrated hero is a background. Browser zoom and text selection
   work throughout the mission and story, including links inside sentences. */
html:not(:lang(en)) .cn-story-v3[data-view="reader"] {
  aspect-ratio: auto;
  background: var(--ground);
  color: #fff9ee;
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}
.cn-story-v3[data-view="reader"] .cn-story-reading-hero {
  display: block;
  aspect-ratio: 2560 / 1090;
  background: var(--board) center top / 100% auto no-repeat;
}
.cn-story-v3[data-view="reader"] .cn-story-sky { clip-path: inset(0 0 77%); }
.cn-story-v3[data-view="reader"] .cn-story-correction { display: none; }
.cn-story-v3[data-view="reader"] section {
  box-sizing: border-box;
  width: min(88%, 1060px);
  margin: clamp(1.75rem, 4vw, 3.75rem) auto 0;
  padding: clamp(1.25rem, 4vw, 4rem);
  background: var(--panel);
  border: 1px solid #e8d9bd85;
  border-radius: clamp(14px, 2vw, 28px);
}
.cn-story-v3[data-view="reader"] section .cn-story-reader,
.cn-story-v3[data-view="reader"] .cn-story-target .cn-story-reader {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  margin: 0;
  clip-path: none;
  white-space: normal;
}
.cn-story-v3[data-view="reader"] section h2 {
  margin: 0 0 .8em;
  font: 600 clamp(1.875rem, 3.6vw, 3.4rem)/1.25 "Noto Serif TC", "PMingLiU", serif;
  color: #fff9e9;
  text-align: center;
}
.cn-story-v3[data-view="reader"] section p {
  margin: .95em auto 0;
  max-width: 39em;
  font: 400 clamp(1.05rem, 1.45vw, 1.32rem)/1.85 "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: .025em;
  text-align: start;
  user-select: text;
  overflow-wrap: anywhere;
}
.cn-story-v3[data-view="reader"] section p:first-of-type { margin: .75em auto 1.4em; text-align: center; font-weight: 700; }
.cn-story-v3[data-view="reader"] .cn-story-target {
  position: static;
  width: auto;
  height: auto;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}
.cn-story-v3[data-view="reader"] .cn-story-target::after { content: none; }
.cn-story-v3[data-view="reader"] [data-cn-story-link^="card"],
.cn-story-v3[data-view="reader"] [data-cn-story-link^="founder"] { white-space: nowrap; }
.cn-story-v3[data-view="reader"] [data-cn-story-link="draw"] {
  display: block;
  margin: 2rem auto 0;
  width: fit-content;
  padding: .8em 2.5em;
  color: #10252c;
  background: var(--accent);
  font: 700 1.2rem/1.4 system-ui, sans-serif;
  text-decoration: none;
}
@media (max-width: 767px) {
  .cn-story-v3[data-view="reader"] .cn-story-reading-hero { aspect-ratio: 1440 / 1675; }
  .cn-story-v3[data-view="reader"] .cn-story-sky { clip-path: inset(0 0 73%); }
  .cn-story-v3[data-view="reader"] section { width: calc(100% - 24px); padding: 1.375rem 1rem; }
  .cn-story-v3[data-view="reader"] .cn-story-mode-dock {
    height: 52px;
    top: 0;
    background: var(--ground);
    border-bottom: 1px solid #fff3;
  }
  .cn-story-v3[data-view="reader"] .cn-story-mode { top: 4px; }
  html:not(:lang(en)) body:has(.cn-story-v3[data-view="reader"]) .soul-social-dock {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 1rem auto;
  }
  html:not(:lang(en)) body:has(.cn-story-v3[data-view="reader"]) .soul-social-link { margin-top: 0; }
  html:not(:lang(en)) body:has(.cn-story-v3[data-view="reader"]) :is(.cn-story-toggle, .background-music-toggle) {
    position: static;
    margin: .5rem;
  }
  .brand-story-page .cn-story-toggle { width: 44px; padding: 0; }
  .cn-story-toggle span:last-child { display: none; }
}