:root {
  color-scheme: light;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: #6b4029; background: #d4b89b;
}
* { 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: max(40rem, 100svh);
  display: flex; flex-direction: column;
  background: #fbefd9;
  box-shadow: 0 0 45px #5637202b;
}
.art {
  position: absolute; bottom: 0; left: 0; z-index: -1;
  display: block; width: 100%; height: auto;
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
  pointer-events: none;
}
header {
  padding: max(2rem, env(safe-area-inset-top)) 1.2rem 0;
  text-align: center;
}
.brand {
  display: inline-block; color: #885332; text-decoration: none;
  font-size: .95rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .24em; text-transform: uppercase;
}
.brand:focus-visible { outline: 2px solid #9e5e37; outline-offset: 6px; }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.daily-word {
  width: 82%; max-width: 25rem; margin: 0 auto; padding: 2.4rem 0 1rem;
  text-align: center;
}
h1 {
  margin: 0 0 1.3rem; font-size: 1.5rem; font-style: italic;
  font-weight: 600; line-height: 1.25; color: #a2643e;
}
.message {
  margin: 0; color: #633c27;
  font-size: clamp(1.8rem, 7.3vw, 2.2rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  text-wrap: balance; overflow-wrap: break-word;
}
.message-wrap[data-length='long'] .message {
  font-size: clamp(1.6rem, 6.7vw, 2rem); line-height: 1.2;
}
.ref {
  margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.35;
  font-weight: 600; color: #835839; text-wrap: balance;
}
.section-line { width: 2.1rem; height: 1px; border: 0; background: #bd8953; margin: 1rem auto .8rem; }
.countdown {
  margin: 0; font-family: system-ui, sans-serif;
  font-size: .75rem; line-height: 1.5; color: #806b53;
  font-variant-numeric: tabular-nums; letter-spacing: .015em;
}
.landscape-space { flex: 1; min-height: clamp(18rem, 72vw, 22rem); }
footer { text-align: center; padding: 1rem 1rem max(1.4rem, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #fbefd9ed); }
footer p {
  margin: 0; color: #6b4029; font-size: .875rem; font-weight: 700;
  line-height: 1.4; text-transform: uppercase; letter-spacing: .22em;
  text-shadow: 0 1px 5px #fbefd9;
}
.noscript { font-size: 1rem; line-height: 1.5; }
@media (max-width: 340px) {
  .daily-word { width: 86%; padding-top: 1.8rem; }
  .brand { font-size: .875rem; letter-spacing: .18em; }
}
@media (min-width: 600px) {
  .shell { margin: 1.5rem 0; min-height: max(44rem, calc(100svh - 3rem)); }
}