/* Sanék's website. The palette, the font and the sky are the app's own (docs/design-system.md):
   one family, Fredoka; the dusk palette; a sky over a ground of cloud, the city along the bottom.
   The page takes the phase of the visitor's own day from hero.js (data-phase on <html>). */

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  /* design-system.md §2 */
  --ink: #090807;
  --cream: #F8EBDD;
  --hint: #6B6474;
  --button: #6362A7;
  --sun: #FFC61A;
  --night-ink: #E99D7D;
  --night-ink-increased: #F2B598;

  /* The day sky; hero.js swaps the phase. */
  --sky-top: #6A83C6;
  --sky-bottom: #C4D6EE;
  --ground: var(--cream);
  --text: var(--ink);
  --heading: var(--ink);
  --quiet: var(--hint);
  --link: #4B4A8C;
  --on-sky: var(--ink);
  --city: url("/assets/art/city-day.svg");

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

:root[data-phase="morning"] { --sky-top: #7784B8; --sky-bottom: #E99D7D; }
:root[data-phase="evening"] { --sky-top: #8478BE; --sky-bottom: #E3A6B4; }
/* At night everything is the night (decisions 74, 76): one sky, the night ground, the night inks.
   Large text takes nightInk, anything smaller nightInkIncreased. */
:root[data-phase="night"] {
  --sky-top: #2B2A4F;
  --sky-bottom: #2B2A4F;
  --ground: #454483;
  --text: var(--night-ink-increased);
  --heading: var(--night-ink);
  --quiet: var(--night-ink-increased);
  --link: var(--night-ink-increased);
  --on-sky: var(--cream);
  --city: url("/assets/art/city-night.svg");
}

*, *::before, *::after { box-sizing: border-box; }
/* A hidden element stays hidden whatever display its class gives it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 430;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2 { color: var(--heading); font-weight: 700; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 4.4vw, 3.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); }
p, ul { margin: 0; }
p { text-wrap: pretty; }
strong { font-weight: 620; }

a { color: var(--link); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.sky :focus-visible { outline-color: var(--on-sky); }

.small { font-size: 1rem; color: var(--quiet); }
.small a { color: inherit; }
.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10; padding: 0.5rem 1rem; background: var(--cream); color: var(--ink); border-radius: 999px; }

/* ----- Sky ----------------------------------------------------------------------------------- */

.sky {
  position: relative;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  overflow: hidden;
}
.home .sky { height: clamp(25rem, 62svh, 38rem); }
.doc .sky { height: max(13.5rem, 12.5vw + 4.5rem); }

.top {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem var(--gutter) 0;
  max-width: 72rem; margin: 0 auto;
}
.top a { color: var(--on-sky); }
.wordmark { font-size: 1.625rem; font-weight: 700; text-decoration: none; }
.lang { font-size: 1.0625rem; font-weight: 520; }

/* 200 of 1600 units tall: at least that share of the width, so "slice" never crops the tops. */
.puffs { position: absolute; left: 0; bottom: -1px; width: 100%; height: max(9rem, 12.5vw); fill: var(--ground); z-index: 1; }

/* Sanék stands at the horizon, in front of the clouds. Every picture shares the star's place,
   so the pictures are stacked from the top and only the props change. */
.stage {
  position: absolute; z-index: 2; left: 50%; bottom: 0.4rem;
  width: min(25rem, 78vw); translate: -50% 0;
}
.sun { position: relative; aspect-ratio: 1298 / 1180; transform-origin: 50% 88%; animation: breathe 1.8s ease-in-out infinite alternate; }
.pose { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; opacity: 0; }
.pose.is-on { opacity: 1; }
/* The new picture fades in over the old one, and the old one leaves a moment later: two opaque
   layers never both sit half-transparent, so the star never dips (design-system.md §3.5). */
.pose.is-in { animation: pose-in 0.5s ease-out both; }
.pose.is-out { animation: pose-out 0.5s 0.3s ease-in both; }

@keyframes breathe { to { scale: 1.03; } }
@keyframes pose-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pose-out { from { opacity: 1; } to { opacity: 0; } }

/* The night's moon and stars; hidden by day. */
.heavens { display: none; position: absolute; inset: 0; }
:root[data-phase="night"] .heavens { display: block; }
.moon { position: absolute; top: 22%; right: max(8%, 50% - 22rem); width: 2.6rem; height: auto; }
.heavens i { position: absolute; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #F9DA44; }
.heavens i:nth-child(2) { top: 30%; left: 12%; }
.heavens i:nth-child(3) { top: 18%; left: 30%; width: 0.3rem; height: 0.3rem; }
.heavens i:nth-child(4) { top: 44%; left: 22%; width: 0.3rem; height: 0.3rem; }
.heavens i:nth-child(5) { top: 14%; left: 62%; }
.heavens i:nth-child(6) { top: 40%; left: 84%; width: 0.3rem; height: 0.3rem; }
.heavens i:nth-child(7) { top: 26%; left: 48%; width: 0.25rem; height: 0.25rem; }
.heavens i:nth-child(8) { top: 52%; left: 70%; }

/* ----- Ground -------------------------------------------------------------------------------- */

.ground { padding: 0 var(--gutter); }

.intro { max-width: var(--measure); margin: 0 auto; padding-top: 0.5rem; text-align: center; }
.aside { display: flex; justify-content: center; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--quiet); font-size: 1.1875rem; font-weight: 520; }
.aside .line { transition: opacity 0.3s; }
.aside .line.is-changing { opacity: 0; }
.toggle {
  flex: none; width: 2.75rem; height: 2.75rem; margin: 0 -0.6rem 0 -0.4rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--quiet); cursor: pointer; display: grid; place-items: center;
}
.toggle span { display: block; width: 0.7rem; height: 0.8rem; border: solid currentColor; border-width: 0 0.24rem; }
.toggle[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 0.45rem 0 0.45rem 0.75rem; }

.intro h1 { margin-top: 0.6rem; }
.lede { margin-top: 1.1rem; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem); line-height: 1.42; }

.soon { margin-top: 2.5rem; }
.soon h2 { font-size: 1.4375rem; }
.signup { margin-top: 1rem; }
.signup .row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.signup input[type="email"] {
  flex: 1 1 14rem; min-width: 0; min-height: 3.25rem; padding: 0 1.25rem;
  font: inherit; color: var(--ink); background: #FFFDF9; border: 2px solid var(--button); border-radius: 999px;
}
.signup input[type="email"]::placeholder { color: var(--hint); opacity: 1; }
.signup input[aria-invalid="true"] { border-color: #A3312A; }
.trap { position: absolute; left: -200vw; }
.status { min-height: 1.5em; margin-top: 0.8rem; font-weight: 560; }
.status:empty { min-height: 0; margin-top: 0; }
.signup .small { margin-top: 0.8rem; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.5rem 1.6rem;
  font: inherit; font-weight: 620; color: var(--cream); background: var(--button); border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s;
}
.pill:hover { background: #55549A; }
.pill[disabled] { cursor: progress; }
:root[data-phase="night"] .pill { box-shadow: 0 0 0 2px var(--night-ink-increased); }
:root[data-phase="night"] .pill:focus-visible { outline-offset: 5px; }

.features { max-width: 46rem; margin: clamp(4rem, 9vw, 6.5rem) auto 0; display: grid; gap: clamp(2.75rem, 6vw, 4rem); }
.feature { display: grid; grid-template-columns: clamp(7.5rem, 26vw, 12.5rem) 1fr; gap: clamp(1.25rem, 4vw, 2.75rem); align-items: center; }
.feature:nth-child(even) { grid-template-columns: 1fr clamp(7.5rem, 26vw, 12.5rem); }
.feature:nth-child(even) img { order: 2; }
.feature img { width: 100%; height: auto; }
.feature p { margin-top: 0.6rem; }
@media (max-width: 34rem) {
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; text-align: center; gap: 0.75rem; }
  .feature:nth-child(even) img { order: 0; }
  .feature img { width: 10.5rem; margin: 0 auto; }
}

.plain { max-width: var(--measure); margin: clamp(4rem, 9vw, 6.5rem) auto 0; }
.plain ul { margin-top: 1rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.plain li::marker { color: var(--sun); }
.plain p { margin-top: 0.9rem; }

/* ----- Text pages ---------------------------------------------------------------------------- */

.text { max-width: 38rem; margin: 0 auto; padding-top: 1rem; }
.text h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 2.875rem); }
.text section { margin-top: 2.75rem; scroll-margin-top: 1rem; }
.text h2 { font-size: 1.5rem; }
.text p, .text ul { margin-top: 0.9rem; }
.text ul { padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.text > .small { margin-top: 3rem; }
.text.center { text-align: center; }
.text.center .pill { margin-top: 1.25rem; }
.mood { width: 11rem; height: auto; margin: -5.5rem auto 0.5rem; display: block; position: relative; z-index: 2; }

.todo { background: #FFE08A; color: var(--ink); padding: 0.05em 0.35em; border-radius: 0.3em; outline: 2px dashed #A3312A; }
.todo::before { content: "⚠ "; }

/* ----- Foot ---------------------------------------------------------------------------------- */

.foot { margin-top: clamp(4.5rem, 10vw, 7rem); padding: 0 var(--gutter); text-align: center; }
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.6rem; }
.foot li a { display: inline-block; padding: 0.55rem 0; font-weight: 520; }
.foot .small { max-width: var(--measure); margin: 0.9rem auto 0; }
/* The city along the bottom edge, 60 units of clear ground above the highest chimney. */
.city { height: 65px; margin: 3.75rem calc(-1 * var(--gutter)) 0; background: var(--city) repeat-x center bottom / 380px 65px; }
@media (min-width: 60rem) { .city { height: 97.5px; background-size: 570px 97.5px; } }

@media (prefers-reduced-motion: reduce) {
  .sun, .pose.is-in, .pose.is-out { animation: none; }
  .pose.is-out { opacity: 0; }
  .aside .line, .pill { transition: none; }
}

@media (prefers-contrast: more) {
  :root { --hint: #5E5768; }
  :root[data-phase="night"] { --heading: var(--night-ink-increased); }
}

@media print {
  .sky, .foot nav, .city, .skip { display: none; }
  body { background: #fff; color: #000; }
}