/*
 * Milio website. The app's "Sorbet" palette (app/src/theme/tokens.ts):
 * cream ground, peach for Talk, mint for the Diary, pastel sky outside,
 * butter for the lights, soft plum ink; dusk plum at night.
 * Literata Display for headings, Google Sans Flex for text. Self-hosted.
 */

@font-face {
  font-family: "Literata Display";
  src: url("/fonts/Literata-Display-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata Display";
  src: url("/fonts/Literata-Display-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/GoogleSansFlex-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/GoogleSansFlex-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --display: "Literata Display", Georgia, "Times New Roman", serif;
  --sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ground: #FFF7F0;
  --raised: #FFFFFF;
  --sunk: #F6EAE2;
  --ink: #4A3048;
  --ink2: #6F586C;
  --ink3: #7C6878;
  --rule: rgba(74, 48, 72, 0.12);
  --focus: #3466C5;

  --mint: #BEE6C9;
  --mint-text: #2F6B47;
  --peach: #FFBFAA;
  --peach-text: #A8452F;
  --butter: #FFD76E;
  --butter-text: #8A5A00;
  --sky: #BFDDF7;
  --sky2: #D8EBFB;
  --tint: 55%;

  --hero-lead: #5C4659;
  --hill-back: #D3ECC6;
  --hill-front: #BFE3B0;
  --wire: #B58E78;
  --cap: #DDB594;
  --cap-line: #4E1A38;
  --glass: #FFD76E;
  --glass-line: #4E1A38;
  --glint: #FFF8E1;
  --halo: #FFDC85;
  --halo-opacity: 0.55;
  --cloud: rgba(255, 255, 255, 0.9);
  --soon-bg: rgba(255, 255, 255, 0.6);

  --bezel: #3B2A3A;
  --shadow: 0 1px 1px rgba(74, 48, 72, 0.04), 0 10px 24px -12px rgba(74, 48, 72, 0.16);
  --phone-shadow: 0 28px 48px -28px rgba(74, 48, 72, 0.55);
  --card-border: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #221C2B;
    --raised: #2D2637;
    --sunk: #382F43;
    --ink: #F6EEF5;
    --ink2: #CBBECD;
    --ink3: #A295A6;
    --rule: rgba(246, 238, 245, 0.12);
    --focus: #A9C8EE;

    --mint: #A9D9B8;
    --mint-text: #A9D9B8;
    --peach: #F2B5A2;
    --peach-text: #F7BDAB;
    --butter: #F5CC72;
    --butter-text: #FFD98A;
    --sky: #3A3F73;
    --sky2: #5A5A99;
    --tint: 22%;

    --hero-lead: #F6EEF5;
    --hill-back: #4E6E5C;
    --hill-front: #3F6351;
    --wire: #7B6782;
    --cap: #8C7177;
    --cap-line: #1E1626;
    --glass: #FFD98A;
    --glass-line: transparent;
    --glint: #FFF1C9;
    --halo: #FFDC85;
    --halo-opacity: 0.6;
    --soon-bg: rgba(34, 28, 43, 0.45);

    --bezel: #0F0B14;
    --shadow: none;
    --phone-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.8);
    --card-border: rgba(246, 238, 245, 0.10);
  }
}

/* ------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* A column, so the footer sits at the bottom of the window on short pages (legal notice, 404). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.nowrap {
  white-space: nowrap;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* :where() keeps this rule weak, so pill-shaped links (.skip, .button, the header pill) keep their round focus ring. */
:where(a, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--butter);
  color: #4A3048;
}

code {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--sunk);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

.skip {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 10;
  background: var(--ink);
  color: var(--ground);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.wrap-narrow {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------ header */

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 4px 6px 4px 0;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--rule);
}

.header-nav a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--raised);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--card-border);
}

.header-nav a:hover {
  background: var(--sunk);
}

.header-nav a[aria-current="page"] {
  background: var(--sunk);
}

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  overflow: hidden;
  margin: 0 12px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 85%);
  isolation: isolate;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sky .lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.lights--wide {
  display: none;
}

.wire {
  fill: none;
  stroke: var(--wire);
  stroke-width: 2.2;
}

.cap {
  fill: var(--cap);
  stroke: var(--cap-line);
  stroke-width: 1.6;
}

.glass {
  fill: var(--glass);
  stroke: var(--glass-line);
  stroke-width: 1.8;
}

.glint {
  fill: var(--glint);
}

.halo {
  fill: var(--halo);
  opacity: var(--halo-opacity);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
}

.hill-back {
  fill: var(--hill-back);
}

.hill-front {
  fill: var(--hill-front);
}

.cloud {
  position: absolute;
  fill: var(--cloud);
}

/* On phones the clouds sit beside the fox, measured from the bottom, so they never run behind the text however it wraps. */
.cloud--a {
  width: 112px;
  left: -26px;
  bottom: 140px;
}

.cloud--b {
  width: 86px;
  right: -14px;
  bottom: 236px;
}

/* Stars live inside the lights drawing; the ones lower in the sky ("far") only show beside the text on wide screens. */
.stars,
.stars .far,
.moon {
  display: none;
}

.stars {
  fill: #FFF6DC;
  opacity: 0.75;
}

.moon {
  position: absolute;
  width: 52px;
  right: 9%;
  top: 128px;
}

.moon-glow {
  fill: #FFEDBE;
  opacity: 0.12;
}

.moon-face {
  fill: #FFEDBE;
}

@media (prefers-color-scheme: dark) {
  .cloud {
    display: none;
  }

  .stars {
    display: inline;
  }

  /* The bulbs are <use> copies of #bulb: the delay reaches each copy as an inherited property. */
  .halo {
    animation: twinkle 3.2s ease-in-out infinite alternate;
    animation-delay: var(--twinkle-delay, 0s);
  }

  use.b1 {
    --twinkle-delay: -1.1s;
  }

  use.b2 {
    --twinkle-delay: -2.2s;
  }
}

@keyframes twinkle {
  from {
    opacity: 0.38;
  }
  to {
    opacity: 0.7;
  }
}

.hero-inner {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 92px 20px 0;
}

.hero-text {
  width: 100%;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.375rem, 9.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.hero h1 .accent {
  display: block;
  font-style: italic;
}

.hero-lead {
  margin: 18px 0 0;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--hero-lead);
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--soon-bg);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.soon-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--halo) 45%, transparent);
}

.hero-fox {
  width: min(232px, 62vw);
  margin: 20px 0 22px;
  filter: drop-shadow(0 10px 14px rgba(74, 48, 72, 0.12));
}

/* ------------------------------------------------------------ features */

.features {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 20px 24px;
  display: grid;
  gap: 72px;
}

.feature {
  display: grid;
  gap: 24px;
  align-items: center;
}

.feature--diary {
  --hue: var(--mint);
  --hue-text: var(--mint-text);
}

.feature--talk {
  --hue: var(--peach);
  --hue-text: var(--peach-text);
}

.feature--goals {
  --hue: var(--butter);
  --hue-text: var(--butter-text);
}

.feature--keep {
  --hue: var(--sky);
  --hue-text: var(--ink2);
}

@media (prefers-color-scheme: dark) {
  .feature--keep {
    --hue: #A9C8EE;
    --hue-text: #BCD5F3;
  }
}

.kicker {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hue-text);
}

.feature h2 {
  margin: 6px 0 14px;
  font-size: clamp(1.875rem, 6.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.feature-text p:not(.kicker) {
  margin: 0 0 12px;
  max-width: 34rem;
  color: var(--ink2);
}

.feature-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 36px 0;
}

.feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 36px;
  background: color-mix(in srgb, var(--hue) var(--tint), var(--ground));
}

/* At night the panels are the raised plum with a soft glow of their hue, like a lamp in the room. */
@media (prefers-color-scheme: dark) {
  .feature-art::before {
    background: radial-gradient(110% 80% at 50% 40%, color-mix(in srgb, var(--hue) 26%, var(--raised)) 0%, var(--raised) 78%);
    box-shadow: inset 0 0 0 1px var(--card-border);
  }
}

.feature-art--fox {
  min-height: 320px;
}

.phone {
  width: min(256px, 66vw);
  padding: 7px;
  border-radius: 40px;
  background: var(--bezel);
  box-shadow: var(--phone-shadow);
}

.phone img {
  width: 100%;
  border-radius: 33px;
}

.peek {
  position: absolute;
  width: clamp(96px, 28vw, 150px);
  bottom: 18px;
}

.peek--left {
  left: max(4px, calc(50% - 200px));
}

.feature-art .fox {
  width: min(220px, 58vw);
}

.feature-art .lights--small {
  position: absolute;
  top: 0;
  left: 6%;
  width: 88%;
  height: auto;
}

.feature-art--fox:has(.lights--small) {
  padding-top: 92px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pills li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--card-border);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ------------------------------------------------------------ coming soon, care note */

.soon-band {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 1080px;
  margin: 48px 20px 0;
  padding: 28px 24px 30px;
  border-radius: 32px;
  background: var(--raised);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--card-border);
  text-align: center;
}

.soon-fox {
  width: 112px;
}

.soon-band h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.soon-band p {
  margin: 0 0 8px;
  color: var(--ink2);
}

.care-note {
  max-width: 42rem;
  margin: 48px auto 64px;
  padding: 0 20px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink2);
}

.care-note p {
  margin: 0 0 10px;
}

.care-note a {
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------------ documents */

.doc {
  padding-top: 32px;
  padding-bottom: 72px;
}

.doc h1 {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.doc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.doc-head h1 {
  margin-bottom: 4px;
}

.doc-art {
  order: 2;
  flex: none;
  width: clamp(84px, 22vw, 128px);
}

.doc .meta {
  margin: 0 0 20px;
  color: var(--ink3);
  font-size: 0.9375rem;
}

.doc .lead {
  margin: 16px 0 24px;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink2);
}

.doc h2 {
  margin: 2.4em 0 0.5em;
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  scroll-margin-top: 24px;
}

.doc h3 {
  margin: 1.8em 0 0.4em;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 24px;
}

.doc p {
  margin: 0 0 1em;
}

.doc ul,
.doc ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

.doc li {
  margin: 0 0 0.45em;
  padding-left: 0.2em;
}

.doc li::marker {
  color: var(--ink3);
}

.doc hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5em 0;
}

.doc blockquote {
  margin: 1.2em 0;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--rule);
  color: var(--ink2);
}

.toc {
  margin: 8px 0 8px;
  border-radius: 20px;
  background: var(--raised);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--card-border);
}

.toc summary {
  cursor: pointer;
  padding: 14px 20px;
  font-weight: 600;
  list-style-position: inside;
}

.toc nav {
  padding: 0 20px 14px;
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.9375rem;
}

.toc li {
  margin: 0 0 0.35em;
}

.toc a {
  color: var(--ink2);
}

@media (min-width: 720px) {
  .toc ol {
    columns: 2;
    column-gap: 40px;
  }

  .toc li {
    break-inside: avoid;
  }
}

/* Tables: a real table on wide screens, labelled rows on phones. */
.table {
  margin: 1.2em 0 1.6em;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink2);
  padding: 0 16px 10px 0;
  border-bottom: 1.5px solid var(--rule);
  vertical-align: bottom;
}

.table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.table td:first-child {
  font-weight: 600;
  width: 32%;
}

@media (max-width: 639px) {
  .table table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: auto;
  }

  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }

  .table tr:first-child {
    border-top: 1.5px solid var(--rule);
  }

  .table td {
    border: 0;
    padding: 2px 0 6px;
  }

  .table td:first-child {
    width: auto;
  }

  .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink3);
  }
}

/* ------------------------------------------------------------ 404 */

.not-found {
  padding-top: 24px;
  padding-bottom: 80px;
  text-align: center;
}

.not-found img {
  width: min(240px, 60vw);
  margin: 0 auto 12px;
}

.not-found h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.not-found .lead {
  margin: 0 auto 28px;
  max-width: 28rem;
  color: var(--ink2);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

.button:hover {
  text-decoration: none;
  opacity: 0.9;
}

.button--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0 40px;
  font-size: 0.9375rem;
}

.footer-row {
  display: grid;
  gap: 12px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink2);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.footer-meta {
  margin: 0;
  color: var(--ink3);
  line-height: 1.7;
}

.footer-meta a {
  color: var(--ink2);
}

.footer-meta span {
  display: none;
}

/* ------------------------------------------------------------ wider screens */

@media (min-width: 720px) {
  .lights--narrow {
    display: none;
  }

  .lights--wide {
    display: block;
  }

  .hills {
    height: 150px;
  }

  .footer-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .footer-meta span {
    display: inline;
  }

  .footer-break {
    display: none;
  }
}

@media (min-width: 880px) {
  /* 20px gutters until the window is wide enough, so the rounded corners never touch the window edge. */
  .hero {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
    border-radius: 40px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
    justify-items: start;
    padding: 136px 56px 0;
  }

  .hero-text {
    padding-bottom: 150px;
  }

  .hero-fox {
    justify-self: center;
    width: 300px;
    margin: 0 0 30px;
  }

  /* Low on the horizon, tucked behind the fox's left side (its left edge is at 81.25% - 185px of the hero), below the "Coming soon" line. */
  .cloud--a {
    left: calc(81.25% - 265px);
    bottom: 104px;
    width: 110px;
  }

  .cloud--b {
    right: 4%;
    top: 132px;
    bottom: auto;
    width: 104px;
  }

  @media (prefers-color-scheme: dark) {
    .moon,
    .stars .far {
      display: block;
    }
  }

  .features {
    padding-top: 96px;
    gap: 112px;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .feature:nth-child(even) .feature-art {
    order: -1;
  }

  .feature-art {
    min-height: 520px;
  }

  .phone {
    width: 264px;
  }

  .peek {
    width: 150px;
    left: 2%;
  }

  .feature-art .fox {
    width: 260px;
  }

  .soon-band {
    grid-template-columns: 150px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 32px;
    width: min(1080px, calc(100% - 40px));
    margin: 96px auto 0;
    padding: 36px 48px;
    text-align: left;
  }

  .soon-fox {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header nav,
  .toc,
  .skip {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}