/* ==========================================================================
   Cylfaa · luxury layer (October 2026)
   One shared file, loaded after each page's own styles. Calm, spacious, soft.
   Brand stays: navy + gold, Cinzel · Playfair Display · Nunito · DM Mono.
   ========================================================================== */

:root{
  --hair: rgba(245,232,200,.09);
  --hair-strong: rgba(245,232,200,.16);
  --gold-soft: rgba(229,160,48,.28);
  --gold-glow: rgba(229,160,48,.14);
  --rule: var(--hair);                     /* every existing border becomes a hairline */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .7s;
  --radius: 16px;
  --radius-s: 10px;
  --lift: 0 40px 80px -48px rgba(0,0,0,.85), 0 1px 0 rgba(245,232,200,.04) inset;
}

/* ---------- page feel ---------- */
html{scroll-behavior:smooth}
body{
  font-size:17.5px; line-height:1.78; letter-spacing:.003em;
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(26,48,80,.55), transparent 70%),
    var(--navy);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--gold);color:var(--navy)}
a{transition:color .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease)}

/* soft page-to-page fades (browsers that support cross-document view transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:luxe-out .45s cubic-bezier(.16,1,.3,1) both}
::view-transition-new(root){animation:luxe-in .85s cubic-bezier(.16,1,.3,1) both}
@keyframes luxe-out{to{opacity:0}}
@keyframes luxe-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- type ---------- */
h2{font-weight:600; letter-spacing:-.012em; line-height:1.12; font-size:clamp(2rem,4.2vw,3.15rem)}
h2 em{font-weight:500}
h3{letter-spacing:.005em}
.lede{font-size:1.1rem; line-height:1.8; color:#b4c0cf}
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:.68rem; letter-spacing:.3em; color:var(--gold); opacity:.92;
}
.eyebrow::before{content:""; width:32px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.hero .eyebrow::after,.ph .eyebrow::after,.phero .eyebrow::after{content:""; width:32px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
.hero h1,.phero h1,.ph h1{font-weight:700; letter-spacing:.07em}

/* ---------- space ---------- */
.inner{max-width:1160px}
.hero{padding-block:clamp(72px,9vw,120px) 24px}
.ph,.phero{padding-block:clamp(72px,9vw,128px) clamp(48px,6vw,80px)}
.sec,.story,.homes,.thread,.her,.aud,.herband,.game,.more,.play,.sources,.vmap{
  padding-block:clamp(84px,10vw,140px);
}
.mapwrap{padding-block:12px clamp(64px,8vw,110px)}
.sec .head,.homes .head,.thread .intro{margin-bottom:clamp(28px,4vw,48px)}
.grid{gap:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px) !important}
.steps,.routes,.gaps,.dig,.emps,.cards,.packs,.pillars,.aud .inner,.thread .inner{gap:clamp(20px,2.4vw,32px) !important}
.foot{padding-block:clamp(64px,7vw,96px) clamp(56px,6vw,80px)}

/* section dividers: a gold hairline that fades out at both ends */
.sec,.story,.homes,.thread,.her,.aud,.herband,.foot{border-top:0 !important; position:relative}
.sec::before,.story::before,.homes::before,.thread::before,.her::before,.aud::before,.herband::before,.foot::before{
  content:""; position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(1160px,calc(100% - 32px)); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}

/* ---------- cards ---------- */
.home,.tcard,.steps li,.aud article,.playcard,.owlline,.stat3,.job,.panel,.routes li,.curric,
.formbox,.form-box,.pillar,.card,.pack,.gcard,.scard,.first,.later,.note,.rules li,.psteps li,.byd{
  position:relative;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius) !important;
  background:linear-gradient(180deg,rgba(26,48,80,.34),rgba(11,17,32,.28));
  box-shadow:var(--lift);
  transition:transform var(--slow) var(--ease), border-color var(--slow) var(--ease), box-shadow var(--slow) var(--ease), background var(--slow) var(--ease);
}
.home,.tcard,.aud article,.panel,.formbox,.form-box,.card,.pack,.stat3{padding:clamp(26px,3vw,40px) !important}
.steps li,.routes li,.job,.playcard,.pillar,.gcard,.scard{padding:clamp(22px,2.4vw,30px) !important}

/* the old 3px coloured tops become a soft glowing hairline in the home's colour */
.home::after,.stat3::after,.panel::after,.formbox::after,.form-box::after,.pillar::after,.pack::after,.playcard::after,.gcard::after,.scard::after,.owlline::after{
  content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--c,var(--pc,var(--gold))),transparent);
  opacity:.85; pointer-events:none;
}
.home:hover,.tcard:hover,.aud article:hover,.playcard:hover,.pack:hover,.card:hover,.job:hover,.routes li:hover,.gcard:hover,.steps li:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c,var(--gold)) 38%,transparent) !important;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(229,160,48,.05), 0 20px 60px -40px var(--gold-glow);
}
.home:target{box-shadow:0 0 0 1px var(--c), 0 30px 80px -30px color-mix(in srgb,var(--c) 45%,transparent) !important}

/* inner pieces of cards: quieter */
.stat{border-color:var(--hair) !important; padding-block:18px !important}
.stat .n,.stat3 .n{font-weight:600; letter-spacing:-.01em}
.threads{gap:14px !important}
.threads div,.dig li{background:transparent !important; border:1px solid var(--hair); border-radius:var(--radius-s) !important; padding:14px 16px !important}
.gaps li{border-left-width:1px !important; padding-left:18px !important}
.dir a{border-left-width:1px !important; border-radius:999px !important; padding:6px 14px !important}

/* ---------- chips, badges, labels ---------- */
.chip,.badge,.form-tag,.hchip,.first-badge,.strip .tag{
  background:transparent !important;
  border:1px solid currentColor; border-radius:999px !important;
  padding:5px 13px !important; font-size:.64rem !important; letter-spacing:.16em !important;
  opacity:.9;
}
.group{letter-spacing:.3em !important; font-size:.66rem !important; border-top-color:var(--hair) !important; padding-top:28px !important}

/* ---------- buttons ---------- */
.cta,.btn,.btn.primary,.submit-btn,.fbtn,.pill{
  border-radius:999px !important;
  padding:15px 30px !important;
  font-weight:700 !important; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem !important;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important;
}
.cta,.btn.primary,.submit-btn,.fbtn,.btn:not(.ghost),.pill:not(.ghost){
  background:linear-gradient(135deg,#f3c25c 0%,#e5a030 45%,#c8882a 100%) !important;
  color:#0b1120 !important; border:0 !important;
  box-shadow:0 14px 34px -16px rgba(229,160,48,.65);
}
.btn:not(.ghost){background:linear-gradient(135deg,color-mix(in srgb,var(--c,#e5a030) 75%,#fff 25%),var(--c,#e5a030)) !important}
.cta:hover,.btn:hover,.submit-btn:hover,.fbtn:hover,.pill:hover{transform:translateY(-2px); box-shadow:0 20px 44px -18px rgba(229,160,48,.75)}
.btn.ghost,.pill.ghost{background:transparent !important; color:var(--cream) !important; border:1px solid var(--hair-strong) !important; box-shadow:none}
.btn.ghost:hover,.pill.ghost:hover{border-color:var(--gold-soft) !important}

.door{
  border:1px solid var(--hair) !important; border-radius:var(--radius) !important;
  background:linear-gradient(180deg,rgba(26,48,80,.45),rgba(11,17,32,.3)) !important;
  padding:18px 24px !important; min-width:200px !important;
  transition:transform var(--slow) var(--ease), border-color var(--slow) var(--ease), box-shadow var(--slow) var(--ease) !important;
}
.door:hover{transform:translateY(-3px) !important; border-color:var(--gold-soft) !important; box-shadow:0 30px 60px -40px var(--gold-glow)}
.door small{letter-spacing:.2em !important}

/* ---------- tabs ---------- */
.tab-btn{border-radius:999px !important; border:1px solid var(--hair) !important; padding:10px 20px !important; transition:all .5s var(--ease) !important}
.tab-btn[aria-selected="true"]{border-color:var(--gold-soft) !important; background:rgba(229,160,48,.1) !important; color:#f0b84a !important}
.tab-panel{animation:luxe-panel .6s var(--ease) both}
@keyframes luxe-panel{from{opacity:0;transform:translateY(8px)}}

/* ---------- forms ---------- */
.fld input,.fld select,.fld textarea,
.form-box input[type=text],.form-box input[type=email],.form-box select,.form-box textarea,
.field input,.field select,.field textarea{
  background:rgba(245,232,200,.035) !important;
  border:1px solid var(--hair-strong) !important;
  border-radius:var(--radius-s) !important;
  padding:14px 16px !important;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.fld input:focus,.fld select:focus,.fld textarea:focus,
.form-box input:focus-visible,.form-box select:focus-visible,.form-box textarea:focus-visible,
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none !important; border-color:var(--gold-soft) !important;
  box-shadow:0 0 0 4px rgba(229,160,48,.10) !important; background:rgba(245,232,200,.05) !important;
}

/* ---------- top bar & footer ---------- */
.top{background:rgba(11,17,32,.72) !important; backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--hair) !important}
.top .inner{padding-block:18px !important}
.brand b{font-weight:700; letter-spacing:.01em}
.nav{gap:6px 30px !important}
.nav a{font-weight:600; letter-spacing:.04em; font-size:.9rem; border-bottom:0 !important; position:relative}
.nav a::after{content:""; position:absolute; left:50%; right:50%; bottom:-4px; height:1px; background:var(--gold); transition:left .5s var(--ease), right .5s var(--ease)}
.nav a:hover::after{left:0; right:0}
.foot{background:linear-gradient(180deg,var(--night),#080d18) !important}
.foot nav{gap:10px 26px !important}
.foot nav a{text-decoration:none; opacity:.8}
.foot nav a:hover{opacity:1; color:var(--gold)}

/* ---------- the map ---------- */
.map{filter:drop-shadow(0 40px 80px rgba(0,0,0,.55))}
.stop .halo,.stop .ring,.mstop .halo{transition:fill-opacity .8s var(--ease), stroke-width .8s var(--ease), opacity .8s var(--ease) !important}

/* ---------- gentle reveal as you scroll (never hidden: starts at 50%) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .home,.tcard,.steps li,.aud article,.playcard,.stat3,.job,.panel,.routes li,.card,.pack,.gcard,.pillar,.sec .head,.homes .head,
    .myth,.paycard,.sortcard,.sv-card,.sv-steps li,.scard,.formbox,.form-box,.callout,.prose section,.lost-home,.byd,.facts > div{
      animation:luxe-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 24%;
    }
    @keyframes luxe-rise{from{opacity:.3;transform:translateY(32px) scale(.99)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  @view-transition{navigation:none}
}

/* ---------- small screens ---------- */
@media (max-width:640px){
  body{font-size:16.5px}
  .sec,.story,.homes,.thread,.her,.aud,.herband,.game,.more,.play,.sources{padding-block:64px}
  .home,.tcard,.aud article,.panel,.formbox,.form-box,.card,.pack,.stat3{padding:22px !important}
  .door{min-width:0 !important; width:100%}
}

/* ---------- mobile menu (burger) ---------- */
.burger{display:none}
@media (max-width:860px){
  .top .inner{flex-wrap:nowrap !important; padding-block:14px !important}
  .burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0 12px; margin-left:auto;
    background:transparent; border:1px solid var(--hair-strong); border-radius:999px; cursor:pointer;
    transition:border-color .5s var(--ease), background .5s var(--ease);
  }
  .burger span{display:block; height:1.5px; background:var(--cream); border-radius:2px; transition:transform .55s var(--ease), opacity .4s var(--ease)}
  .burger:hover,.burger:focus-visible{border-color:var(--gold-soft)}
  .menu-open .burger{background:rgba(229,160,48,.08); border-color:var(--gold-soft)}
  .menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-open .burger span:nth-child(2){opacity:0}
  .menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav{
    position:absolute; left:0; right:0; top:100%; height:calc(100dvh - 74px - env(safe-area-inset-top,0px));
    flex-direction:column; flex-wrap:nowrap !important; gap:0 !important;
    padding:24px max(24px,env(safe-area-inset-left,0px)) calc(32px + env(safe-area-inset-bottom,0px));
    background:#0b1120;
    backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
    overflow-y:auto; z-index:20;
  }
  .menu-open .nav{opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s}
  .nav a{font-family:var(--f-head); font-size:1.65rem !important; font-weight:600; letter-spacing:.005em; padding:18px 4px !important; border-bottom:1px solid var(--hair) !important}
  .nav a::after{display:none}
  .menu-lock,.menu-lock body{overflow:hidden}
}

/* ---------- readable small print & comfortable tap sizes ---------- */
.eyebrow,.chip,.badge,.src,.group,.door small,.acro-cap,.form-tag,.hchip,.legal,.sn span,.k,.t,.tag,.pill,.place .en,.who,.threads dt,.paynote,.gnote,.fine,.scope,.note{font-size:max(12px,.72rem) !important}
.foot nav a,.src a,.dir a,.legal a,.byd-tab,.hchip,.counties a{display:inline-flex; align-items:center; min-height:40px}
.foot nav{row-gap:4px !important}
.visit,.go a,.aud .go a{display:inline-flex; align-items:center; min-height:44px}
.brand span,.fld,.fld label,label.fld,.req,small,.hint,.pay,p.tag,.dir small{font-size:max(12px,.75rem) !important}

@media (max-width:640px){
  .eyebrow{display:block}
  .eyebrow::before,.eyebrow::after{display:none}
}

/* ==========================================================================
   Motion pass (16 Oct 2026): slower, softer, classier.
   Everything ends fully visible; nothing waits on a script.
   ========================================================================== */
:root{--ease-lux:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: no-preference){
  /* first view: the hero settles in, one line after another */
  :is(.hero,.ph,.phero,.dochero,.sb-hero,.sv-hero,.lost) .inner > *{animation:lux-settle 1.15s var(--ease-lux) both}
  :is(.hero,.ph,.phero,.dochero,.sb-hero,.sv-hero,.lost) .inner > :nth-child(2){animation-delay:.09s}
  :is(.hero,.ph,.phero,.dochero,.sb-hero,.sv-hero,.lost) .inner > :nth-child(3){animation-delay:.18s}
  :is(.hero,.ph,.phero,.dochero,.sb-hero,.sv-hero,.lost) .inner > :nth-child(4){animation-delay:.27s}
  :is(.hero,.ph,.phero,.dochero,.sb-hero,.sv-hero,.lost) .inner > :nth-child(n+5){animation-delay:.36s}
  @keyframes lux-settle{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  /* the village map fades up like dawn */
  .mapwrap .map,.vmap svg{animation:lux-dawn 1.8s .25s var(--ease-lux) both}
  @keyframes lux-dawn{from{opacity:0;filter:drop-shadow(0 40px 80px rgba(0,0,0,0)) brightness(.6)}}
  /* eyebrow rules draw themselves */
  .eyebrow::before,.eyebrow::after{transform-origin:right;animation:lux-draw 1.2s .3s var(--ease-lux) both}
  .eyebrow::after{transform-origin:left}
  @keyframes lux-draw{from{transform:scaleX(0)}}
  /* buttons: a slow light passes across on hover */
  .cta,.btn.primary,.fbtn{position:relative;overflow:hidden}
  .cta::after,.btn.primary::after,.fbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform 1.1s var(--ease-lux);pointer-events:none}
  .cta:hover::after,.btn.primary:hover::after,.fbtn:hover::after{transform:translateX(120%)}
  /* cards and links settle slowly on hover */
  .home,.pack,.job,.card,.playcard,.gcard,.sv-card,.paycard,.myth,.scard,.lost-home,.byd{transition:transform .9s var(--ease-lux),border-color .9s var(--ease-lux),box-shadow .9s var(--ease-lux),background .9s var(--ease-lux) !important}
  /* header: a soft shadow arrives once you scroll */
  .top{transition:background .8s var(--ease-lux),box-shadow .8s var(--ease-lux),border-color .8s var(--ease-lux)}
  .top.scrolled{box-shadow:0 18px 40px -24px rgba(0,0,0,.8);border-bottom-color:var(--hair-strong) !important}
  /* tap-to-open panels: content drifts in */
  details.tap[open] .tap-body > *{animation:lux-settle .7s var(--ease-lux) both}
  details.tap[open] .tap-body > :nth-child(2){animation-delay:.06s}
  details.tap[open] .tap-body > :nth-child(n+3){animation-delay:.12s}
}