:root {
  color-scheme: light;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: #284f70;
  background: #e5ebe9;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: flex; justify-content: center; }
.shell {
  position: relative; isolation: isolate;
  width: min(100%, 30rem);
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: #f8f6f1;
  box-shadow: 0 0 45px #294d5920;
  overflow: clip;
}
.art {
  position: absolute; bottom: 0; left: 0; z-index: -2;
  display: block; width: 100%; height: auto;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
  /* Full image width preserves the lighthouse on tall phone screens. */
}
header { text-align: center; padding: max(1.75rem, env(safe-area-inset-top)) 1rem 0; }
.brand {
  display: inline-block; color: #426689; text-decoration: none;
  font-size: .95rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .3em; text-transform: uppercase;
}
.brand:focus-visible { outline: 2px solid #284f70; outline-offset: 6px; }
hr { height: 2px; border: 0; background: #5a7b99; }
.top-line { width: 2.6rem; margin: .8rem auto 0; }
main { flex: 1; display: flex; flex-direction: column; padding-top: 1.5rem; }
h1 {
  margin: 0; text-align: center; font-size: 1.5rem;
  line-height: 1.2; font-weight: 600; font-style: italic;
}
.message-wrap {
  width: 87%; max-width: 26rem; margin: 1rem auto 0;
  text-align: center; padding: 0 .2rem;
}
.message {
  margin: 0; font-size: clamp(1.65rem, 6.7vw, 2.1rem);
  line-height: 1.12; font-weight: 600; font-style: italic;
  letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word;
}
.message-wrap[data-length='long'] .message {
  font-size: clamp(1.5rem, 6.1vw, 1.9rem); line-height: 1.16;
}
.ref {
  margin: .9rem 0 0; font-size: 1rem; font-weight: 600;
  line-height: 1.3; color: #456785; text-wrap: balance;
}
.section-line { width: 2.5rem; margin: 1rem auto 0; }
.countdown { margin: .65rem 0 0; color: #58718a; font-size: .78rem; line-height: 1.3; letter-spacing: .04em; opacity: .72; }
.landscape-space { flex: 1; min-height: clamp(19rem, 81vw, 25rem); }
.subtitle {
  position: absolute; bottom: clamp(13.5rem, 60vw, 18rem); right: 7%;
  width: 45%; margin: 0;
  font-size: clamp(1.1rem, 4.8vw, 1.4rem); font-weight: 600;
  line-height: 1.2; text-align: center; font-style: italic;
  color: #335b7a; text-wrap: balance;
}
footer {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 1rem max(1.2rem, env(safe-area-inset-bottom));
  color: #426689;
}
footer span { font-size: .875rem; font-weight: 700; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; text-align: center; }
footer::before, footer::after { content: ''; width: 1.6rem; height: 2px; background: #5a7b99; flex-shrink: 0; }
.noscript { padding: 1rem; text-align: center; }
@media (max-width: 340px) {
  .brand { letter-spacing: .23em; font-size: .875rem; }
  header { padding-top: 1.3rem; }
  main { padding-top: 1.15rem; }
  .message-wrap { width: 90%; }
  .subtitle { bottom: 12.5rem; }
}
@media (min-width: 600px) {
  .shell { margin: 1.5rem 0; min-height: calc(100svh - 3rem); }
}