/* ============================================================
   ALCHEMY OF ORIGINS — v2 (faithful glossy rebuild, 2026-08-29)
   Recreates the live WordPress/Elementor look with zero builder:
   copper on black, Charmonman script + Crimson Text, her real
   Shutterstock textures pulled from the live site.
   Palette = live Elementor kit: bronze #5E4629, cocoa #423632,
   cream #F4EFE1, rust #A83218, copper #8D643C.
   ============================================================ */
:root{
  --primary:#5E4629;
  --secondary:#423632;
  --text:#F4EFE1;
  --accent:#A83218;
  --copper:#8D643C;
  --black:#000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:"Crimson Text",serif;
     font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--copper)}

/* ---- header ---- */
.site-header{background:var(--black);border-top:3px solid var(--copper);
             padding:24px 0 0;text-align:center}
.site-header .logo img{height:150px;width:auto}
.site-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:44px;padding:16px 0 20px}
.site-nav a{font-family:"Crimson Text",serif;font-size:24px;font-weight:600;
            color:var(--text);text-decoration:none;padding-bottom:4px;
            border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.site-nav a:hover,.site-nav a.active{border-bottom-color:var(--copper);color:#fff}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:"Crimson Text",serif;font-size:26px;font-weight:600;
     color:var(--text);background:var(--primary);padding:13px 36px;text-decoration:none;
     border:none;border-radius:3px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.45);
     transition:background .2s}
.btn:hover{background:#6d5330}
.btn-outline{background:transparent;border:1px solid var(--copper);color:var(--text);
             letter-spacing:.06em}
.btn-outline:hover{background:rgba(141,100,60,.18)}

/* ---- script + section headings ---- */
.script{font-family:"Charmonman",cursive;font-weight:700;color:var(--text);
        text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* ---- home hero + foil ---- */
.hero{height:72vh;min-height:480px;background:url("hero-desk.jpg") center 30%/cover no-repeat}
/* depth: vignette + a specular top-light + melt into the next section */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 120% 90% at 50% 42%,transparent 46%,rgba(0,0,0,.55) 100%),
  linear-gradient(rgba(0,0,0,.28),transparent 26%),
  linear-gradient(transparent 72%,rgba(0,0,0,.82) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 40% at 62% 30%,rgba(255,216,171,.10),transparent 70%);
  mix-blend-mode:screen}
.foil{background:url("copper-foil.jpg") left center/cover no-repeat;text-align:center;
      padding:116px 24px 126px}
/* depth: darkened frame, lit center behind the words */
.foil::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 85% 75% at 50% 46%,transparent 30%,rgba(10,5,2,.62) 100%),
  linear-gradient(rgba(0,0,0,.5),transparent 18%,transparent 82%,rgba(0,0,0,.6))}
.foil h2{font-family:"Charmonman",cursive;font-size:clamp(34px,5vw,50px);font-weight:700;
         margin-bottom:32px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.foil p{font-family:"Alef",sans-serif;font-size:clamp(22px,3vw,30px);max-width:820px;
        margin:0 auto 42px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media (min-width:901px){ .hero,.foil{background-attachment:fixed} }

/* ---- story bands (courses) ---- */
.band{position:relative;padding:110px 8vw;background-size:cover;background-position:center;
      box-shadow:inset 0 46px 70px -34px #000,inset 0 -46px 70px -34px #000}
/* depth: shade the text side, let the image side keep its shine */
.band::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,5,3,.86) 0%,rgba(8,5,3,.55) 46%,rgba(8,5,3,.18) 100%),
  radial-gradient(ellipse 130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
.band.right::before{background:
  linear-gradient(270deg,rgba(8,5,3,.86) 0%,rgba(8,5,3,.55) 46%,rgba(8,5,3,.18) 100%),
  radial-gradient(ellipse 130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
.band>.band-inner{position:relative;max-width:560px}
.band.right>.band-inner{margin-left:auto;text-align:right}
.band h2{font-size:clamp(34px,4.5vw,46px);margin-bottom:24px}
.band p{font-family:"Alef",sans-serif;font-size:clamp(21px,2.4vw,30px);line-height:1.5;margin-bottom:36px}
.band-presence{background-image:url("presence-bg.jpg")}
.band-untold{background-image:url("untold-bg.jpg")}
.decision{background:var(--black);text-align:center;padding:64px 24px}

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:44% 56%;background:var(--black)}
.about-art{background:url("about-art.jpg") center top/cover no-repeat;min-height:100%;
           position:relative}
/* depth: the art melts into the black copy column and holds a soft vignette */
.about-art::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.35) 0%,transparent 18%,transparent 72%,#000 100%),
  radial-gradient(ellipse 120% 100% at 40% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}
@media (max-width:900px){
  .about-art::after{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 20%,transparent 70%,#000 100%)}
}
.about-copy{padding:88px clamp(28px,6vw,90px);text-align:center}
.about-copy h1{font-family:"Charmonman",cursive;font-weight:700;
               font-size:clamp(36px,4vw,50px);color:var(--text);margin-bottom:26px;
               text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.about-copy .element{height:56px;width:auto;margin:0 auto 40px;display:block;opacity:.9}
.about-copy p{font-size:clamp(20px,1.8vw,24px);margin-bottom:26px}
.about-copy > p:first-of-type{font-family:"Alef",sans-serif;font-size:clamp(22px,2vw,26px);line-height:1.5}
.about-copy .stanza{margin-bottom:26px}
.about-copy .stanza p{margin-bottom:2px}
.about-copy .btn{margin-top:22px}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-art{min-height:52vw}
}

/* ---- page hero (contact / application) ---- */
.page-hero{position:relative;background-size:cover;background-position:center;
           padding:96px 24px 104px;text-align:center;
           box-shadow:inset 0 -46px 70px -34px #000}
.page-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 90% 90% at 50% 40%,rgba(5,4,6,.5) 30%,rgba(5,4,6,.85) 100%)}
.page-hero>*{position:relative}
.page-hero h1{font-size:clamp(36px,5vw,50px)}
.page-hero .sub{font-size:22px;max-width:640px;margin:14px auto 0}
.hero-contact{background-image:url("contact-bg.jpg")}
.hero-application{background-image:url("application-bg.jpg")}

/* ---- forms ---- */
.form-wrap{max-width:1060px;margin:0 auto;padding:72px 24px;display:grid;
           grid-template-columns:1.2fr .8fr;gap:56px}
.form-wrap.single{grid-template-columns:minmax(0,720px);justify-content:center}
label{display:block;font-family:"Alef",sans-serif;font-size:16px;letter-spacing:.04em;
      margin:22px 0 8px;color:var(--text)}
input[type=text],input[type=email],textarea,select{
  width:100%;background:#120e0b;border:1px solid #3a2e22;border-radius:3px;
  color:var(--text);font-family:"Crimson Text",serif;font-size:20px;padding:12px 14px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--copper);outline-offset:1px}
textarea{min-height:140px;resize:vertical}
.details h3{font-family:"Alef",sans-serif;font-size:17px;letter-spacing:.1em;
            text-transform:uppercase;color:var(--copper);margin:26px 0 4px}
.details p{font-size:20px}
.form-note{font-size:18px;color:#b9ae9a;margin-top:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---- resources strip ---- */
.resources{background:radial-gradient(ellipse 90% 100% at 50% 30%,rgba(0,0,0,.62) 20%,rgba(0,0,0,.9) 100%),
           var(--black) url("suede.jpg") center/cover no-repeat;
           padding:84px 24px 92px;border-top:1px solid #1c130c;
           box-shadow:inset 0 42px 60px -30px #000}
.resources h2{font-family:"Crimson Text",serif;font-size:40px;font-weight:600;
              text-align:center;margin-bottom:58px}
.res-grid{max-width:1120px;margin:0 auto;display:grid;
          grid-template-columns:repeat(3,1fr);gap:52px 60px}
.res-item h3{font-size:23px;font-weight:600;line-height:1.35;margin-bottom:12px}
.res-item a{font-family:"Duru Sans",sans-serif;font-size:14px;letter-spacing:.05em;
            color:var(--copper);text-decoration:none}
.res-item a:hover{color:var(--accent)}
@media (max-width:900px){ .res-grid{grid-template-columns:1fr} .form-wrap{grid-template-columns:1fr} }

/* ---- legal ---- */
.legal-doc{max-width:820px;margin:0 auto;padding:72px 24px}
.legal-doc h1{font-size:38px;font-weight:600;margin-bottom:8px}
.legal-doc .updated{font-family:"Duru Sans",sans-serif;font-size:14px;color:#b9ae9a;margin-bottom:36px}
.legal-doc h2{font-size:26px;font-weight:600;margin:36px 0 12px;color:#fff}
.legal-doc p,.legal-doc li{font-size:20px;margin-bottom:14px}
.legal-doc ul{padding-left:26px}

/* ---- splash ---- */
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:34px;background:
        radial-gradient(ellipse at center,#160f09 0%,#000 72%)}
.splash img{height:min(300px,40vh);width:auto}
.splash .tag{font-family:"Duru Sans",sans-serif;font-size:15px;letter-spacing:.34em;
             text-transform:uppercase;color:var(--copper)}

/* ---- motion: parallax hosts, reveals, shimmer, dust ---- */
.hero,.foil,.band,.page-hero,.splash{position:relative;overflow:hidden}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.foil>*,.hero>*,.page-hero>*{position:relative;z-index:2}

.reveal{opacity:0;transform:translateY(22px);
        transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* gold-foil shimmer: a slow light sweep across the copper panel */
.foil::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,216,171,.14) 50%,transparent 58%);
  background-size:280% 100%;
  animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}

/* script headings breathe with a soft gold glow */
.script,.foil h2{animation:glow 6s ease-in-out infinite}
@keyframes glow{
  0%,100%{text-shadow:0 2px 14px rgba(0,0,0,.5)}
  50%{text-shadow:0 2px 14px rgba(0,0,0,.5),0 0 26px rgba(233,183,121,.35)}}

/* buttons: sheen slides across on hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:44%;
  background:linear-gradient(105deg,transparent,rgba(255,216,171,.28),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn:hover::after{left:130%}

@media (prefers-reduced-motion: reduce){
  .foil::after,.script,.foil h2,.btn::after{animation:none;transition:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- footer ---- */
.site-footer{background:var(--black);text-align:center;padding:60px 24px 44px;
             border-top:1px solid #14100c}
.site-footer .logo img{height:118px;width:auto;margin-bottom:24px}
.socials{display:flex;justify-content:center;gap:18px;margin-bottom:30px}
.socials a{position:relative;width:48px;height:48px;border-radius:50%;
           border:1.5px solid rgba(141,100,60,.35);background:radial-gradient(circle at 32% 28%,#241a10,#120d08);
           display:flex;align-items:center;justify-content:center;color:var(--copper);
           text-decoration:none;
           transition:color .3s,border-color .3s,transform .3s,box-shadow .3s,background .3s}
/* gold glimmer ring: a foil light circling the rim */
.socials a::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;
  background:conic-gradient(#6b5d3f 0%,#E9B779 6%,#FFF3DC 9%,#E9B779 12%,#6b5d3f 22%,
             #8D643C 40%,#D6A329 50%,#8D643C 60%,#6b5d3f 78%,#EABE81 90%,#6b5d3f 100%);
  filter:drop-shadow(0 0 5px rgba(233,183,121,.5));opacity:.8;
  animation:ringspin 7s linear infinite}
.socials a:nth-child(2)::before{animation-delay:-1.8s}
.socials a:nth-child(3)::before{animation-delay:-3.6s}
.socials a:nth-child(4)::before{animation-delay:-5.4s}
.socials a:hover::before,.socials a:focus-visible::before{
  animation-duration:1.6s;opacity:1;
  filter:drop-shadow(0 0 9px rgba(233,183,121,.85))}
@keyframes ringspin{to{transform:rotate(360deg)}}
.socials svg{width:19px;height:19px;display:block;transition:transform .3s}
.socials a:hover,.socials a:focus-visible{
  color:#1a1310;border-color:#e9b779;transform:translateY(-4px);
  background:linear-gradient(135deg,#e9b779,#be8c44 55%,#d6a329);
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 22px rgba(233,183,121,.45)}
.socials a:hover svg{transform:scale(1.08)}
.socials a::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);white-space:nowrap;pointer-events:none;
  font-family:"Duru Sans",sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);background:rgba(10,7,4,.92);border:1px solid var(--accent-dim,#6b5d3f);
  padding:6px 12px;border-radius:3px;opacity:0;transition:opacity .25s,transform .25s}
.socials a:hover::after,.socials a:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.socials a,.socials svg{transition:none}.socials a:hover{transform:none}.socials a::before{animation:none;opacity:.7}}
.legal-line{font-family:"Duru Sans",sans-serif;font-size:16px;color:var(--text)}
.legal-line a{color:var(--text);text-decoration:none}
.legal-line a:hover{color:var(--copper)}

.btn-sm{font-size:22px}

/* ---- gleam layer: light inside the photos ---- */
.light-pass{position:absolute;inset:-10% -30%;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 44%,rgba(255,225,185,.38) 50%,transparent 56%);
  background-size:260% 100%;mix-blend-mode:overlay;
  animation:lightpass 13s ease-in-out infinite}
.about-art .light-pass{animation-duration:17s}
@keyframes lightpass{
  0%,52%{background-position:130% 0;opacity:0}
  58%{opacity:1}
  92%,100%{background-position:-40% 0;opacity:0}}

.glint{position:absolute;pointer-events:none;z-index:1;opacity:0;
  transform:translate(-50%,-50%) scale(.4);
  background:
    radial-gradient(circle,rgba(255,240,214,.95) 0%,rgba(255,216,171,.35) 22%,transparent 42%),
    linear-gradient(rgba(255,236,205,.9),rgba(255,236,205,.9)),
    linear-gradient(90deg,rgba(255,236,205,.9),rgba(255,236,205,.9));
  background-size:100% 100%,1.5px 100%,100% 1.5px;
  background-position:center,center,center;background-repeat:no-repeat;
  filter:blur(.4px) drop-shadow(0 0 6px rgba(233,183,121,.8));
  animation:glint 7s ease-in-out infinite}
@keyframes glint{
  0%,74%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  80%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(18deg)}
  86%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(32deg)}}

.pointer-sheen{position:absolute;inset:0;pointer-events:none;z-index:1;
  mix-blend-mode:screen;opacity:0;transition:opacity .5s ease}

@media (prefers-reduced-motion: reduce){
  .light-pass,.glint{display:none}
  .pointer-sheen{display:none}
}