/* Cura — the public site.
   The palette and type are the app's (ios-app/Attache/Theme.swift): warm
   paper with one clay accent by day, ink & cream after dark. Source
   Serif 4 carries the content and IBM Plex Mono the stamps — the app's
   own faces, self-hosted; nothing on these pages loads from a third
   party. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-VF.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-Italic-VF.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:      #f8f3eb;
  --card:       #fdfaf4;
  --ink:        #30271f;
  --bubble:     #ede5d9;
  --line:       #e0dad1;
  --meta:       #7c6f63;
  --faded:      #8e8479;
  --annotation: #9e7660;
  --clay:       #c56a3e;
  --on-clay:    #f5f1ea;

  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* the blur bar's tint, and the card shadow everything raised wears */
  --bar-tint: rgba(248, 243, 235, .78);
  --card-border: rgba(224, 218, 209, .9);
  --bar-line: rgba(224, 218, 209, .55);
  --card-shadow: 0 1px 2px rgba(48, 39, 31, .05),
                 0 6px 20px rgba(48, 39, 31, .05);

  /* sunset highlighter inks, pastel and translucent like a quick swipe */
  --hl-amber: rgba(227, 168,  87, .34);
  --hl-clay:  rgba(197, 106,  62, .22);
  --hl-rose:  rgba(196, 117, 109, .26);

  --glow-opacity: .5;
  --grain-opacity: .05;
}

/* ink & cream: true-black ground, solid raised surfaces, cream type;
   clay brightens a step to hold its own against the black */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0f0e0c;
    --card:       #1f1b17;
    --ink:        #efe8db;
    --bubble:     #2e2823;
    --line:       rgba(255, 255, 255, .07);
    --meta:       #a79c8e;
    --faded:      #7e7367;
    --annotation: #a97a60;
    --clay:       #d98757;

    --bar-tint: rgba(15, 14, 12, .72);
    --card-border: rgba(255, 255, 255, .07);
    --bar-line: rgba(255, 255, 255, .07);
    --card-shadow: 0 2px 4px rgba(0, 0, 0, .4),
                   0 8px 24px rgba(0, 0, 0, .3);

    --hl-amber: rgba(227, 168,  87, .20);
    --hl-clay:  rgba(217, 135,  87, .18);
    --hl-rose:  rgba(196, 117, 109, .17);

    --glow-opacity: .45;
    --grain-opacity: .04;
  }
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* used-paper grain, one SVG turbulence tile, fixed under everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header.site, footer.site { position: relative; z-index: 1; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 26px;
}

/* --- header ------------------------------------------------------------- */
/* the app's blur bar: sticky, translucent, a hairline underneath — not a
   static row */

header.site {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 20px 0;
  background: var(--bar-tint);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--bar-line);
}
header.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
}
.wordmark {
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
nav.quiet {
  display: flex;
  gap: 22px;
}
nav.quiet a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--meta);
  text-decoration: none;
  white-space: nowrap;
}
nav.quiet a:hover { color: var(--clay); }

/* --- type --------------------------------------------------------------- */

h1 {
  font-weight: 500;
  font-size: clamp(2rem, 6.5vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 0 0 .6em;
}
/* the app's flourish word — "A clean slate." — carried to the hero: one
   word in a script hand against the serif. Snell Roundhand is the app's
   own face; the stack degrades to whatever script the platform ships */
h1 .script {
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1;
}

h2 {
  font-weight: 500;
  font-size: 1.42rem;
  line-height: 1.3;
  margin: 0 0 .8em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--annotation); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }

.stamp {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faded);
}

.lede { font-size: 1.12rem; }

/* a short sunset rule that opens each section, in place of ornament */
.rule {
  border: 0;
  height: 2px;
  width: 62px;
  margin: 0 0 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e3a857, var(--clay) 55%, #c4756d);
  opacity: .85;
}

/* quick highlighter swipes */
.hl {
  padding: .06em .22em;
  margin: 0 -.04em;
  border-radius: .45em .6em .4em .55em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: linear-gradient(103deg, transparent 0%, var(--hl-amber) 5%, var(--hl-amber) 95%, transparent 100%);
}
.hl.rose { background: linear-gradient(99deg, transparent 0%, var(--hl-rose) 5%, var(--hl-rose) 95%, transparent 100%); }
.hl.clay { background: linear-gradient(101deg, transparent 0%, var(--hl-clay) 5%, var(--hl-clay) 95%, transparent 100%); }

/* --- layout rhythm -------------------------------------------------------- */

section { padding: 54px 0 0; }
section.first { padding-top: 64px; }
footer.site { padding: 84px 0 48px; }

/* --- the hero drawing ------------------------------------------------------ */

.drawing {
  display: block;
  width: min(360px, 86%);
  margin: 40px auto 6px;
}
.drawing path, .drawing circle { vector-effect: non-scaling-stroke; }

/* hand-retraced boil: three jittered traces, one visible at a time */
.boil .trace {
  opacity: 0;
  animation: boil 1.08s steps(1, end) infinite;
}
/* nth-of-type, not nth-child: the traces share the svg with <defs> and
   the glow ellipse, so child positions don't start at the first trace.
   Before the animation's first frame paints (and wherever animations
   don't run at all), the first trace stands in as the still drawing. */
.boil .trace:first-of-type { opacity: 1; }
.boil .trace:nth-of-type(2) { animation-delay: .36s; }
.boil .trace:nth-of-type(3) { animation-delay: .72s; }
@keyframes boil {
  0%      { opacity: 1; }
  33.4%   { opacity: 0; }
  100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .boil .trace { animation: none; }
  .boil .trace:first-of-type { opacity: 1; }
}

.drawing-caption {
  text-align: center;
  margin-bottom: 0;
}

/* --- chat vignettes -------------------------------------------------------- */
/* a floating card with the app's exact bubble anatomy — tucked corners,
   outlined client, shadowed card — so the site literally previews the
   product */

.vignette {
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  padding: 22px 20px;
  margin: 26px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vignette .stamp { align-self: center; margin: 4px 0; font-size: 10px; }
.msg {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 17px;
  font-size: .93rem;
  line-height: 1.5;
}
.msg.pa { align-self: flex-start; background: var(--bubble); border-bottom-left-radius: 6px; }
.msg.client {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--line);
  border-bottom-right-radius: 6px;
  color: var(--ink);
}

/* --- quiet one-liners ------------------------------------------------------- */

ul.quiet-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}
ul.quiet-list li {
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
}

/* --- footer ----------------------------------------------------------------- */

footer.site .fine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
  align-items: baseline;
}

/* --- privacy page ------------------------------------------------------------ */

.policy h2 { margin-top: 2.1em; font-size: 1.22rem; }
.policy h1 { font-size: 1.9rem; }
.policy .updated { margin-bottom: 2em; }
.policy ul { padding-left: 1.2em; margin: 0 0 1.15em; }
.policy li { margin-bottom: .45em; }
.summary {
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 18px 22px;
  margin: 0 0 1.4em;
}