@layer pages{
  .bands{isolation:isolate;overflow:clip;--seam:clamp(90px,9vw,180px);--band-h:clamp(620px,46vw,960px);
    --lag-band:.16;
    --travel-box:calc((1 - .9) * (var(--view-height) + var(--band-h)))}
  .band{position:relative;min-height:var(--band-h);display:flex;align-items:center;
    padding:var(--space-6) var(--page-gutter);box-sizing:border-box}
  .band-bg{position:absolute;z-index:-2;left:0;right:0;bottom:0;top:calc(var(--seam) * -1);
    background:var(--bg) var(--bg-pos,center)/cover no-repeat;
    mask-image:linear-gradient(transparent,black var(--seam))}
  .hero .band-bg{top:min(0px,calc(var(--lag-band) * (var(--band-h) - var(--view-height)) / 2));mask-image:none}
  .band-fore{position:absolute;z-index:-1;left:0;right:0;bottom:0;top:calc(var(--seam) * -1);pointer-events:none;
    background:var(--bg) var(--bg-pos,center)/cover no-repeat;
    mask-image:linear-gradient(transparent,black var(--seam),black calc(100% - var(--seam) * 1.3),transparent)}
  .station .band-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(var(--shade-dir),rgba(4,8,6,.45),rgba(4,8,6,.2) 40%,transparent 58%)}
  .text-left{--shade-dir:90deg}
  .text-right{--shade-dir:270deg}
  .bg-sky{--bg:url("/assets/site/about/sky.webp");--bg-pos:center 70%}
  .bg-sky .light-frame{--light-w:1672;--light-h:941;--light-y:70%;
    --sun-x:95.3%;--sun-y:59.2%;--ray-x:var(--sun-x);--ray-y:var(--sun-y);
    --sun-glow:rgba(255,186,96,.4);--sun-glow-period:23s;
    --ray:rgba(255,198,108,.62);--ray-soft:rgba(255,182,88,.42);--ray-warm:rgba(255,160,64,.55)}
  .bg-sky .rays{mask:radial-gradient(ellipse 95% 110% at var(--ray-x) var(--ray-y),
    transparent 3%,black 12%,rgba(0,0,0,.45) 40%,transparent 72%)}
  .bg-sky .rays i:nth-child(1){--angle:268deg;--width:20deg;--color:var(--ray-warm);--strength:.9; --duration:11s;--delay:-3s; --drift:1.5deg}
  .bg-sky .rays i:nth-child(2){--angle:274deg;--width:34deg;--color:var(--ray);     --strength:.6; --duration:14s;--delay:-9s; --drift:-1.8deg}
  .bg-sky .rays i:nth-child(3){--angle:279deg;--width:16deg;--color:var(--ray-soft);--strength:1;  --duration:9s; --delay:-5s; --drift:1.4deg}
  .bg-sky .rays i:nth-child(4){--angle:285deg;--width:30deg;--color:var(--ray-warm);--strength:.75;--duration:13s;--delay:-1s; --drift:2deg}
  .bg-sky .rays i:nth-child(5){--angle:291deg;--width:14deg;--color:var(--ray);     --strength:1;  --duration:10s;--delay:-12s;--drift:-1.5deg}
  .bg-sky .rays i:nth-child(6){--angle:296deg;--width:38deg;--color:var(--ray-soft);--strength:.55;--duration:15s;--delay:-7s; --drift:1.8deg}
  .bg-sky .rays i:nth-child(7){--angle:301deg;--width:18deg;--color:var(--ray-warm);--strength:.9; --duration:8s; --delay:-4s; --drift:-2deg}
  .bg-sky .rays i:nth-child(8){--angle:306deg;--width:28deg;--color:var(--ray);     --strength:.7; --duration:12s;--delay:-11s;--drift:1.6deg}
  .bg-sky .rays i:nth-child(9){--angle:311deg;--width:16deg;--color:var(--ray-soft);--strength:.8; --duration:11s;--delay:-6s; --drift:-1.4deg}
  .bg-mountains{--bg:url("/assets/site/about/mountains.webp");--bg-pos:70% 40%}
  .bg-gorge{--bg:url("/assets/site/about/gorge.webp");--bg-pos:25% 45%}
  .bg-gorge-trees{--bg:url("/assets/site/about/gorge-trees.webp");--bg-pos:25% 45%}
  .bg-campfire{--bg:url("/assets/site/about/campfire.webp");--bg-pos:80% 58%}
  .bg-camp{--bg:url("/assets/site/about/camp.webp");--bg-pos:15% 50%}
  .bg-meadow{--bg:url("/assets/site/about/meadow.webp");--bg-pos:center 60%}
  .seam{position:absolute;top:0;left:var(--page-gutter);right:var(--page-gutter);height:1px}
  .figure{position:absolute;z-index:-1;top:50%;height:min(96%,1000px);width:auto;
    translate:-50% calc(var(--fig-center,50%) * -1);
    mask-image:linear-gradient(black 55%,transparent 98%),linear-gradient(90deg,transparent,black 9%,black 91%,transparent);
    mask-composite:intersect}
  .text-left .figure{left:75%}
  .text-right .figure{left:25%}
  .figure-ranger{height:min(122%,1220px);--fig-center:57%}
  .figure-raid{height:min(128%,1300px);--fig-center:60%;
    mask-image:linear-gradient(black 62%,transparent 86%),linear-gradient(90deg,transparent,black 9%,black 91%,transparent)}
  .copy{width:calc(50% - var(--space-5) / 2);box-sizing:border-box}
  .text-left .copy{padding-left:calc(var(--foliage-reach) + var(--space-4))}
  .text-right .copy{margin-left:auto;padding-right:calc(var(--foliage-reach) + var(--space-4))}
  .box{container-type:inline-size;padding:var(--space-5) calc(var(--space-5) + 8px) var(--space-4)}
  .head{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center;margin:0 0 4px;
    --sprig-room:84px;--t:min(5vw,calc((100cqw - 52px - var(--sprig-room)) / (var(--fit) + 1.34)));--n:calc(var(--t) * 1.34 + 30px)}
  .head .num,.medal{border-radius:50%;border:1.5px solid var(--gold);
    background:radial-gradient(circle at 50% 35%,rgba(42,56,39,.92),rgba(6,10,7,.96))}
  .head .num{grid-row:1 / span 2;display:grid;place-items:center;width:var(--n);height:var(--n);
    box-shadow:0 0 0 5px rgba(4,8,6,.55),0 0 0 6.5px var(--old-gold),inset 0 0 18px rgba(0,0,0,.65),0 0 24px rgba(201,165,106,.18);
    font:600 calc(var(--n) * .4) Cinzel;color:var(--gold-light)}
  .head .label{grid-column:2;align-self:end;margin:0;font:600 15px Cinzel;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light)}
  .station h2{grid-column:2;align-self:start;margin:0;white-space:nowrap;
    font:600 var(--t)/1.05 Cinzel;letter-spacing:.05em;text-transform:uppercase;
    color:transparent;background:var(--title-metal) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text;filter:var(--metal-quiet)}
  .station h2::first-letter{font-size:1.34em}
  .fit-atmosphere{--fit:12.5}
  .fit-raid{--fit:14.4}
  .fit-community{--fit:10.2}
  .fit-structure{--fit:16.7}
  .title-rule{grid-column:2;position:relative;height:18px;margin-top:2px;
    --sw:112px;--sh:calc(var(--sw) * .58);--line-y:4px}
  .title-rule::before{content:"";position:absolute;left:0;right:calc(var(--sw) * .9875 - 4px);top:calc(var(--line-y) - 13px);height:14px;
    background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold-light) 50%,transparent));
    mask:linear-gradient(black,black) 0 12px / calc(100% - 40px) 2px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 40 14'%3E%3Cpath d='M0 10C18 10 24.5 5 35.5 0L36.3 2.3C25.5 7.8 18 12 0 12Z'/%3E%3Cpath fill-opacity='.3' d='M35.5 0L39.4-1.8L39.9-0.4L36.3 2.3Z'/%3E%3C/svg%3E") right 0 / 40px 14px no-repeat}
  .title-rule::after{content:"";position:absolute;right:0;width:var(--sw);height:var(--sh);
    top:calc(var(--line-y) - 11px - var(--sh) * .522);
    background:linear-gradient(135deg,var(--gold-light) 30%,var(--gold) 70%,var(--gold-dark));
    mask:url("/assets/site/decor/branches/Decorative%20Vine%20Branch-14.svg") center/100% 100% no-repeat,
      linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.06));
    mask-composite:intersect;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
  .sub{margin:18px 0 22px;font:500 17px Jost;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light);text-shadow:var(--text-shadow)}
  .intro{position:relative;margin:0 0 22px;padding:2px 0 2px 26px;font-size:19px;line-height:1.55;color:var(--text);text-shadow:var(--text-shadow-soft);
    border-left:1px solid var(--old-gold)}
  .intro::before,.intro::after{content:"";position:absolute;left:-4px;width:7px;height:7px;rotate:45deg;background:var(--gold)}
  .intro::before{top:-4px}
  .intro::after{bottom:-4px}
  .separator{display:block;position:relative;height:1px;margin:0 0 26px;background:linear-gradient(90deg,transparent,var(--old-gold) 20%,var(--old-gold) 80%,transparent)}
  .separator::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;rotate:45deg;background:var(--gold)}
  .points{position:relative;list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 56px}
  .points::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:linear-gradient(transparent,var(--old-gold) 15%,var(--old-gold) 85%,transparent)}
  .points::after{content:"";position:absolute;left:calc(50% - 3.5px);top:calc(50% - 3.5px);width:7px;height:7px;rotate:45deg;background:var(--gold)}
  @container (max-width:600px){
    .points{grid-template-columns:1fr;gap:20px}
    .points::before,.points::after{display:none}
  }
  .points li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:20px;align-items:start}
  .points strong{grid-column:2;align-self:end;font:700 15px/1.3 Cinzel;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
  .points small{grid-column:2;margin-top:6px;font:400 15px/1.45 Jost;color:var(--text);text-shadow:var(--text-shadow-soft)}
  .medal{grid-row:1 / span 2;box-sizing:border-box;width:84px;height:84px;padding:14px;object-fit:contain;
    box-shadow:0 0 0 4px rgba(4,8,6,.55),0 0 0 5.5px var(--old-gold),inset 0 0 16px rgba(0,0,0,.7),0 0 22px rgba(201,165,106,.2);
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
  .band.center{justify-content:center;text-align:center}
  .hero{min-height:calc(var(--band-h) + 80px);--page-title-size:clamp(40px,5.4vw,84px)}
  .scroll-hint{position:absolute;left:50%;bottom:var(--space-4);translate:-50% 0;z-index:2;
    display:grid;place-items:center;width:clamp(80px,5.4vw,104px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(closest-side,
      color-mix(in srgb,var(--text-cloud) 80%,transparent),
      color-mix(in srgb,var(--text-cloud) 62%,transparent) 42%,
      color-mix(in srgb,var(--text-cloud) 28%,transparent) 66%,transparent 86%);
    text-decoration:none;-webkit-tap-highlight-color:transparent}
  .scroll-hint i{width:clamp(36px,2.4vw,46px);aspect-ratio:1;
    background:linear-gradient(var(--gold-highlight),var(--gold-light) 40%,var(--gold) 85%);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6.6 16 15.2'%3E%3Cpath d='M5.3 7.1 12 12.9l6.7-5.8 1.3 1.5-8 6.9-8-6.9z'/%3E%3Cpath d='M5.3 12.6 12 18.4l6.7-5.8 1.3 1.5-8 6.9-8-6.9z' opacity='.72'/%3E%3C/svg%3E") center/contain no-repeat;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,1)) drop-shadow(0 3px 8px rgba(0,0,0,.95))
      drop-shadow(0 0 14px var(--button-arrow-glow-dim));
    animation:scroll-hint-wippen 2.4s ease-in-out infinite}
  .scroll-hint:hover i,.scroll-hint:focus-visible i{filter:drop-shadow(0 1px 2px rgba(0,0,0,1)) drop-shadow(0 3px 8px rgba(0,0,0,.95)) drop-shadow(0 0 18px var(--button-arrow-glow))}
  @keyframes scroll-hint-wippen{
    0%,100%{transform:translateY(0);opacity:.85}
    50%{transform:translateY(9px);opacity:1}
  }
  @supports (animation-timeline: scroll()){
    @keyframes scroll-hint-fort{to{opacity:0;visibility:hidden}}
    .scroll-hint{animation:scroll-hint-fort linear both;animation-timeline:scroll();
      animation-range:0 var(--band-h)}
  }
  @media (prefers-reduced-motion:reduce){
    .scroll-hint,.scroll-hint i{animation:none}
  }
  .center .text-cloud{position:relative;isolation:isolate}
  .center .text-cloud::before{inset:-40px -90px}
  .cta .logo{display:block;height:clamp(150px,16vw,260px);width:auto;margin:0 auto;filter:drop-shadow(var(--text-shadow))}
  .cta .claim{margin:18px 0 28px;font:300 clamp(20px,1.7vw,28px)/1.4 Jost;text-shadow:var(--text-shadow)}
  .cta .actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
  .band{--parallax-subject:1}
  .copy{--travel:var(--travel-box)}
  @supports (animation-timeline: view()){
    .band{view-timeline:--band block}
    .copy{animation:parallax-back linear both;animation-timeline:--band}
  }
  @supports not (animation-timeline: view()){
    .copy{transform:translateY(calc((var(--view-p,.5) - .5) * var(--travel)))}
  }
  @media (prefers-reduced-motion:reduce),(pointer:coarse){
    .copy{animation:none;transform:none}
  }
  .picture-space{display:none}
  @media (max-width:900px){
    .center .text-cloud::before{inset:-30px 0}
    .band.station{flex-direction:column;align-items:stretch;padding:0 0 var(--space-5);min-height:0}
    .picture-space{display:block;height:68vw}
    .station .band-bg,.station .band-fore{bottom:auto;height:calc(68vw + var(--seam))}
    .station .band-bg::after{background:linear-gradient(transparent 60%,var(--ground))}
    .figure{top:34vw;height:72vw}
    .text-left .figure{left:66%}
    .text-right .figure{left:34%}
    .figure-ranger,.figure-raid{height:80vw}
    .copy,.text-left .copy,.text-right .copy{width:auto;margin:0;padding:0 var(--page-gutter)}
    .box{padding:revert-layer}
    .medal{width:62px;height:62px;padding:10px}
    .head{--sprig-room:10px;column-gap:16px;--t:min(30px,calc((100cqw - 46px - var(--sprig-room)) / (var(--fit) + 1.34)))}
    .title-rule{--sw:74px;height:14px}
    .title-rule::after{top:calc(var(--line-y) - 7px - var(--sh) * .522)}
    .fit-atmosphere{--fit:12.6}
    .fit-raid{--fit:7.7}
    .fit-community{--fit:10.5}
    .fit-structure{--fit:9.2}
    .station h2{white-space:normal}
    .sub{font-size:14px;letter-spacing:.22em}
    .intro{font-size:17px;margin-bottom:18px}
    .points{grid-template-columns:1fr}
    .points::before,.points::after{display:none}
  }
}