/* Our Story artwork and layout, scoped to the reversible soft appearance. */
.possibility-scene,.possibility-caption,.pillar-icon{display:none}
.story-pillars{padding-top:62px;padding-bottom:70px;row-gap:40px}

html:not([data-theme="original"]) .page-about .story-opening{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#f7f3ee 0%,#f2ede7 57%,#eee7df 100%);
}
html:not([data-theme="original"]) .page-about .story-stage{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:0;padding:26px 0 0;border:0;min-height:430px;
}
html:not([data-theme="original"]) .page-about .story-stage::after{display:none}
html:not([data-theme="original"]) .page-about .story-intro{position:relative;z-index:1;padding:50px 0 35px}
html:not([data-theme="original"]) .page-about .story-intro h1{font-size:clamp(50px,5.25vw,82px);line-height:1.02;max-width:650px;margin:25px 0}
html:not([data-theme="original"]) .page-about .story-intro p{font-size:clamp(17px,1.35vw,19px);line-height:1.65;max-width:540px;color:#514b45}
html:not([data-theme="original"]) .page-about .story-intro .possibility-caption{display:block;margin-top:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#795339}
html:not([data-theme="original"]) .page-about .possibility-scene{display:block;align-self:end;min-width:0;margin-left:-22px;margin-right:-5%;pointer-events:none}
html:not([data-theme="original"]) .page-about .possibility-scene svg{display:block;width:100%;height:auto;overflow:visible}
html:not([data-theme="original"]) .page-about .story-pillars{position:relative;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-top:0;padding-bottom:90px;align-items:stretch}
html:not([data-theme="original"]) .page-about .story-pillar{
  border:1px solid rgba(255,255,255,.95);border-radius:26px;padding:30px 30px 34px;
  background:linear-gradient(145deg,rgba(255,253,249,.92),rgba(241,235,228,.96));
  box-shadow:14px 18px 35px rgba(130,109,91,.17),-8px -9px 25px rgba(255,255,255,.9),inset 1px 1px 1px rgba(255,255,255,.9);
}
html:not([data-theme="original"]) .page-about .pillar-icon{display:block;width:42px;height:42px;margin:0 0 19px;color:#9b724d}
html:not([data-theme="original"]) .page-about .story-pillar .eyebrow{font-size:10px;color:#795339}
html:not([data-theme="original"]) .page-about .story-pillar h2{font-size:clamp(28px,2.15vw,34px);line-height:1.13;letter-spacing:-.045em;margin:16px 0 18px}
html:not([data-theme="original"]) .page-about .story-pillar p{font-size:15px;line-height:1.68;color:#514b45;margin:0 0 14px}
html:not([data-theme="original"]) .page-about .story-pillar p:last-child{margin-bottom:0}

@keyframes first-light-rise{from{transform:translateY(15px);opacity:.45}to{transform:translateY(0);opacity:1}}
@keyframes first-light-rays{from{stroke-dashoffset:900;opacity:.18}to{stroke-dashoffset:0;opacity:.75}}
@keyframes first-light-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
html:not([data-theme="original"]) .page-about .story-sun-rise{animation:first-light-rise 2.1s ease-out both}
html:not([data-theme="original"]) .page-about .story-paths path{stroke-dasharray:900;animation:first-light-rays 2.8s ease-out both}
html:not([data-theme="original"]) .page-about .story-node{animation:first-light-float 7s ease-in-out infinite}
html:not([data-theme="original"]) .page-about .node-two{animation-delay:-1.2s}
html:not([data-theme="original"]) .page-about .node-three{animation-delay:-2.6s}
html:not([data-theme="original"]) .page-about .node-four{animation-delay:-4s}
html:not([data-theme="original"]) .page-about .node-five{animation-delay:-5.4s}

@media(max-width:900px){
  html:not([data-theme="original"]) .page-about .story-stage{grid-template-columns:1fr;min-height:0;padding-top:20px}
  html:not([data-theme="original"]) .page-about .story-intro{padding:35px 0 0}
  html:not([data-theme="original"]) .page-about .story-intro h1{max-width:680px}
  html:not([data-theme="original"]) .page-about .possibility-scene{width:100%;max-width:760px;margin:-30px auto 0}
  html:not([data-theme="original"]) .page-about .story-pillars{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:65px}
  html:not([data-theme="original"]) .page-about .story-pillar:last-child{grid-column:1/-1}
}
@media(max-width:600px){
  html:not([data-theme="original"]) .page-about .story-intro h1{font-size:clamp(44px,11vw,60px)}
  html:not([data-theme="original"]) .page-about .story-intro p{font-size:16px}
  html:not([data-theme="original"]) .page-about .story-intro .possibility-caption{font-size:10px;margin-top:24px}
  html:not([data-theme="original"]) .page-about .possibility-scene{width:112%;margin:-2px -6% 0}
  html:not([data-theme="original"]) .page-about .story-pillars{grid-template-columns:1fr;gap:18px;padding-bottom:55px}
  html:not([data-theme="original"]) .page-about .story-pillar:last-child{grid-column:auto}
  html:not([data-theme="original"]) .page-about .story-pillar{padding:27px 25px 30px}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-theme="original"]) .page-about .story-sun-rise,
  html:not([data-theme="original"]) .page-about .story-paths path,
  html:not([data-theme="original"]) .page-about .story-node{animation:none!important;transform:none;opacity:1;stroke-dashoffset:0}
}

/* The approved reference's rendered artwork, with live text and controls above it. */
html:not([data-theme="original"]) .page-about .story-opening::before{
  content:"";position:absolute;z-index:0;inset:0 0 auto;display:block;
  height:min(57vw,850px);pointer-events:none;
  background:url('/assets/story-possibilities-v2.png') center top / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
  transform-origin:64% 48%;animation:story-art-breathe 14s ease-in-out infinite alternate;
}
html:not([data-theme="original"]) .page-about .story-stage{position:relative;z-index:1;min-height:490px}
html:not([data-theme="original"]) .page-about .possibility-scene{height:430px}
html:not([data-theme="original"]) .page-about .possibility-scene svg{display:none}
html:not([data-theme="original"]) .page-about .story-pillar{
  background:linear-gradient(145deg,rgba(255,253,250,.96),rgba(244,237,230,.97));
  box-shadow:14px 19px 36px rgba(125,104,86,.20),-8px -9px 25px rgba(255,255,255,.90),inset 1px 1px 1px rgba(255,255,255,.95);
}
@keyframes story-art-breathe{from{transform:scale(1);opacity:.96}to{transform:scale(1.012);opacity:1}}
@media(max-width:900px){
  html:not([data-theme="original"]) .page-about .story-opening::before{display:none}
  html:not([data-theme="original"]) .page-about .story-stage{min-height:0}
  html:not([data-theme="original"]) .page-about .possibility-scene{
    height:auto;aspect-ratio:2/1;max-width:none;width:108%;margin:10px -4% 10px;
    background:url('/assets/story-possibilities-v2.png') center / contain no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  html:not([data-theme="original"]) .page-about .story-opening::before{animation:none}
}
@media(max-width:900px){
  html:not([data-theme="original"]) .page-about .possibility-scene{
    aspect-ratio:1.7/1;background-size:145% auto;background-position:right top;
  }
}
@media(max-width:900px){
  html:not([data-theme="original"]) .page-about .possibility-scene{transform-origin:64% 52%;animation:story-art-breathe 14s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-theme="original"]) .page-about .possibility-scene{animation:none}
}