/* Variant C — Dawn to Dusk: a day at the club, from first light to starlight.
   Line-drawn hills, letter-rise headline, scroll-linked sundial, stacked stay cards,
   expanding event panels, starry night finale. */

:root {
  --dawn: #F3E6DA;   /* blush dawn mist */
  --day: var(--ivory-100);
  --gold: #EFE2C6;
  --dusk: var(--tea-700);
  --night: var(--tea-950);
}
body { background: var(--dawn); }

.nav { color: var(--tea-900); }
.nav .menu-btn { color: var(--tea-900); }
.menu-open .nav .menu-btn { color: var(--ivory-50); }

/* ---------- hero: dawn ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: center; padding: calc(var(--nav-h) + 40px) 0 0; background: linear-gradient(180deg, #E9DCCF 0%, var(--dawn) 40%, #E8EBDF 100%); isolation: isolate; }
.hero__sun { position: absolute; left: 68%; top: 16%; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%; background: radial-gradient(circle, #FFF6E2 0%, #F2D7A6 28%, rgba(242, 215, 166, .35) 52%, transparent 70%); z-index: -2; animation: sunrise 4.5s .2s var(--ease-cine) both; }
@keyframes sunrise { from { transform: translateY(42vh); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
.hero__lines { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: -1; }
.hero__lines svg { width: 100%; height: 100%; }
.draw path.l { fill: none; stroke-width: 1.4; stroke-linecap: round; }
html.js .draw path.l { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); animation: draw 3.2s var(--ease-cine) forwards; animation-delay: var(--dl, 0s); }
html.js .draw path.f { opacity: 0; animation: fillIn 2s var(--ease) forwards; animation-delay: calc(var(--dl, 0s) + 1.6s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { opacity: 1; } }
.hero__mist { position: absolute; left: -20%; width: 140%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(251, 248, 241, .85), transparent); filter: blur(14px); z-index: -1; animation: drift 20s ease-in-out infinite alternate; }
.birds { position: absolute; top: 24%; left: -10%; z-index: -1; color: var(--tea-700); animation: fly 26s linear infinite; }
.birds svg { width: 90px; height: 40px; }
@keyframes fly { from { transform: translate(0, 0); } to { transform: translate(125vw, -8vh); } }
.birds path { animation: flap .9s ease-in-out infinite alternate; transform-origin: center; }
@keyframes flap { to { transform: scaleY(.55); } }

.hero__content { position: relative; max-width: 780px; padding-bottom: 26vh; }
.hero .h1 { margin: 24px 0; }
.hero .lead { max-width: 520px; color: var(--ink-600); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.letters .ch { display: inline-block; }
html.js .letters .ch { animation: letterRise 1.1s var(--ease-cine) both; animation-delay: calc(.5s + var(--i) * 28ms); }
@keyframes letterRise { from { transform: translateY(.6em) rotate(6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.letters .word { display: inline-block; white-space: nowrap; }

/* ---------- sundial (scroll-linked time of day) ---------- */
.sundial { position: fixed; left: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(251, 248, 241, .86); color: var(--tea-900); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -14px rgba(11, 33, 27, .4); transition: background-color .8s, color .8s; }
.sundial.is-night { background: rgba(11, 33, 27, .86); color: var(--mist-100); }
.sundial__arc { width: 56px; height: 32px; }
.sundial__time { font: 600 13px/1.1 var(--font-body); letter-spacing: .08em; }
.sundial__label { display: block; font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: 0; font-weight: 500; }
@media (max-width: 760px) { .sundial { display: none; } }

/* ---------- section skies ---------- */
.sky-day { background: linear-gradient(180deg, #E8EBDF 0, var(--day) 220px); }
.sky-gold { background: linear-gradient(180deg, var(--day) 0, var(--gold) 260px); }
.sky-dusk { background: var(--dusk); }
.horizon { position: relative; height: 340px; overflow: hidden; background: linear-gradient(180deg, var(--gold) 0%, #E9C99A 30%, #C98F62 55%, #6B5A48 78%, var(--dusk) 100%); }
.horizon__sun { position: absolute; left: 30%; top: 40%; width: 180px; height: 180px; margin-left: -90px; border-radius: 50%; background: radial-gradient(circle, #FFE3B0 0%, #F2B979 40%, rgba(242, 185, 121, 0) 70%); transform: translateY(var(--sink, 0px)); }
.horizon svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60%; }
.sky-night { background: linear-gradient(180deg, var(--dusk) 0, var(--tea-900) 240px, var(--night) 100%); position: relative; overflow: hidden; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 44% 22%, #FBF8F1 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 78% 26%, #E3C78F 50%, transparent 51%), radial-gradient(1px 1px at 90% 9%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 6% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 54% 36%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 85% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 48%, #fff 50%, transparent 51%);
  opacity: .7; animation: twinkle 4s ease-in-out infinite alternate; }
.stars--2 { background-position: 40px 60px; animation-delay: 2s; opacity: .45; transform: scale(1.3); }
@keyframes twinkle { from { opacity: .25; } to { opacity: .8; } }
.moon { position: absolute; right: 12%; top: 120px; width: 90px; height: 90px; border-radius: 50%; box-shadow: inset -18px 6px 0 0 #F4EFE4; opacity: .9; filter: drop-shadow(0 0 30px rgba(244, 239, 228, .35)); }

.timestamp { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--brass-700); margin-bottom: 18px; }
.on-dark .timestamp { color: var(--brass-300); }
.timestamp b { font-family: var(--font-body); font-style: normal; font-size: 12px; letter-spacing: .24em; font-weight: 600; }

/* ---------- booking ---------- */
.booking-wrap { margin-top: -110px; position: relative; z-index: 4; }
.booking { border-radius: 0; }
@media (max-width: 760px) { .booking-wrap { margin-top: 0; } }

/* ---------- heritage timeline ---------- */
.heritage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 80px; }
.heritage__grid .h2 { margin-top: 10px; }
@media (max-width: 960px) { .heritage__grid { grid-template-columns: 1fr; gap: 28px; } }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 56px; list-style: none; margin: 0; padding-left: 0; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--line); }
.timeline::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--brass-500); transform-origin: left; transform: scaleX(var(--tl, 1)); }
html.js .timeline::after { transform: scaleX(0); transition: transform 2.4s var(--ease-cine); }
html.js .timeline.is-in::after { transform: scaleX(1); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; top: -48px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory-50); border: 2px solid var(--brass-500); }
.timeline .yr { font-family: var(--font-display); font-size: 44px; color: var(--tea-900); line-height: 1; }
.timeline p { margin: 12px 0 0; font-size: 15px; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr 1fr; row-gap: 72px; } .timeline::before, .timeline::after { display: none; } }
.heritage__imgs { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 96px; }
.heritage__imgs .ph { aspect-ratio: 16 / 10; }
.heritage__imgs .ph:nth-child(2) { aspect-ratio: auto; margin-top: 80px; }

/* ---------- stays: stacked sticky cards ---------- */
.stack { display: grid; gap: 40px; margin-top: 64px; }
.stack__card { position: sticky; top: calc(var(--nav-h) + 24px + var(--n) * 18px); display: grid; grid-template-columns: 1.15fr 1fr; min-height: 480px; background: var(--ivory-50); border: 1px solid var(--line); box-shadow: 0 -20px 50px -30px rgba(11, 33, 27, .35); transform-origin: top center; }
.stack__card .ph { min-height: 100%; }
.stack__card .ph img { position: absolute; inset: 0; }
.stack__card:hover .ph img { transform: scale(1.06); }
.stack__body { padding: 48px; display: flex; flex-direction: column; gap: 14px; }
.stack__num { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 1; color: var(--brass-500); }
.stack__body .h3 { font-size: clamp(32px, 3vw, 46px); }
.stack__body .stay-card__meta { border-top: 1px solid var(--line); }
.stack__body .stay-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .stack__card { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; } .stack__card .ph { aspect-ratio: 4 / 3; } .stack__body { padding: 28px 22px; } }
@media (prefers-reduced-motion: reduce) { .stack__card { position: relative; top: 0; } }

/* ---------- club: flip tiles ---------- */
.club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; perspective: 1200px; }
.tile { background: var(--ivory-50); padding: 36px 32px; border: 1px solid var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
html.js .tile[data-reveal] { transform: rotateX(-24deg) translateY(30px); transform-origin: top center; }
html.js .tile[data-reveal].is-in { transform: none; }
.tile:hover { transform: translateY(-6px) !important; box-shadow: 0 26px 40px -28px rgba(11, 33, 27, .45); }
.tile .icon { width: 40px; height: 40px; color: var(--brass-700); margin-bottom: 22px; transition: transform .8s var(--ease); }
.tile:hover .icon { transform: rotate(-8deg) scale(1.08); }
.tile h3 { font-size: 30px; }
.tile p { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 860px) { .club-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .club-grid { grid-template-columns: 1fr; } }

/* ---------- events: expanding panels ---------- */
.panels { display: flex; gap: 14px; height: 600px; margin-top: 56px; }
.panel { position: relative; flex: 1; min-width: 0; overflow: hidden; text-decoration: none; color: var(--ivory-50); transition: flex-grow .9s var(--ease-cine); display: flex; align-items: flex-end; }
.panel:hover, .panel:focus-visible, .panels:not(:hover):not(:focus-within) .panel:first-child { flex-grow: 2.6; }
.panel .ph { position: absolute; inset: 0; }
.panel .ph img { height: 100%; transform: scale(1.1); transition: transform 1.6s var(--ease); }
.panel:hover .ph img, .panel:focus-visible .ph img { transform: scale(1); }
.panel .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11, 33, 27, .92)); }
.panel__body { position: relative; z-index: 2; padding: 34px; width: 100%; }
.panel .h3 { color: var(--ivory-50); margin: 8px 0 0; }
.panel__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.panel__more > div { overflow: hidden; }
.panel:hover .panel__more, .panel:focus-visible .panel__more, .panels:not(:hover):not(:focus-within) .panel:first-child .panel__more { grid-template-rows: 1fr; }
.panel__more p { margin: 14px 0 10px; color: var(--mist-100); font-size: 15px; max-width: 420px; }
.panel .ph__label { top: 12px; bottom: auto; }
@media (max-width: 860px) { .panels { flex-direction: column; height: auto; } .panel { min-height: 300px; } .panel__more { grid-template-rows: 1fr; } }

/* ---------- visit / enquire (night) ---------- */
.night-grid { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.night-grid .h2 { margin: 10px 0 36px; }
.enq-card { background: var(--ivory-50); color: var(--ink-600); padding: 44px; border-top: 3px solid var(--brass-500); }
.enq-card .h3 { margin-bottom: 22px; }
.enq-card .field label, .enq-card .label { color: var(--ink-500); }
.enq-card .seg label { color: var(--tea-900); border-color: var(--line); }
.enq-card .field__error { color: #A3402F; }
.night-grid .visit-list a { border-color: rgba(227, 199, 143, .35); }
.night-grid .map { min-height: 240px; margin-top: 36px; }
@media (max-width: 960px) { .night-grid { grid-template-columns: 1fr; gap: 48px; } .enq-card { padding: 28px 20px; } }

.footer { background: var(--night); }

/* magnetic CTAs (pointer only) */
.magnetic { transition: transform .5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__sun, .hero__mist, .birds, .birds path, .stars { animation: none !important; }
  .birds { display: none; }
  html.js .draw path.l { stroke-dashoffset: 0; animation: none; }
  html.js .draw path.f { opacity: 1; animation: none; }
  html.js .letters .ch { animation: none; }
  html.js .tile[data-reveal] { transform: none; }
}

/* ---- real media hero ---- */
.hero--photo { background: var(--tea-900); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; animation: heroScale 9s var(--ease) both; }
@keyframes heroScale { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(243,230,218,.97) 0%, rgba(243,230,218,.88) 34%, rgba(243,230,218,.25) 62%, transparent 80%), linear-gradient(180deg, rgba(243,230,218,.5), transparent 30%); }
.hero--photo .hero__sun { opacity: .55; mix-blend-mode: screen; }
.hero--photo .draw path.f:not(.keep) { display: none; }
.hero--photo .draw path.l { stroke: #FBF8F1; stroke-opacity: .85; }
.hero--photo .draw path.keep { fill: var(--ivory-100); }
.hero--photo .hero__mist { opacity: .6; }
.horizon--photo { background: var(--dusk); }
.horizon__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transform: translateY(calc(var(--sink, 0px) * -.25)) scale(1.15); }
.horizon--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--gold) 0%, rgba(239,226,198,0) 30%, rgba(29,68,54,0) 60%, var(--dusk) 100%); }
.horizon--photo .horizon__sun { display: none; }
.horizon--photo svg { z-index: 2; }
.map { background-image: url("../shared/photos/town-view.webp"); }
@media (prefers-reduced-motion: reduce) { .hero__photo { animation: none; } }

.tile--photo { padding-top: 0; }
.tile__img { margin: 0 -32px 26px; aspect-ratio: 16 / 10; overflow: hidden; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.06); }
.club-grid { align-items: start; }
.nav .crest { background-color: var(--tea-900); }