:root{
  --gold:#b7832f;
  --gold-soft:#d8b36b;
  --ink:#151515;
  --muted:#373737;
  --glass:rgba(255,255,255,.30);
  --glass-border:rgba(255,255,255,.76);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  color:var(--ink);
  font-family:"Inter",sans-serif;
  background:#f7f1e8;
}

.background,
.overlay,
#particles,
.cursor-glow{
  position:fixed;
  inset:0;
}

.background{
  z-index:-4;
  background:url("assets/background.png") center center/cover no-repeat;
  transform:scale(1.035);
  will-change:transform;
}

.overlay{
  z-index:-3;
  background:
    radial-gradient(circle at 58% 42%, rgba(255,255,255,.03), rgba(255,255,255,.12) 38%, rgba(255,255,255,.05) 70%),
    linear-gradient(90deg, rgba(255,250,242,.03), rgba(255,255,255,.08));
  pointer-events:none;
}

#particles{z-index:-2;pointer-events:none}
.cursor-glow{
  z-index:-1;
  pointer-events:none;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,218,142,.22), rgba(255,255,255,.08) 38%, transparent 72%);
  transform:translate(-50%,-50%);
  filter:blur(8px);
  opacity:.75;
  left:50%;
  top:50%;
  will-change:left,top;
}

.page-shell{
  position:relative;
  height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:clamp(32px,5vh,72px) clamp(20px,4vw,72px) clamp(20px,3vh,36px);
}

.hero{
  width:min(980px,100%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:auto;
  transform-style:preserve-3d;
}

.brand{
  font-family:"Cormorant Garamond",serif;
  color:#5c431f;
  display:flex;
  flex-direction:column;
  font-size:clamp(28px,3.1vw,48px);
  line-height:1.1;
  letter-spacing:.32em;
  text-indent:.32em;
  font-weight:500;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.ornament{
  width:min(390px,58vw);
  display:flex;
  align-items:center;
  gap:16px;
  margin:22px 0 24px;
}
.ornament.small{width:min(220px,38vw);margin:18px 0}
.ornament span,
.footer-line span{
  display:block;
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(183,131,47,.75));
}
.ornament span:last-child,
.footer-line span:last-child{background:linear-gradient(90deg, rgba(183,131,47,.75), transparent)}
.ornament i,
.footer-line i{
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 14px rgba(183,131,47,.55);
}

.title{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(64px,9.6vw,150px);
  line-height:.84;
  font-weight:400;
  letter-spacing:-.03em;
  white-space:nowrap;
  text-shadow:0 2px 0 rgba(255,255,255,.45);
}
.title em{
  font-style:normal;
  color:transparent;
  background:linear-gradient(120deg,#8b5b13,#d8ad55 43%,#8a5d1c 78%);
  -webkit-background-clip:text;
  background-clip:text;
}

.subtitle{
  margin:0 0 30px;
  font-size:clamp(16px,1.4vw,22px);
  line-height:1.6;
  color:#292929;
  font-weight:300;
  text-shadow:0 1px 8px rgba(255,255,255,.75);
}

.clock-card{
  width:min(700px,92vw);
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(9px,1.3vw,20px);
  padding:clamp(20px,3vw,34px) clamp(18px,3.4vw,42px);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,246,231,.22));
  border:1px solid var(--glass-border);
  box-shadow:
    0 20px 60px rgba(123,84,24,.13),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(201,154,78,.18);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
.clock-card::before{
  content:"";
  position:absolute;
  inset:-80% 45% -80% -20%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.56),transparent);
  transform:translateX(-100%) rotate(8deg);
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,58%{transform:translateX(-120%) rotate(8deg)}78%,100%{transform:translateX(240%) rotate(8deg)}}

.clock-segment{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.clock-segment strong{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(54px,6.2vw,90px);
  line-height:.8;
  font-weight:500;
  color:transparent;
  background:linear-gradient(180deg,#7a4b09,#c89a42 54%,#6f460c);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 7px 22px rgba(164,111,24,.12);
  font-variant-numeric:tabular-nums;
}
.clock-segment span{
  margin-top:14px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(10px,.9vw,13px);
  color:#292929;
  white-space:nowrap;
}
.clock-divider{
  z-index:1;
  font-family:"Cormorant Garamond",serif;
  color:#9f6f20;
  font-size:clamp(32px,4vw,56px);
  transform:translateY(-8px);
}
.clock-separator{
  width:1px;
  height:88px;
  background:linear-gradient(transparent,rgba(176,125,47,.48),transparent);
}
.period-segment strong{font-size:clamp(46px,5.2vw,76px)}

.footer{
  width:min(700px,92vw);
  text-align:center;
  color:#3e3427;
  font-size:clamp(12px,1vw,16px);
  line-height:1.25;
}
.footer-line{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.footer p{margin:4px 0}
.footer strong{letter-spacing:.08em;color:#241b12}

@media (max-width:760px){
  body{overflow:auto;min-height:100%}
  .page-shell{min-height:100dvh;height:auto;padding-top:28px}
  .brand{font-size:28px;letter-spacing:.22em;text-indent:.22em}
  .title{font-size:clamp(58px,17vw,92px);white-space:normal;line-height:.82}
  .subtitle{font-size:15px;line-height:1.45;margin-bottom:22px}
  .clock-card{
    grid-template-columns:1fr auto 1fr auto 1fr;
    border-radius:24px;
    padding:24px 16px 20px;
  }
  .clock-separator{display:none}
  .period-segment{grid-column:1/-1;margin-top:8px;border-top:1px solid rgba(176,125,47,.26);padding-top:14px}
  .period-segment strong{font-size:42px}
  .clock-segment strong{font-size:clamp(44px,14vw,66px)}
  .clock-segment span{font-size:9px;letter-spacing:.15em}
  .clock-divider{font-size:30px}
  .footer{margin-top:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .cursor-glow,#particles{display:none}
}