/* The end of the page (coast-footer.mjs): the coastal closing is the footer too. The white bar goes; a few links at
   18 px or more stand in the sky beside the invitation, the coast runs to the bottom edge. Nothing under 18 px.
   The painting is the coast without the thin sandbank and without the tree's crown, which coast-motion.mjs lays on top
   so it can sway (both made by night-art.py); at dusk, its graded twin. */
.cf-coast { min-height: max(640px, 100svh); }
.cf-coast .closing-landscape { background-image: url('./art/danish-coast-closing-v6.webp'); }
/* at night from the first style pass (html[data-theme] is set before the page is drawn; data-look follows when the
   coast's script runs), so the day painting is never downloaded at night */
.cf-coast[data-look="dusk"] .closing-landscape, html[data-theme="night"] .cf-coast:not([data-look="day"]) .closing-landscape { background-image: url('./art/danish-coast-closing-v6-dusk.webp'); }
.cf-coast .closing-copy > .primary-cta { font-size: 18px; padding: 16px 30px; min-height: 56px; }
.cf-coast .closing-copy > .text-button { font-size: 18px; }
.cf-coast .closing-pause { bottom: 20px; }

.cf-coast .cf-footer { position: absolute; z-index: 1; top: var(--cf-top, 135px); left: var(--cf-left, 54%); width: max-content; margin: 0; padding: 0; background: none;
  display: grid; justify-items: start; gap: 0; color: var(--ink); }
/* too little sky beside the invitation (coast-footer.mjs measures it): the links go under it, and the section grows so
   the horizon stays below them */
.cf-coast[data-place="under"] .closing-copy { padding-bottom: 0; }
.cf-coast[data-place="under"] .cf-footer { position: relative; top: auto; left: auto; width: max-content; align-self: flex-start; margin: 56px 0 0 max(6%, calc((100% - 1240px) / 2)); }      /* in line with the invitation */
.cf-coast .cf-footer .cf-mark { font-size: 34px; letter-spacing: -1.6px; }
.cf-coast .cf-footer .cf-line { margin: 6px 0 0; font-size: 20px; line-height: 1.3; color: #3f5a52; }
.cf-coast .cf-footer .cf-links { display: grid; grid-template-columns: auto auto; gap: 8px 30px; margin: 26px 0 0; }
.cf-coast .cf-footer .cf-links a, .cf-coast .cf-footer .cf-mail { font-size: 19px; font-weight: 600; text-decoration: none; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s ease; }
.cf-coast .cf-footer .cf-links a:hover, .cf-coast .cf-footer .cf-mail:hover, .cf-coast .cf-footer a:focus-visible { background-size: 100% 2px; }
.cf-coast .cf-footer .cf-mail { margin-top: 22px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cf-coast .cf-footer .cf-legal { margin-top: 10px; font-size: 18px; color: #3f5a52; }

/* ------------------------------------------------------------------ dusk: the same coast at the end of the day */
.cf-coast[data-look="dusk"] { background: #26345d; --ink: #fff4dc; }
.cf-coast[data-look="dusk"] .closing-copy h2 { color: #fff4dc; }
.cf-coast[data-look="dusk"] :is(.closing-copy, .cf-footer) { text-shadow: 0 1px 14px rgb(30 40 80 / .55); }      /* keeps the light type clear over the glow */
.cf-coast[data-look="dusk"] .closing-copy > .primary-cta { text-shadow: none; }
.cf-coast[data-look="dusk"] .closing-copy > p, .cf-coast[data-look="dusk"] .cf-footer .cf-line, .cf-coast[data-look="dusk"] .cf-footer .cf-legal { color: #f4e6cf; }
.cf-coast[data-look="dusk"] .closing-copy > .primary-cta { background: #fff4dc; border-color: #fff4dc; color: #152621; }
.cf-coast[data-look="dusk"] .closing-copy > .primary-cta:hover { background: #ffffff; }
.cf-coast[data-look="dusk"] .closing-copy > .text-button { color: #fff4dc; }
.cf-coast[data-look="dusk"] .wordmark span { color: #ff8f73; }
.cf-coast:not([data-look="dusk"]) .cf-light { display: none; }
/* the moving parts that are drawn, not cut from a painting, take the dusk light here */
.cf-coast[data-look="dusk"] [data-closing-ripple] path:first-child { stroke: #e3d3e8; }
.cf-coast[data-look="dusk"] [data-closing-ripple] path:last-child { stroke: #33406f; }
.cf-coast[data-look="dusk"] [data-closing-bird] { stroke: #1d2340; }

/* ------------------------------------------------------------------ what coast-motion.mjs draws */
.cf-coast .cm-wash { stroke: #fffaf0; }
.cf-coast[data-look="dusk"] .cm-wash { stroke: #cfc2dc; }
.cf-coast .cf-stars circle { animation: cf-twinkle var(--cf-slow, 4s) ease-in-out var(--cf-delay, 0s) infinite alternate; }
.cf-coast .cf-sun-road path { animation: cf-twinkle 2.4s ease-in-out var(--cf-delay, 0s) infinite alternate; }
@keyframes cf-twinkle { from { opacity: .25; } to { opacity: 1; } }

/* phone: the invitation, then the links on the paper, then the coast to end the page */
@media (max-width: 760px) {
  .cf-coast { min-height: 0; }
  .cf-coast .closing-copy > .primary-cta { font-size: 18px; padding: 15px 24px; }
  .cf-coast .closing-copy > p { font-size: 18px; }
  .cf-coast .cf-footer { position: relative; order: 2; top: auto; left: auto; width: auto; padding: 18px 6% 26px; }
  .cf-coast .cf-footer .cf-mark { font-size: 30px; }
  .cf-coast .closing-landscape { order: 3; }
  .cf-coast[data-look="dusk"] { background: #2d3b6c; }
}
@media (prefers-reduced-motion: reduce) { .cf-coast .cf-stars circle, .cf-coast .cf-sun-road path { animation: none; } }