:root { --bg: #FFFBF4; --surface: #FFFFFF; --alt: #FFF3E0; --ink: #26283F; --muted: #5E6178; --accent: #2E7D5B; --accent-ink: #fff; --line: #F0E3CC;
  --radius: 20px; --font-head: "Outfit", system-ui, sans-serif; --font-body: "Literata", Georgia, serif; --day: 0; --hour-rot: 225deg; --min-rot: 180deg;
  --f-accent: #2E7D5B; --f-font: "Outfit", system-ui, sans-serif; --f-line: #E6D6B8; }
body { font-size: 19px; }
h1, h2, h3, .btn, .nav-menu, .eyebrow, .card h3 { font-family: var(--font-head); }
h1, h2 { font-weight: 700; letter-spacing: -.02em; }
.site-head { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.nav-menu a[aria-current] { background: var(--ink); color: #fff; }
.dy-hero { padding: clamp(56px, 9vw, 120px) 0 40px; background: linear-gradient(180deg, #FFE3B8, var(--bg)); }
.dy-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 17ch; }
.dy-hero .lead { max-width: 60ch; }
.dy-day { position: relative; padding: 40px 0 80px;
  background: linear-gradient(180deg,
    color-mix(in srgb, #FFE3B8 calc((1 - var(--day)) * 100%), #2B2D6E),
    color-mix(in srgb, #CFE8FF calc((1 - var(--day)) * 100%), #F2A35E)); transition: background .6s; }
.dy-clock { position: sticky; top: 140px; float: right; margin-right: max(16px, calc((100vw - var(--maxw)) / 2)); width: 120px; z-index: 5; text-align: center; }
.dy-clock svg { width: 120px; height: 120px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .15)); }
.dy-clock circle:first-child { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.dy-clock .ticks line { stroke: var(--ink); stroke-width: 2; }
.dy-clock line.hand-h, .dy-clock line.hand-m { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transform-origin: 50px 50px; transition: transform .6s var(--ease-out); }
.dy-clock line.hand-h { transform: rotate(var(--hour-rot)); } .dy-clock line.hand-m { stroke-width: 2.5; stroke: var(--accent-2); transform: rotate(var(--min-rot)); }
.dy-time { display: inline-block; margin-top: 8px; background: var(--ink); color: #fff; font: 700 15px var(--font-head); padding: 4px 12px; white-space: nowrap; border-radius: 999px; }
@media (max-width: 760px) { .dy-clock { position: fixed; top: auto; bottom: 84px; right: 12px; margin: 0; width: 76px; float: none; } .dy-clock svg { width: 76px; height: 76px; } .dy-time { font-size: 13px; } }
.dy-list { list-style: none; padding: 0; position: relative; display: flex; flex-direction: column; gap: 56px; }
.dy-list::before { content: ""; position: absolute; left: 60px; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(var(--ink) 0 10px, transparent 10px 18px); opacity: .25; }
.dy-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; max-width: 900px; }
.dy-when { position: relative; text-align: center; font-family: var(--font-head); padding-top: 14px; }
.dy-when strong { display: block; font-size: 1.8rem; line-height: 1; background: var(--bg); border-radius: 14px; padding: 8px 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); transition: background .3s, color .3s; }
.dy-when span { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; }
.dy-item.now .dy-when strong { background: var(--accent-2); color: #fff; }
.dy-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 240px 1fr; box-shadow: 0 18px 40px rgba(20, 20, 50, .12); transition: transform .4s var(--ease-out); }
.dy-item.now .dy-card { transform: translateX(6px); }
.dy-card img { height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.dy-card > div { padding: 22px 26px; }
.dy-card h2 { font-size: 1.5rem; display: flex; gap: 10px; align-items: center; } .dy-card h2 .ic { color: var(--accent); }
.dy-card p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .dy-item { grid-template-columns: 1fr; gap: 10px; } .dy-when { text-align: left; padding: 0; display: flex; align-items: baseline; gap: 8px; } .dy-when strong { display: inline-block; padding: 6px 14px; font-size: 1.4rem; } .dy-card { grid-template-columns: 1fr; } .dy-list::before { display: none; } }
.page-hero { background: linear-gradient(180deg, #FFE3B8, var(--alt)); }
.cta { background: #2B2D6E; } .cta .btn { color: #2B2D6E; }
.site-foot { background: #1E2048; }