@font-face { font-family: SiteSerif; src: local('Georgia'); font-display: swap; }
:root { color-scheme: dark; --bg: #111c27; --text: #eee9de; --line: #ffffff18; --accent: #e6b568; --mono: 'Courier New', monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
html.time-ready body { transition: background 2s, color 2s; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 77% 42%, #b18b5520, transparent 55%); z-index: -1; }
main { max-width: 1680px; margin: auto; padding: 30px 5.8vw 0; }
header { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.identity { display: flex; align-items: center; gap: 17px; color: var(--text); font-size: 12px; letter-spacing: .025em; }
.monogram { font: italic 34px/1 Georgia, serif; letter-spacing: -3px; }
.monogram span { color: var(--accent); }
.introduction { position: relative; z-index: 1; padding: 48px 5% 0; pointer-events: none; }
h1 { font: 400 clamp(62px, 6.5vw, 102px)/.99 SiteSerif, Georgia, serif; letter-spacing: -.045em; margin: 0; }
h1 em { font-weight: 400; color: var(--accent); }
html.time-ready h1 em { transition: color 2s; }
.construction-scene { position: relative; margin-top: -35px; }
canvas { display: block; width: 100%; height: clamp(400px, 40vw, 600px); touch-action: pan-y; }
.scene-bottom { display: flex; justify-content: flex-end; padding: 0 5% 28px; }
.scene-controls { display: flex; gap: 18px; align-items: center; }
button { border: 0; color: var(--text); background: transparent; padding: 10px 0; cursor: pointer; display: flex; align-items: center; gap: 8px; font: 10px var(--mono); }
button > span:first-child { font-size: 15px; color: var(--accent); width: 16px; text-align: center; }
button:hover { color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
html[data-time="morning"] { --bg: #e4dfd8; --text: #39464c; --line: #3e4a511f; --accent: #986841; color-scheme: light; }
html[data-time="noon"] { --bg: #e5edf0; --text: #263e4c; --line: #293c461f; --accent: #936326; color-scheme: light; }
html[data-time="evening"] { --bg: #302f40; --text: #f2e5d7; --line: #e8c5a51f; --accent: #efb17d; color-scheme: dark; }
html[data-time="morning"] body::before { background: radial-gradient(ellipse at 77% 42%, #e1ba8d25, transparent 55%); }
html[data-time="noon"] body::before { background: radial-gradient(ellipse at 77% 42%, #c6e7f72b, transparent 55%); }
html[data-time="evening"] body::before { background: radial-gradient(ellipse at 77% 42%, #e7906030, transparent 55%); }
@media (min-width: 1450px) { .introduction { padding-top: 60px; } }
@media (max-width: 800px) {
  main { padding: 24px 6vw 0; }
  .introduction { padding: 42px 2% 0; }
  h1 { font-size: 67px; }
  .construction-scene { margin-top: 0; }
  canvas { height: 440px; }
  .scene-bottom { padding: 0 0 24px; }
}
@media (max-width: 560px) {
  main { padding: 22px 6vw 0; }
  header { padding-bottom: 19px; }
  .identity { gap: 10px; font-size: 10px; }
  .monogram { font-size: 29px; }
  .introduction { padding: 40px 0 0; }
  h1 { font-size: clamp(53px, 12vw, 72px); }
  canvas { height: 335px; width: calc(100% + 12vw); margin-left: -6vw; }
  .scene-controls { gap: 14px; }
  button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }