:root{scroll-behavior:smooth}
body{background:#f8fbf8;color:#213d35}
body header{border-bottom:1px solid #dbe8dc;box-shadow:0 4px 22px #244a3610}
body .brand{color:#225543}
body .brand span{color:#718d78}
body header nav a{transition:color .2s ease,transform .2s ease}
body header nav a:hover{color:#d06d55;transform:translateY(-2px)}
body a:focus-visible,body button:focus-visible,body summary:focus-visible{outline:3px solid #db8365;outline-offset:3px}
body .hero{height:min(700px,78svh);min-height:510px;background:#b4b8bb url('/assets/story-rooftop.png') center 58%/cover}
body .hero:before{background:linear-gradient(90deg,#17392fd6 0%,#1d4036a6 28%,#213d3940 62%,#213d3926 100%)}
body .hero-copy{max-width:680px;animation:page-arrive .75s ease-out both}
body .hero h1{line-height:1.2;max-width:580px}
body .hero .eyebrow{display:inline-block;padding:8px 0;border-bottom:1px solid #f6e7b2;color:#fff2c9}
body .hero .button{border-radius:4px;background:#fff5dc;color:#27563f;box-shadow:0 8px 24px #0d302927;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
body .hero .button:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 30px #0d302949}
body .hero .actions>a:not(.button){color:#fff;border-bottom:1px solid #fff8;padding-bottom:4px;transition:border-color .2s ease}
body .hero .actions>a:not(.button):hover{border-color:#fff}
body .hero-caption{color:#fff3d5;text-shadow:0 2px 8px #1236299c}
body .section .eyebrow,body .about .eyebrow{color:#ad6759}
body .section h2,body .about h2{color:#24483a}
body .text-link{color:#2e7456;transition:color .2s ease}
body .text-link:hover{color:#c46b55}
body .gallery figure img{transition:transform .45s ease,filter .45s ease}
body .gallery figure:hover img{transform:translateY(-4px);filter:saturate(1.08)}
body .story-band{background:#e8f2ee}
body .about{background:#e9f2ec}
body footer{background:#f8fbf8}
.tale-abilities{background:#fffdf7;border-bottom:1px solid #e6ebe3}
.tale-abilities .section{padding-top:82px;padding-bottom:72px}
.tale-abilities .heading{margin-bottom:42px}
.tale-abilities .heading h2{max-width:710px}
.tale-abilities .heading>p{max-width:270px;line-height:1.9}
.ability-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dce6db;border-bottom:1px solid #dce6db}
.ability{position:relative;min-width:0;min-height:325px;padding:27px 31px 28px 0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.ability+.ability{border-left:1px solid #dce6db;padding-left:31px}
.ability-number{font-size:12px;font-weight:700;color:#9b6659}
.ability-mark{height:54px;margin:10px 0 6px;font-size:51px;line-height:1;color:#cb8065}
.ability:nth-child(2) .ability-mark{color:#7a94ad}
.ability:nth-child(3) .ability-mark{color:#7b9d6a}
.ability h3{margin:0 0 8px;font-size:20px;line-height:1.45;color:#284b3c}
.ability p{margin:0 0 24px;line-height:1.85;font-size:13px}
.ability-status{margin-top:auto;padding:4px 10px;background:#ecf0eb;color:#657b70;font-size:11px;border-radius:3px}
.ability-status.available{background:#e1efe5;color:#276146}
.ability-note{margin:19px 0 0;font-size:12px;color:#728579}
@keyframes page-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  body header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 10px;overflow:visible;white-space:normal;padding-bottom:0}
  body header nav a{min-width:0}
  body .hero{height:min(650px,76svh);min-height:490px;background-position:54% 66%}
  body .hero:before{background:linear-gradient(180deg,#17382fbd 0%,#1e3c3291 45%,#213d391b 100%)}
  body .hero-copy{align-self:flex-start;margin-top:30px;padding-right:20px}
  body .hero h1{font-size:34px}
  body .hero-caption{right:18px;bottom:16px}
  .tale-abilities .section{padding-top:54px;padding-bottom:52px}
  .tale-abilities .heading{margin-bottom:25px}
  .ability-list{grid-template-columns:1fr}
  .ability,.ability+.ability{min-height:0;padding:22px 0 25px;border-left:0}
  .ability+.ability{border-top:1px solid #dce6db}
  .ability-mark{height:42px;font-size:42px}
  .ability p{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  body .hero-copy{animation:none}
  body header nav a,body .hero .button,body .hero .actions>a:not(.button),body .gallery figure img{transition:none}
}