:root{
  --espresso:#231A15; --umber:#4A3527; --parchment:#F1E8D2;
  --pearl:#D8C7A0; --bronze:#B59A63; --green:#33482F;
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--parchment);color:var(--espresso);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.page{display:grid;grid-template-columns:5fr 6fr;min-height:100vh;min-height:100svh}

/* left: candlelit panel */
.visual{position:relative;background:var(--espresso);overflow:hidden;min-height:100svh}
.fan{position:absolute;inset:0;width:100%;height:100%}
.ring{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(56%,300px);aspect-ratio:1;border:1px solid var(--bronze);border-radius:50%;display:grid;place-items:center;background:var(--espresso)}
.ring img{width:34%;height:auto;display:block}
.caption{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,44px);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze)}

/* right: parchment */
.copy{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,4vw,56px) clamp(24px,6vw,96px)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--umber)}
.mark{padding:clamp(40px,8vh,96px) 0}
.wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(44px,8.2vw,112px);letter-spacing:.14em;text-transform:uppercase;line-height:1;margin-right:-.14em}
.deva{font-family:var(--deva);font-size:clamp(30px,3.6vw,48px);color:var(--umber);margin-top:.5em;line-height:1.2}
.mark hr{border:0;border-top:1px solid var(--bronze);width:clamp(72px,9vw,140px);margin:clamp(22px,3vh,34px) 0}
.tagline{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--umber)}
.note{max-width:34rem}
.note>p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.4}
.links{list-style:none;margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--pearl)}
.links li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--pearl);font-size:15px}
.links span{color:var(--umber)}
.links a{color:var(--espresso);text-decoration:none;border-bottom:1px solid var(--bronze);transition:color .2s,border-color .2s}
.links a:hover,.links a:focus-visible{color:var(--green);border-color:var(--green);outline:none}
.foot{display:flex;justify-content:space-between;margin-top:clamp(32px,6vh,64px);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}

@media (prefers-reduced-motion:no-preference){
  .ring,.wordmark,.deva,.tagline,.note{animation:rise .9s cubic-bezier(.2,.6,.2,1) both}
  .wordmark{animation-delay:.1s}.deva{animation-delay:.2s}.tagline{animation-delay:.3s}.note{animation-delay:.4s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ring{animation-name:fade}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

@media (max-width:820px){
  .page{grid-template-columns:1fr}
  .visual{min-height:38svh}
  .ring{top:50%;width:min(52vw,220px)}
  .caption{display:none}
  .mark{padding:40px 0 36px}
  .wordmark{letter-spacing:.1em;margin-right:0}
}