/* ---------------------------------------------------------
   Fjord Almanac — base
--------------------------------------------------------- */

:root {
  --bg: #2E3A44;
  --bg2: #1C4A52;
  --fg: #F1EFEA;
  --fg-muted: rgba(241, 239, 234, 0.62);
  --accent: #8FCBDA;
  --accent2: #3DDC97;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "Azeret Mono", "SFMono-Regular", Menlo, monospace;

  --wipe-color: #2E3A44;

  color-scheme: light dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  font-family: var(--serif);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--fg);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 2px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------
   Masthead
--------------------------------------------------------- */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* horizontal padding matches .scene-content / .about exactly, so the
     masthead mark sits on the same left edge as the entry number and
     heading beneath it rather than drifting ~38px out of column. */
  padding: 1.6rem clamp(1.4rem, 6vw, 5rem);
  pointer-events: none;
  mix-blend-mode: normal;
}

.masthead__mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0;
  color: var(--fg);
  transition: color 1.2s ease;
  letter-spacing: 0.01em;
}

.masthead__geo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  transition: color 1.2s ease;
  text-align: right;
  padding-top: 0.2rem;
}

/* ---------------------------------------------------------
   Scenes
--------------------------------------------------------- */

main { display: block; }

.scene {
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.scene[data-day="rain"] {
  --bg: #2E3A44;
  --bg2: #1C4A52;
  --fg: #F1EFEA;
  --fg-muted: rgba(241, 239, 234, 0.62);
  --accent: #8FCBDA;
  --accent2: #3DDC97;
}
.scene[data-day="fog"] {
  --bg: #C9C5BD;
  --bg2: #8E8A82;
  --fg: #2E2B25;
  --fg-muted: rgba(46, 43, 37, 0.58);
  --accent: #514D44;
  --accent2: #8E8A82;
}
.scene[data-day="aurora"] {
  --bg: #07131A;
  --bg2: #0D2530;
  --fg: #EAF6F0;
  --fg-muted: rgba(234, 246, 240, 0.58);
  --accent: #3DDC97;
  --accent2: #7A5CFF;
}
.scene[data-day="snow"] {
  --bg: #E8EEF4;
  --bg2: #9FB4C8;
  --fg: #1E2B36;
  --fg-muted: rgba(30, 43, 54, 0.58);
  --accent: #4A6A89;
  --accent2: #9FB4C8;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene[data-day="aurora"] .scene-canvas {
  filter: blur(0.6px) saturate(1.08);
}

/* the aurora curtain's own glow can run under the entry text —
   a dark halo keeps the mono condition line and heading legible
   regardless of where a bright fold happens to fall behind them. */
.scene[data-day="aurora"] .scene-condition,
.scene[data-day="aurora"] .scene-date {
  text-shadow: 0 2px 22px rgba(2, 9, 12, 0.85), 0 1px 2px rgba(2, 9, 12, 0.95);
}

.scene[data-day="fog"] .scene-canvas {
  /* lighter than before: the fog layers now carry their own soft edges
     and grain, a heavier blur was smoothing that texture away entirely. */
  filter: blur(0.6px);
}

.scene-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 82%, black 8%) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.scene-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 46rem;
  padding: 7rem clamp(1.4rem, 6vw, 5rem) 8rem;
}

.entry-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.scene-date {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  margin: 0 0 0.3rem;
  color: var(--fg);
}
.scene-date span {
  font-weight: 400;
  opacity: 0.82;
}

.scene-condition {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.9rem;
}

.poem {
  margin: 0 0 2.4rem;
  padding: 0;
  border: none;
}

.poem p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.02rem + 0.9vw, 1.7rem);
  line-height: 1.55;
  color: var(--fg);
  max-width: 48ch;
}

.data-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1.3rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}

.data-line {
  display: flex;
  gap: 1.8rem;
  margin: 0;
  flex-wrap: wrap;
}

.data-line div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.data-line dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.data-line dd {
  font-family: var(--mono);
  font-size: 0.92rem;
  margin: 0;
  color: var(--fg);
  letter-spacing: 0.01em;
}

.daylight {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.daylight__dial {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.daylight__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--fg) 12%, transparent);
  stroke-width: 2.5;
}

.daylight__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 24px 24px;
  transition: stroke-dasharray 0.9s ease, stroke-dashoffset 0.9s ease;
}

/* fog's accent is a muted grey-brown, close in value to the ring —
   a touch more opacity on the arc gives it enough weight to still
   read as distinct from the ring rather than blending into it. */
.scene[data-day="fog"] .daylight__arc {
  stroke: color-mix(in srgb, var(--accent) 88%, black 12%);
}
.scene[data-day="fog"] .daylight__duration {
  color: color-mix(in srgb, var(--accent) 88%, black 12%);
}

.daylight__text {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.daylight__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--fg-muted);
  margin: 0;
  white-space: nowrap;
}
.daylight__label span {
  opacity: 0.6;
}

.daylight__duration {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   About footer
--------------------------------------------------------- */

.about {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: #F4F1EA;
  color: #262319;
  padding: 6.5rem clamp(1.4rem, 6vw, 5rem) 9rem;
  z-index: 2;
  box-sizing: border-box;
  /* min-height keeps this section at least one viewport tall so its
     scroll-snap-align: start point is always reachable — if it were
     shorter than the viewport (as its content alone is), the document's
     max scroll position would fall short of the snap point, leaving
     the previous scene's tail visible above the fold. */
  scroll-snap-align: start;
}

.about__inner {
  max-width: 40rem;
  margin: 0 auto;
}

.about h2 {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6248;
  margin: 0 0 2rem;
}

.about p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 1.4rem;
  color: #262319;
}

.about .colophon {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.8;
  color: #6B6248;
  max-width: 60ch;
}

/* ---------------------------------------------------------
   Day strip
--------------------------------------------------------- */

.day-strip {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  gap: 0.2rem;
  padding: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  transition: background-color 1.2s ease, border-color 1.2s ease;
}

/* fog and snow are light-on-light pills — the same 72% bg2 mix that
   reads fine as a dark glass chip on rain/aurora falls to ~2:1 text
   contrast here. Lighten and firm up the glass on those two days only. */
body[data-active-day="fog"] .day-strip,
body[data-active-day="snow"] .day-strip {
  background: color-mix(in srgb, color-mix(in srgb, var(--bg2) 82%, white 18%) 78%, transparent);
}

.day-strip__item {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  border-radius: 999px;
  /* fg-muted is tuned for large body text against a scene's full canvas;
     against the compact glass pill it read as low as ~1.8:1 for the
     smallest labels. A firmer, near-opaque fg keeps the resting/current
     hierarchy readable while clearing small-text contrast on every day. */
  color: color-mix(in srgb, var(--fg) 84%, transparent);
  transition: background-color 0.35s ease, color 1.2s ease, border-color 1.2s ease, transform 0.35s ease;
  font-family: var(--mono);
}

.day-strip__item:hover {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  transform: translateY(-2px);
}

.day-strip__item[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--fg);
  margin: -1px;
  animation: day-strip-breathe 4.2s ease-in-out infinite;
}

/* today's entry gets a slow breathing halo — the almanac is a living
   daily page, not a static index, and the currently-open day should
   feel faintly alive rather than just statically highlighted */
@keyframes day-strip-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 45%, transparent); }
}

.day-strip__item[aria-current="true"] .mini-ring {
  stroke: color-mix(in srgb, var(--fg) 32%, transparent);
}

.day-strip__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.day-strip__mini {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.day-strip__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mini-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--fg) 22%, transparent);
  stroke-width: 2;
  transition: stroke 1.2s ease;
}
.mini-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
  /* the pill's own background/border ease over 1.2s on every scroll- or
     click-driven palette change; without this the tiny dial's stroke
     used to snap to the new accent a beat ahead of everything around it. */
  transition: stroke 1.2s ease;
}

.day-strip__date {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.day-strip__cond {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  opacity: 0.88;
}

/* ---------------------------------------------------------
   Grain — a faint paper texture over the whole page, so the
   procedural scenes read as printed almanac plates rather than
   flat digital gradients. Static (no motion), so it costs nothing
   under reduced-motion and never needs pausing.
--------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  /* multiply (not overlay): overlay's output barely moves near either
     end of the lightness range, so it reads on the mid-tone rain/fog
     scenes but is mathematically almost invisible against the very
     light fog/snow/about backgrounds and the near-black aurora sky.
     multiply darkens proportionally to the noise value everywhere,
     which is the one blend mode that stays visible across this site's
     full tonal range without needing per-scene tuning. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0' result='g'/%3E%3CfeComponentTransfer in='g'%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   Wipe transition overlay
--------------------------------------------------------- */

.wipe {
  position: fixed;
  inset: 0;
  background: var(--wipe-color);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  will-change: opacity;
}

/* ---------------------------------------------------------
   Focus states (global)
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .masthead__mark,
  .masthead__geo,
  .day-strip,
  .day-strip__item,
  .daylight__arc,
  .mini-arc,
  .mini-ring {
    transition: none !important;
  }
  .day-strip__item:hover {
    transform: none;
  }
  .day-strip__item[aria-current="true"] {
    animation: none;
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 720px) {
  .scene-content {
    padding: 6rem 1.3rem 8.5rem;
    max-width: 100%;
  }
  .poem p {
    max-width: 30ch;
    font-size: clamp(1.15rem, 1.05rem + 2vw, 1.5rem);
  }
  .data-row {
    gap: 1.2rem;
  }
  .data-line {
    gap: 1.1rem;
  }
  .about {
    padding: 5rem 1.3rem 8rem;
  }
  .day-strip {
    bottom: 1rem;
    padding: 0.3rem;
    max-width: calc(100vw - 1.2rem);
  }
  .day-strip__item {
    padding: 0.5rem 0.5rem;
    gap: 0.32rem;
  }
  .day-strip__date {
    font-size: 0.62rem;
  }
  .day-strip__cond {
    font-size: 0.56rem;
    letter-spacing: 0.02em;
  }
  .masthead {
    padding: 1.1rem 1.3rem;
  }
  .masthead__mark {
    font-size: 0.95rem;
  }
  .masthead__geo {
    font-size: 0.58rem;
  }
}

@media (max-width: 400px) {
  .day-strip__date {
    font-size: 0.58rem;
  }
}