/* ————— sky color registration (lets the gradient cross-fade) ————— */
@property --sky-hi { syntax: '<color>'; inherits: true; initial-value: #2F6FBE; }
@property --sky-lo { syntax: '<color>'; inherits: true; initial-value: #BFE0F4; }

:root {
  --sky-hi: #2F6FBE;
  --sky-lo: #BFE0F4;
  --ink: #F7F2E4;
  --gold: #D9B44A;
  --roof-far: #93B7D8;
  --roof-mid: #61789B;
  --roof-near: #4A3A31;
  --stone-hi: #DCC094;
  --stone-lo: #B69468;
  --glow: rgba(26, 24, 38, .30);
  --cloud-op: .92;
  --stars-op: 0;
  --moon-op: 0;
  --bldg-w: clamp(64px, 8vw, 122px);
  --pad: clamp(20px, 3vw, 44px);
}

[data-sky="dawn"] {
  --sky-hi: #5E79BC;
  --sky-lo: #F4C69B;
  --roof-far: #A48FB6;
  --roof-mid: #6F5E86;
  --roof-near: #43333C;
  --stone-hi: #E0BC8F;
  --stone-lo: #AE8459;
  --glow: rgba(245, 184, 76, .45);
  --cloud-op: .8;
  --stars-op: .35;
  --moon-op: .3;
}

[data-sky="dusk"] {
  --sky-hi: #414C8C;
  --sky-lo: #EC9A66;
  --roof-far: #7C6C9C;
  --roof-mid: #544B74;
  --roof-near: #362D3E;
  --stone-hi: #C79A70;
  --stone-lo: #916447;
  --glow: rgba(255, 198, 110, .75);
  --cloud-op: .55;
  --stars-op: .5;
  --moon-op: .6;
}

[data-sky="night"] {
  --sky-hi: #0D1630;
  --sky-lo: #2C3E63;
  --roof-far: #26344E;
  --roof-mid: #1A2436;
  --roof-near: #10151F;
  --stone-hi: #4E4237;
  --stone-lo: #332B24;
  --glow: #FFC66E;
  --cloud-op: .16;
  --stars-op: 1;
  --moon-op: 1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-lo) 88%);
  transition: --sky-hi 4s ease, --sky-lo 4s ease;
  font-family: 'IM Fell English', Georgia, serif;
  color: var(--ink);
}

svg { display: block; }

/* ————— stars & moon ————— */
.stars {
  position: fixed; inset: 0;
  opacity: var(--stars-op);
  transition: opacity 4s ease;
  pointer-events: none;
}
.stars svg { width: 100%; height: 100%; }
.stars circle { fill: #EAE4CF; }
.stars .tw { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }

.moon {
  position: fixed;
  left: 27vw; top: 9vh;
  width: clamp(44px, 5.5vw, 78px);
  opacity: var(--moon-op);
  transition: opacity 4s ease;
  pointer-events: none;
}

/* ————— clouds ————— */
.clouds { position: fixed; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  left: 0;
  fill: #fff;
  opacity: var(--cloud-op);
  filter: blur(4px);
  transition: opacity 4s ease;
}
.c1 { top: 5vh;  width: clamp(200px, 26vw, 430px); animation: drift 210s linear infinite; animation-delay: -40s; }
.c2 { top: 17vh; width: clamp(150px, 19vw, 330px); animation: drift 260s linear infinite; animation-delay: -150s; opacity: calc(var(--cloud-op) * .75); }
.c3 { top: 11vh; width: clamp(120px, 15vw, 260px); animation: drift 170s linear infinite; animation-delay: -95s;  opacity: calc(var(--cloud-op) * .6); }
@keyframes drift {
  from { transform: translateX(-32vw); }
  to   { transform: translateX(112vw); }
}

/* ————— dateline ————— */
.dateline {
  position: fixed;
  top: var(--pad); left: var(--pad);
  z-index: 6;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .04em;
  opacity: .85;
  text-shadow: 0 1px 12px rgba(10, 25, 50, .35);
}

/* ————— wordmark ————— */
.wordmark {
  position: fixed;
  left: 7vw; top: 23vh;
  z-index: 5;
  max-width: 52vw;
  text-shadow: 0 2px 26px rgba(10, 25, 50, .35);
}
.wordmark h1 {
  font-weight: 400;
  font-size: clamp(72px, 12vw, 168px);
  line-height: .95;
  letter-spacing: .015em;
}
.tagline {
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 24px);
  margin-top: .7em;
  opacity: .92;
}
.digital {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: .06em;
  margin-top: 1.1em;
  font-variant-numeric: tabular-nums;
}
.digital .sec, .digital .tz {
  font-size: .62em;
  opacity: .72;
}
.digital .tz { margin-left: .7em; letter-spacing: .18em; }

/* ————— bunting ————— */
.bunting-wrap {
  position: fixed;
  left: 0; right: calc(var(--bldg-w) - 10px);
  top: 0; height: 100vh;
  z-index: 3;
  pointer-events: none;
}
.bunting { position: absolute; width: 100%; }
.bunting .rope { fill: none; stroke: #3B332B; stroke-width: 2.4; }
.b1 { top: 57vh; height: 14vh; transform-origin: 50% 0; animation: sway 7s ease-in-out infinite alternate; }
.b2 { top: 65vh; height: 12vh; opacity: .82; transform-origin: 50% 0; animation: sway 9s ease-in-out infinite alternate-reverse; }
@keyframes sway { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }

/* ————— rooftops ————— */
.roofs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 30vh;
  pointer-events: none;
}
.rooflayer { position: absolute; left: -4vw; right: -4vw; bottom: 0; }
.roof { position: absolute; bottom: 0; left: 0; width: 100%; }
.roof.far  { height: 26vh; fill: var(--roof-far); }
.roof.mid  { height: 19vh; fill: var(--roof-mid); }
.roof.near { height: 13vh; fill: var(--roof-near); }
.roof path { transition: fill 4s ease; }
.rooflayer:nth-child(1) { z-index: 1; }
.rooflayer:nth-child(2) { z-index: 2; }
.rooflayer:nth-child(3) { z-index: 4; }
.windows rect { fill: var(--glow); transition: fill 4s ease; }

/* ————— building ————— */
.building {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--bldg-w);
  z-index: 3;
  background:
    repeating-linear-gradient(180deg, transparent 0 44px, rgba(50, 30, 10, .09) 44px 47px),
    linear-gradient(180deg, var(--stone-hi), var(--stone-lo));
  box-shadow: inset 10px 0 18px -10px rgba(20, 10, 0, .5);
  transition: background 4s ease;
}

/* ————— clock ————— */
.scene-clock {
  position: fixed;
  right: calc(var(--bldg-w) - 12px);
  top: 7vh;
  height: min(74vh, 68vw);
  aspect-ratio: 460 / 560;
  z-index: 4;
  filter: drop-shadow(10px 16px 22px rgba(8, 18, 40, .35));
}
.scene-clock svg { width: 100%; height: 100%; }

.facetext {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 14px;
  letter-spacing: 5px;
  fill: #8A7C5C;
}
#dial text {
  font-family: 'IM Fell English', Georgia, serif;
  fill: #241E18;
}
#dial line { stroke: #241E18; }

/* ————— corner links ————— */
.cross, .credit {
  position: fixed;
  bottom: var(--pad);
  z-index: 8;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: .03em;
  text-decoration: none;
  opacity: .78;
  text-shadow: 0 1px 10px rgba(10, 25, 50, .5);
  transition: opacity .25s ease;
}
.cross {
  left: var(--pad);
  padding: .45em 1.15em;
  border-radius: 999px;
  background: #fff;
  color: #171310;
  opacity: 1;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(10, 20, 40, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cross:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(10, 20, 40, .35); }
.credit { right: var(--pad); }
.cross:hover, .credit:hover { opacity: 1; }
.cross:focus-visible, .credit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  opacity: 1;
}

/* ————— og-image staging mode ————— */
body.og .dateline, body.og .cross, body.og .credit { display: none; }
body.og .wordmark { top: 14vh; }
body.og .b1 { top: 63vh; }
body.og .b2 { top: 72vh; }

/* ————— narrow screens ————— */
@media (max-width: 760px) {
  :root { --bldg-w: clamp(38px, 9vw, 60px); }
  .scene-clock {
    top: 9vh;
    height: min(46vh, 96vw);
    right: calc(var(--bldg-w) - 8px);
  }
  .wordmark {
    left: 7vw; top: 54vh;
    max-width: 86vw;
  }
  .wordmark h1 { font-size: clamp(64px, 19vw, 96px); }
  .b2 { display: none; }
  .b1 { top: 72vh; }
  .roof.far { height: 20vh; }
  .roof.mid { height: 14vh; }
  .roof.near { height: 9vh; }
  .moon { left: 8vw; }
  .dateline { max-width: 55vw; }
}

/* ————— reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  .cloud, .b1, .b2 { animation: none; }
}