/* Goodbye - the website's stylesheet.
   ------------------------------------------------------------
   Colours from the app's Theme.swift (paper, ink, purple accent, yellow
   highlight, the History greens and ambers), but a different temperament
   from the hub: where the hub is loud, this is the empty room. Purple
   fields at the top and bottom, one centred column, a lot of space, thin
   rules instead of chunky borders, and Bricolage Grotesque set wide and
   soft rather than condensed and heavy. The one solid, bordered object on
   the page is the app's own card, because that is the thing you touch. */

:root {
  --paper: #FFFDF6;
  --ink: #1B1A17;
  --soft: rgba(27, 26, 23, .62);
  --faint: rgba(27, 26, 23, .14);
  --purple: #8B6FD8;
  --purple-deep: #6E52C4;
  --on-purple: #FFFDF6;
  --highlight: #FFC93C;
  --done: #3FBF9A;
  --waiting: #F2A33C;
  --card: #FFFFFF;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0 auto; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1600px) {
  html { background: #E7E0F6; }
  body { max-width: 1440px; min-height: 100vh; }
}
a { color: inherit; }
img { max-width: 100%; display: block; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 100;
  letter-spacing: -.02em; line-height: 1.05; margin: 0;
}
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* top bar sits on the purple field */
.bar { background: var(--purple); color: var(--on-purple); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; max-width: 72rem; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.hub { font-size: .9rem; font-weight: 600; text-decoration: none; opacity: .85; white-space: nowrap; }
.hub:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* hero: the purple field, one card resting in it */
.hero { background: var(--purple); color: var(--on-purple); padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); text-align: center; overflow-x: clip; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 14ch; margin: 0 auto; }
.hero h1 em { font-style: normal; color: var(--highlight); }
.lede { margin: 24px auto 0; font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 36ch; opacity: .9; }
.store {
  display: inline-block; margin-top: 34px; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  background: var(--paper); color: var(--purple-deep); border-radius: 999px; padding: 14px 28px; text-decoration: none;
}
.store[aria-disabled="true"] { cursor: default; }
.under { margin-top: 14px; font-size: .92rem; opacity: .75; }

/* the card, drawn the way TodayView draws it: the only bordered object */
.stack { position: relative; width: min(300px, 76%); aspect-ratio: 4 / 4.4; margin: clamp(48px, 7vw, 72px) auto 0; color: var(--ink); text-align: center; }
.stack .s { position: absolute; inset: 0; border: 2.5px solid var(--ink); border-radius: 20px; }
.stack .s1 { background: #FFF1E8; transform: translate(16px, 16px) rotate(4deg); }
.stack .s2 { background: #FFF6EE; transform: translate(8px, 8px) rotate(1.5deg); }
.thing {
  position: absolute; inset: 0; background: var(--card); border: 2.5px solid var(--ink); border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1.5deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.thing .glyph { width: 72px; height: 72px; }
.thing .what { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.thing .hint { font-size: .88rem; color: var(--soft); }
.thing .go { font-family: var(--display); font-weight: 700; background: var(--purple); color: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 9px 20px; }
.sticker { position: absolute; z-index: 3; right: -16px; top: -18px; transform: rotate(7deg); font-family: var(--display); font-weight: 700; font-size: 1.1rem; background: var(--highlight); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); padding: 7px 16px; }

/* sections: space and thin rules, no boxes */
section { padding: clamp(64px, 10vw, 128px) 0; }
section + section { border-top: 1px solid var(--faint); }
.kicker { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-top: 12px; }
.sub { margin: 18px auto 0; max-width: 38ch; color: var(--soft); font-size: 1.12rem; }

.steps { list-style: none; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0; max-width: 40rem; text-align: left; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.2rem 1fr; gap: 6px 18px; padding: 26px 0; border-top: 1px solid var(--faint); }
.steps li:last-child { border-bottom: 1px solid var(--faint); }
.steps li::before { content: counter(s); grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--purple); }
.steps h3 { font-size: 1.45rem; }
.steps p { color: var(--soft); }

/* the first year, as History draws it */
.count { font-family: var(--display); font-weight: 700; font-size: clamp(4.5rem, 14vw, 9rem); letter-spacing: -.05em; line-height: .9; margin-top: 28px; }
.count span { color: var(--purple); }
.count-sub { margin-top: 12px; color: var(--soft); }
.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; max-width: 34rem; margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; }
.month b { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.days i { aspect-ratio: 1; border-radius: 50%; background: var(--faint); }
.days i.d { background: var(--done); }
.days i.w { background: var(--waiting); }
.days i.t { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 5px var(--purple); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px; font-size: .9rem; color: var(--soft); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--faint); }

/* not in it: the words leave, one by one */
.leaving { list-style: none; margin: clamp(32px, 5vw, 52px) 0 0; padding: 0; }
.leaving li { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 5.4vw, 3.6rem); letter-spacing: -.03em; line-height: 1.12; text-decoration: line-through; text-decoration-color: var(--purple); text-decoration-thickness: .08em; }
.leaving li:nth-child(2) { opacity: .78; }
.leaving li:nth-child(3) { opacity: .58; }
.leaving li:nth-child(4) { opacity: .4; }
.leaving li:nth-child(5) { opacity: .25; }
.leaving li:nth-child(6) { opacity: .13; }
.leaving-foot { margin: 28px auto 0; max-width: 40ch; color: var(--soft); font-size: 1.1rem; }

/* the close: back to the purple field */
.close { background: var(--purple); color: var(--on-purple); border-top: 0 !important; }
.close h2 { margin-top: 0; }
.close .sub { color: inherit; opacity: .85; }

footer { background: var(--purple-deep); color: var(--on-purple); }
footer .wrap { max-width: 72rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; padding-bottom: 28px; font-size: .92rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { text-underline-offset: 4px; opacity: .9; }

/* privacy, support: quiet reading pages under the purple bar */
.doc { padding: clamp(40px, 7vw, 80px) 0 88px; }
.doc .wrap { max-width: 44rem; }
.doc .crumb { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.doc h1 { font-size: clamp(2.2rem, 5.4vw, 3.2rem); margin: 10px 0 20px; }
.doc .answer { font-size: 1.18rem; line-height: 1.6; color: var(--ink); }
.doc .date { margin-top: 16px; font-size: .9rem; color: var(--soft); padding-bottom: 28px; border-bottom: 1px solid var(--faint); }
.doc h2 { font-size: 1.45rem; margin: 44px 0 12px; }
.doc h3 { font-size: 1.12rem; margin: 24px 0 6px; }
.doc p, .doc li { color: var(--soft); font-size: 1rem; line-height: 1.7; }
.doc p + p { margin-top: 10px; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc a { color: var(--purple-deep); text-underline-offset: 3px; }
.doc strong { color: var(--ink); }