/* Editorial chapter layout; homepage wallpaper lives in story-stage.css. */
.palace-story {

  --story-ink:#102e3c;
  --story-muted:#47616b;
  --story-paper:#f2f7f5;
  --story-line:#ccdadb;
  --story-accent:#096d83;
  background:var(--story-paper);
  color:var(--story-ink)

}

[data-theme="dark"] .palace-story {

  --story-ink:#edf5f2;
  --story-muted:#adc4cb;
  --story-paper:#0a1c26;
  --story-line:#29424c;
  --story-accent:#75d6df

}

.palace-story main {

  overflow:clip;
  background:radial-gradient(ellipse at 90% 5%,#64bdc61a,transparent 35%)

}

.palace-story em {

  font-style:normal;
  color:var(--story-accent)

}

.palace-story h1,
.palace-story h2 {

  color:var(--story-ink);
  font-weight:600;
  letter-spacing:-.065em;
  line-height:1.02

}

.palace-story h2 {

  font-size:clamp(3.1rem,5.5vw,6.6rem);
  margin:0 0 28px

}

.palace-story p {

  color:var(--story-muted)

}

.story-skip {

  position:fixed;
  left:20px;
  top:-100px;
  z-index:1000;
  padding:14px 24px;
  background:var(--story-paper);
  color:var(--story-ink)

}

.story-skip:focus {

  top:12px

}

.chapter-kicker {

  display:flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  margin:0 0 28px;
  color:var(--story-accent)!important

}

.chapter-kicker>span {

  border:1px solid var(--story-line);
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  letter-spacing:0

}

.story-hero-actions {

  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap

}

.story-hero-actions .btn {

  border-radius:2px;
  padding:18px 24px;
  background:#086d83;
  color:white;
  border:0;
  font-size:15px;
  box-shadow:none;
  gap:20px

}

.story-hero-actions .btn:hover {

  background:#07546a;
  transform:translateY(-2px)

}

.story-link {

  display:inline-flex;
  align-items:center;
  gap:22px;
  color:var(--story-ink);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--story-line);
  padding:10px 0

}

.story-link:hover {

  color:var(--story-accent)

}

.story-toolbar {

  position:sticky;
  top:var(--header-height);
  z-index:40;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 4vw;
  background:var(--story-paper);
  border-block:1px solid var(--story-line)

}

.story-toolbar nav {

  display:flex;
  gap:4px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
  min-width:0

}

.story-toolbar a,
.story-toolbar button {

  color:var(--story-muted);
  background:transparent;
  font:600 11px/1.3 var(--font-body);
  border:0;
  padding:10px 12px;
  white-space:nowrap;
  text-decoration:none;
  border-radius:3px;
  cursor:pointer

}

.story-toolbar a[aria-current="location"] {

  background:var(--story-ink);
  color:var(--story-paper)

}

.story-toolbar button {

  border:1px solid var(--story-line)

}

.story-chapter {

  position:relative;
  min-height:150svh;
  padding:100px 4vw 120px;
  max-width:1800px;
  margin:auto;
  scroll-margin-top:140px

}

.story-chapter:before {

  content:'';
  position:absolute;
  left:4vw;
  right:4vw;
  top:0;
  height:1px;
  background:linear-gradient(90deg,var(--story-line),transparent)

}

.chapter-layout {

  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr);
  gap:5vw;
  align-items:start;
  position:sticky;
  top:calc(var(--header-height) + 100px)

}

.chapter-copy {

  padding-top:10px

}

.chapter-intro {

  font-size:clamp(17px,1.5vw,21px);
  line-height:1.65;
  max-width:44ch;
  margin:0 0 30px

}

.story-beats {

  padding:0;
  margin:28px 0 0;
  list-style:none;
  counter-reset:beat;
  display:grid;
  gap:20px

}

.story-beats li {

  counter-increment:beat;
  display:grid;
  grid-template-columns:20px 1fr;
  gap:4px 12px;
  border-left:2px solid var(--story-line);
  padding-left:15px;
  transition:border-color .5s,opacity .5s

}

.story-beats li:before {

  content:'0' counter(beat);
  font-size:10px;
  color:var(--story-accent);
  padding-top:3px

}

.story-beats strong {

  font-size:14px;
  font-weight:600;
  color:var(--story-ink)

}

.story-beats li>span {

  grid-column:2;
  font-size:13px;
  line-height:1.6;
  color:var(--story-muted)

}

.story-chapter[data-beat="0"] .story-beats li:nth-child(1),
.story-chapter[data-beat="1"] .story-beats li:nth-child(2),
.story-chapter[data-beat="2"] .story-beats li:nth-child(3) {

  border-color:var(--story-accent)

}

.story-figure {

  margin:0;
  min-width:0

}

.story-figure figcaption {

  font-size:12px;
  line-height:1.65;
  color:var(--story-muted,var(--color-text-secondary));
  max-width:68ch;
  margin:18px 0 0;
  padding-left:14px;
  border-left:1px solid var(--story-line,var(--color-border)))

}

.chapter-wide {

  min-height:175svh

}

.chapter-wide .chapter-layout {

  grid-template-columns:minmax(280px,.7fr) minmax(0,1.45fr);
  gap:4vw

}

.status-dot {

  display:inline-block;
  background:#64d9ae;
  border-radius:50%;
  width:6px;
  height:6px;
  flex-shrink:0

}

[data-beat="2"] .tile-0 {

  transform:scale(1.12);
  filter:saturate(1.3)

}

.mode-viewport {

  height:155px;
  position:relative;
  overflow:hidden;
  background:#173746;
  border:1px solid #60838b

}

.mode-viewport img {

  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover

}

.mode-center img {

  object-fit:contain;
  width:60%;
  height:60%;
  left:20%;
  top:20%

}

.mode-fit img {

  object-fit:contain

}

.mode-fill img {

  object-fit:cover

}

.mode-stretch img {

  object-fit:fill

}

.mode-tile {

  background:url('../images/story/media-0.webp') 0 0/65px 65px repeat

}

.mode-tile img {

  display:none

}

.mode-clamp {

  background:#48707b

}

.mode-clamp:before,
.mode-mirror:before {

  content:'';
  position:absolute;
  inset:0;
  background:url('../images/story/media-0.webp') center/100% 100%;
  filter:blur(2px);
  transform:scale(1.2)

}

.mode-clamp img,
.mode-mirror img {

  object-fit:contain;
  width:65%;
  height:85%;
  left:17.5%;
  top:7.5%

}

.mode-mirror:before {

  transform:scaleX(-1) scaleY(1.25);
  filter:none

}

.mode-mirror {

  grid-column:2

}

.transition-viewport {

  position:relative;
  aspect-ratio:1.45;
  overflow:hidden;
  background:#0c2634;
  perspective:600px

}

.transition-viewport img {

  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover

}

.transition-after {

  opacity:0

}

.motion-ready .is-visible .transition-after {

  animation:storyCrossfade 7s infinite both;
  animation-play-state:running

}

.motion-ready .is-visible .transition-slide .transition-after {

  animation-name:storySlide

}

.motion-ready .is-visible .transition-scale .transition-after {

  animation-name:storyScale

}

.motion-ready .is-visible .transition-zoom .transition-after {

  animation-name:storyZoom

}

.motion-ready .is-visible .transition-rotate .transition-after {

  animation-name:storyRotate

}

.motion-ready .is-visible .transition-blur .transition-after {

  animation-name:storyBlur

}

.motion-ready .is-visible .transition-flip .transition-after {

  animation-name:storyFlip

}

.motion-ready .is-visible .transition-none .transition-after {

  animation-name:storyNone

}

.motion-ready .is-visible .transition-fade .transition-before {

  animation:storyFadeOut 7s infinite both

}

.motion-ready .is-visible .transition-fade .transition-after {

  animation-name:storyFadeIn

}

@keyframes storyCrossfade {

0%,20%,95%,100%{opacity:0}40%,75%{opacity:1}

}

@keyframes storySlide {

0%,20%,95%,100%{opacity:1;transform:translateX(101%)}40%,75%{opacity:1;transform:translateX(0)}

}

@keyframes storyScale {

0%,20%,95%,100%{opacity:0;transform:scale(.2)}40%,75%{opacity:1;transform:scale(1)}

}

@keyframes storyZoom {

0%,20%,95%,100%{opacity:0;transform:scale(1.8)}40%,75%{opacity:1;transform:scale(1)}

}

@keyframes storyRotate {

0%,20%,95%,100%{opacity:0;transform:rotate(35deg) scale(1.4)}40%,75%{opacity:1;transform:rotate(0) scale(1)}

}

@keyframes storyBlur {

0%,20%,95%,100%{opacity:0;filter:blur(20px)}40%,75%{opacity:1;filter:blur(0)}

}

@keyframes storyFlip {

0%,20%,95%,100%{opacity:0;transform:rotateY(90deg)}40%,75%{opacity:1;transform:rotateY(0)}

}

@keyframes storyNone {

0%,34.99%,85%,100%{opacity:0}35%,84.99%{opacity:1}

}

@keyframes storyFadeOut {

0%,20%,95%,100%{opacity:1}35%,80%{opacity:0}

}

@keyframes storyFadeIn {

0%,35%,95%,100%{opacity:0}50%,80%{opacity:1}

}

.story-platforms {

  padding:110px 5vw;
  max-width:1600px;
  margin:auto;
  scroll-margin-top:150px

}

.story-platforms>.chapter-intro {

  max-width:60ch

}

.platform-stories {

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--story-line,#aac4cc);
  margin:50px 0 25px

}

.platform-stories article {

  padding:34px 30px 34px 0;
  border-bottom:1px solid var(--story-line,#aac4cc)

}

.platform-stories article+article {

  padding-left:25px

}

.platform-stories h3 {

  font-size:22px;
  margin:18px 0 12px;
  letter-spacing:-.04em;
  color:var(--story-ink,var(--color-text))

}

.platform-stories p {

  font-size:14px;
  line-height:1.8;
  color:var(--story-muted,var(--color-text-secondary));
  max-width:32ch

}

.platform-stories img {

  object-fit:contain

}

.platform-note {

  font-size:12px;
  line-height:1.7;
  max-width:80ch

}

.story-cta {

  padding:130px 5vw 160px;
  max-width:1600px;
  margin:auto;
  text-align:center;
  border-top:1px solid var(--story-line)

}

.story-cta .chapter-kicker,
.story-cta .story-hero-actions {

  justify-content:center

}

.story-cta h2 {

  font-size:clamp(3.5rem,8vw,9rem)

}

.story-cta>p:not(.chapter-kicker) {

  font-size:20px;
  margin:30px

}

.palace-story .site-footer {

  background:var(--story-paper);
  border-top:1px solid var(--story-line)

}

[data-story-guide] .story-figure {

  margin:30px 0 40px;
  --story-ink:var(--color-text);
  --story-muted:var(--color-text-secondary);
  --story-line:var(--color-border);
  --story-paper:var(--color-surface);
  --story-accent:var(--color-primary-text)

}

[data-story-guide] .story-figure figcaption {

  font-size:12px;
  margin-top:15px

}

[data-story-guide] .guide-platform-list>.chapter-kicker,
[data-story-guide] .guide-platform-list>h2,
[data-story-guide] .guide-platform-list>.chapter-intro {

  display:none

}

[data-story-guide] .platform-stories {

  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:30px

}

[data-story-guide] .platform-stories h3 {

  font-size:22px

}

.story-motion-paused .story-figure * {

  animation-play-state:paused!important;
  transition:none!important

}

.story-motion-paused .story-chapter:not(.is-visible) .story-figure * {

  animation:none!important

}

@keyframes storyEnter {

from{opacity:.45;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}

}

.palace-story :focus-visible,
[data-story-guide] .story-figure :focus-visible {

  outline:3px solid #1994b1;
  outline-offset:5px

}

@media(min-width:1450px) {
.mode-viewport {

  height:190px

}

}

@media(max-width:1100px) {
.story-toolbar {

  padding-inline:16px

}

.story-toolbar a {

  padding:9px

}

.chapter-layout,
.chapter-wide .chapter-layout {

  grid-template-columns:1fr 1.15fr;
  gap:30px

}

.story-chapter {

  padding-inline:30px

}

.palace-story h2 {

  font-size:clamp(3rem,5.3vw,5.5rem)

}

.mode-viewport {

  height:115px

}

.story-toolbar button {

  font-size:10px;
  padding:10px 8px

}

.story-beats {

  gap:14px

}

.story-beats li>span {

  font-size:12px

}

}

@media(max-width:800px) {
.story-toolbar {

  top:var(--header-height);
  gap:8px;
  flex-wrap:wrap;
  padding:8px 15px

}

.story-toolbar nav {

  flex-basis:100%

}

.story-toolbar button {

  padding:7px 12px

}

.story-chapter,
.chapter-wide {

  min-height:0;
  padding:70px 24px 80px;
  scroll-margin-top:190px

}

.chapter-layout,
.chapter-wide .chapter-layout {

  grid-template-columns:1fr;
  position:static;
  gap:35px

}

.palace-story h2 {

  font-size:clamp(2.9rem,8vw,4.5rem);
  margin-bottom:20px

}

.chapter-intro {

  font-size:18px;
  max-width:55ch

}

.story-beats {

  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px

}

.story-beats li {

  grid-template-columns:1fr;
  padding-left:10px

}

.story-beats li:before {

  display:none

}

.story-beats li>span {

  grid-column:1;
  font-size:12px

}

.story-beats strong {

  font-size:12px

}

.chapter-copy {

  padding:0

}

.mode-viewport {

  height:160px

}

.story-platforms {

  padding:70px 24px

}

.platform-stories {

  grid-template-columns:repeat(2,minmax(0,1fr))

}

.platform-stories article+article {

  padding-left:15px

}

.story-cta {

  padding:80px 24px 100px

}

}

@media(max-width:480px) {
.story-hero-actions {

  gap:18px

}

.story-hero-actions .btn {

  font-size:13px;
  padding:16px 18px

}

.chapter-kicker {

  font-size:9px;
  margin-bottom:20px

}

.story-chapter {

  padding-inline:18px

}

.story-beats {

  grid-template-columns:1fr;
  gap:13px

}

.story-beats li {

  grid-template-columns:20px 1fr;
  padding-left:12px;
  gap:4px 8px

}

.story-beats li:before {

  display:block

}

.story-beats li>span {

  grid-column:2;
  font-size:13px

}

.story-beats strong {

  font-size:13px

}

.mode-mirror {

  grid-column:auto

}

.mode-viewport {

  height:140px

}

.platform-stories,
[data-story-guide] .platform-stories {

  grid-template-columns:1fr

}

.platform-stories article,
.platform-stories article+article {

  padding:25px 0

}

.platform-stories p {

  max-width:none

}

.story-platforms {

  padding-inline:24px

}

.story-cta h2 {

  font-size:3.2rem

}

.story-cta .story-hero-actions {

  flex-direction:column

}

[data-story-guide] .guide-container {

  padding-inline:18px

}

.story-toolbar a {

  font-size:10px

}

}

@media(prefers-reduced-motion:reduce) {
.palace-story *,
[data-story-guide] .story-figure * {

  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important

}

.story-chapter,
.chapter-wide {

  min-height:0

}

.chapter-layout {

  position:static

}

.story-toolbar #story-replay {

  display:none

}

}

[data-story-guide] #story-motion {

  border:1px solid var(--color-surface-border);
  padding:9px 15px;
  color:var(--color-primary-text);
  font-size:12px;
  margin:15px 0;
  background:var(--color-surface)

}

.story-chapter,
.chapter-wide {

  min-height:0

}

.chapter-layout,
.chapter-wide .chapter-layout {

  position:static

}

@media(min-width:1101px) {
.story-chapter.can-pin {

  min-height:150svh

}

.story-chapter.can-pin .chapter-layout {

  position:sticky;
  top:calc(var(--header-height) + 90px)

}

}

[data-story-guide] .guide-layout {

  width:100%;
  grid-template-columns:260px minmax(0,1fr)

}

[data-story-guide] .guide-layout>div,
[data-story-guide] .guide-container {

  min-width:0;
  max-width:100%

}

[data-story-guide] .guide-section h1 {

  overflow-wrap:anywhere

}

@media(max-width:1023px) {
[data-story-guide] .guide-layout {

  grid-template-columns:minmax(0,1fr)

}

}

.palace-story main {

  background:transparent

}

.palace-story .hero-title {

  font-size:clamp(2.5rem,6vw,4.25rem);
  letter-spacing:-.02em;
  line-height:1.05

}

.palace-story .platform-intro h2 {

  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.03em;
  line-height:1.15

}

.palace-story .hero-stack {

  max-width:56ch

}

.palace-story .hero-value-line {

  font-size:18px

}

.palace-story .platform-intro .section-header {

  margin-bottom:40px

}

.palace-story .hero-stage p,
.palace-story .platform-intro p {

  color:var(--on-image-text-muted)

}

.palace-story .hero-stage h1,
.palace-story .platform-intro h2,
.palace-story .platform-intro h3 {

  color:var(--on-image-text)

}

.motion-ready .is-visible .palace-component {
 animation: storyEnter .8s cubic-bezier(.16,1,.3,1) both;
}

.palace-story .hero-title {
font-weight:700;
}

.chapter-visual {
min-width:0;max-width:100%
}

@media(max-width:800px) {
.chapter-layout,.chapter-wide .chapter-layout {
grid-template-columns:minmax(0,1fr)
}

}

[data-story-guide] .guide-section,[data-story-guide] .guide-container,[data-story-guide] .story-figure {
min-width:0;overflow-wrap:anywhere
}

.story-toolbar button,[data-story-guide] #story-motion {
display:none
}

.motion-ready .story-toolbar button,.story-motion-paused .story-toolbar button,
.motion-ready[data-story-guide] #story-motion,.story-motion-paused[data-story-guide] #story-motion {
display:block
}

@media(prefers-reduced-motion:reduce) {
.story-toolbar #story-replay {
display:none
}

}