/* The landscape is the page background; all copy remains semantic HTML. */
.sunset-page {
  --paper: #171222;
  --ink: #fff;
  --muted: #c4cbd1;
  --line: #ffffff29;
  --accent: #ffd0b0;
  color-scheme: dark;
  background: #171222;
  isolation: isolate;
}
.sunset-art {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
  background: #60718f;
}
.sunset-art canvas, .sunset-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  filter: none;
}
.sunset-art canvas { opacity: 0; transition: opacity .65s ease; }
.sunset-fallback { visibility: visible; transition: visibility 0s; }
.sunset-art[data-ready="true"] canvas { opacity: 1; }
.sunset-art[data-ready="true"] .sunset-fallback { visibility: hidden; transition: visibility 0s .65s; }
@media (prefers-reduced-motion: reduce) {
  .sunset-art canvas, .sunset-fallback,
  .sunset-art[data-ready="true"] .sunset-fallback { transition: none; }
}
.sunset-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #06101b88 0%, #07101a3b 42%, transparent 72%), linear-gradient(#02070e48, transparent 23%, transparent 72%, #030a142b);
}
.sunset-page .shell { width: min(1440px, calc(100% - 112px)); }
.sunset-page .site-header {
  position: sticky;
  top: 24px;
  z-index: 20;
  width: min(620px, calc(100% - 48px));
  min-height: 64px;
  margin: 24px auto 14px;
  padding: 9px 11px 9px 14px;
  gap: 24px;
  border: 1px solid #ffffff30;
  border-top-color: #ffffff66;
  border-bottom-color: #ead6b820;
  border-radius: 999px;
  background: linear-gradient(115deg, #f4e2ca1c, #ffffff08 48%, #ffc79a20), #1a203522;
  -webkit-backdrop-filter: blur(24px) saturate(145%) brightness(1.08);
  backdrop-filter: blur(24px) saturate(145%) brightness(1.08);
  box-shadow: 0 8px 30px #070e221f, inset 0 1px 1px #ffffff30, inset 0 -1px 1px #f6c5ae12;
  text-shadow: 0 1px 8px #10142666;
}
.sunset-page .site-header::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff9 28%, #ffe3cb88 70%, transparent);
  pointer-events: none;
}
.sunset-page .site-header .identity { gap: 9px; flex-shrink: 0; padding-right: 8px; font-size: 13px; }
.sunset-page .identity img { width: 32px; height: 32px; box-shadow: 0 0 0 1px #ffffff3b; }
.sunset-page .site-header nav { gap: 3px; font-size: 12px; }
.sunset-page .site-header nav a {
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffffd9;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.sunset-page .site-header nav a:hover { color: #fff; background: #ffffff12; text-decoration: none; }
.sunset-page .site-header nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(145deg, #ffffff25, #ffdeca0d);
  border-color: #ffffff24;
  box-shadow: inset 0 1px 0 #ffffff24, 0 2px 8px #070b1912;
  text-decoration: none;
}
.sunset-page .site-header a:focus-visible { outline: 2px solid #ffe2c8; outline-offset: 3px; border-radius: 999px; }
.sunset-page .landing-main { position: relative; }
.sunset-page .landing-intro {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100svh - 102px);
  padding: 40px 0 110px;
  border: 0;
}
.sunset-page .landing-copy { width: 56%; max-width: 700px; margin: 0; }
.sunset-page .landing-intro h1 {
  font-size: clamp(72px, 8.5vw, 132px);
  line-height: .97;
  letter-spacing: -.062em;
  text-shadow: 0 3px 35px #04101b40;
}
.sunset-page .landing-about { max-width: 360px; margin: 32px 0 0; }
.sunset-page .landing-about p { font-size: 17px; line-height: 1.7; color: #eef1f4; text-shadow: 0 2px 16px #0008; }
.sunset-page .landing-links { gap: 28px; margin-top: 28px; }
.sunset-page .landing-links a { color: #fff; font-size: 13px; text-shadow: 0 2px 12px #000b; }
.sunset-page .landing-main::before {
  content: "";
  position: absolute;
  top: calc(164svh - 170px);
  bottom: -230px;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(transparent, #10182788 150px, #171222bc);
}
.sunset-page .landing-writing { padding: 65px 0 50px; max-width: 1000px; }
.sunset-page .landing-writing h2 { margin-bottom: 34px; font-size: 36px; }
.sunset-page .post-row { padding-block: 32px; }
.sunset-page .post-copy p { color: #c4cbd1; font-size: 14px; }
.sunset-page .post-date { color: #d6b794; }
.sunset-page .landing-timeline { max-width: 1000px; }
.sunset-page .landing-timeline summary { color: #d9dfe5; }
.sunset-page .snippet, .sunset-page .snippet__text { background: transparent; color: #fff; }
.sunset-page .snippet time, .sunset-page .snippet__via { color: #bbc5ce; }
.sunset-page .site-footer { position: relative; margin-top: 40px; padding-bottom: 75px; border-color: var(--line); }
@media (max-width: 700px) {
  .sunset-page .shell { width: calc(100% - 44px); }
  .sunset-page .site-header { width: min(620px, calc(100% - 24px)); top: 12px; min-height: 60px; margin: 12px auto 14px; padding: 8px 10px; gap: 12px; }
  .sunset-page .site-header .identity { font-size: 12px; padding-right: 0; }
  .sunset-page .identity img { width: 30px; height: 30px; }
  .sunset-page .site-header nav { gap: 2px; flex-wrap: nowrap; font-size: 12px; }
  .sunset-page .site-header nav a { display: block; padding: 10px 12px; }
  .sunset-page .landing-intro { min-height: calc(100svh - 86px); align-items: flex-start; padding: 12vh 0 140px; }
  .sunset-page .landing-copy { width: 100%; }
  .sunset-page .landing-intro h1 { font-size: clamp(62px, 13.4vw, 92px); }
  .sunset-page .landing-about { max-width: 290px; margin-top: 25px; }
  .sunset-page .landing-about p { font-size: 15px; }
  .sunset-page .landing-links { gap: 22px; margin-top: 20px; }
  .sunset-page .landing-links a { font-size: 12px; }
  .sunset-page::before { background: linear-gradient(#06101b77, #07101a30 68%, #030a142b); }
  .sunset-page .landing-writing { padding-top: 45px; }
  .sunset-page .post-copy h3 { font-size: 25px; }
}


@media (max-width: 480px) {
  .sunset-page .site-header { justify-content: center; gap: 10px; }
  .sunset-page .site-header .identity span { display: none; }
  .sunset-page .site-header nav a { padding: 10px 11px; }
}
@media (max-width: 360px) {
  .sunset-page .site-header { gap: 6px; padding-inline: 8px; }
  .sunset-page .site-header nav a { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sunset-page .site-header nav a { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sunset-page .site-header { background: #343b50ed; }
}

/* Warm, solid accents keep the landscape as the main source of color. */
.sunset-page .sunset-word { color: #ffdfba; }
.sunset-page .landing-writing h2 { color: #ffdbbf; }
.sunset-page .landing-links a:first-child { color: #ffdab7; text-decoration-color: #f3bb92; }
.sunset-page .landing-links a:last-child { color: #f4dec6; text-decoration-color: #c9a580; }
.sunset-page .post-row:hover h3 { color: #ffd2b5; }
.sunset-page .site-footer a:hover { color: #ffd3ab; }
.sunset-page .site-header nav a[aria-current="page"] {
  color: #ffe4cd;
  background: linear-gradient(135deg, #ffd1ac2c, #ffe1af15);
  border-color: #ffdab735;
}
.sunset-page ::selection { color: #27241f; background: #ffdab0; }

/* A quiet stretch of open scenery gives the camera reveal room to unfold. */
.sunset-page .scene-passage { height: 64svh; pointer-events: none; }
.sunset-page .landing-copy {
  opacity: calc(1 - var(--intro-fade, 0));
  transform: translateY(calc(var(--intro-fade, 0) * -26px));
}
@media (prefers-reduced-motion: reduce) {
  .sunset-page .scene-passage { height: 12svh; }
  .sunset-page .landing-main::before { top: calc(112svh - 170px); }
  .sunset-page .landing-copy { opacity: 1; transform: none; }
}

.sunset-page .landing-copy:focus-within { opacity: 1; transform: none; }

.sky-credit { position: fixed; bottom: 10px; right: 18px; z-index: 5; color: #dce4ef; font-size: 11px; text-decoration: none; text-shadow: 0 1px 5px #000; opacity: .8; }
.sky-credit[hidden] { display: none; }
.sky-credit:hover, .sky-credit:focus-visible { opacity: 1; text-decoration: underline; }

/* Lightweight time-aware artwork while the GPU prepares, also used on failure. */
html[data-sky-phase="night"] .sunset-art { background: radial-gradient(ellipse at 68% 25%, #24314b, #07111f 55%, #040912); }
html[data-sky-phase="day"] .sunset-art { background: linear-gradient(#3377ab, #a5c5d8 69%, #5d8595 70%, #224453); }
html[data-sky-phase="twilight"] .sunset-art { background: linear-gradient(#101e3a, #586779 56%, #b88773 69%, #33424f 70%, #112635); }
html[data-sky-phase="night"] .sunset-fallback,
html[data-sky-phase="day"] .sunset-fallback,
html[data-sky-phase="twilight"] .sunset-fallback { visibility: hidden; }