/* Layout: the page is the day and the night side by side. The seam between them is a
   running stream (Nightstream's wave mark). On phones the day sits above the night.
   Colors and type are taken from the two apps so the landing page matches them.
   The page deliberately has one look in both system themes: day is always light, night always dark. */

@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Day: Daystream's light palette */
  --d-bg: #F5F6F8; --d-paper: #FFFFFF; --d-ink: #1A1D23; --d-soft: #5C6370; --d-line: #E5E7EC;
  --d-box: #B9BEC9; --d-done: #A4A9B4; --d-accent: #3451DB; --d-accent-hover: #2A43BF; --d-accent-soft: #E8ECFD;
  --d-shadow: rgba(22, 28, 45, .2);
  /* Night: Nightstream's dark palette */
  --n-bg: #0E1118; --n-surface: #151923; --n-ink: #E3E7F1; --n-ink-2: #AEB5C7; --n-muted: #8A91A5;
  --n-line: #222837; --n-guide: #293042; --n-accent: #6E95FF; --n-accent-hover: #8AA9FF; --n-on-accent: #0B1020;
  --n-shadow: rgba(0, 0, 0, .6);
  /* The stream between them */
  --stream: #5B7FF2;

  --f-day: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-night: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --seam: 80px;
  --content: 34rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--d-ink);
  background: linear-gradient(90deg, var(--d-bg) 50%, var(--n-bg) 50%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, figure, ul, h1, h2 { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ---------- Split ---------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* top · space · headline · app name · lede · card · cta · space · foot */
  grid-template-rows: auto minmax(32px, 1fr) auto auto auto auto auto minmax(32px, 1fr) auto;
  min-height: 100svh;
}

.half {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding-block: clamp(22px, 4vh, 40px);
  min-width: 0;
}
.half > * { width: min(100%, var(--content)); min-width: 0; }

.day {
  grid-column: 1;
  background: var(--d-bg);
  color: var(--d-ink);
  justify-items: end;
  padding-left: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px));
  padding-right: calc(var(--seam) / 2 + clamp(28px, 4vw, 64px));
}
.night {
  grid-column: 2;
  background: var(--n-bg);
  color: var(--n-ink);
  justify-items: start;
  padding-left: calc(var(--seam) / 2 + clamp(28px, 4vw, 64px));
  padding-right: max(clamp(20px, 5vw, 72px), env(safe-area-inset-right, 0px));
}

.wordmark, .top-note { grid-row: 1; }
.headline { grid-row: 3; }
.app      { grid-row: 4; }
.lede     { grid-row: 5; }
.card     { grid-row: 6; }
.cta-row  { grid-row: 7; }
.foot     { grid-row: 9; }

.wordmark, .day .foot { justify-self: start; width: auto; }
.top-note, .night .foot { justify-self: end; width: auto; }

/* ---------- Top and foot ---------- */

.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em;
  text-decoration: none; border-radius: 6px;
}
.wordmark img { border-radius: 6px; }

.top-note, .foot {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  align-self: center;
}
.foot { padding-top: 28px; }
.day .foot { color: var(--d-soft); }
.night .top-note, .night .foot { color: var(--n-ink-2); }

/* ---------- Pitch ---------- */

/* The headline reads across the stream: "Two apps." by day, "Pick your stream." by night. */
.headline {
  line-height: .96;
  text-wrap: balance;
  align-self: end;
}
.day .headline {
  font-family: var(--f-day);
  font-weight: 650;
  font-size: clamp(2.6rem, 4.4vw, 4.7rem);
  letter-spacing: -.04em;
}
.night .headline, .h-pick {
  font-family: var(--f-night);
  font-style: italic;
  font-weight: 380;
  letter-spacing: -.025em;
}
.night .headline { font-size: clamp(2.8rem, 4.7vw, 5rem); white-space: nowrap; }
/* Wide screens: the night side draws this half, so keep it for screen readers only. */
.h-pick {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.app {
  margin-top: clamp(36px, 6vh, 60px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.app img { border-radius: 9px; }
.app h2 { font-size: 26px; line-height: 1.1; }
.day .app h2 { font-family: var(--f-day); font-weight: 600; letter-spacing: -.025em; }
.night .app h2 { font-family: var(--f-night); font-style: italic; font-weight: 420; font-size: 29px; letter-spacing: -.01em; }
.app-tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding-left: 12px; border-left: 1px solid;
}
.day .app-tag { color: var(--d-soft); border-color: var(--d-line); }
.night .app-tag { color: var(--n-ink-2); border-color: var(--n-line); }

.lede {
  margin-top: 14px;
  font-size: 17px; line-height: 1.55;
  text-wrap: pretty;
}
.day .lede { color: var(--d-soft); }
.night .lede { color: var(--n-ink-2); }

/* ---------- Example cards ---------- */

.card {
  margin-top: 34px;
  align-self: start;
  border-radius: 16px;
  border: 1px solid;
  font-size: 15px;
}

/* Daystream: a day with blocks */
.day .card {
  background: var(--d-paper);
  border-color: var(--d-line);
  box-shadow: 0 1px 2px rgba(22, 28, 45, .05), 0 22px 44px -22px var(--d-shadow);
  padding: 18px 20px 12px;
}
.ds-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--d-line); }
.ds-num {
  font-family: var(--f-day); font-weight: 600; font-size: 36px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ds-date { display: flex; flex-direction: column; line-height: 1.25; }
.ds-date b { font-weight: 600; font-size: 14px; }
.ds-date span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-soft); }
.ds-prog {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; color: var(--d-soft); font-variant-numeric: tabular-nums;
}
.ds-bar { width: 52px; height: 4px; border-radius: 4px; background: var(--d-line); overflow: hidden; }
.ds-bar i { display: block; height: 100%; width: 33.4%; border-radius: inherit; background: var(--d-accent); }
.ds-count { display: grid; }
.ds-count > span { grid-area: 1 / 1; }
.ds-count .c2 { opacity: 0; }

.ds-blocks { list-style: none; padding: 6px 0 0; }
.ds-blocks li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.ds-blocks .tx { min-width: 0; }
.box, .dot { flex: none; width: 17px; height: 17px; position: relative; }
.box { border-radius: 5px; border: 1.5px solid var(--d-box); background: var(--d-paper); }
.box::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--d-paper); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}
.done .box { background: var(--d-accent); border-color: var(--d-accent); }
.done .box::after { transform: rotate(45deg) scale(1); }
.task .tx { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px; }
.done .tx { color: var(--d-done); text-decoration-color: var(--d-done); }
.dot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--d-soft); }
.tag {
  margin-left: auto; flex: none;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--d-accent); background: var(--d-accent-soft); padding: 3px 7px; border-radius: 5px;
}

/* The one moment of motion on the day side: the second task gets done. */
@media (prefers-reduced-motion: no-preference) {
  .ticking .box { animation: box-on .28s ease-out 1.2s forwards; }
  .ticking .box::after { animation: mark-on .3s cubic-bezier(.3, 1.6, .5, 1) 1.32s forwards; }
  .ticking .tx { animation: strike .4s ease 1.35s forwards; }
  .ds-bar i { animation: bar-on .5s ease 1.35s forwards; }
  .ds-count .c1 { animation: fade-out .2s ease 1.35s forwards; }
  .ds-count .c2 { animation: fade-in .2s ease 1.45s forwards; }
}
@keyframes box-on { to { background: var(--d-accent); border-color: var(--d-accent); } }
@keyframes mark-on { to { transform: rotate(45deg) scale(1); } }
@keyframes strike { to { color: var(--d-done); text-decoration-color: var(--d-done); } }
@keyframes bar-on { to { width: 66.7%; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* Nightstream: a daily note */
.night .card {
  background: var(--n-surface);
  border-color: var(--n-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 44px -18px var(--n-shadow);
  padding: 18px 22px 12px;
}
.ns-eye { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-accent); }
.ns-title { font-family: var(--f-night); font-size: 26px; line-height: 1.15; letter-spacing: -.01em; margin: 3px 0 10px; }
.ns-title span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--n-muted); margin-left: 6px; vertical-align: .45em; }
.ns-lines { list-style: none; padding: 0; color: var(--n-ink); }
.ns-lines li { position: relative; padding: 4px 0 4px 18px; }
.ns-lines li::before {
  content: ""; position: absolute; left: 3px; top: calc(4px + .75em - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--n-muted);
}
.ns-lines ul { list-style: none; padding: 2px 0 0 10px; margin: 2px 0 0 -12px; border-left: 1px solid var(--n-guide); }
.link { color: var(--n-accent); }
.ns-back {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; color: var(--n-muted);
}

/* ---------- Call to action ---------- */

.cta-row {
  margin-top: 28px;
  align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 600; font-size: 15.5px; text-decoration: none;
  transition: background-color .15s ease;
}
.cta span { transition: transform .2s ease; }
.cta:hover span { transform: translateX(3px); }
.day .cta { background: var(--d-accent); color: #FFFFFF; }
.day .cta:hover { background: var(--d-accent-hover); }
.night .cta { background: var(--n-accent); color: var(--n-on-accent); }
.night .cta:hover { background: var(--n-accent-hover); }
.cta-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; }
.day .cta-note { color: var(--d-soft); }
.night .cta-note { color: var(--n-ink-2); }

a:focus-visible { outline: 2px solid; outline-offset: 3px; }
.day a:focus-visible { outline-color: var(--d-accent); }
.night a:focus-visible { outline-color: var(--n-accent); }

/* ---------- The stream ---------- */

.seam { pointer-events: none; display: block; }
.seam-v {
  position: absolute; z-index: 1; top: 0; left: 50%;
  width: var(--seam); height: 100%; transform: translateX(-50%);
}
.seam-h { display: none; }
.s-day { fill: var(--d-bg); }
.s-night { fill: var(--n-bg); }
.s-line { fill: none; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.s1 { stroke: var(--d-accent); opacity: .5; }
.s2 { stroke: var(--stream); stroke-width: 3.2; stroke-dasharray: 0 10; }
.s3 { stroke: var(--n-accent); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .s2 { animation: flow 2.4s linear infinite; }
}
@keyframes flow { to { stroke-dashoffset: -40; } }

/* ---------- Phones and narrow windows: day above night ---------- */

@media (max-width: 860px) {
  body { background: linear-gradient(180deg, var(--d-bg) 50%, var(--n-bg) 50%); }
  .split { display: flex; flex-direction: column; min-height: 0; }
  .half {
    display: flex; flex-direction: column; align-items: stretch;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .half > * { width: auto; max-width: var(--content); }
  .day { order: 1; padding-block: 20px 36px; }
  .seam-h { order: 2; display: block; width: 100%; height: 72px; }
  .night { order: 3; padding-block: 28px 28px; }
  .seam-v, .top-note, .day .foot, .night .headline { display: none; }
  .wordmark { align-self: flex-start; margin-bottom: 36px; }
  .night .foot { align-self: flex-start; padding-top: 36px; }
  .headline { align-self: stretch; }
  .day .headline { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  /* Phones: the whole headline sits together at the top, in both apps' faces. */
  .h-pick {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: block; margin-top: .06em; font-size: 1.08em;
  }
  .app { margin-top: 36px; }
  .night .app { margin-top: 0; }
  .lede { margin-top: 12px; font-size: 16px; }
  .card { margin-top: 26px; }
  .cta-row { margin-top: 22px; }
}

@media (max-width: 400px) {
  .tag { display: none; }
  .ds-prog .ds-bar { display: none; }
}