/* Thyme site v3. One world, dawning. Tokens from Theme.swift. */

@font-face {
  font-family: "Cormorant Thyme";
  src: url("../assets/fonts/CormorantGaramond-SemiBold.woff") format("woff");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Cormorant Thyme";
  src: url("../assets/fonts/CormorantGaramond-Bold.woff") format("woff");
  font-weight: 700; font-display: swap;
}

:root {
  /* brand */
  --deep: #1F5D3A; --green: #317D4A; --leaf: #A8D5B1; --display: #1A4C30;
  --cream: #FAF8F5; --surface: #F0EDE8; --ink-light: #242B2C; --gold: #B8963C;
  --forest: #0B1A12; --forest-2: #123A26;

  /* world state, driven by scroll (js) */
  --ground: var(--forest);
  --p: 0;

  /* six roles; dark ground defaults, restated by .is-light */
  --canvas: var(--ground);
  --ink: #EEF3EA;
  --ink-soft: #A9BFB0;
  --accent: #9BE15D;
  --accent-ink: #0B1A12;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-edge: rgba(255,255,255,0.22);
  --shadow: 0 24px 60px -20px rgba(0, 12, 6, 0.65);

  --serif: "Cormorant Thyme", "Cormorant Garamond", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

  /* 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 192px;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --radius: 22px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* type ramp: tracking tightens as size grows */
  --t-hero: clamp(3.2rem, 9.5vw, 8.6rem);
  --t-display: clamp(2.4rem, 5.6vw, 5.2rem);
  --t-lede: clamp(1.1rem, 1.35vw, 1.35rem);
  --t-body: clamp(1rem, 1.1vw, 1.125rem);
}

html { scroll-behavior: auto; }
* { box-sizing: border-box; }
body {
  margin: 0;
  /* var(--ground) directly: a token that references another token
     resolves where it is DECLARED, so an alias on :root would freeze
     the forest colour and ignore the scroll-driven override on body. */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: color 600ms var(--ease-out);
}
body.is-light {
  --ink: var(--ink-light);
  --ink-soft: #5E6963;
  --accent: var(--deep);
  --accent-ink: #FFFFFF;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-edge: rgba(255,255,255,0.9);
  --shadow: 0 24px 60px -24px rgba(31, 93, 58, 0.28);
  color: var(--ink);
}
::selection { background: var(--leaf); color: var(--display); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- the world ---------- */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.light { position: fixed; inset: -20vh -20vw; z-index: 0; pointer-events: none; overflow: hidden; }
.light__sun {
  position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%;
  filter: blur(90px); will-change: transform, opacity;
  opacity: calc(0.10 + var(--p) * 0.55);
}
.light__sun--a {
  left: 10%; top: -10%;
  background: radial-gradient(closest-side, rgba(168,213,177,0.95), rgba(168,213,177,0));
  transform: translate3d(calc(var(--p) * 18vw), calc(var(--p) * 26vh), 0);
}
.light__sun--b {
  right: -5%; bottom: -15%; width: 70vmax; height: 70vmax;
  background: radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(255,255,255,0));
  transform: translate3d(calc(var(--p) * -14vw), calc(var(--p) * -18vh), 0);
}
.light__grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- chrome ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) var(--gutter);
  mix-blend-mode: normal;
}
.top__mark { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 2.1rem; letter-spacing: -0.015em; line-height: 1; }
.top__mark img { width: 30px; height: auto; filter: brightness(0) invert(1); transition: filter 400ms var(--ease-out); }
.is-light .top__mark img { filter: none; }
.top__cta {
  font-size: 0.95rem; text-decoration: none; padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  transition: transform 150ms var(--ease-out), background 400ms var(--ease-out);
}
.top__cta:hover { transform: translateY(-1px); }
.top__cta:active { transform: scale(0.97); }

/* ---------- acts ---------- */
main { position: relative; z-index: 1; }
.act { position: relative; padding: clamp(var(--s8), 12vh, var(--s11)) var(--gutter); }
.act__inner { max-width: 1240px; margin: 0 auto; }
.act__inner--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--s6), 6vw, var(--s10)); align-items: center; }
.act__inner--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.act__inner--center { text-align: center; display: grid; justify-items: center; gap: var(--s5); }
.copy { max-width: var(--measure); }
.copy p { color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.55; text-wrap: pretty; margin: var(--s4) 0 0; }

.display {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.022em;
  margin: 0; text-wrap: balance;
}
.is-light .display { color: var(--display); }
.display--hero { font-size: var(--t-hero); line-height: 0.96; letter-spacing: -0.03em; }
.display--peak { font-size: clamp(2.8rem, 6.4vw, 6rem); }
.display--close { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin: var(--s5) 0 0; text-wrap: pretty; }

/* kinetic headline: lines assemble on entrance (js) */
.kinetic__line { display: block; overflow: hidden; }
.kinetic__line > span { display: block; transform: translateY(110%); opacity: 0; }

/* hero */
.act--hero { min-height: 100svh; display: grid; align-items: end; padding-bottom: clamp(var(--s8), 14vh, var(--s11)); }
.act--hero .act__inner { width: 100%; }
.hero__actions { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s6); flex-wrap: wrap; }
.hero__note { color: var(--ink-soft); font-size: 0.95rem; }
.badge img { width: 156px; height: auto; transition: transform 150ms var(--ease-out); }
.badge:hover img { transform: translateY(-2px); }
.badge:active img { transform: scale(0.97); }

/* scatter: glass cards at three depths */
.act--scatter { min-height: 120svh; display: grid; align-items: center; }
.scatter { list-style: none; margin: 0; padding: 0; position: relative; min-height: 70vh; }
.glass {
  position: absolute; width: min(320px, 78%); padding: var(--s5);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 0.92rem; line-height: 1.45; color: var(--ink);
  will-change: transform;
}
.glass p { margin: var(--s2) 0 0; }
.glass__kicker { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.glass__ad { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; opacity: 0.8; }
.glass__muted { color: var(--ink-soft); }
.glass--caption { left: 0; top: 0; transform: rotate(-3deg); }
.glass--blog { right: 0; top: 18%; transform: rotate(2deg); }
.glass--notes { left: 12%; bottom: 8%; transform: rotate(1.5deg); font-family: ui-rounded, var(--sans); }
.glass--shot { right: 14%; bottom: -4%; width: 200px; transform: rotate(-2deg); }

/* turn: pinned wipe */
.act--turn { padding-top: 0; padding-bottom: 0; }
.turn__stage { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gutter); max-width: 1240px; margin: 0 auto; }
/* the device: one frame, four layers, driven by the scroll timeline */
.device { grid-column: 1; grid-row: 1; width: min(380px, 100%); justify-self: center; aspect-ratio: 720 / 1169; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: var(--shadow); position: relative; }
.device__screen { position: absolute; inset: 0; }
.device__screen > * { position: absolute; inset: 0; }
.messy { padding: var(--s5); font-size: 0.8rem; line-height: 1.5; font-family: Georgia, serif; color: #333; background: #fff; overflow: hidden; }
.messy__ad { background: #eee; color: #999; text-align: center; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.1em; padding: var(--s3); margin: 0 0 var(--s3); }
.messy__headline { font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: #111; margin: 0 0 var(--s3); }
.messy__share {
  position: absolute; right: 18px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--deep); background: rgba(168,213,177,0.55);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35); transform-origin: center;
}
.sheet {
  top: auto; bottom: 0; height: 38%; background: #f6f6f7; border-radius: 22px 22px 0 0;
  display: grid; align-content: start; justify-items: center; gap: var(--s4); padding: var(--s3) var(--s4);
  transform: translateY(105%); box-shadow: 0 -10px 30px -18px rgba(0,0,0,0.35);
}
.sheet__grip { width: 36px; height: 5px; border-radius: 3px; background: #c9c9cd; }
.sheet__apps { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; gap: var(--s4); }
.sheet__apps li { display: grid; justify-items: center; gap: 6px; font-size: 0.68rem; color: #222; font-family: var(--sans); }
.sheet__tile { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transform-origin: center; }
.sheet__tile img { width: 100%; height: 100%; object-fit: cover; }
.sheet__tile--gray { background: #b8b8bd; }
.sheet__tile--more { color: #fff; font-size: 1.2rem; letter-spacing: 0.1em; }
.saved {
  inset: auto 14px 40% 14px; background: var(--cream); border-radius: 22px; padding: var(--s4);
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: var(--s3);
  box-shadow: 0 20px 50px -20px rgba(31,93,58,0.35); opacity: 0; transform: translateY(12px) scale(0.94);
  font-family: var(--sans); color: var(--ink-light);
}
.saved img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.saved__title { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.saved__meta { font-size: 0.8rem; color: #5E6963; }
.device__recipe { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); }
.turn__copy { grid-column: 2; grid-row: 1; }

/* rail */
.act--rail { padding-left: 0; padding-right: 0; overflow: hidden; }
.rail__head { padding: 0 var(--gutter); max-width: 1240px; margin: 0 auto var(--s7); }
.rail__viewport { width: 100%; }
.rail { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(var(--s5), 3vw, var(--s7)); width: max-content; will-change: transform; }
.dish { width: clamp(240px, 26vw, 360px); flex: none; margin: 0; }
.dish img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
/* the home screen matches the recipe cards' frame: same 4:3, cropped from the top */
.dish--phone img { object-position: top; }
.dish figcaption { display: grid; gap: 2px; margin-top: var(--s4); }
.dish__title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.is-light .dish__title { color: var(--display); }
.dish__meta { color: var(--ink-soft); font-size: 0.9rem; }

/* peak */
.act--peak { padding-top: 0; padding-bottom: 0; }
.peak__stage { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--gutter); max-width: 1240px; margin: 0 auto; }
.peak__p { opacity: 0; transform: translateY(14px); }
.phone {
  width: min(380px, 100%); justify-self: center; padding: var(--s5) var(--s4) var(--s6);
  border-radius: 40px; background: #fff; color: #111;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
}
.phone__bar { display: grid; justify-items: center; gap: 4px; padding-bottom: var(--s4); border-bottom: 1px solid #eee; }
.phone__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #cfe3d4, #8fb79a); }
.phone__name { font-size: 0.78rem; color: #333; }
.thread { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 20px; font-size: 0.95rem; line-height: 1.35; opacity: 0; transform: translateY(16px) scale(0.96); }
.msg--in { background: #e9e9eb; color: #111; justify-self: start; border-bottom-left-radius: 6px; }
.msg--out { background: #0a84ff; color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
.msg--read { background: none; padding: 0 6px; justify-self: end; font-size: 0.72rem; color: #8a8a8e; }
.msg--card { padding: 0; max-width: 88%; justify-self: end; border-radius: 20px; overflow: hidden; background: none; }
.msg--card-in { justify-self: start; }
.rcard { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px -14px rgba(0,0,0,0.35); }
.rcard img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.rcard figcaption { background: #9A8330; color: #fff; padding: 12px 14px; display: grid; gap: 2px; }
.rcard__title { font-weight: 700; font-size: 1rem; }
.rcard__site { font-size: 0.8rem; color: rgba(255,255,255,0.75); }

/* shelf */
.act--shelf { min-height: 100svh; display: grid; align-items: center; }
/* the shelf, in the app's own voice, growing one recipe at a time */
.shelfui { background: var(--cream); border-radius: var(--radius); padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--shadow); border: 1px solid rgba(31,93,58,0.08); font-family: var(--sans); color: var(--ink-light); }
.shelfui__title { margin: 0 0 var(--s4); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.shelfui__title span { color: var(--green); font-weight: 400; }
.shelfui__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.shelfui__item { display: grid; gap: var(--s2); opacity: 0; transform: translateY(22px) scale(0.94); }
.shelfui__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.shelfui__item span { font-size: 0.95rem; font-weight: 500; line-height: 1.25; }
.copy--trail { justify-self: end; }
.lede--tight { margin-top: var(--s3); }

/* close: resolves and holds */
.act--close { min-height: 100svh; display: grid; align-items: center; }
.close__mark { display: inline-flex; align-items: center; gap: var(--s3); margin: 0; font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--display); }
.close__mark img { width: 30px; height: auto; }
.close__made { color: var(--ink-soft); margin: var(--s6) 0 0; font-size: 0.95rem; }

.foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: center; padding: var(--s7) var(--gutter) var(--s9); color: var(--ink-soft); font-size: 0.9rem; }
.foot__made { flex-basis: 100%; text-align: center; margin: 0 0 var(--s2); }
.foot a { text-decoration: none; text-underline-offset: 4px; }
.foot a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  :root { --t-hero: clamp(2.8rem, 13vw, 4.4rem); --t-display: clamp(2rem, 8.6vw, 3rem); }
  .top { padding: var(--s4) var(--gutter); }
  .top__mark { font-size: 1.8rem; }
  .top__mark img { width: 26px; }
  .top__cta { font-size: 0.85rem; padding: 8px 13px; }
  .act__inner--split, .act__inner--reverse { grid-template-columns: 1fr; }
  .scatter { min-height: 92vw; margin-top: var(--s6); }
  .glass { width: min(280px, 72%); padding: var(--s4); font-size: 0.85rem; }
  .glass--blog { top: 26%; }
  .glass--shot { width: 160px; }
  /* pinned stages must FIT the phone viewport: copy compact on top, the
     device sized by height so the share button and sheet stay on screen */
  .turn__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 88px 0 var(--s6); gap: var(--s5); min-height: 100svh; }
  .device { grid-column: 1; grid-row: 2; width: auto; height: min(58svh, 520px); aspect-ratio: 720 / 1169; justify-self: center; }
  .turn__copy { grid-column: 1; grid-row: 1; }
  .turn__copy .display { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .turn__copy p { font-size: 1rem; margin-top: var(--s3); }
  /* full-width imagery on phones; longer is fine, we are scrolling */
  .dish--phone img { aspect-ratio: auto; object-position: center; }
  .shelfui__row { grid-template-columns: repeat(2, 1fr); }
  /* the rail stacks on phones: lateral travel needs a wide stage */
  .rail { flex-direction: column; width: auto; gap: var(--s7); }
  .dish { width: 100%; }
  .dish--phone img { width: 100%; }
  .peak__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 88px 0 var(--s6); gap: var(--s5); min-height: 100svh; }
  .display--peak { font-size: clamp(2rem, 9vw, 2.8rem); }
  .peak__p { font-size: 1rem; }
  .phone { width: 100%; max-width: 360px; padding: var(--s4) var(--s3) var(--s5); align-self: start; }
  .msg { font-size: 0.88rem; }
  .copy--trail { justify-self: start; }
}

/* ---------- reduced motion: fewer and gentler, never zero ---------- */
@media (prefers-reduced-motion: reduce) {
  .kinetic__line > span { transform: none; opacity: 1; }
  .msg, .peak__p, .shelfui__item { opacity: 1; transform: none; }
  .device__recipe { clip-path: none; }
  .sheet { display: none; }
  .light__sun { transition: none; }
}