/* JAY Design Skills | 2026-10-26 | public story pages only.
   Two atmospheres remain distinct. No game, studio or audio behaviour is changed. */
.fairytale-site{
  --jay-ease:cubic-bezier(.22,1,.36,1);
  --jay-forest-gold:#e7cc8b;
  --jay-paper-gold:#a27b38;
  --jay-paper-link:#34583f;
  --jay-menu-bg:rgba(248,246,237,.985);
  --jay-menu-text:#234234;
  --jay-menu-rule:rgba(52,82,60,.20);
  --jay-menu-icon:#284838;
}
.fairytale-home,.theme-song-page{
  --jay-menu-bg:rgba(14,44,40,.985);
  --jay-menu-text:#fff3dc;
  --jay-menu-rule:rgba(232,211,161,.23);
  --jay-menu-icon:#fff3dc;
}
/* A common typographic and interaction rhythm without flattening the forest. */
.fairytale-site :is(.site-header nav a,.text-link,.quiet-link,footer nav a){
  text-underline-offset:.27em;
}
.fairytale-site :is(.button,.text-link,.quiet-link,.site-header nav a){
  touch-action:manipulation;
}
.fairytale-site .button{
  transition:background-color .25s ease,color .25s ease,transform .45s var(--jay-ease),box-shadow .35s ease;
}
@media(hover:hover) and (pointer:fine){
  .fairytale-site .button:hover{transform:translate3d(0,-2px,0);box-shadow:0 10px 24px rgba(7,29,25,.16)}
  .fairytale-site .text-link:hover span{transform:translate3d(5px,0,0)}
}
.fairytale-site .text-link span{display:inline-block;transition:transform .4s var(--jay-ease)}
.fairytale-site :is(a,button,summary,input):focus-visible{
  outline:3px solid var(--folio-focus,#b88b3d);
  outline-offset:4px;
}
.fairytale-site .site-header{isolation:isolate}
.fairytale-site .site-header .brand{position:relative;z-index:3}
.fairytale-home .forest-invitation{z-index:1}
.fairytale-home .forest-invitation .button{background:#eddcae;color:#223c32}
.fairytale-home .forest-invitation .button:hover{background:#faecc8;color:#203a2d}
.fairytale-home .experience-links > a{position:relative}
.fairytale-home .experience-links > a::after{
  content:"";position:absolute;inset:auto 0 -7px;height:1px;
  background:linear-gradient(90deg,rgba(231,204,139,.62),transparent 88%);
  opacity:0;transform:scaleX(.65);transform-origin:left;
  transition:transform .5s var(--jay-ease),opacity .5s ease;
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .fairytale-home .experience-links > a:hover::after,
  .fairytale-home .experience-links > a:focus-visible::after{opacity:1;transform:scaleX(1)}
}
/* Script-created accessible menu: unenhanced pages retain their original nav. */
.fairytale-site .jay-menu-toggle{display:none}
.fairytale-site .jay-menu-toggle .jay-menu-lines{
  display:grid;gap:5px;width:20px;transform:translateZ(0);
}
.fairytale-site .jay-menu-toggle .jay-menu-lines i{
  display:block;height:1.5px;width:20px;border-radius:2px;
  background:currentColor;transition:transform .4s var(--jay-ease),opacity .25s ease;
}
.fairytale-site .jay-menu-toggle .jay-menu-caption{font:12px/1.2 var(--folio-ui,system-ui,sans-serif);letter-spacing:.06em}
.fairytale-site .site-header[data-jay-open="true"] .jay-menu-lines i:first-child{transform:translate3d(0,3.25px,0) rotate(45deg)}
.fairytale-site .site-header[data-jay-open="true"] .jay-menu-lines i:last-child{transform:translate3d(0,-3.25px,0) rotate(-45deg)}
/* A few fireflies live above the original art, but away from the story text. */
.fairytale-home .jay-fireflies{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  contain:layout paint;
}
.fairytale-home .jay-fireflies i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff0b7;opacity:.28;box-shadow:0 0 10px 2px rgba(248,224,168,.45);
  animation:jay-glimmer 8s ease-in-out infinite alternate;
}
.fairytale-home .jay-fireflies i:nth-child(1){left:66%;top:28%;animation-delay:-2s}
.fairytale-home .jay-fireflies i:nth-child(2){left:87%;top:46%;animation-delay:-5s}
.fairytale-home .jay-fireflies i:nth-child(3){left:75%;top:69%;animation-delay:-1s}
@keyframes jay-glimmer{
  from{opacity:.12;transform:translate3d(0,0,0)}
  to{opacity:.68;transform:translate3d(9px,-13px,0)}
}
/* Only transform and opacity move. Content stays visible if JS is unavailable. */
.fairytale-home.jay-motion-on .forest-invitation > :is(.eyebrow,h1,.invitation,.actions,.quiet-link,.opening-footnote){
  animation:jay-invitation-in .65s var(--jay-ease) both;
}
.fairytale-home.jay-motion-on .forest-invitation > h1{animation-delay:80ms}
.fairytale-home.jay-motion-on .forest-invitation > .invitation{animation-delay:160ms}
.fairytale-home.jay-motion-on .forest-invitation > .actions{animation-delay:240ms}
.fairytale-home.jay-motion-on .forest-invitation > .quiet-link{animation-delay:320ms}
.fairytale-home.jay-motion-on .forest-invitation > .opening-footnote{animation-delay:360ms}
@keyframes jay-invitation-in{
  from{opacity:.74;transform:translate3d(0,9px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.fairytale-site .jay-reveal{
  transition:transform .85s var(--jay-ease),opacity .85s var(--jay-ease);
  transition-delay:var(--jay-delay,0ms);
}
.fairytale-site .jay-reveal.jay-waiting{opacity:0;transform:translate3d(0,16px,0)}
/* Mobile nav replaces previous silently hidden links with a complete menu. */
@media(max-width:920px){
  html.jay-menu-ready body.fairytale-site .site-header{z-index:100!important}
  html.jay-menu-ready body.fairytale-site .site-header > .jay-menu-toggle{
    appearance:none;display:inline-flex!important;position:relative;z-index:102;
    flex:none;align-items:center;justify-content:center;gap:10px;
    min-width:46px;min-height:46px;padding:9px 11px;
    background:transparent;border:1px solid currentColor;border-radius:5px 15px 5px 15px;
    color:var(--jay-menu-icon);box-shadow:none;font-family:var(--folio-ui,system-ui,sans-serif);
    cursor:pointer;text-shadow:none;
  }
  html.jay-menu-ready body.fairytale-site .site-header > nav{
    display:none!important;position:fixed!important;inset:0!important;z-index:101!important;
    width:100vw!important;max-width:none!important;height:100dvh!important;
    min-height:100svh!important;max-height:100dvh!important;
    margin:0!important;padding:clamp(95px,19svh,154px) max(26px,9vw) max(20px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;
    gap:0!important;white-space:normal!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    background:var(--jay-menu-bg)!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;color:var(--jay-menu-text)!important;
    text-shadow:none!important;
  }
  html.jay-menu-ready body.fairytale-site .site-header[data-jay-open="true"] > nav{display:flex!important}
  html.jay-menu-ready body.fairytale-site .site-header > nav > a,
  html.jay-menu-ready body.theme-song-page .wind-site-head > nav > a,
  html.jay-menu-ready body.theme-song-page .wind-site-head > nav > a:not(.nav-letter){
    display:flex!important;flex:none!important;justify-content:flex-start!important;
    align-items:center!important;width:100%!important;min-height:52px!important;
    margin:0!important;padding:10px 4px!important;
    color:var(--jay-menu-text)!important;font:400 clamp(16px,4.1vw,19px)/1.6 var(--folio-story,'Songti SC',serif)!important;
    white-space:normal!important;letter-spacing:.035em!important;
    border:0!important;border-bottom:1px solid var(--jay-menu-rule)!important;
    border-radius:0!important;background:transparent!important;
    box-shadow:none!important;text-shadow:none!important;
  }
  html.jay-menu-ready body.fairytale-site .site-header > nav > a[aria-current="page"]{
    font-weight:600!important;
  }
  html.jay-menu-ready body.fairytale-site.jay-nav-open{overflow:hidden}
  html.jay-menu-ready body.fairytale-site .site-header .brand{
    z-index:102;max-width:calc(100% - 65px);min-width:0;
  }
  html.jay-menu-ready body.fairytale-site .site-header .brand small{white-space:nowrap}
  html.jay-menu-ready body.fairytale-home .site-header{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:nowrap;gap:10px;top:max(14px,env(safe-area-inset-top));
    left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));
  }
  html.jay-menu-ready body.theme-song-page .wind-site-head{flex-wrap:nowrap!important}
  html.jay-menu-ready body.fairytale-page:not(.theme-song-page) .site-header{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:nowrap;gap:10px;min-height:74px;padding-block:14px;
  }
  html.jay-menu-ready body.fairytale-page:not(.theme-song-page) .site-header .brand{
    font-size:clamp(16px,4vw,20px);
  }
  html.jay-menu-ready body.fairytale-page:not(.theme-song-page) .site-header .brand-mark{
    width:34px;height:39px;flex:none;
  }
  /* On the music page the canopy remains the header background. */
  html.jay-menu-ready body.theme-song-page .wind-site-head > .jay-menu-toggle{
    color:#fff3dc;border-color:rgba(234,216,169,.55);
  }
  .fairytale-home .jay-fireflies{display:none}
  .fairytale-home .forest-invitation{margin-right:max(18px,6vw);width:min(88%,480px)}
  .fairytale-home .forest-invitation .button{min-height:48px}
  .theme-song-page .wind-transport{gap:clamp(5px,2.6vw,16px)}
  .theme-song-page .wind-bottom-actions{row-gap:5px}
}
@media(max-width:660px){
  .fairytale-home .forest-invitation{padding-top:clamp(113px,18svh,150px)}
  .fairytale-home .forest-invitation h1{font-size:clamp(38px,10.5vw,55px)}
  .fairytale-home .forest-invitation .invitation{max-width:25em}
  .fairytale-home .experience-paths{padding-inline:max(22px,7vw)}
  .fairytale-home .experience-links > a{min-width:0}
  .fairytale-home .experience-links span{overflow-wrap:anywhere}
  .theme-song-page .wind-lyrics{height:clamp(205px,30svh,240px)}
  .theme-song-page .wind-inline-mini{
    width:calc(100% - 22px);bottom:max(10px,env(safe-area-inset-bottom));
    gap:7px;padding:7px 10px;max-width:445px;
  }
  .theme-song-page .wind-inline-mini-line{min-width:0}
  .theme-song-page .wind-inline-mini-actions button{min-width:44px;min-height:44px}
  .fairytale-site footer nav{column-gap:16px;row-gap:4px}
}
@media(max-width:380px){
  html.jay-menu-ready body.fairytale-home .site-header .brand{font-size:16px;letter-spacing:.04em}
  .fairytale-home .forest-invitation .button{font-size:12px;padding-inline:15px;gap:12px}
  .theme-song-page .wind-transport .wind-main-play.button{min-width:142px}
  .theme-song-page .wind-transport .wind-seek-step{min-width:43px}
}
@media(max-width:920px) and (max-height:510px){
  html.jay-menu-ready body.fairytale-site .site-header > nav{
    padding-top:68px!important;gap:0!important;
  }
  html.jay-menu-ready body.fairytale-site .site-header > nav > a{min-height:44px!important;padding-block:6px!important}
}
/* Input accessibility and low-end device budget: no continuous animation in mobile. */
@media(prefers-reduced-motion:reduce){
  .fairytale-site .jay-reveal,.fairytale-site .jay-reveal.jay-waiting{
    transition:none!important;opacity:1!important;transform:none!important;
  }
  .fairytale-home.jay-motion-on .forest-invitation > *{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .fairytale-home .jay-fireflies{display:none!important}
  .fairytale-site .jay-menu-toggle .jay-menu-lines i,
  .fairytale-site .text-link span{transition:none!important}
}
@media print{
  .fairytale-site .jay-menu-toggle,.fairytale-home .jay-fireflies{display:none!important}
  html.jay-menu-ready body.fairytale-site .site-header > nav{display:none!important}
  .fairytale-site .jay-reveal,.fairytale-site .jay-reveal.jay-waiting{opacity:1!important;transform:none!important}
}

/* The atelier's old mobile glow extended 5% outside the document width. */
@media(max-width:800px){
  .fairytale-home .studio-trail::before{right:0}
}

/* Over the illuminated cover artwork, small secondary links need real contrast. */
.fairytale-home .forest-invitation :is(.forest-listening,.quiet-link,.opening-footnote){
  text-shadow:0 1px 5px rgba(3,24,26,.98),0 2px 12px rgba(3,24,26,.86);
}
@media(max-width:800px){
  .fairytale-home .forest-invitation .forest-listening{font-size:13px}
  .fairytale-home .forest-invitation .quiet-link{font-size:12px;color:#f4ead0}
  .fairytale-home .forest-invitation .opening-footnote{font-size:11px;color:#e2e7d0}
}