/* Design 3 homepage — "A day at MCHL". The sky colours (--sky-top/--sky-bot), sun position and night level are set by day.js. */
:root { --sky-top: #f7b98f; --sky-bot: #fde6cf; --sx: 12%; --sy: 62%; --sun-o: 1; --night: 0 }
body { background: var(--sky-bot) }
.sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky-top), var(--sky-bot) 78%); pointer-events: none }
.sky-sun { position: absolute; left: var(--sx); top: var(--sy); width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; opacity: var(--sun-o);
  background: radial-gradient(circle, rgba(255,236,190,.95) 0 14%, rgba(255,214,140,.55) 26%, rgba(255,190,120,.18) 48%, transparent 70%); filter: blur(2px) }
.sky-stars { position: absolute; inset: 0; opacity: var(--night); transition: opacity .4s;
  background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 28% 42%, #fff 50%, transparent), radial-gradient(1.8px 1.8px at 46% 12%, #fff8e0 50%, transparent), radial-gradient(1.2px 1.2px at 63% 30%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 78% 16%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 88% 46%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 8% 62%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 36% 70%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 70% 64%, #fff8e0 50%, transparent), radial-gradient(1.2px 1.2px at 94% 78%, #fff 50%, transparent), radial-gradient(1px 1px at 54% 54%, #fff 50%, transparent), radial-gradient(1px 1px at 20% 88%, #fff 50%, transparent);
  animation: twinkle 5s ease-in-out infinite alternate }
@keyframes twinkle { to { filter: brightness(.7) } }

/* the clock that keeps the time of day */
.clock { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: color-mix(in srgb, #fffaf2 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(110,62,30,.55);
  opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.clock.on { opacity: 1; transform: none }
.clock svg { width: 40px; height: 40px }
.clock .face { fill: #fff3df; stroke: var(--sun); stroke-width: 2 }
.clock path { stroke: var(--ink); stroke-linecap: round; transform-origin: 20px 20px }
.clock .hand-h { stroke-width: 3 } .clock .hand-m { stroke-width: 2; stroke: var(--red) }
.clock b { display: block; font: 400 17px/1.1 var(--serif) } .clock small { display: block; font: 700 12px/1.2 var(--sans); color: var(--muted); white-space: nowrap }

/* dawn (hero) */
.dawn { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 180px; overflow: hidden }
.dawn-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 90px); align-items: center }
.dawn h1 { font-size: clamp(50px, 6.6vw, 108px); line-height: 1; margin: 18px 0 26px }
.dawn h1 em { font-size: 1.3em; line-height: .7; margin-left: .05em }
.dawn .lede { font-size: clamp(18px, 1.5vw, 21px); max-width: 34em; margin-bottom: 34px }
.dawn .ctas { display: flex; flex-wrap: wrap; gap: 12px }
.begin { display: inline-flex; align-items: center; gap: 14px; margin-top: 44px; font: 600 26px/1 var(--hand); color: var(--ink-2); text-decoration: none }
.begin i { width: 2px; height: 46px; background: linear-gradient(var(--red), transparent); border-radius: 2px; animation: drop 2.2s var(--ease) infinite }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }
.sunrise { position: relative; aspect-ratio: 1; width: min(100%, 560px); justify-self: center; animation: rise 2.2s var(--ease-out) both .2s }
@keyframes rise { from { transform: translateY(26%); opacity: 0 } to { transform: none; opacity: 1 } }
.rays { position: absolute; inset: -14%; border-radius: 50%; animation: spin 90s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255,196,110,.38) 0 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%, transparent 72%); mask: radial-gradient(circle, transparent 46%, #000 48%, transparent 72%) }
@keyframes spin { to { transform: rotate(360deg) } }
.disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 12px rgba(255,240,214,.7), 0 0 0 26px rgba(255,214,150,.35), 0 40px 90px -30px rgba(160,80,30,.6) }
.disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 7s linear }
.disc img.on { opacity: 1; transform: scale(1) }
.note { position: absolute; font: 700 30px/1 var(--hand); color: var(--red); margin: 0; white-space: nowrap }
.note.n1 { left: -6%; bottom: 6%; transform: rotate(-8deg); background: #fffaf2; padding: 10px 18px 12px; border-radius: 14px; box-shadow: var(--shadow) }
.hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(110px, 16vw, 220px) }
.hills .h3 { fill: #f5c79a } .hills .h2 { fill: #f0b385; opacity: .75 } .hills .h1 { fill: var(--sky-bot) }

/* three rooms */
.rooms { padding: 20px 0 80px }
.room-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px }
.room-card { position: relative; display: block; padding: 34px 30px 30px; border-radius: 28px; background: #fffaf2; text-decoration: none; box-shadow: 0 0 0 1px var(--line), var(--shadow); transition: transform .5s var(--ease), box-shadow .5s }
.room-card:hover { transform: translateY(-6px) rotate(-.8deg) }
.room-card .sh { width: 26px; height: 26px; margin-bottom: 18px }
.room-card small { display: block; font: 800 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.room-card h3 { font-size: clamp(30px, 3vw, 40px); margin: 6px 0 8px }
.room-card p { color: var(--ink-2); margin-bottom: 18px }
.room-card b { font: 800 15px var(--sans); color: var(--red) }

/* the hours */
.hour { padding: clamp(80px, 13vh, 150px) 0 }
.hour-in { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 90px); align-items: start }
.time { position: sticky; top: 130px; font: 400 clamp(76px, 9vw, 140px)/.9 var(--serif); letter-spacing: -.04em; color: var(--ink) }
.time span { display: block } .time small { display: block; font: 700 clamp(26px, 2.4vw, 34px)/1.1 var(--hand); letter-spacing: 0; color: var(--red); margin-top: 10px }
.time span.sm { font: 700 clamp(56px, 6vw, 84px)/.95 var(--hand); letter-spacing: 0; color: var(--ink) }
.hour h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 24px; max-width: 13em }
.hour .body > p { font-size: clamp(18px, 1.4vw, 20px); color: var(--ink-2); max-width: 36em }
.snaps { display: flex; gap: clamp(16px, 2.4vw, 34px); margin-top: 40px; align-items: flex-start }
.snaps.two .snap { width: calc(50% - 12px) } .snaps.three .snap { width: calc(33.3% - 16px) } .snaps.one .snap { width: min(100%, 680px) }
.snaps.two .snap:nth-child(2) { margin-top: 46px } .snaps.three .snap:nth-child(2) { margin-top: 34px }
.snap { margin: 0; padding: 12px 12px 0; background: #fffdf8; border-radius: 6px; transform: rotate(var(--r, 0deg)); box-shadow: 0 2px 3px rgba(80,50,30,.08), 0 30px 50px -28px rgba(110,62,30,.5); transition: transform .6s var(--ease), box-shadow .6s }
.snap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px }
.snap figcaption { font: 600 25px/1.1 var(--hand); color: var(--ink-2); text-align: center; padding: 12px 6px 14px }
.snap:hover { transform: rotate(0) scale(1.03); box-shadow: 0 2px 3px rgba(80,50,30,.08), 0 40px 70px -30px rgba(110,62,30,.6) }
.snap::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(240,200,140,.55); transform: rotate(-3deg); border-radius: 2px }
.snap { position: relative }
.flip .snaps { flex-direction: row-reverse }

.ifacts { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px }
.ifacts li { padding: 16px 20px; border-radius: 20px; background: #fffaf2; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; color: var(--muted); min-width: 150px }
.ifacts b { display: block; font: 400 28px/1.1 var(--serif); color: var(--ink); margin-bottom: 4px }
.week { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap }
.week li { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 999px; background: #fffaf2; box-shadow: 0 0 0 1px var(--line) }
.week small { font: 800 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red) } .week b { font: 400 20px var(--serif) }

/* a row of faces */
.crew { display: flex; align-items: center; gap: 18px; margin-top: 44px; flex-wrap: wrap }
.crew ul { display: flex; list-style: none; margin: 0; padding: 0 0 0 12px }
.crew li { width: 58px; height: 58px; margin-left: -12px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fffaf2; background: var(--paper-3); display: grid; place-items: center; transition: transform .4s var(--ease) }
.crew li:hover { transform: translateY(-6px) scale(1.15); z-index: 2 }
.crew li img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.crew li b { font: 400 18px var(--serif); color: var(--ink-2) }
.crew p { margin: 0; font: 700 26px/1.15 var(--hand); color: var(--ink-2) }

/* the work cycle: photos scattered on a table */
.work-head { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 90px); align-items: start }
.work-head .time { position: static }
.table { position: relative; height: clamp(560px, 62vw, 860px); margin-top: 50px }
.table .snap { position: absolute; left: var(--x); top: var(--y); width: 27%; cursor: zoom-in; z-index: 1 }
.table .snap:hover { z-index: 5; transform: rotate(0) scale(1.18) }
.hand { font: 700 26px var(--hand); color: var(--muted); text-align: center; margin-top: 10px }

/* the people */
.folk { padding: clamp(90px, 14vh, 170px) 0 clamp(80px, 12vh, 140px) }
.folk h2 { font-size: clamp(42px, 5.6vw, 86px); max-width: 12em; margin: 16px 0 22px }
.folk .lede { font-size: 20px; max-width: 38em }
.wall { margin: 60px 0 44px; display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.lane { overflow: hidden }
.belt { display: flex; gap: 18px; width: max-content; animation: belt var(--d) linear infinite; animation-direction: var(--dir) }
.wall:hover .belt { animation-play-state: paused }
@keyframes belt { to { transform: translateX(calc(-50% - 9px)) } }
.wall figure { margin: 0; width: 170px; flex: 0 0 auto }
.wall img { width: 170px; height: 212px; object-fit: cover; border-radius: 22px; box-shadow: 0 20px 34px -24px rgba(110,62,30,.6); transition: transform .5s var(--ease) }
.wall figure:hover img { transform: translateY(-6px) rotate(-2deg) }
.wall figcaption { padding: 10px 4px 0 } .wall figcaption b { display: block; font: 400 16px/1.2 var(--serif) } .wall figcaption span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.35 }
.people-ft { display: flex; align-items: center; gap: 22px; flex-wrap: wrap }
.director { display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 22px 8px 8px; border-radius: 999px; background: #fffaf2; box-shadow: 0 0 0 1px var(--line) }
.director img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 20% }
.director b { display: block; font: 400 18px var(--serif) } .director span { font-size: 13.5px; color: var(--muted) }

/* notes from families */
.notes { padding: clamp(80px, 12vh, 150px) 0 }
.notes h2 { font-size: clamp(40px, 5vw, 76px); margin: 16px 0 50px }
.board { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 44px) }
.paper { position: relative; margin: 0; padding: 40px 36px 30px; background: #fffdf6; border-radius: 6px; transform: rotate(var(--r)); box-shadow: 0 2px 3px rgba(80,50,30,.08), 0 30px 50px -30px rgba(110,62,30,.55);
  background-image: repeating-linear-gradient(transparent 0 35px, rgba(63,113,147,.12) 35px 36px); background-position: 0 22px }
.paper::before { content: ""; position: absolute; top: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a73, #c9471f); box-shadow: 0 3px 4px rgba(0,0,0,.25) }
.paper blockquote { margin: 0 0 14px; font: 400 clamp(19px, 1.6vw, 23px)/1.55 var(--serif); color: var(--ink) }
.paper figcaption { font: 700 28px/1 var(--hand); color: var(--red); text-align: right }

/* dusk: the visit */
.eve { position: relative; padding: clamp(110px, 16vh, 200px) 0 clamp(120px, 18vh, 220px); color: #fdf1e2; overflow: hidden }
.eve .eyebrow { color: #f3b867 }
.eve h2 { font-size: clamp(46px, 7vw, 112px); max-width: 11em; margin: 18px 0 26px; text-shadow: 0 2px 30px rgba(30,15,40,.35) }
.eve h2 em { color: #ffc56b }
.eve .lede { color: #f1dccb; font-size: clamp(18px, 1.5vw, 21px); max-width: 36em; margin-bottom: 34px }
.eve .days { margin-bottom: 34px; max-width: 860px }
.eve .days a { background: rgba(255,250,242,.96) }
.visit-alt { display: flex; gap: 12px; flex-wrap: wrap }
.eperks { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #e7cfbd; font-size: 15.5px }
.eperks li::before { content: "✦"; color: #ffc56b; margin-right: 10px }
.moon { position: absolute; right: 9%; top: 14%; width: 90px; height: 90px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 60px 10px rgba(255,236,190,.35), inset -18px -8px 0 0 #f1dcb0; opacity: var(--night) }

@media (max-width: 960px) {
  .dawn { padding: 110px 0 150px }
  .dawn-in { grid-template-columns: 1fr }
  .sunrise { width: min(78vw, 420px); order: -1; margin-bottom: 10px }
  .note.n1 { font-size: 24px }
  .room-cards { grid-template-columns: 1fr }
  .hour-in, .work-head { grid-template-columns: minmax(0, 1fr); gap: 10px } .hour-in > *, .work-head > * { min-width: 0 }
  .time { position: static; font-size: 72px } .time span.sm { font-size: min(56px, 12vw) }
  .snaps { flex-direction: column !important; align-items: center }
  .snaps .snap { width: min(100%, 440px) !important; margin-top: 0 !important }
  .table { height: auto; display: flex; gap: 18px; overflow-x: auto; padding: 20px 4px 30px; scroll-snap-type: x mandatory; margin: 30px calc(-1 * var(--gut)) 0; padding-left: var(--gut) }
  .table .snap { position: relative; left: auto; top: auto; flex: 0 0 72%; scroll-snap-align: center; width: auto }
  .hand { display: none }
  .board { grid-template-columns: 1fr }
  .wall figure, .wall img { width: 130px } .wall img { height: 162px }
  .clock { right: 12px; bottom: auto; top: 82px; padding: 4px 12px 4px 4px } .clock svg { width: 28px; height: 28px } .clock b { font-size: 14px } .clock small { display: none }
  .sunrise { width: min(66vw, 320px) }
  .moon { width: 56px; height: 56px; top: 6% }
}
@media (prefers-reduced-motion: reduce) {
  .rays, .belt, .sky-stars, .begin i { animation: none } .sunrise { animation: none }
  .wall .lane { overflow-x: auto }
}
.eve .days a { color: var(--ink) }