@property --ink{syntax:'<color>';inherits:true;initial-value:#1a2631}
@property --pill-bg{syntax:'<color>';inherits:true;initial-value:#1a2631}
@property --pill-fg{syntax:'<color>';inherits:true;initial-value:#fdf2dc}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#263443;font-family:'DM Sans',system-ui,sans-serif}
body.modal-open{overflow:hidden}

/* Stage and scene layers.
   The stage fills the viewport (never shorter than 640px on wide screens, 560px on narrow ones).
   --u scales the link block on narrow screens shorter than 830px (it is exactly 1px at 830px and up).
   --s is the scale of the 2400x1700 artwork: it covers the stage, as with object-fit: cover.
   Ridges are placed so their crest sits at 66% of the stage (--crest; on narrow screens it is pushed lower only as far as needed to keep the wrapped link rows clear of it); the sun starts at 29% and
   drops --drop to end just behind that crest, whatever the screen shape (the margin scales with the artwork because the sun sets in a small valley of the ridge). */
.stage{--S:max(100svh,560px);--u:min(1px,calc(var(--S) / 830));--s:max(100vw/2400,var(--S)/1700);--r:calc(49.3 * var(--s));--crest:max(calc(.66 * var(--S)),calc(.37 * var(--S) + 241 * var(--u) + 20px));--drop:calc(var(--crest) - .29 * var(--S) + var(--r) + max(4px, 8 * var(--s)));position:relative;overflow:hidden;height:var(--S);background:linear-gradient(180deg,#5f8a89 0%,#99a895 14%,#b9b296 28%,#dfbb91 46%,#e3a583 62%,#e6987a 70%,#e6987a 100%);color:#1a2631;animation:ink 28s ease-in-out 2s both}
@media (min-width:900px){.stage{--S:max(100svh,640px);--u:1px;--crest:calc(.66 * var(--S))}}
.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.seasons{display:block}
.sky-gold{opacity:0;background:linear-gradient(180deg,#6d8091 0%,#b79583 25%,#f0a46d 50%,#f27b50 68%,#f27b50 100%);animation:gold 28s ease-in-out 2s both}
.sky-dusk{opacity:0;background:linear-gradient(180deg,#121a31 0%,#262d52 35%,#5a456b 55%,#b8606a 68%,#d9715f 100%);animation:dusk 28s ease-in-out 2s both}
.sun{position:absolute;inset:auto;width:calc(2 * var(--r));height:calc(2 * var(--r));left:calc(50% + 81 * var(--s) - var(--r));top:calc(.29 * var(--S) - var(--r));border-radius:50%;background:#fedca1;pointer-events:none;animation:sundown 28s ease-in-out 2s both}
.ridges{inset:auto;left:50%;margin-left:calc(-1200 * var(--s));width:calc(2400 * var(--s));height:calc(1700 * var(--s));top:calc(var(--crest) - 1104 * var(--s));animation:ridgedark 28s ease-in-out 2s both}

@keyframes sundown{0%{transform:translateY(0);filter:none}70%{transform:translateY(var(--drop));filter:hue-rotate(-14deg) saturate(2)}100%{transform:translateY(var(--drop));filter:hue-rotate(-14deg) saturate(2)}}
@keyframes gold{0%{opacity:0}35%{opacity:1}55%{opacity:1}85%{opacity:0}100%{opacity:0}}
@keyframes dusk{0%,30%{opacity:0}85%,100%{opacity:1}}
@keyframes ridgedark{0%{filter:brightness(1)}100%{filter:brightness(0.62)}}
@keyframes ink{0%,62%{--ink:#1a2631;--pill-bg:#1a2631;--pill-fg:#fdf2dc}70%,100%{--ink:#fdf2dc;--pill-bg:#fdf2dc;--pill-fg:#1a2631}}
@keyframes namedrop{0%,55%{top:11%}90%,100%{top:21%}}
@keyframes tagrise{0%,55%{top:37%}90%,100%{top:33%}}

/* Text blocks */
.name-wrap{position:absolute;top:11%;left:0;right:0;display:flex;justify-content:center;padding:0 16px;text-align:center;animation:namedrop 28s ease-in-out 2s both}
.name-wrap h1{margin:0;font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:clamp(calc(48 * var(--u)),min(8vw,calc(.125 * var(--S))),104px);line-height:1;letter-spacing:.005em;color:var(--ink);text-wrap:balance}
.tag-wrap{position:absolute;top:37%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:calc(28 * var(--u));padding:0 16px;text-align:center;animation:tagrise 28s ease-in-out 2s both}
.tagline{margin:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0 6px;font-family:'Barlow Condensed',system-ui,sans-serif;font-size:clamp(12px,3.2vw,21px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14 * var(--u));margin-top:calc(12 * var(--u))}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:calc(10 * var(--u));height:calc(52 * var(--u));padding:0 calc(22 * var(--u)) 0 calc(16 * var(--u));border:0;border-radius:999px;background:var(--pill-bg);color:var(--pill-fg);font-family:'Barlow Condensed',system-ui,sans-serif;font-size:calc(20 * var(--u));font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;text-decoration:none;cursor:pointer;box-shadow:0 6px 18px rgba(26,38,49,.28);transition:transform .22s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease}
.pill:hover,.pill:focus-visible{transform:translateY(-4px);background:#fedca1;color:#1a2631;box-shadow:0 12px 24px rgba(26,38,49,.32)}
.pill:focus-visible{outline:2px solid #1a2631;outline-offset:3px}
.pill svg{flex:none;width:calc(22 * var(--u));height:calc(22 * var(--u))}
/* Link pills: the visible pill is a plain span and a transparent link sits over it. Chrome's
   visited-link styling then never touches the animated colours (visited pills used to lose
   their text after a replay). The pill reacts to the link via the adjacent-sibling selector. */
.pill-wrap{position:relative;display:inline-flex;border-radius:999px}
.pill-hit{position:absolute;inset:0;z-index:1;border-radius:999px;outline:0}
.pill-hit:hover + .pill,.pill-hit:focus-visible + .pill{transform:translateY(-4px);background:#fedca1;color:#1a2631;box-shadow:0 12px 24px rgba(26,38,49,.32)}
.pill-hit:focus-visible + .pill{outline:2px solid #1a2631;outline-offset:3px}

/* Replay */
.replay{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#c3d0d9;font-family:'Barlow Condensed',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.controls{position:absolute;right:16px;bottom:8px;display:flex;align-items:center;gap:2px}
.seasonpick{display:flex;align-items:center;margin-right:6px}
.season-btn{position:relative;width:40px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;background:transparent;color:#c3d0d9;cursor:pointer}
.season-btn svg{width:20px;height:20px}
.season-btn:hover{color:#fedca1}
.season-btn[aria-pressed="true"]{color:#fedca1}
.season-btn[aria-pressed="true"]::after{content:'';position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.season-btn:focus-visible{outline:2px solid #fedca1;outline-offset:2px}
.replay:hover{color:#fedca1}
.replay:focus-visible{outline:2px solid #fedca1;outline-offset:2px}

/* Contact modal */
.modal{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(26,38,49,.72);overflow-y:auto}
.modal.is-open{display:flex}
.card{position:relative;width:100%;max-width:480px;margin:auto;padding:40px;display:flex;flex-direction:column;gap:20px;background:#263443;border:1px solid rgba(253,242,220,.16);border-radius:16px;color:#fdf2dc}
.card h2{margin:0;font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:32px;color:#fdf2dc}
.close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#c3d0d9;cursor:pointer}
.close:hover{color:#fedca1}
.close:focus-visible,.send:focus-visible,.field:focus-visible,.done:focus-visible{outline:2px solid #fedca1;outline-offset:3px}
.card label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:#c3d0d9}
.field{padding:0 14px;border:1px solid rgba(253,242,220,.26);border-radius:10px;background:#1a2631;color:#fdf2dc;font:inherit;font-size:16px}
input.field{height:48px}
textarea.field{padding:12px 14px;resize:vertical}
.send,.done{height:52px;border:0;border-radius:999px;background:#fedca1;color:#1a2631;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.send:hover,.done:hover{background:#fff0cf}
.send[disabled]{opacity:.6;cursor:progress}
.form-status{margin:0;font-size:15px;line-height:1.5}
.form-status:empty{display:none}
.form-status.is-error{padding:12px 14px;border-radius:10px;background:rgba(242,123,80,.16);border:1px solid rgba(242,123,80,.5);color:#fdf2dc}
.sent{display:none;flex-direction:column;gap:20px}
.sent p{margin:0;font-size:16px;line-height:1.5}
.card form{display:flex;flex-direction:column;gap:20px}
.card.is-sent form{display:none}
.card.is-sent .sent{display:flex}

@media (prefers-reduced-motion: reduce){
  .stage,.sky-gold,.sky-dusk,.sun,.ridges,.name-wrap,.tag-wrap{animation:none}
  .pill{transition:none}
  .seasonpick{display:none}
  .pill:hover,.pill:focus-visible,.pill-hit:hover + .pill,.pill-hit:focus-visible + .pill{transform:none}
}