/* k0-0n.nati.sh: shared styles.
   Linked by index.html and by any subpage (see README, "Subpages"). The
   palette and type are settled; extend by adding rules, don't override.
*/

:root {
  --bg: #faf5ee; --ink: #2b2420; --muted: #8a7d6e; --line: #e4d9c9;
  --karen: #d9694f; --nati: #2c5a56;
  --bark: var(--muted);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root { --bark: color-mix(in srgb, var(--ink) 70%, transparent); }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17140f; --ink: #f1e9dd; --muted: #a89a89; --line: #33291f; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0; display: grid; place-items: center; padding: 1.2rem 1rem;
  background: var(--bg);
  color: var(--ink); font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-align: center;
}

/* The sky behind the tree: three horizons in one. Mediterranean blue at the
   top (Barcelona), a highland gold haze where the crown sits (Ethiopia), the
   Indian Ocean's teal under the ground (Mozambique). Soft enough that the
   tree stays the picture; the season tint washes over it. */
:root {
  --sky-top: #d6e4ec; --sky-mid: #f6e6c7; --sky-low: #cfe0da;
}
@media (prefers-color-scheme: dark) {
  :root { --sky-top: #141b26; --sky-mid: #26201a; --sky-low: #12211f; }
}
body {
  background:
    linear-gradient(180deg, var(--sky-top) 0%, var(--bg) 34%, var(--sky-mid) 58%, var(--bg) 74%, var(--sky-low) 100%);
  background-attachment: fixed;
  transition: background 1.2s ease;
}
/* Autumn: a cooler, paler sky, an amber haze behind the crown, and the ground
   gone to straw. Winter and spring get their own below. */
[data-season="turn"], [data-season="fall"] { --sky-top: #d4dde4; --sky-mid: #f2d9b4; --sky-low: #d9d2bd; --bg: #f8f1e6; --line: #dccbb3; }
[data-season="bare"] { --sky-top: #d3d8dc; --sky-mid: #e8dccb; --sky-low: #d6d1c8; --bg: #f5f0e8; --line: #d8cfc2; }
[data-season="snow"], [data-season="thaw"] { --sky-top: #cfdbe6; --sky-mid: #ebe7df; --sky-low: #d4dde2; --bg: #f6f5f1; --line: #d9dde0; }
[data-season="buds"], [data-season="blossom"] { --sky-top: #d8e3ea; --sky-mid: #f6e2dc; --sky-low: #d8e4d6; }
@media (prefers-color-scheme: dark) {
  [data-season="turn"], [data-season="fall"] { --sky-top: #141922; --sky-mid: #2c2014; --sky-low: #1d1b15; --bg: #17130e; --line: #3a2d20; }
  [data-season="bare"] { --sky-top: #151a20; --sky-mid: #241f19; --sky-low: #1a1917; --bg: #15120f; --line: #2f2a24; }
  [data-season="snow"], [data-season="thaw"] { --sky-top: #121a24; --sky-mid: #1f2226; --sky-low: #141b1f; --bg: #121417; --line: #2b3238; }
  [data-season="buds"], [data-season="blossom"] { --sky-top: #141b26; --sky-mid: #2a1e1f; --sky-low: #13211c; }
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  body {
    background:
      radial-gradient(120% 90% at 50% -15%, color-mix(in srgb, var(--tint) var(--tint-a), transparent), transparent 55%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--bg) 34%, var(--sky-mid) 58%, var(--bg) 74%, var(--sky-low) 100%);
    background-attachment: fixed;
  }
}

.stage { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* --- The sky strip: the Moon over Barcelona, east on the left, west on the
   right. Position and phase come from assets/moon.js. The strip is the top of
   the page; main starts below it. */
.sky {
  position: relative; width: 100%; height: 90px; flex: none;
  pointer-events: none; z-index: 2;
  /* index.html pulls the strip down over the tree's blank top rows, so the
     horizon sits just above the crown whatever the tree's age */
  transition: margin-bottom .35s ease;
}
@media (min-width: 480px) { .sky { height: 110px; } }
.moon {
  position: absolute; transform: translate(-50%, 50%);
  transition: left 2s ease, bottom 2s ease;
  pointer-events: auto; cursor: help;
  filter: drop-shadow(0 0 10px rgba(244, 234, 214, .45));
}
.moon.down { display: none; }
.moon-disc { display: block; }
.moon-dark { fill: var(--moon-dark); stroke: var(--moon-rim); stroke-width: .6; }
.moon-lit  { fill: var(--moon-lit); }
/* the clock beside the disc, to its left; to its right when it sits near the left edge */
.moon-label {
  position: absolute; right: calc(100% + .45rem); top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums;
}
.moon.edge-left .moon-label { right: auto; left: calc(100% + .45rem); }
/* below the horizon: one short line at the left of the strip */
.moon-rise {
  position: absolute; left: 6%; bottom: calc(100% - 1.6rem);
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .85;
}
.moon-rise:empty { display: none; }
.moon-horizon {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  opacity: .8;
}
:root { --moon-lit: #f6ecd6; --moon-dark: #cfd9e0; --moon-rim: rgba(43,36,32,.18); --moon-down-lit: #e9dcc0; }
@media (prefers-color-scheme: dark) {
  :root { --moon-lit: #f1e6cf; --moon-dark: #1d2430; --moon-rim: rgba(241,233,221,.22); --moon-down-lit: #8f8674; }
  .moon { filter: drop-shadow(0 0 14px rgba(241, 230, 207, .35)); }
}
main { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .moon { transition: none; } }

/* Fast forward: an outlined pill under the wordmark, second in weight to the
   calendar button. */
.ff {
  appearance: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  width: 100%; max-width: 300px; padding: .55rem 1.2rem .65rem; border-radius: 999px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-size: .9rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.25; text-align: center;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ff em {
  display: block;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.1rem;
  letter-spacing: 0; color: var(--leaf-a);
}
.ff:hover, .ff:focus-visible { background: var(--ink); color: var(--bg); outline: none; transform: translateY(-1px); }
.ff:hover em, .ff:focus-visible em { color: var(--bg); }

main {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  width: 100%; max-width: 30rem;
}

h1 {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-style: italic;
  font-size: 2.2rem; letter-spacing: -.01em; margin: 0;
}
h1 .k { color: var(--leaf-a); }
h1 .n { color: var(--leaf-b); }
h1 span { transition: color 1.2s ease; }

/* --- The tree ---------------------------------------------------------
   assets/tree.js fills #tree with 48 columns x 26 rows of spans. The font
   size is tuned so 48 monospace chars (about 0.6em each) fit inside a
   360px phone with the body padding: 48 * 0.6 * 11px = 317px. */
.tree {
  margin: 0; padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(9px, 2.7vw, 13px);
  line-height: 1.05; letter-spacing: 0;
  text-align: left; white-space: pre;
  max-width: 100%; overflow-x: auto;
  color: var(--bark); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tree { position: relative; }
.tree span { transition: color 1.2s ease; }
.tree .trunk  { color: var(--bark); }
.tree .karen  { color: var(--leaf-a); }
.tree .nati   { color: var(--leaf-b); }
.tree .both   { color: var(--leaf-a); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tree .both { color: color-mix(in srgb, var(--leaf-a) 50%, var(--leaf-b)); }
}
.tree .ground { color: var(--ground); }
.tree .stub   { opacity: .7; }
.tree .litter.karen { color: var(--litter-a); }
.tree .litter.nati  { color: var(--litter-b); }
.tree .litter.both  { color: var(--litter-a); }
.tree .cap    { color: var(--cap); }

/* Moments (assets/moments.js): a leaf with its own glyph. */
:root { --bloom: #d0342c; }
@media (prefers-color-scheme: dark) { :root { --bloom: #ff6b5a; } }
.tree .birth  { color: var(--ink); }
.tree .bloom  { color: var(--bloom); }
:root { --helix: #a8791b; }
@media (prefers-color-scheme: dark) { :root { --helix: #e0b458; } }
.tree .helix  { color: var(--helix); }
.legend .helix { color: var(--helix); }
/* An emoji is two cells wide; pin it to one so the row keeps its grid. */
.tree .dream { display: inline-block; width: 1ch; overflow: visible; font-size: .8em; line-height: 1; }
.legend .dream { font-size: .9em; }
.tree .heart, .legend .heart { color: var(--karen); }
.tree .tear, .legend .tear { color: var(--nati); }
/* two glyphs in one cell: the heart sits on the grid, the balloon tucks in beside it */
.tree .heart { display: inline-block; width: 1ch; overflow: visible; white-space: nowrap; letter-spacing: -.15em; }
.legend .heart { letter-spacing: 0; }

/* Legend beside the tree: to the right when there is room, under it on a phone. */
.stage { flex-direction: row; align-items: flex-end; justify-content: center; gap: .9rem; flex-wrap: wrap; }
@media (min-width: 721px) { .stage .sky { flex-basis: 100%; } }
.legend {
  margin: 0 0 1.3em; padding: 0; list-style: none; text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(11px, 3vw, 13px); line-height: 1.4; color: var(--ink);
  display: flex; flex-direction: column; gap: .5rem;
}
.legend li { display: flex; align-items: flex-start; gap: .6ch; white-space: nowrap; }
.legend .g { flex: none; width: 2.2ch; }
.legend .t { display: block; }
.legend .birth { color: var(--ink); }
.legend .bloom { color: var(--bloom); }
@media (max-width: 720px) {
  .stage { flex-direction: column; align-items: center; gap: .4rem; }
  .stage .sky { flex-basis: auto; width: 100%; }
  .legend { margin: .2rem 0 0; align-self: flex-start; padding-left: .6rem; max-width: 100%; }
}

/* Milestone marks in the left margin: the day number in the muted colour,
   Karen's and Nati's numbers in their own. */
.tree .ring { color: var(--muted); opacity: .8; }
.tree .ring.karen { color: var(--leaf-a); opacity: 1; }
.tree .ring.nati  { color: var(--leaf-b); opacity: 1; }

/* Summer only: leaves breathe a little while the page rests. tree.js sets
   --i on each leaf span so the delays scatter. */
[data-season="summer"] .tree .karen, [data-season="summer"] .tree .nati, [data-season="summer"] .tree .both {
  animation: leaf-shimmer 3.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.41s);
}
[data-season="summer"] .tree .nati { animation-duration: 4.4s; }
@keyframes leaf-shimmer {
  from { opacity: .86; }
  to   { opacity: 1; }
}

/* Ambient effects (assets/seasons.js): a petal, a falling leaf, a flake.
   Positioned on the character grid; the fall itself is a Web Animation. */
.tree .fx { position: absolute; pointer-events: none; will-change: transform; }
.tree .fx.sway  { animation: fx-sway .9s ease-in-out infinite alternate; }
.tree .fx.slow  { animation-duration: 2s; }
.tree .fx.zigzag { animation: fx-zigzag .8s ease-in-out infinite alternate; }
@keyframes fx-sway   { from { margin-left: -1ch; } to { margin-left: 1ch; } }
@keyframes fx-zigzag { from { margin-left: -2ch; } to { margin-left: 2ch; } }
/* Autumn weather (assets/seasons.js): a short shower, then a sun break. The
   drops are text in the tree's own grid; the sun is a wash over the sky. */
.tree .fx.rain { color: var(--rain, #6f8a99); opacity: .75; }
[data-season="turn"] .tree .fx.rain, [data-season="fall"] .tree .fx.rain { --rain: #7a8f96; }
.sun-break {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(60% 80% at 62% 100%, rgba(250, 214, 140, .55), transparent 70%);
  transition: opacity 2.4s ease;
}
.sun-break.on { opacity: 1; }
[data-season="turn"] .tree span.lit, [data-season="fall"] .tree span.lit { filter: brightness(1.25) saturate(1.2); transition: filter 1.8s ease; }
@media (prefers-color-scheme: dark) { .sun-break { background: radial-gradient(60% 80% at 62% 100%, rgba(240, 190, 110, .28), transparent 70%); } }

@media (prefers-reduced-motion: reduce) {
  .tree span { transition: none; animation: none !important; }
}

/* Day counter under the tree. */
.count {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500;
  color: var(--muted);
}
.count #day { font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.count small { font-size: .95rem; }
.count .tags { display: inline-flex; gap: .6rem; font-size: 1.1rem; min-height: 1.4rem; }
.count .tags .karen { color: var(--leaf-a); }
.count .tags .nati  { color: var(--leaf-b); }
.count .sub {
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-style: normal;
  font-weight: 400; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); opacity: .8; margin-top: .35rem;
}

/* Calendar button. */
.button {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Karla", sans-serif; font-weight: 600; font-size: .95rem;
  color: #fff; text-decoration: none; width: 100%; max-width: 320px; justify-content: center;
  padding: .8rem 1.5rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf-a), var(--leaf-b));
  box-shadow: 0 8px 24px rgba(43,36,32,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(43,36,32,.22); }
.button svg { width: 18px; height: 18px; flex: none; }

/* Quiet secondary link under the calendar button. */
.quiet {
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: lowercase; color: var(--muted); text-decoration: none;
  border-bottom: 1px dashed var(--line); padding-bottom: .1rem; margin-top: -.6rem;
}
.quiet:hover, .quiet:focus-visible { color: var(--ink); border-bottom-color: var(--muted); outline: none; }
.links { display: flex; gap: 1.4rem; margin: 0; }
.links .quiet { margin-top: -.6rem; }

/* Kept for subpages. */
p.tagline {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: var(--muted); margin: 0;
}
.placeholder-badge {
  display: inline-block; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--karen); border: 1px dashed var(--karen);
  border-radius: 999px; padding: .3rem .8rem; margin: 0;
}

/* --- Seasons ------------------------------------------------------------
   assets/seasons.js sets data-season on <body>; these tokens recolour the
   tree and the page tint. Values from the seasons design (checked at 3.3:1
   or better against both grounds). Light first, dark below. */
:root {
  --leaf-a: var(--karen); --leaf-b: var(--nati);
  --ground: var(--line); --litter-a: var(--karen); --litter-b: var(--nati);
  --cap: #588ea2; --tint: var(--karen); --tint-a: 10%;
}
  [data-season="thaw"] { --leaf-a: #b8705c; --leaf-b: #4e7274; --bark: #5e5852; --ground: #d9d9d2; --litter-a: #b8705c; --litter-b: #4e7274; --tint: #8fb4c2; --tint-a: 10%; }
  [data-season="buds"] { --leaf-a: #c96b6a; --leaf-b: #4a7a68; --bark: #5e5852; --ground: #dfe3cf; --litter-a: #c96b6a; --litter-b: #4a7a68; --tint: #c96b6a; --tint-a: 10%; }
  [data-season="blossom"] { --leaf-a: #d4607c; --leaf-b: #5c9060; --bark: #5e5852; --ground: #dfe3cf; --litter-a: #d4607c; --litter-b: #5c9060; --tint: #d4607c; --tint-a: 14%; }
  [data-season="green"] { --leaf-a: #db6145; --leaf-b: #3f8a5a; --bark: #6b5a4c; --ground: #d9dcbf; --litter-a: #db6145; --litter-b: #3f8a5a; --tint: #3f8a5a; --tint-a: 8%; }
  [data-season="summer"] { --leaf-a: #d95a3c; --leaf-b: #2e7a5a; --bark: #6b5a4c; --ground: #d9dcbf; --litter-a: #d95a3c; --litter-b: #2e7a5a; --tint: #d95a3c; --tint-a: 10%; }
  [data-season="late"] { --leaf-a: #c77137; --leaf-b: #587a60; --bark: #6b5a4c; --ground: #e6d8b6; --litter-a: #c77137; --litter-b: #587a60; --tint: #c77137; --tint-a: 10%; }
  [data-season="turn"] { --leaf-a: #c4401f; --leaf-b: #3d6b5f; --bark: #5c4a3f; --ground: #e2d3bd; --litter-a: #c4401f; --litter-b: #3d6b5f; --tint: #c4401f; --tint-a: 14%; }
  [data-season="fall"] { --leaf-a: #a8472a; --leaf-b: #4f6a62; --bark: #5c4a3f; --ground: #e2d3bd; --litter-a: #a8472a; --litter-b: #4f6a62; --tint: #a8472a; --tint-a: 10%; }
  [data-season="bare"] { --leaf-a: #8f5a4a; --leaf-b: #4f6466; --bark: #4a423c; --ground: #d8cfc0; --litter-a: #7a5040; --litter-b: #556064; --tint: #4f6466; --tint-a: 6%; }
  [data-season="snow"] { --leaf-a: #9a5f52; --leaf-b: #4d6a78; --bark: #58514b; --ground: #e9e8e4; --litter-a: #7a5040; --litter-b: #556064; --tint: #8fb4c2; --tint-a: 10%; }
@media (prefers-color-scheme: dark) {
  :root { --leaf-b: #38726d; --cap: #dfe9ee; }
  [data-season="thaw"] { --leaf-a: #c98872; --leaf-b: #6f9a9a; --bark: #b5ada2; --ground: #2d3130; --litter-a: #c98872; --litter-b: #6f9a9a; --tint: #8fb4c2; --tint-a: 12%; }
  [data-season="buds"] { --leaf-a: #d98c8c; --leaf-b: #6c9c88; --bark: #b5ada2; --ground: #2e3226; --litter-a: #d98c8c; --litter-b: #6c9c88; --tint: #c96b6a; --tint-a: 12%; }
  [data-season="blossom"] { --leaf-a: #efb0bc; --leaf-b: #86bd7c; --bark: #b5ada2; --ground: #2e3226; --litter-a: #efb0bc; --litter-b: #86bd7c; --tint: #d4607c; --tint-a: 17%; }
  [data-season="green"] { --leaf-a: #e07a5c; --leaf-b: #5fae78; --bark: #b3a08c; --ground: #2c3423; --litter-a: #e07a5c; --litter-b: #5fae78; --tint: #3f8a5a; --tint-a: 10%; }
  [data-season="summer"] { --leaf-a: #e2704e; --leaf-b: #4a9e7a; --bark: #b3a08c; --ground: #2c3423; --litter-a: #e2704e; --litter-b: #4a9e7a; --tint: #d95a3c; --tint-a: 12%; }
  [data-season="late"] { --leaf-a: #d68a55; --leaf-b: #7f9e7c; --bark: #b3a08c; --ground: #3a3220; --litter-a: #d68a55; --litter-b: #7f9e7c; --tint: #c77137; --tint-a: 12%; }
  [data-season="turn"] { --leaf-a: #e05a36; --leaf-b: #5c8f84; --bark: #b89f8a; --ground: #372a1f; --litter-a: #e05a36; --litter-b: #5c8f84; --tint: #c4401f; --tint-a: 17%; }
  [data-season="fall"] { --leaf-a: #c46a44; --leaf-b: #7a9088; --bark: #b89f8a; --ground: #372a1f; --litter-a: #c46a44; --litter-b: #7a9088; --tint: #a8472a; --tint-a: 12%; }
  [data-season="bare"] { --leaf-a: #a87863; --leaf-b: #7b9194; --bark: #c2b8ac; --ground: #2d2721; --litter-a: #9c7a6a; --litter-b: #85959a; --tint: #4f6466; --tint-a: 7%; }
  [data-season="snow"] { --leaf-a: #b5837a; --leaf-b: #8fb4c2; --bark: #cbc2b5; --ground: #34393d; --litter-a: #9c7a6a; --litter-b: #85959a; --tint: #8fb4c2; --tint-a: 12%; }
}