/* The Threshold — global stylesheet
   Ported verbatim from the design prototype's <style> block.
   Page-level styling lives inline on each element (see index.html);
   this file holds the base rules, keyframes, hover/zoom states,
   and the responsive @media rules that the inline styles depend on. */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#15100b; }
::selection{ background:#a97c32; color:#fff; }

@keyframes ttRise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
@keyframes ttFade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes ttScroll{ 0%{ transform:translateY(0); opacity:.8;} 50%{ transform:translateY(10px); opacity:.3;} 100%{ transform:translateY(0); opacity:.8;} }

[data-page]{ animation:ttFade .6s ease both; }
.tt-link:hover{ color:#a97c32 !important; }
.tt-card{ transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.tt-card:hover{ transform:translateY(-6px); }
.tt-cta:hover{ background:#a97c32 !important; color:#fff !important; border-color:#a97c32 !important; }
.tt-zoom{ overflow:hidden; }
.tt-zoom img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tt-zoom:hover img{ transform:scale(1.06); }

/* ── mobile nav ── */
.tt-burger{ display:none; }
.tt-mm{ transition:opacity .4s ease, visibility .4s ease; }
.tt-mm-link{ transition:color .3s ease, padding-left .3s ease; }
.tt-mm-link:hover{ color:#e7c98c !important; padding-left:8px; }

@media (max-width:900px){
  .tt-desktop-links{ display:none !important; }
  .tt-burger{ display:flex !important; }
  [style*="repeat(4,1fr)"]{ grid-template-columns:1fr 1fr !important; }
  [style*="repeat(3,1fr)"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  [style*="1.05fr 1fr"]{ grid-template-columns:1fr !important; }
  [style*="1fr 1.05fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:84px 1fr auto"]{ grid-template-columns:48px 1fr !important; }
  [style*="grid-template-columns:84px 1fr auto"] > span:last-child{ grid-column:2; color:#a85a38 !important; padding-top:4px; }
  /* Seasonal calendar rows: 200px date sidebar + content -> stack to one column,
     and move the divider from the right edge to the bottom of the date block. */
  [style*="grid-template-columns:200px 1fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:200px 1fr"] > div:first-child{ border-right:none !important; padding-right:0 !important; padding-bottom:18px; border-bottom:1px solid rgba(120,96,60,.18); }
  /* Stacked 50/50 image+text feature bands (Divine: Broken One / Sky Room / Orb
     Room): once stacked, the image cell has no height and collapses to ~0, and
     the band's vh min-height leaves a big empty gap. Give the image cell a real
     height and drop the band min-height. (Direct-child .tt-zoom only, so the
     concept cards — whose .tt-zoom is nested in an <a> — are unaffected.) */
  [style*="grid-template-columns:1fr 1fr"]{ min-height:0 !important; }
  [style*="grid-template-columns:1fr 1fr"] > .tt-zoom{ height:300px !important; min-height:300px !important; }
  /* Sky Room photo is portrait (848x1264) — a 300px crop cut off the oculus and
     the figure on the black floor. Show the whole image instead. */
  [style*="grid-template-columns:1fr 1fr"] > .tt-sky{ height:auto !important; min-height:0 !important; }
  .tt-sky img{ height:auto !important; width:100% !important; }
  /* Dragonfly Pond is a favorite — feature it a bit taller than a standard band. */
  [style*="grid-template-columns:1fr 1fr"] > .tt-pond{ height:380px !important; min-height:380px !important; }
}
@media (max-width:560px){
  [style*="repeat(4,1fr)"]{ grid-template-columns:1fr 1fr !important; }
  .tt-brand{ font-size:16px !important; letter-spacing:.22em !important; }
}
/* ── Sacred Labyrinth journey carousel (mobile only) ── */
.tt-journey-cards{ display:none; }
.tt-journey-hint{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.28em; color:#a97c32; text-align:center; margin:0 0 18px; }
.tt-journey-track{ position:relative; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
.tt-journey-track::-webkit-scrollbar{ display:none; }
.tt-jc{ flex:0 0 86%; scroll-snap-align:center; box-sizing:border-box; background:#f6efe1; border-radius:8px; box-shadow:0 14px 40px rgba(40,28,12,.16); overflow:hidden; display:flex; flex-direction:column; }
.tt-jc-img{ aspect-ratio:1 / 1; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#e9d3b2; }
.tt-jc-body{ padding:14px 18px 17px; }
.tt-jc-head{ display:flex; flex-wrap:wrap; align-items:flex-start; }
.tt-jc-id{ display:flex; gap:12px; align-items:flex-start; flex:1 1 100%; min-width:0; }
.tt-jc-num{ flex:none; width:30px; height:30px; border-radius:50%; background:#241a0e; color:#e7c98c; font-family:'Cinzel',serif; font-size:16px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tt-jc-titles{ display:flex; flex-direction:column; min-width:0; }
.tt-jc-title{ font-family:'Cinzel',serif; font-weight:600; font-size:21px; letter-spacing:.02em; color:#241a0e; margin:0; line-height:1.14; }
.tt-jc-sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; line-height:1.28; color:#6b5d49; margin-top:3px; }
.tt-jc-meta{ flex:1 1 100%; display:flex; flex-direction:row; justify-content:flex-start; gap:18px; align-items:center; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.03em; color:#8a7a60; white-space:nowrap; margin-top:10px; padding-left:42px; }
.tt-jc-meta span{ display:inline-flex; align-items:center; gap:6px; }
.tt-jc-ic{ width:13px; height:15px; color:#a97c32; flex:none; }
.tt-jc-desc{ font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.4; color:#5a4a35; margin:10px 0 0; }
.tt-journey-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tt-journey-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#cdbd9c; cursor:pointer; transition:width .3s ease, background .3s ease; }
.tt-journey-dots button[aria-current="true"]{ background:#a97c32; width:22px; border-radius:4px; }
.tt-journey-cap{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.18em; color:#8a7a60; text-align:center; margin-top:20px; }
@media (max-width:900px){
  .tt-journey-map{ display:none !important; }
  .tt-journey-cards{ display:block !important; }
}

@media (max-width:640px){
  /* Section hero (header) images over-crop in tall phone viewports: a landscape
     photo in an ~88vh portrait box zooms in hard and cuts off the sides. Shorten
     the hero boxes so far more of each image shows. These stay min-height (not a
     fixed height), so a long title still grows the hero and never clips the nav. */
  header[style*="min-height:88vh"],
  header[style*="min-height:80vh"],
  header[style*="min-height:78vh"]{ min-height:clamp(390px,54vh,470px) !important; }
  /* Full-bleed text-over-image bands (Dragonfly Pond 78vh, Practice Room 62vh,
     Continuation 70vh) over-crop the same way the heroes did. Shorten them too.
     Scoped to <div> so the like-sized hero <header>s above are unaffected. */
  div[style*="display:flex"][style*="min-height:78vh"],
  div[style*="display:flex"][style*="min-height:70vh"],
  div[style*="display:flex"][style*="min-height:62vh"]{ min-height:clamp(420px,56vh,500px) !important; }
  /* Concept (home) hero: 100vh center-crop cut off the round Moon Gate at the
     bottom of the aerial. Shorten the box and bias the crop toward the bottom so
     the whole gateway sits in frame. */
  header[style*="height:100vh"]{ height:auto !important; min-height:clamp(470px,64vh,520px) !important; }
  header[style*="height:100vh"] img{ object-position:50% 50% !important; }
  /* OYWD hero reads as a dark hallway when center-cropped on mobile — favor the
     right side so the illuminated statues are the subject. (Desktop unchanged.) */
  .tt-divine-hero{ object-position:82% 50% !important; }
}