:root {
  --paper: #f6f3ec;
  --ink: #15140f;
  --muted: #6d6a60;
  --line: rgba(21, 20, 15, .1);
  --blue: #0a84ff;
  --bubble: #e9e8e4;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 28px;
}

* { box-sizing: border-box; }
/* scroll-behavior: smooth removed — iOS Safari gets stuck mid-scroll when it combines with
   position: sticky and IntersectionObserver. Smooth scroll is JS-only on the nav links. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
}
h1 { font-size: clamp(64px, 10vw, 132px); }
h2 { font-size: clamp(44px, 6.5vw, 88px); }
h1 em, h2 em { color: var(--blue); }
h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { max-width: 34em; margin: 26px auto 30px; font-size: 20px; color: var(--muted); }

.btn {
  display: inline-block;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 17px var(--sans);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--blue); }
.btn-small { padding: 10px 18px; font-size: 15px; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wordmark { display: flex; align-items: center; }
.nav-mark, .footer-mark {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.nav-mark { font-size: 28px; opacity: 0; transition: opacity .15s; }
.footer-mark { font-size: 22px; }
.nav-mark svg, .footer-mark svg {
  width: var(--o-w, .47em); height: var(--o-h, .5em);
  vertical-align: var(--o-drop, -.07em);
  margin-inline: var(--o-mx, 0em);
  overflow: visible;
}
.nav-mark path, .footer-mark path {
  fill: none; stroke: var(--blue); stroke-width: 6; stroke-linejoin: round;
}
.nav nav { display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.nav nav a:hover { color: var(--ink); }

/* hero */
.hero { padding: clamp(36px, 5vw, 64px) 20px 0; text-align: center; }

/* rotating first line: every phrase sits in the same grid cell, so the box is always as wide
   as the longest one and nothing below it moves. Without JS only "Text it." is in the markup. */
/* Clipped roll: the line is a window. The old word rolls up out of it as the new one rolls in
   from below, so the two never overlap. The padding/negative margin keeps descenders inside
   the mask without changing the layout. */
.rotate {
  display: inline-grid; white-space: nowrap; vertical-align: top;
  overflow: hidden; padding: .08em .06em; margin: -.08em -.06em;
}
.rotate-word {
  grid-area: 1 / 1;
  transform: translateY(110%);
  transition: transform .75s cubic-bezier(.76, 0, .24, 1);
}
.rotate-word.is-on { transform: none; }
.rotate-word.is-off { transform: translateY(-110%); }
.rotate-word.is-measure { visibility: hidden; }
.rotate-word.is-reset { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rotate-word { transition: none; }
}


.tag {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(21, 20, 15, .08);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
/* message threads */
.thread {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  overflow: hidden;
  font-size: 14.5px; line-height: 1.32;
}
.msg {
  max-width: 84%;
  padding: 8px 13px;
  border-radius: 19px;
  background: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  animation: pop .32s cubic-bezier(.2, .9, .3, 1.3) backwards;
  transform-origin: bottom left;
}
.msg.me {
  align-self: flex-end;
  background: var(--blue); color: #fff;
  border-radius: 19px; border-bottom-right-radius: 6px;
  transform-origin: bottom right;
}
.msg.photo {
  padding: 0; width: 132px; height: 104px;
  display: grid; place-items: center;
  font-size: 54px;
  background: linear-gradient(140deg, #fbe7c8, #f4c9a4);
  border-radius: 19px;
}
.msg.link, .msg.audio {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 13.5px;
}
.msg.link::before { content: "↗"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; }
.msg.audio::before { content: "▶"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; }
.msg.me.audio::before { background: #fff; color: var(--blue); }
.stamp { align-self: center; font-size: 11px; color: var(--muted); margin: 4px 0; animation: pop .3s backwards; }
/* a tapback is not a message: it sits under the one it answers, in small type */
.tapback {
  align-self: flex-end; max-width: 80%;
  font-size: 12px; color: var(--muted); margin: -1px 4px 2px;
  animation: pop .3s backwards;
}
.typing { display: flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9b7b0; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pop { from { transform: scale(.6) translateY(8px); opacity: 0; } }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* marquees */
.marquees { padding: 90px 0 40px; display: grid; gap: 14px; overflow: hidden; -webkit-transform: translateZ(0); }
.marquee {
  display: flex; width: max-content; gap: 14px; animation: slide 46s linear infinite;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform;
}
.marquee[data-dir="right"] { animation-direction: reverse; }
/* no hover pause: a cursor resting here after a scroll, or iOS's stuck :hover after a tap,
   froze the rows and read as "the site stopped moving". The chips are not clickable. */
.chip {
  padding: 12px 20px; border-radius: 22px; border-bottom-right-radius: 7px;
  background: var(--blue); color: #fff; white-space: nowrap; font-size: 17px;
}
.marquee[data-dir="right"] .chip { background: #fff; color: var(--ink); border-radius: 22px; border-bottom-left-radius: 7px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* a day with reason */
.day { padding: 110px clamp(20px, 5vw, 64px) 60px; max-width: 1200px; margin: 0 auto; }
.day-head { margin-bottom: 30px; }
/* reads the visitor's own clock, so the timeline opens where their day already is */
.day-now { margin: 16px 0 0; color: var(--blue); font-size: 15px; font-weight: 600; }
.day-body { display: grid; grid-template-columns: 1fr 380px; gap: clamp(30px, 7vw, 110px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .22; transition: opacity .4s;
}
.steps li.on { opacity: 1; }
.steps .time { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--blue); margin-bottom: 10px; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; margin-bottom: 12px; }
.steps p { margin: 0; max-width: 26em; color: var(--muted); font-size: 19px; }

.phone-wrap { position: sticky; top: 96px; }
.phone {
  height: min(640px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  border-radius: 44px;
  background: #fff;
  border: 9px solid var(--ink);
  box-shadow: 0 50px 90px -40px rgba(21, 20, 15, .5);
  overflow: hidden;
}
.phone-top {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--line);
}
.phone-top strong { display: block; font-size: 15px; }
.phone-top span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ring { width: 38px; height: 38px; margin-left: auto; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--bubble); }
.ring-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.phone .thread { padding: 14px; font-size: 15.5px; }
.phone .msg:not(.me):not(.photo) { background: var(--bubble); }
.phone .msg[hidden], .phone .stamp[hidden] { display: none; }


/* rules */
.rules { padding: 110px clamp(20px, 5vw, 64px); background: var(--ink); color: var(--paper); text-align: center; }
.rules .eyebrow { color: #9c998e; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 56px auto 0; text-align: left; }
.rule-grid article { padding: 26px; border-radius: var(--radius); background: rgba(246, 243, 236, .06); border: 1px solid rgba(246, 243, 236, .1); transition: background .3s, transform .3s; }
.rule-grid article:hover { background: rgba(246, 243, 236, .11); transform: translateY(-4px); }
.rule-grid span { font-family: var(--serif); font-size: 34px; color: var(--blue); }
.rule-grid h3 { margin: 40px 0 8px; }
.rule-grid p { margin: 0; color: #b5b2a7; font-size: 15.5px; }

/* cta */
.cta { padding: 130px 20px 110px; text-align: center; }

footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 26px clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
footer > span { display: flex; align-items: center; }
footer .legal a { color: var(--muted); text-decoration: none; }
footer .legal a:hover { color: var(--ink); text-decoration: underline; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .rule-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav nav { display: none; }
  .day-body { display: flex; flex-direction: column-reverse; }
  .phone-wrap { position: sticky; top: 56px; z-index: 5; margin-bottom: 16px; }
  .phone { height: 36vh; border-width: 6px; border-radius: 30px; }
  .phone .thread { padding: 10px; font-size: 14px; }
  .phone .msg { padding: 7px 11px; max-width: 86%; }
  .phone-top { padding: 12px 14px 10px; }
  .steps { padding-bottom: 16vh; }
  .steps li { min-height: 46vh; justify-content: flex-start; padding-top: 3vh; }
}

@media (max-width: 560px) {
  .rule-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { animation: none; }
}