/* Global Cosmeceuticals — Beyond Nature, the Five Elements
   One axis, like the nave of a temple. Gold is the only constant;
   each element lends its own light to its chapter only. */

:root{
  --abyss:#050507;
  --night:#0c0b10;
  --gilt:#D4AF5A;
  --gilt-pale:#F1DCA0;
  --gilt-deep:#8A6A23;
  --parchment:#E9E2D2;
  --ash:#A49D8E;
  --el:#D4AF5A;            /* each chapter overrides this */
  --measure:36rem;
  --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --inscription:'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:var(--parchment);font-family:var(--serif);font-size:1.25rem;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gilt-pale)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gilt-pale);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gilt);color:var(--abyss);padding:.6rem 1rem}
.skip:focus{left:1rem;top:1rem}

/* ---------- Type ---------- */
.t-inscription{font-family:var(--inscription);font-weight:500;letter-spacing:.14em;text-transform:none;margin:0;line-height:1.05}
h2.t-inscription{font-size:clamp(2.6rem,7vw,5.25rem);background:linear-gradient(180deg,var(--gilt-pale) 0%,var(--gilt) 55%,var(--gilt-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.numeral{font-family:var(--inscription);font-size:1.05rem;letter-spacing:.3em;color:var(--el);margin:0 0 .9rem;opacity:.9}
.el-epithet{font-style:italic;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--parchment);margin:.6rem 0 0}
.prose{max-width:var(--measure);margin:2.2rem auto 0;text-align:left}
.prose p{margin:0 0 1.1rem}
.axiom{max-width:30rem;margin:3rem auto 0;font-style:italic;font-size:1.5rem;line-height:1.5;color:var(--gilt-pale)}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem clamp(1rem,4vw,2.5rem);background:linear-gradient(180deg,rgba(5,5,7,.92),rgba(5,5,7,0));}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--parchment);font-family:var(--inscription);font-size:.95rem;letter-spacing:.12em}
.brand img{width:48px;height:auto}
.nav{display:flex;gap:2rem}
.nav a{color:var(--parchment);text-decoration:none;font-size:1.05rem}
.nav a:hover{color:var(--gilt-pale)}
.menu-btn{display:none;font:inherit;font-family:var(--inscription);letter-spacing:.14em;font-size:.9rem;color:var(--gilt-pale);background:transparent;border:1px solid rgba(212,175,90,.55);border-radius:999px;min-height:44px;padding:0 1.1rem;cursor:pointer}
.menu{position:fixed;inset:0;z-index:25;background:rgba(5,5,7,.97);display:flex;align-items:center;justify-content:center;padding:5rem 1.5rem 2rem}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.menu a{font-family:var(--inscription);letter-spacing:.12em;font-size:1.5rem;color:var(--parchment);text-decoration:none;padding:.45rem 0}
.menu a:hover{color:var(--gilt-pale)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.8rem;border-radius:999px;font-family:var(--inscription);letter-spacing:.12em;font-size:.95rem;text-decoration:none;transition:background-color .25s,color .25s,border-color .25s}
.btn-gilt{color:var(--abyss);background:linear-gradient(180deg,var(--gilt-pale),var(--gilt) 60%,#B8902F)}
.btn-gilt:hover{color:var(--abyss);background:var(--gilt-pale)}
.btn-quiet{color:var(--gilt-pale);border:1px solid rgba(212,175,90,.5)}
.btn-quiet:hover{border-color:var(--gilt-pale)}
.btn-big{margin-top:2.4rem;font-size:clamp(.85rem,2.6vw,1.1rem);padding:0 2.2rem;min-height:60px;text-transform:none}

/* ---------- Hero: the ring closes ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 1.25rem 4rem;overflow:hidden;background:radial-gradient(70% 55% at 50% 42%,#14110a 0%,var(--abyss) 70%)}
.stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 28% 72%,#fff8e0 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 44% 12%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 63% 84%,#fff8e0 50%,transparent 51%),
  radial-gradient(1px 1px at 78% 22%,#fff8e0 50%,transparent 51%),radial-gradient(1.5px 1.5px at 88% 58%,#fff8e0 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 52%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 52% 46%,#fff8e0 50%,transparent 51%),
  radial-gradient(1px 1px at 35% 34%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 93% 9%,#fff8e0 50%,transparent 51%),
  radial-gradient(1px 1px at 70% 64%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 18% 90%,#fff8e0 50%,transparent 51%);opacity:.55}
.hero-mark{position:relative;width:min(360px,70vw);aspect-ratio:1;margin-bottom:1.5rem}
.ring-draw{position:absolute;inset:0;width:100%;height:100%}
.ring-draw circle{stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center;animation:ringClose 2.6s cubic-bezier(.6,.05,.2,1) .3s forwards}
.ring-img{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-50%);opacity:0;animation:ringRise 1.6s ease 2.4s forwards}
@keyframes ringClose{to{stroke-dashoffset:0}}
@keyframes ringRise{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.hero-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero-title .t-inscription{font-size:clamp(2.6rem,8vw,6rem);letter-spacing:.16em;background:linear-gradient(180deg,var(--gilt-pale),var(--gilt) 55%,var(--gilt-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .t-line{font-style:italic;font-weight:400;font-size:clamp(1.35rem,3vw,2rem);color:var(--parchment)}
.hero-sub{max-width:32rem;margin:1.4rem auto 0;color:var(--ash);font-size:1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.2rem}

/* ---------- I. The Circle ---------- */
.circle,.genesis,.work,.door{padding:clamp(5rem,12vw,9rem) 1.25rem;text-align:center}
.circle{background:linear-gradient(180deg,var(--abyss),var(--night) 50%,var(--abyss))}
.wheel{position:relative;width:min(600px,92vw);margin:4rem auto 0}
.wheel-stage{position:relative;width:100%;aspect-ratio:1}
.wheel-svg{width:100%;height:auto;display:block;overflow:visible}
.wheel-light{stroke-dasharray:12 88;animation:travel 14s linear infinite}
@keyframes travel{to{stroke-dashoffset:-100}}
.wheel-star{stroke-dasharray:1600;stroke-dashoffset:1600;animation:starDraw 4s ease .5s forwards}
@keyframes starDraw{to{stroke-dashoffset:0}}
.orb{position:absolute;left:calc(var(--x) - 10.5%);top:calc(var(--y) - 10.5%);width:21%;display:flex;flex-direction:column;align-items:center;text-decoration:none;border-radius:50%;mix-blend-mode:screen}
.orb img{width:100%;transition:transform .5s ease,filter .5s ease}
.orb span{position:absolute;bottom:-1.6rem;font-family:var(--inscription);letter-spacing:.16em;font-size:.9rem;color:var(--parchment)}
.orb:hover img,.orb:focus-visible img{transform:scale(1.12);filter:brightness(1.2)}
.wheel figcaption{max-width:32rem;margin:3.2rem auto 0;color:var(--ash);font-size:1.05rem;font-style:italic;line-height:1.6}

/* ---------- II–VI. The element chapters ---------- */
.el{position:relative;padding:0 1.25rem clamp(5rem,10vw,8rem);text-align:center}
.el-fire{--el:#F2873A}
.el-earth{--el:#7FB4E8}
.el-metal{--el:#CFD4DB}
.el-water{--el:#56C8EE}
.el-wood{--el:#86D05A}
.el-band{position:relative;margin:0 -1.25rem;height:clamp(240px,46vw,520px);overflow:hidden}
.el-band img{width:100%;height:100%;object-fit:cover}
.el-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--abyss) 0%,rgba(5,5,7,.25) 22%,rgba(5,5,7,.1) 45%,var(--abyss) 100%)}
.el-head{position:relative;margin-top:clamp(-120px,-12vw,-70px)}
.el-orb{width:clamp(130px,18vw,190px);margin:0 auto 1.2rem;mix-blend-mode:screen;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.el h2.t-inscription{background:none;color:var(--el);text-shadow:0 0 40px color-mix(in srgb,var(--el) 35%,transparent)}
.el-cycle{margin:1rem auto 0;max-width:30rem;color:var(--ash);font-size:1.05rem;font-style:italic}

.shelf{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.25rem,2vw,1.5rem);margin:3.5rem auto 0;max-width:960px;padding-bottom:5rem;position:relative}
.shelf img{width:clamp(110px,20vw,210px);-webkit-box-reflect:below 2px linear-gradient(transparent 62%,rgba(255,255,255,.16));}
.shelf::after{content:"";position:absolute;left:10%;right:10%;bottom:4.6rem;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--el) 55%,transparent),transparent)}

.formulas{list-style:none;margin:1rem auto 0;padding:0;max-width:44rem;columns:2;column-gap:3rem;text-align:left}
.formulas li{break-inside:avoid;padding:.35rem 0 .35rem 1.4rem;position:relative;font-size:1.15rem}
.formulas li::before{content:"";position:absolute;left:0;top:1.05rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--el)}
.formulas-row{columns:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.4rem;text-align:left;max-width:none}

/* ---------- VII. Genesis ---------- */
.genesis{--el:#E7B98A;background:radial-gradient(60% 50% at 50% 60%,#1a130c 0%,var(--abyss) 75%)}
.genesis-img{width:min(1100px,100%);margin:3.5rem auto 2.5rem;border-radius:18px}

/* ---------- VIII. The Great Work ---------- */
.work{--el:var(--gilt)}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;max-width:1100px;margin:3.5rem auto 2.5rem}
.triptych figure{margin:0}
.triptych img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;filter:saturate(.75) contrast(1.05)}
.triptych figcaption{margin-top:.8rem;font-style:italic;color:var(--ash);font-size:1.05rem}

/* ---------- IX. The Door ---------- */
.door{background:radial-gradient(55% 60% at 50% 100%,#1b160b 0%,var(--abyss) 70%)}

/* ---------- Footer ---------- */
.foot{text-align:center;padding:3rem 1.25rem 3.5rem;border-top:1px solid rgba(212,175,90,.18);color:var(--ash);font-size:1rem}
.foot img{margin:0 auto 1rem;width:70px}
.foot p{margin:.3rem auto;max-width:42rem}
.foot-note{font-size:.92rem;line-height:1.6}

/* ---------- Small screens ---------- */
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .brand span{font-size:.8rem}
}
@media (max-width:600px){
  body{font-size:1.15rem}
  .formulas{columns:1}
  .triptych{grid-template-columns:minmax(0,1fr)}
  .orb{width:24%;left:calc(var(--x) - 12%);top:calc(var(--y) - 12%)}
  .orb span{font-size:.72rem;bottom:-1.3rem}
  .shelf img{width:clamp(84px,23vw,150px)}
  .brand span{display:none}
}

/* ---------- Reduced motion: everything arrives already still ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring-draw circle{animation:none;stroke-dashoffset:0}
  .ring-img{animation:none;opacity:1}
  .wheel-light,.el-orb{animation:none}
  .wheel-light{stroke-dasharray:none;opacity:.6}
  .wheel-star{animation:none;stroke-dashoffset:0}
  .orb img{transition:none}
}