/* Kiana site. Layout: the inside of the app icon (plum velvet, the flower and pearl) opens the page,
   then the three things Kiana keeps, set as the app's own rows on blush paper, then velvet again for privacy. */
:root {
  --paper: #F7EEEB;        /* blush bone, the page */
  --surface: #FFFFFF;      /* app rows */
  --ink: #3B1A2C;          /* plum ink */
  --mute: #6E5662;
  --line: #E7D6D3;
  --plum: #5A2D45;         /* buttons and links on paper */
  --on-plum: #FFFFFF;
  --velvet: #2E1424;       /* hero and privacy bands, plum in both themes */
  --velvet-lit: #4E2440;
  --velvet-ink: #F7E4DA;
  --velvet-mute: #D7B9C4;
  --peach: #F3C2AA;        /* the action on velvet, and the pearl's flower */
  --on-peach: #3B1A2C;
  --soon: #A8650F;
  --ok: #2E7A5A;
  --display: "Newsreader", "New York", "Iowan Old Style", Georgia, serif;
  --mark: "Fraunces", "Newsreader", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 60ch;
  --badge: #000000; --badge-ink: #FFFFFF; --badge-rim: rgba(255,255,255,.28);
  --spring: linear(0, 0.157, 0.438, 0.66, 0.808, 0.897, 0.948, 0.976, 0.99, 0.997, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #120A0F; --surface: #22131C; --ink: #F2DDD3; --mute: #C2A6B2; --line: #3A2531;
    --plum: #F3C2AA; --on-plum: #2E1424;
    --velvet: #22101B; --velvet-lit: #43203A; --velvet-ink: #F2DDD3; --velvet-mute: #C9A9B5;
    --peach: #EFB89E; --on-peach: #2E1424; --soon: #E5A94F; --ok: #6FC79F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #120A0F; --surface: #22131C; --ink: #F2DDD3; --mute: #C2A6B2; --line: #3A2531;
  --plum: #F3C2AA; --on-plum: #2E1424;
  --velvet: #22101B; --velvet-lit: #43203A; --velvet-ink: #F2DDD3; --velvet-mute: #C9A9B5;
  --peach: #EFB89E; --on-peach: #2E1424; --soon: #E5A94F; --ok: #6FC79F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }

.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Velvet: the inside of the icon */
.velvet {
  color: var(--velvet-ink);
  background:
    radial-gradient(60% 70% at 72% 38%, var(--velvet-lit), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.35), transparent 60%),
    var(--velvet);
  position: relative; overflow: hidden;
}

/* Header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; position: relative; z-index: 2; }
.brand { font-family: var(--mark); font-weight: 400; font-size: 24px; letter-spacing: 0.18em; text-decoration: none; color: var(--velvet-mute); line-height: 1; }
.site-head nav { display: flex; gap: 22px; font-size: 15px; }
.site-head nav a { color: var(--velvet-mute); text-decoration: none; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--velvet-ink); }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 24px 88px; position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 24px;
}
.hero h1 em { font-style: italic; color: var(--peach); }
.lede { font-size: 19px; color: var(--velvet-mute); max-width: 36ch; margin: 0 0 32px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px;
  background: var(--peach); color: var(--on-peach); font-weight: 600; text-decoration: none; font-size: 16px;
}
.store {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 54px; padding: 8px 22px 9px;
  border-radius: 12px; background: var(--badge); color: var(--badge-ink); box-shadow: inset 0 0 0 1px var(--badge-rim);
  text-decoration: none; line-height: 1.1;
}
.store small { font-size: 12px; letter-spacing: 0.01em; }
.store span { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.ig { font-weight: 600; color: var(--plum); }
.btn, .copy, .store { transition: transform 120ms var(--spring); }
.btn:active, .copy:active, .store:active { transform: scale(0.97); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--peach); color: var(--on-peach); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.note { font-size: 15px; color: var(--velvet-mute); }
.flower { justify-self: center; width: min(420px, 100%); height: auto; transform: rotate(-8deg); filter: drop-shadow(0 30px 40px rgba(10,2,8,.45)); }

/* Sections on paper */
section { padding-block: 88px; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 14px; }
h2 em { font-style: italic; }
.intro { max-width: var(--measure); color: var(--mute); margin: 0 0 48px; }

/* The three things, as the app's own rows */
.keeps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.keep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 56px; align-items: start; padding-block: 36px; border-bottom: 1px solid var(--line); }
.keep h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 10px 0 8px; }
.keep p { margin: 0; color: var(--mute); max-width: 46ch; }
.row { background: var(--surface); border-radius: 20px; padding: 18px 20px; box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(59,26,44,.35); max-width: 380px; width: 100%; }
.row .k { font-size: 13px; color: var(--mute); }
.row .t { font-weight: 600; font-size: 18px; margin-top: 2px; }
.row .s { font-size: 15px; margin-top: 2px; color: var(--mute); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot.soon { background: var(--soon); }
.dot.ok { background: var(--ok); }
.strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin-top: 14px; }
.strip i { aspect-ratio: 1; border-radius: 50%; background: var(--plum); }
.strip i.gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.photos { display: flex; gap: 6px; align-items: center; margin-top: 14px; }
.photos span { width: 40px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, #E9CDBF, #B98575); }
.photos span:nth-child(2) { background: linear-gradient(160deg, #F0DACE, #D3A898); }
.photos em { font-style: normal; font-size: 14px; color: var(--mute); margin-left: 8px; }

/* Privacy on velvet */
.promise .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.promise h2 { color: var(--velvet-ink); }
.promise ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; font-size: 18px; }
.promise li { padding-left: 30px; position: relative; color: var(--velvet-ink); }
.promise li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #F4E3D8 45%, #D9B9A8);
}

.story { padding-block: 104px 40px; }
.story h2 { font-size: 17px; font-family: var(--body); font-weight: 600; letter-spacing: 0; margin-bottom: 20px; color: var(--mute); }
.story p { max-width: 34ch; font-family: var(--display); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.story p + p { margin-top: 20px; color: var(--mute); }
.follow { padding-block: 56px 96px; }

.follow .cta { margin-top: 8px; }
.follow .btn { background: var(--plum); color: var(--on-plum); }
.mail { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail code { font: 16px var(--body); user-select: all; }
.copy { font: inherit; font-size: 14px; color: var(--plum); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 32px; color: var(--mute); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* Long-form pages */
.doc { max-width: 760px; padding-block: 56px 88px; }
.doc-head .wrap { max-width: 760px; padding-block: 16px 56px; position: relative; z-index: 1; }
.doc-head p.mail { margin-top: 18px; display: flex; }
.doc-head .copy { color: var(--velvet-ink); border-color: rgba(243,194,170,.4); }
.doc-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; }
.doc-head p { margin: 0; color: var(--velvet-mute); max-width: var(--measure); }
.doc-head a { color: var(--velvet-ink); }
.doc h2 { font-size: 28px; margin-top: 48px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { max-width: var(--measure); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--plum); }
.callout { background: var(--surface); border-radius: 20px; padding: 22px 24px; box-shadow: 0 1px 0 var(--line); margin-bottom: 8px; }
.callout p { margin: 0; }
details { border-bottom: 1px solid var(--line); padding-block: 18px; }
details:first-of-type { border-top: 1px solid var(--line); }
details summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details summary::after { content: "+"; font-weight: 400; color: var(--mute); }
details[open] summary::after { content: "\2212"; }
details summary::-webkit-details-marker { display: none; }
details p { margin: 10px 0 0; color: var(--mute); }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 0 64px; gap: 0; }
  .flower { order: -1; justify-self: center; width: min(260px, 70%); margin: -8px 0 8px; }
  .promise .wrap, .keep { grid-template-columns: minmax(0, 1fr); }
  .keep { gap: 20px; }
  .keep > .row { order: 1; }
  .keep h3 { margin-top: 0; }
  .story p { font-size: 23px; }
  section { padding-block: 64px; }
  .site-head nav { gap: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .flower { animation: open 900ms var(--spring) 150ms both; }
  @keyframes open { from { transform: rotate(-44deg) scale(.5); } to { transform: rotate(-8deg) scale(1); } }
}