/* for keeps web pages · the kit, for the web.
   Tokens follow the second rework (design/proposals/2026-09-30-second-rework
   /README.md section 3, apps/mobile/lib/design/second_look_tokens.dart);
   nothing here adds a colour. Written for old Android WebViews too: no
   min()/clamp() without a fallback, no inset shorthand, no flex gap. */

/* Caprasimo: the wordmark only (the head and foot). */
@font-face {
  font-family: 'Caprasimo';
  src: url('fonts/caprasimo-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Fraunces Soft (OFL 1.1): titles and names at 600, and its italic at 400
   only for words a person wrote. SOFT 100 and WONK 0 are pinned in the
   files; the browser picks the optical size. */
@font-face {
  font-family: 'Fraunces Soft';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Soft';
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fff;
  --mist: #f3f3f1;
  --mist-2: #eaeae7;
  --hair: #e4e4e1;
  --ink: #0b0b0c;
  --ink-2: #1b1b1c;
  --graphite: #6b6b68;
  --graphite-2: #8e8e8a;
  /* A field's placeholder: 2.1:1 on paper, the field's own face at 400. */
  --placeholder: #b4b4af;
  --tomato: #e43d35;
  /* The one countdown number (5.2:1 on paper). */
  --tomato-text: #cc322b;
  /* Saved, Paid, Delivered: flat, white on it 5.05:1. */
  --done: #177f45;
  --ridge: rgba(11, 11, 12, .06);
  --ridge-light: rgba(255, 255, 255, .035);
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 244, 242, .8));
  --glass-line: rgba(11, 11, 12, .07);
  --glass-shadow: inset 0 1px 1px #fff, inset 0 -3px 6px rgba(11, 11, 12, .035), 0 8px 18px -6px rgba(11, 11, 12, .16), 0 1px 2px rgba(11, 11, 12, .06);
  --e-black: 0 10px 20px -10px rgba(11, 11, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
  /* The wordmark only. */
  --f-brand: 'Caprasimo', 'Cooper Black', Georgia, serif;
  /* Titles and names: Fraunces Soft 600. */
  --f-serif: 'Fraunces Soft', Georgia, 'Times New Roman', serif;
  /* A person's words: Fraunces Soft italic 400. */
  --f-note: 'Fraunces Soft', Georgia, 'Times New Roman', serif;
  /* Everything the page says: the phone's own face. */
  --f-ui: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-strip: cubic-bezier(.3, .8, .25, 1);
  --t: 0;
  --bx: .3;
}

/* Text follows the phone's text size: Dynamic Type on iPhone, the font
   scale on Android. Sizes below are in rem. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 400;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: 16px; top: 12px; z-index: 9;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 999px; text-decoration: none;
  /* Above the page by its own height, whatever the text size (at 200%
     text a fixed -60px left its bottom showing; wave 3 QA). */
  -webkit-transform: translateY(calc(-100% - 24px)); transform: translateY(calc(-100% - 24px));
}
.skip:focus { -webkit-transform: none; transform: none; }

.page {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 16px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.page.wide { max-width: 40rem; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- type ---------------------------------------------------------- */
.display {
  text-wrap: balance;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0;
}
.title {
  text-wrap: balance;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.014em;
  margin: 0 0 12px;
}
.title-s {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.16;
  margin: 0 0 8px;
}
/* The wordmark set as text (head and foot): Caprasimo, its one use. */
.wordmark { font-family: var(--f-brand); font-weight: 400; }
/* Words a person wrote (the giver's words, a keep's note, memorial words):
   Fraunces Soft italic, 22 px on a gift page, ink-2. */
.note {
  font-family: var(--f-note);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.33;
  color: var(--ink-2);
  margin: 0;
}
.note-s { font-size: .9375rem; }
.typed {
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: .01em;
  margin: 0;
}
.typed-s {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}
.tagline {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  margin: 8px 0 0;
}
.small { font-size: .8125rem; line-height: 1.3; color: var(--graphite); font-weight: 400; margin: 0; }
.muted { color: var(--graphite); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
p { margin: 0 0 14px; }

/* the heart after a title, cut from the wordmark (never redrawn) */
.heart {
  display: inline-block;
  width: .55em;
  height: .65em;
  margin-left: .06em;
  vertical-align: .38em;
  background: url('img/heart.png') no-repeat center / contain;
  transform: rotate(-4deg);
}

/* ---------- buttons -------------------------------------------------------- */
.btn, .gpill {
  -webkit-appearance: none;
  appearance: none;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.btn { position: relative; overflow: hidden; background: var(--ink); color: #fff; border: 0; box-shadow: var(--e-black); }
.btn.hero { min-height: 3.25rem; }
.btn.ridged::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--ridge-light) 0 1px, transparent 1px 3px);
}
.btn[disabled] { opacity: .45; cursor: default; }
.gpill {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}
.btn:active, .gpill:active { transform: scale(.97); }
.row { display: -webkit-box; display: -webkit-flex; display: flex; }
.row > * + * { margin-left: 10px; }
.stack > * + * { margin-top: 10px; }

.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.link-list li { border-bottom: 1px solid var(--hair); }
.link-list a {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  min-height: 3rem; padding: 10px 0; text-decoration: none; font-weight: 400;
}
.link-list a::after { content: '›'; margin-left: auto; padding-left: 12px; font-size: 1.4em; line-height: 1; color: var(--graphite); }
.link-list a span { display: block; }
.link-list a small { display: block; font-weight: 400; color: var(--graphite); font-size: .8125rem; margin-top: 2px; }

/* ---------- the card (every keep moves with your hand) -------------------- */
.stage {
  position: relative;
  margin: 18px auto 0;
  -webkit-perspective: 1050px;
  perspective: 1050px;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
}
.pool {
  /* No wider than the 16 px page gutter, so a phone never scrolls sideways. */
  position: absolute; left: -16px; right: -16px; top: -20px; bottom: -20px; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 46%, #efefec 0%, rgba(239, 239, 236, 0) 72%);
}
.tilt3d {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateZ(-1.2deg) rotateY(calc(var(--t) * 13deg));
  transform: rotateZ(-1.2deg) rotateY(calc(var(--t) * 13deg));
}
.card {
  position: relative;
  width: 72vw;
  max-width: 18.5rem;
  border-radius: 3.1%/2.17%;
  overflow: hidden;
  background: var(--mist-2);
  box-shadow: 0 12px 26px -12px rgba(11, 11, 12, .38), 0 1px 3px rgba(11, 11, 12, .08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.card::before { content: ''; display: block; padding-top: 142.857%; }
.face, .strip {
  position: absolute; top: 0; bottom: 0;
  background-repeat: no-repeat;
}
.face { left: 0; right: 0; background-size: cover; background-position: center; }
.strip {
  opacity: 0;
  -webkit-transform: scaleX(.06);
  transform: scaleX(.06);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  transition: transform 170ms var(--ease-strip), opacity 110ms linear;
}
.card.dir-l .strip { -webkit-transform-origin: right center; transform-origin: right center; }
.card.is-2 .strip { opacity: 1; -webkit-transform: none; transform: none; }
.card.no-anim .strip { transition: none; }
.ridges {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--ridge) 0 1px, rgba(255, 255, 255, .07) 1px 2px, transparent 2px 3px);
}
.band {
  position: absolute; top: -6%; bottom: -6%; left: -31%; width: 62%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 24%, rgba(255, 255, 255, .2) 37%, rgba(158, 232, 244, .14) 44%,
    rgba(255, 255, 255, .55) 48.6%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .55) 51.4%, rgba(255, 201, 220, .12) 57%, rgba(255, 255, 255, .06) 64%, rgba(255, 255, 255, 0) 80%);
  -webkit-transform: translateX(calc(var(--bx) * 161%));
  transform: translateX(calc(var(--bx) * 161%));
  opacity: .8;
}
.contact {
  position: absolute; left: 8%; right: 8%; bottom: -12px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 11, 12, .22), rgba(11, 11, 12, 0));
  -webkit-transform: translateX(calc(var(--t) * -14px)) translateZ(-40px);
  transform: translateX(calc(var(--t) * -14px)) translateZ(-40px);
}
.coach {
  position: absolute; left: 50%; top: 58%;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(11, 11, 12, .78); color: #fff;
  font-family: var(--f-ui); font-weight: 600; font-size: .8125rem; letter-spacing: .03em; white-space: nowrap;
  pointer-events: none; transition: opacity .4s; z-index: 3;
}
.coach.is-gone { opacity: 0; }

/* FLIP 1 / FLIP 2: two large buttons, easy for any hand */
.fliptoggle {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  padding: 4px; border-radius: 999px; background: var(--mist);
  box-shadow: inset 0 1px 2px rgba(11, 11, 12, .08);
}
.fliptoggle button {
  -webkit-appearance: none; appearance: none; border: 0; background: transparent;
  min-height: 2.75rem; min-width: 5.5rem; padding: 0 16px; border-radius: 999px;
  font-weight: 600; font-size: .8125rem; letter-spacing: .08em; color: var(--graphite); cursor: pointer;
}
.fliptoggle button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(11, 11, 12, .25); }

.datenote {
  font-family: var(--f-ui); font-weight: 600; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
  text-align: center; margin: 12px 0 0;
}
.datenote .for { text-transform: none; letter-spacing: .01em; font-size: .875rem; }

/* ---------- footer ---------------------------------------------------------- */
.foot {
  margin-top: 36px; text-align: center;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
}
.foot .from { font-weight: 400; font-size: .8125rem; color: var(--graphite); }
.foot .c1 { width: 30px; height: 30px; margin: 6px 0; color: var(--ink); }
.foot .co { font-weight: 600; font-size: .6875rem; letter-spacing: .07em; }
.foot nav { margin-top: 18px; font-size: .875rem; font-weight: 600; color: var(--graphite); }
.foot nav a { display: inline-block; padding: 12px 8px; color: var(--graphite); }

/* ---------- forms ----------------------------------------------------------- */
.field { margin: 0 0 18px; }
/* The label: 13/500 graphite, 8 above its field. */
.field label, .field legend { display: block; font-weight: 500; font-size: .8125rem; color: var(--graphite); margin: 0 0 8px; }
/* A helper line: 13/400 graphite under its control, only when it says a
   consequence (README 3.5). */
.field .hint { display: block; font-weight: 400; font-size: .8125rem; color: var(--graphite); margin: 8px 0 0; }
/* The field: paper, radius 14, hair; text 1rem, which is 16 px or more at
   the phone's usual text sizes (17 px on an iPhone's default), so iOS
   doesn't zoom, and it still follows the phone's text size. */
.field input[type='text'], .field input[type='email'], .field input[type='tel'], .field input[type='url'], .field textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 3rem; padding: 12px 14px;
  border: 1px solid var(--hair); border-radius: 14px; background: #fff;
  font-family: var(--f-ui); font-size: 1rem; font-weight: 400; line-height: 1.25; color: var(--ink);
}
/* On iPhone, 1rem is 14 or 15 px at the two smallest text sizes, and
   Safari zooms into any field under 16 px. The floor keeps fields at 16 px
   or more there; the plain size comes first for WebViews without max(). */
@supports (font: -apple-system-body) {
  .field input[type='text'], .field input[type='email'], .field input[type='tel'], .field input[type='url'], .field textarea { font-size: 16px; font-size: max(16px, 1rem); }
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; font-style: normal; }
.field input::-webkit-input-placeholder, .field textarea::-webkit-input-placeholder { color: var(--placeholder); opacity: 1; }
.field textarea { min-height: 7rem; resize: vertical; }
/* Focused: 1.5 ink. */
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 .5px var(--ink); }
/* After an attempt: a 2 px ink border and one ink line saying how to fix
   it. Never tomato. */
.field.is-error input, .field.is-error textarea { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field .error { display: block; font-size: .8125rem; font-weight: 400; color: var(--ink); margin: 8px 0 0; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.field .choice {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
  min-height: 3rem; padding: 12px 14px; margin: 0 0 8px;
  border: 1px solid var(--hair); border-radius: 14px; cursor: pointer; font-weight: 600;
}
.field .choice input { width: 1.25rem; height: 1.25rem; margin: 2px 12px 0 0; -webkit-flex: none; flex: none; accent-color: var(--ink); }
.status { margin: 14px 0 0; font-weight: 600; }
.status.ok { color: var(--done); }
.status.err { color: var(--ink); }
.panel { background: var(--mist); border-radius: 18px; padding: 16px; margin: 0 0 18px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-height: 640px) {
  .card { width: 58vw; }
  .display { font-size: 1.875rem; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .card { width: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt3d { -webkit-transform: rotateZ(-1.2deg); transform: rotateZ(-1.2deg); }
  .strip, .btn, .gpill, .coach { transition: none; }
}