@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Daylight: MealThyme's cream, its brown, its logo's four lights. */
  --cream: #FBF8F3;
  --page: var(--cream);
  --brown: #4A4238;
  --brown-muted: #6B6053;
  --mint: #8FE3DE;
  --aqua: #8FCFEA;
  --peach: #F6C29A;
  --lilac: #D9C2F3;
  /* How strongly each light shows; the visitor's time of day moves these. */
  --mint-mix: 66%;
  --lilac-mix: 64%;
  --peach-mix: 60%;
  --aqua-mix: 54%;
  --spill: .55;
  /* Night: the Tiny Agents sky behind Pip. */
  --slate: #020617;
  --night-ink: #EFF4FC;
  --night-muted: #9AA7C2;

  --serif: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gap: clamp(8px, 1vw, 14px);
  --edge: clamp(16px, 2.6vw, 40px);
  /* One grid: two cards and the space between them; the top line spans exactly that. */
  --card: min(36vw, 64vh, 470px);
  --between: clamp(20px, 2.8vw, 44px);
  /* Three sizes of type, and only three. */
  --text: 14.5px;
  --small: 12px;
  --round: clamp(18px, 1.6vw, 26px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --open: cubic-bezier(.76, 0, .16, 1);
}

/* The sky follows the visitor's clock (time.js). */
:root[data-time="dawn"]  { --page: #FBF5F1; --mint-mix: 48%; --lilac-mix: 70%; --peach-mix: 74%; --aqua-mix: 40%; }
:root[data-time="dusk"]  { --page: #F9F2EE; --mint-mix: 40%; --lilac-mix: 76%; --peach-mix: 78%; --aqua-mix: 44%; --spill: .7; }
:root[data-time="night"] { --page: #EFEDF3; --mint-mix: 52%; --lilac-mix: 80%; --peach-mix: 34%; --aqua-mix: 66%; --spill: .9; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--page);
  color: var(--brown);
  font: 400 15px/1.5 var(--sans);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: color-mix(in oklab, var(--lilac) 70%, white); color: var(--brown); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; border-radius: 6px; }

/* Four soft lights across the whole page; they breathe and never move. */
.daylight { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.daylight span { position: absolute; border-radius: 50%; animation: breathe 31s ease-in-out infinite; }
.daylight span:nth-child(1) { width: 62vw; height: 58vh; left: -12vw; top: -10vh; background: radial-gradient(closest-side, color-mix(in oklab, var(--mint) var(--mint-mix), transparent), transparent); animation-duration: 23s; }
.daylight span:nth-child(2) { width: 58vw; height: 52vh; right: -12vw; top: -4vh;  background: radial-gradient(closest-side, color-mix(in oklab, var(--lilac) var(--lilac-mix), transparent), transparent); animation-duration: 37s; }
.daylight span:nth-child(3) { width: 64vw; height: 56vh; left: 26vw;  top: 30vh;  background: radial-gradient(closest-side, color-mix(in oklab, var(--peach) var(--peach-mix), transparent), transparent); animation-duration: 29s; }
.daylight span:nth-child(4) { width: 52vw; height: 50vh; left: -10vw; top: 46vh;  background: radial-gradient(closest-side, color-mix(in oklab, var(--aqua) var(--aqua-mix), transparent), transparent); animation-duration: 43s; }

/* The top line: her name, set like a signature, and three quiet doors. */
.bar, .worlds, .pager { position: relative; z-index: 1; }
.bar {
  /* Three parts on the page's axis: her name on the left card's edge, the line
     centred over the gap between the cards, the links on the right card's edge. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 24px;
  width: min(100% - 2 * var(--edge), 2 * var(--card) + var(--between));
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 0 0;
  -webkit-font-smoothing: subpixel-antialiased;
}
/* Her name, then one line about her, in the same voice as the links. */
.me { justify-self: start; }
.about { margin: 0; justify-self: center; text-align: center; font-size: var(--text); color: var(--brown-muted); letter-spacing: -0.003em; animation: rise .9s var(--out) 1.55s both; }
.bar nav { justify-self: end; }
/* Her name is set exactly like the three links beside it. */
.me {
  position: relative;
  padding: 4px 0;
  font-size: var(--text);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.003em;
  color: var(--brown-muted);
  transition: color .25s;
  animation: rise .9s var(--out) 1.45s both;
}
.bar nav { display: flex; gap: clamp(18px, 2.2vw, 28px); font-size: var(--text); letter-spacing: -0.003em; color: var(--brown-muted); animation: rise .9s var(--out) 1.7s both; }
.bar nav a { position: relative; padding: 4px 0; transition: color .25s; }
.me::after, .bar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--out);
}
.me:hover, .bar nav a:hover { color: var(--brown); }
.me:hover::after, .bar nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Two worlds, side by side: two cards that fold up out of the page. */
.worlds {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--between);
  min-height: calc(100svh - 70px);
  padding: clamp(16px, 3vh, 40px) var(--edge) clamp(28px, 5.5vh, 72px);
  perspective: 1800px;
}
.slot {
  position: relative;
  flex: 0 1 auto;
  width: var(--card);
  aspect-ratio: 4 / 5;
  perspective: 1200px;
  transform-origin: 50% 100%;
  animation: appear .6s ease .05s backwards;
}
.slot--thyme { animation-delay: .15s; }

/* The aurora spills a little light onto the paper around its card. */
.slot--hollow::before {
  content: "";
  position: absolute;
  inset: -14% -18%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(52, 211, 153, .32), transparent),
    radial-gradient(closest-side at 70% 55%, rgba(168, 85, 247, .30), transparent),
    radial-gradient(closest-side at 45% 75%, rgba(244, 114, 182, .20), transparent);
  filter: blur(28px);
  opacity: var(--spill);
  animation: breathe 19s ease-in-out infinite;
  pointer-events: none;
}

.world {
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 30%;
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--round);
  isolation: isolate;
  cursor: pointer;
  container-type: inline-size;
  transition: transform .9s var(--out), box-shadow .9s var(--out);
}
/* Leaning only while the pointer is on it, so text is crisp at rest. */
.world.leaning { transform: rotateX(var(--ry)) rotateY(var(--rx)); }
.world.tilting { transition: transform .12s linear, box-shadow .9s var(--out); }
/* A sheen that follows the pointer, as light moves on a real card. */
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, .22), transparent 46%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .6s var(--out);
  pointer-events: none;
}
.world:hover::after { opacity: 1; }
.world:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; border-radius: var(--round); }

/* The Hollow: a window of night cut into the day. */
.world--hollow {
  color: var(--night-ink);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 184, .16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(15, 23, 42, .95), transparent 55%),
    var(--slate);
  box-shadow: 0 34px 70px -34px rgba(2, 6, 23, .5), 0 2px 6px rgba(2, 6, 23, .12);
}
.world--hollow .sky { position: absolute; inset: -15% -25%; z-index: -1; pointer-events: none; overflow: hidden; animation: dawn 2.2s ease .35s backwards; }
.world--hollow .sky span {
  position: absolute;
  width: 140%;
  height: 55%;
  opacity: .38;
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: sweep 26s ease-in-out infinite alternate, shimmer 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.world--hollow .sky span:nth-child(1) { top: -5%; left: -10%; animation-delay: -4s, 0s;
  background: linear-gradient(115deg, transparent, rgba(56,189,248,0) 15%, rgba(56,189,248,.85) 40%, rgba(244,114,182,.75) 60%, rgba(37,99,235,0) 85%, transparent); }
.world--hollow .sky span:nth-child(2) { top: 0;   left: -20%; animation-duration: 32s, 10s; animation-delay: -10s, -3s;
  background: linear-gradient(125deg, transparent, rgba(52,211,153,0) 15%, rgba(52,211,153,.8), rgba(56,189,248,.75), transparent 90%); }
.world--hollow .sky span:nth-child(3) { top: 10%; left: -5%;  animation-duration: 38s, 12s; animation-delay: -16s, -6s;
  background: linear-gradient(105deg, transparent, rgba(244,114,182,0) 20%, rgba(244,114,182,.85), rgba(129,140,248,.75) 70%, transparent); }
.world--hollow .sky span:nth-child(4) { top: 25%; left: -15%; animation-duration: 44s, 14s; animation-delay: -22s, -9s; animation-direction: alternate-reverse, normal; filter: blur(26px);
  background: linear-gradient(135deg, transparent, rgba(99,102,241,0) 15%, rgba(99,102,241,.7) 40%, rgba(168,85,247,.65), rgba(56,189,248,.4), transparent); }
.world--hollow::after { mix-blend-mode: screen; background: radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, .09), transparent 50%); }

/* MealThyme: frosted paper over the same daylight. */
.world--thyme {
  color: var(--brown);
  background: rgba(255, 253, 249, .42);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 34px 70px -38px rgba(74, 66, 56, .28), 0 2px 6px rgba(74, 66, 56, .05);
}

.slot:hover .world { box-shadow: 0 44px 80px -36px rgba(2, 6, 23, .55), 0 2px 6px rgba(2, 6, 23, .12); }
.slot--thyme:hover .world { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 44px 80px -38px rgba(74, 66, 56, .34), 0 2px 6px rgba(74, 66, 56, .05); }

/* The creature, a little above centre. */
.creature {
  position: absolute;
  inset: 0 0 30% 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.world--hollow .creature { pointer-events: auto; }
.pip-stage { width: 66%; aspect-ratio: 1; position: relative; animation: rise 1.4s var(--out) .75s both; }
.pip-stage:not([data-ready])::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, #E7D6B3, transparent); opacity: .18;
}
.pip-stage.flying { position: fixed; z-index: 30; margin: 0; animation: none; pointer-events: none; }
.swan { width: 104%; margin-left: -4%; height: auto; overflow: visible; }

/* Swan: a sheet of paper on the water folds itself into a swan (main.js), then floats. */
.folds polygon { stroke: rgba(150, 172, 168, .55); }
.folds { filter: drop-shadow(0 12px 14px rgba(74, 66, 56, .08)); }
.float { transform-origin: 246px 240px; transition: transform 1.4s var(--out); }
.afloat .float { animation: bob 7s ease-in-out infinite; }
.head { transform-origin: 162px 104px; transform-box: view-box; transition: transform 1s var(--out); }
.reflection { opacity: .55; }
.contact { opacity: 0; transition: opacity 1.2s ease; }
.afloat .contact { opacity: 1; }
.ripples ellipse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.afloat .ripples ellipse { animation: ripple 9s ease-out infinite; }
.afloat .ripples ellipse:nth-child(2) { animation-delay: 3s; }
.afloat .ripples ellipse:nth-child(3) { animation-delay: 6s; }

/* The words, low on the left, sized by the card itself. */
.words {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 7.5cqi 7.2cqi;
  animation: rise 1s var(--out) both;
}
.slot--hollow .words { animation-delay: .95s; }
.slot--thyme .words { animation-delay: 1.12s; }
.name {
  margin: 0 0 0 -0.045em;
  font-family: var(--serif);
  font-weight: 430;
  font-size: clamp(38px, 13cqi, 66px);
  line-height: .9;
  letter-spacing: -0.02em;
  /* Garamond was drawn for books; at display size its word space opens up. */
  word-spacing: -0.06em;
  font-kerning: normal;
  /* dlig brings Garamond's historic Th ligature: the T's arm joins the h in The and Thyme. */
  font-feature-settings: "kern", "liga", "dlig", "onum";
}
/* Light on night reads heavier than dark on cream: compensate so both names weigh the same. */
.world--hollow .name { font-weight: 400; }
.world--thyme .name  { font-weight: 450; }
/* The gap where the l of Meal meets the T of Thyme, closed by hand. */
.name .k { letter-spacing: -0.045em; }
.line {
  margin: 4.4cqi 0 0;
  max-width: 26em;
  font-size: var(--text);
  line-height: 1.5;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.where { margin: .9cqi 0 0; font-size: var(--small); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
/* Dark type on light paper keeps its full weight on a Mac. */
.world--thyme .words { -webkit-font-smoothing: subpixel-antialiased; }
.world--hollow .line { color: color-mix(in oklab, var(--night-ink) 84%, var(--slate)); }
.world--hollow .where { color: var(--night-muted); }
.world--thyme .line  { color: color-mix(in oklab, var(--brown) 88%, var(--cream)); }
.world--thyme .where { color: var(--brown-muted); }

.world--hollow:hover .sky span { opacity: .55; }
.world--thyme:hover .float { transform: translateX(-12px); }

/* Nothing moves in a world you can't see (off-screen on a phone, or a hidden tab). */
.slot.unseen .sky span, .slot.unseen::before, .paused .daylight span, .paused .sky span, .paused .slot--hollow::before { animation-play-state: paused; }

/* The phone's pager: two dots under the worlds. */
.pager { display: none; }

@keyframes appear  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dawn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sweep {
  0%   { transform: translate3d(-8%, 6%, 0) skew(-16deg) rotate(-10deg) scale(1.05); }
  50%  { transform: translate3d(4%, -4%, 0) skew(-10deg) rotate(-3deg) scale(1.1); }
  100% { transform: translate3d(10%, 4%, 0) skew(-18deg) rotate(-8deg) scale(1.08); }
}
@keyframes shimmer { 0%, 100% { opacity: .34; } 50% { opacity: .46; } }
@keyframes bob     { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: -1.2deg; } }
@keyframes ripple  { 0% { opacity: 0; transform: scale(.35); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }

/* The opening: the world you chose grows to fill the window and becomes the site's own ground. */
body.opening .worlds { perspective: none; }
.slot.opening { perspective: none; animation: none; }
.world.opening { position: fixed; inset: auto; z-index: 20; margin: 0; transform: none; cursor: default; transition: background-color .5s ease .3s; }
.world.opening::after { opacity: 0; }
.world.opening .words, .world.opening .sky { transition: opacity .4s ease .25s; opacity: 0; }
.world--thyme.opening .creature { transition: opacity .35s ease .55s; opacity: 0; }

/* Phones: each world fills the screen, and you swipe between them. */
@media (max-width: 760px) {
  .bar { padding-top: max(18px, env(safe-area-inset-top)); }
  .bar nav { gap: 18px; }
  .worlds {
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    height: calc(100svh - 112px);
    padding: 16px 16px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    perspective: none;
    overscroll-behavior-x: contain;
  }
  .worlds::-webkit-scrollbar { display: none; }
  .slot { flex: 0 0 100%; width: 100%; height: 100%; aspect-ratio: auto; scroll-snap-align: center; perspective: none; }
  .slot--hollow::before { inset: 4% 0; filter: blur(28px); }
  .creature { inset: 0 0 34% 0; }
  .pip-stage { width: min(66%, 300px); }
  .swan { width: min(110%, 520px); }
  .name { font-size: clamp(44px, 14cqi, 60px); }
  .bar { width: auto; margin: 0; padding-inline: 16px; grid-template-columns: 1fr auto; }
  .about { grid-row: 2; grid-column: 1 / -1; justify-self: start; text-align: left; }
  .pager { display: flex; justify-content: center; gap: 10px; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); }
  .pager button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: color-mix(in oklab, var(--brown) 22%, transparent);
    transition: background .3s, transform .3s var(--out);
  }
  .pager button[aria-current="true"] { background: var(--brown); transform: scale(1.15); }
}

@media (hover: none) {
  .world::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .15s !important; }
  .world--hollow .sky span { opacity: .4; transform: skew(-12deg) rotate(-6deg); }
  .ripples ellipse { opacity: .5; }
  .world--thyme:hover .float { transform: none; }
  .world { transform: none !important; }
}

/* The link-preview card (og.html, captured to img/og.png at 1200×630). */
.og { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 630px; min-height: 0; padding: 0 64px 0 76px; overflow: hidden; }
.og .og-title { position: relative; z-index: 1; }
.og .og-name { margin: 0; font-size: 60px; line-height: 1; font-weight: 560; letter-spacing: -0.035em; }
.og .line { font-size: 13px; }
.og .og-line { margin: 16px 0 0; font-size: 21px; letter-spacing: -0.01em; color: var(--brown-muted); }
.og .worlds { min-height: 0; padding: 0; gap: 22px; perspective: none; }
.og .slot { width: 296px; animation: none; }
.og .pager, .og .bar { display: none; }
.og .pip-stage, .og .words, .og .me { animation: none; }

/* 404: the swan's paper, still flat, and one way home. */
.lost-page { position: relative; z-index: 1; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 0; padding: 32px 20px; text-align: center; }
.sheet { width: min(300px, 70vw); height: auto; margin-bottom: 36px; filter: drop-shadow(0 18px 22px rgba(74, 66, 56, .1)); animation: appear .8s ease both; }
.lost-title { margin: 0; font-family: var(--serif); font-weight: 450; font-size: clamp(36px, 6vw, 56px); line-height: 1; letter-spacing: -0.02em; word-spacing: -0.04em; font-feature-settings: "kern", "liga", "dlig"; }
.lost-line { margin: 18px 0 0; font-size: var(--text); color: var(--brown-muted); }
.lost-home { margin-top: 26px; font-size: var(--text); color: var(--brown); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: color-mix(in oklab, var(--brown) 30%, transparent); transition: text-decoration-color .3s; }
.lost-home:hover { text-decoration-color: var(--brown); }