/* carve.run — what every page shares: the design tokens, the fonts, nav,
   buttons, footer, motion, and the long-form pages (privacy, terms,
   support). The landing page keeps its own section styles inline.

   The look: warm paper, near-black ink, a Garamond-flavoured serif for
   headlines — regular weight, with the italic for the one word that
   matters — a friendly geometric sans for everything else, and pastel
   fills with an ink outline for the things you can press. */

/* Self-hosted so a visit never calls Google. Latin subsets of the
   variable fonts; anything outside Latin falls through to the system. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2?v=662a6e2a1a") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2?v=3c4f766e09") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree.woff2?v=eddba2ef40") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:     #FBF8EF;
  --paper-2:   #F3EEE1;
  --ink:       #15181C;
  --ink-dim:   #5D636C;
  --ink-faint: #8B9098;
  --line:      #E2DCCC;
  --sky:       #D4E7FF;
  --sky-deep:  #B9D6FF;
  --mint:      #DCF1E2;
  --peach:     #FFE4D3;
  --lilac:     #E7E1FF;
  --start:     #2E9E52;
  --stop:      #E4731C;
  --marker:    #6A5FE8;
  --route:     #2E92FF;
  --car:       #E0342B;
  --asphalt:   #15181C;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Figtree", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; }
h1, h2, h3 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.02; font-optical-sizing: auto;
}
h1 em, h2 em, h3 em { font-style: italic; }
a { color: inherit; } p { margin: 0; }
img { display: block; max-width: 100%; }

/* The page sits on a map: a wireframe terrain under everything, fixed, so
   the paper and its cards slide over a landscape that stays put. Drawn in
   ink on transparency, so it needs no blending. */
.terrain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/terrain.png?v=259619502e") no-repeat center center / cover;
  opacity: .6;   /* ambient, not a diagram — the one knob for how present it is */
}
/* A phone crops a narrow slice of the mesh, which magnifies it; ease off
   so it stays as quiet there as it is on a wide screen. */
@media (max-width: 720px) { .terrain { opacity: .46; } }

/* paper grain */
.grain {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── nav: an outlined bar, in flow on every page ── */
nav.top { position: relative; z-index: 5; padding-top: 18px; }
nav.top .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 16px; border: 2px solid var(--ink); border-radius: 18px;
  background: var(--paper);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark .appicon {
  width: 32px; height: 32px; display: block; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(21,24,28,.18);
}
.wordmark .mark { height: 17px; width: auto; display: block; }
.nav-links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--ink-dim); transition: color .18s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ── buttons: pastel fill, ink outline ── */
.btn, .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 12px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background .18s, transform .18s;
}
.btn-primary, .nav-cta { background: var(--sky); }
.btn:hover, .nav-cta:hover { background: var(--sky-deep); }
.btn:active, .nav-cta:active { transform: translateY(1px); }
.btn-lg { padding: 18px 28px; font-size: 17px; border-radius: 14px; }
.nav-cta { padding: 10px 16px; font-size: 14.5px; border-radius: 10px; }
.btn .apple, .nav-cta .apple { width: 17px; height: 17px; flex: 0 0 auto; margin-top: -2px; }
.btn-primary[aria-disabled="true"] {
  background: transparent; color: var(--ink-faint);
  border-style: dashed; border-color: var(--ink-faint); cursor: default;
}

/* ── footer ── */
footer { padding: 28px 0 44px; margin-top: 24px; color: var(--ink-faint); font-size: 14px;
         border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
footer .links { display: flex; gap: 20px; }
footer .links a { color: var(--ink-dim); text-decoration: none; }
footer .links a:hover { color: var(--ink); }

/* ── motion ── */
.rise { opacity: 0; transform: translateY(16px);
        transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
}

/* ── long-form pages ── */
.doc { max-width: 720px; margin: 0 auto; padding: 48px 30px 80px; position: relative; z-index: 2; }
.doc h1 { font-size: clamp(40px, 6.5vw, 64px); }
.doc .stamp { color: var(--ink-faint); font-size: 15px; margin: 14px 0 34px; }
.doc h2 { font-size: 30px; margin: 44px 0 12px; }
.doc h3 { font-size: 22px; letter-spacing: -0.01em; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-dim); }
.doc p + p { margin-top: 12px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--route); text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc ul { padding-left: 22px; margin: 10px 0; }
.doc li + li { margin-top: 6px; }
.doc .note {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px; margin: 20px 0; color: var(--ink-dim); font-size: 16px;
}
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-dim); }
.doc th { color: var(--ink-faint); font-weight: 600; }
details { border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; margin: 10px 0; background: var(--paper-2); }
summary { cursor: pointer; font-weight: 600; padding: 11px 0; color: var(--ink); }
details p { padding: 0 0 14px; }
@media (max-width: 560px) {
  nav.top { padding-top: 12px; }
  nav.top .bar { padding: 8px 8px 8px 12px; border-radius: 14px; }
  .wrap, .doc { padding-left: 20px; padding-right: 20px; }
}

/* ── drive guides (/drives/): built by scripts/drives/build_pages.py ── */
.drive .crumbs { font-size: 14px; color: var(--ink-faint); margin-bottom: 14px; }
.drive .crumbs a { color: var(--ink-dim); }
.drive .road { margin-top: 12px; color: var(--ink-faint); font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.drive .lede, .drives .lede { margin-top: 18px; font-size: 19px; color: var(--ink); }
.drive .stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 26px 0 0;
  border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); overflow: hidden;
}
.drive .stats div { padding: 14px 16px; border-left: 1px solid var(--line); }
.drive .stats div:first-child { border-left: 0; }
.drive .stats dt { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.drive .stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.drive .route-map { display: block; margin-top: 18px; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.drive .route-map img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.drive-cta { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.drive-cta p { font-size: 15px; color: var(--ink-faint); max-width: 34em; }
.drive-cta.closing { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); }
.doc .drive-cta a.btn { color: var(--ink); }
.doc .drive-cta a.btn:hover { text-decoration: none; }
.drive .stops { padding-left: 24px; }
.drive .stops li { padding-left: 4px; }
.drive .stops li + li { margin-top: 10px; }
.drive .stops strong { display: block; }
/* How twisty the road is, as the app's route overview shows it: the words
   on the left, the four levels on the right, the road's own at full. */
.drive .intensity { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 0; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
.drive .intensity .words { display: flex; flex-direction: column; line-height: 1.25; }
.drive .intensity .label { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.drive .intensity strong { font-size: 20px; color: var(--ink); }
.drive .intensity .words span:last-child { font-size: 14px; color: var(--ink-faint); }
.drive .intensity .scale { display: flex; gap: 7px; flex: none; }
.disc { display: block; flex: none; }
.disc.off { opacity: .35; }
.drives .drive-cards .level { display: flex; align-items: center; gap: 7px; padding: 0 16px 14px; margin-top: -8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.drive .more { list-style: none; padding: 0; }
.drive .more span { color: var(--ink-faint); font-size: 15px; }
.drive .sources { margin-top: 30px; font-size: 13.5px; color: var(--ink-faint); }
.doc.drives { max-width: 1040px; }
.drives .lede { max-width: 36em; }
.drives .drive-cards { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.drives .drive-cards li + li { margin-top: 0; }
.drives .drive-cards a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper);
  transition: transform .18s;
}
.drives .drive-cards a:hover { transform: translateY(-2px); text-decoration: none; }
.drives .drive-cards img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.drives .drive-cards .name { padding: 12px 16px 0; font-family: var(--serif); font-size: 24px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.drives .drive-cards .meta { padding: 4px 16px 14px; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 900px) { .drives .drive-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .drive .stats { grid-template-columns: 1fr 1fr; }
  .drive .stats div:nth-child(3) { border-left: 0; }
  .drive .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .drives .drive-cards { grid-template-columns: 1fr; }
  .drive-cta .btn { width: 100%; }
}