/* The Fable Engine — Shared Design System. Edit here only. See DESIGN.md for token reference. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap');

:root{
  --bg:#06050e;--s1:#0f0d22;--s2:#181535;--s3:#221f44;
  --cu:#c8883c;--cu2:#e0a048;--pu:#7040cc;--te:#287870;
  --tx:#ece8fa;--txd:#9888cc;--mt:#604890;--mu:#483870;
  --muted:#483870;
  --bdr:rgba(200,136,60,.18);--bdrh:rgba(200,136,60,.46);
  --r:3px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

.btn-p{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;background:var(--cu);color:#06050e;border:none;border-radius:var(--r);font-weight:700;transition:background .2s var(--ease-out),transform .16s var(--ease-out),box-shadow .2s var(--ease-out),opacity .15s var(--ease-out);display:inline-block;cursor:pointer}
.btn-p:hover{background:var(--cu2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(200,136,60,.4)}
.btn-p:active{transform:scale(.97)}
.btn-p:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-s{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;color:var(--cu);border:1px solid var(--bdr);border-radius:var(--r);transition:border-color .2s,background .2s,transform .16s var(--ease-out);display:inline-block;background:transparent;cursor:pointer;text-decoration:none}
.btn-s:hover{border-color:var(--cu);background:rgba(200,136,60,.05);transform:translateY(-2px)}
.btn-s:active{transform:scale(.97)}

.inner{max-width:1080px;margin:0 auto}
.sec-tag{font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--cu);opacity:.65;display:block;margin-bottom:.7rem}
.sec-h{font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:300;color:var(--tx);line-height:1.15;margin-bottom:.5rem}
.sec-sub{font-size:17px;color:var(--txd);line-height:1.82;margin-bottom:2.75rem;text-wrap:balance}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);margin:2rem 0}
.spinner{width:20px;height:20px;border:2px solid var(--bdr);border-top-color:var(--cu);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes whisper{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes whisper-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}

/* Focus — visible on keyboard navigation, suppressed for mouse */
:focus-visible{outline:2px solid var(--cu);outline-offset:3px;border-radius:var(--r)}

/* Visually hidden — present to screen readers, invisible to sighted users */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip-to-content link — hidden until focused */
.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.6rem 1.2rem;background:var(--cu);color:#06050e;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:0 0 var(--r) var(--r);text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}

/* Reduced motion — respect OS preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}