/* Mailwell site: the app's own world. Paper and ink, one slate accent for
   links, Geist, pill buttons. Shared by index, docs and legal. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #F5F5F3;
  --raised: #FFFFFF;
  --ink: #1D1D1F;
  --ink-hover: #3A3A3D;
  --sub: #5E5E63;
  --faint: #7A7A80;
  --line: rgba(29, 29, 31, .12);
  --line-strong: rgba(29, 29, 31, .22);
  --wash: rgba(29, 29, 31, .05);
  --link: #44658C;
  --select: rgba(68, 101, 140, .2);
  --window-ring: rgba(0, 0, 0, .14);
  --window-shadow: 0 50px 100px -40px rgba(29, 29, 31, .38), 0 18px 40px -20px rgba(29, 29, 31, .2);
  --plate-shadow: 0 30px 60px -30px rgba(29, 29, 31, .3), 0 8px 20px -12px rgba(29, 29, 31, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161617;
    --raised: #1E1E20;
    --ink: #F5F5F7;
    --ink-hover: #FFFFFF;
    --sub: #A6A6AB;
    --faint: #8A8A90;
    --line: rgba(245, 245, 247, .12);
    --line-strong: rgba(245, 245, 247, .24);
    --wash: rgba(245, 245, 247, .06);
    --link: #8FB0DA;
    --select: rgba(143, 176, 218, .28);
    --window-ring: rgba(255, 255, 255, .12);
    --window-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 18px 40px -20px rgba(0, 0, 0, .5);
    --plate-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75), 0 8px 20px -12px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161617;
  --raised: #1E1E20;
  --ink: #F5F5F7;
  --ink-hover: #FFFFFF;
  --sub: #A6A6AB;
  --faint: #8A8A90;
  --line: rgba(245, 245, 247, .12);
  --line-strong: rgba(245, 245, 247, .24);
  --wash: rgba(245, 245, 247, .06);
  --link: #8FB0DA;
  --select: rgba(143, 176, 218, .28);
  --window-ring: rgba(255, 255, 255, .12);
  --window-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 18px 40px -20px rgba(0, 0, 0, .5);
  --plate-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75), 0 8px 20px -12px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
::selection { background: var(--select); color: inherit; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 16px; top: -48px; padding: 8px 14px; background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; z-index: 10; }
.skip:focus { top: 12px; }

/* Top bar: the wordmark only where the page has no big icon of its own. */
.bar {
  max-width: 1120px; margin: 0 auto;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
}
.bar .home { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.bar .home img { width: 26px; height: 26px; }
.bar nav { margin-left: auto; display: flex; gap: 22px; }
.bar nav a { color: var(--sub); text-decoration: none; font-weight: 500; white-space: nowrap; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }

/* Pill buttons, like the app's Reply and Done. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  font: 500 16px/1 "Geist", -apple-system, system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-hover); }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { background: var(--wash); }
.btn:focus-visible { border-radius: 999px; }

/* Key caps: the system face draws ⌘ ⇧ ⌫ ↩ the way macOS menus do. */
kbd, .kbd { font-family: -apple-system, BlinkMacSystemFont, "Geist", system-ui, sans-serif; }

@media (max-width: 560px) {
  .bar { padding: 18px 16px; }
  .bar nav { gap: 18px; }
  .bar nav .wide { display: none; }
  .foot { padding: 24px 16px 32px; }
}

.foot {
  max-width: 1120px; margin: 0 auto;
  padding: 28px 24px 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  font-size: 14px; color: var(--faint);
}
.foot .spacer { flex: 1; }
.foot a { color: var(--sub); text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Blog: a card grid on the index, plain prose on posts. */
.blog { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }
.blog-head { text-align: center; padding: 56px 0 8px; }
.blog-head h1 { font-weight: 600; font-size: clamp(36px, 6vw, 48px); line-height: 1.05; letter-spacing: -0.035em; }
.blog-head p { margin-top: 10px; font-size: 18px; color: var(--sub); }
.cards { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.card a { display: block; color: inherit; text-decoration: none; }
.card h2 { margin-top: 8px; font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.card a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card p { margin-top: 6px; color: var(--sub); font-size: 16px; line-height: 1.55; }
.meta { display: block; margin-top: 18px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
.meta time { text-transform: none; letter-spacing: 0; font-weight: 400; }
.meta time::before { content: "·"; margin: 0 8px; }

/* Card art: a screenshot set into a soft tile, cropped at the right and bottom. */
.art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, var(--wash), color-mix(in srgb, var(--link) 14%, transparent)); box-shadow: inset 0 0 0 1px var(--line); }
.art img { position: absolute; left: 9%; top: 11%; width: 108%; height: auto; max-width: none; border-radius: 10px; box-shadow: 0 0 0 1px var(--window-ring), var(--plate-shadow); }
.blog-foot { margin-top: 64px; text-align: center; font-size: 15px; color: var(--sub); }

.post { max-width: calc(42rem + 48px); margin: 0 auto; padding: 0 24px 96px; }
.post .meta { margin-top: 48px; }
.post h1 { margin-top: 10px; font-weight: 600; font-size: clamp(32px, 5.5vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.post .lede { margin-top: 14px; font-size: 19px; color: var(--sub); }
.post .art { margin: 36px 0 36px; }
.post h2 { margin-top: 44px; font-weight: 600; font-size: 22px; letter-spacing: -0.015em; }
.post p, .post li { font-size: 17px; line-height: 1.7; max-width: 68ch; }
.post h2 + p, .post h2 + ul, .post h2 + ol { margin-top: 10px; }
.post p + p, .post ul + p, .post p + ul, .post ol + p, .post p + ol { margin-top: 14px; }
.post ul, .post ol { padding-left: 22px; display: grid; gap: 6px; }
.post li::marker { color: var(--faint); }
.post b { font-weight: 600; }
.post .cta { margin-top: 48px; padding: 22px 24px; border-radius: 16px; background: var(--wash); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.post .cta p { flex: 1 1 260px; margin: 0; font-size: 16px; color: var(--sub); }
.post .back { margin-top: 32px; font-size: 15px; }
/* Visible only in drafts: marks a spot that needs Luke's own words. Remove before publishing. */
.draft-note { margin: 18px 0; padding: 14px 18px; border-radius: 12px; border: 1.5px dashed currentColor; color: #B13A0A; font-size: 15px; }
@media (prefers-color-scheme: dark) { .draft-note { color: #FB923C; } }

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .blog, .post { padding: 0 16px 72px; }
  .blog-head { padding-top: 32px; }
  .post .meta { margin-top: 28px; }
}

/* Drawn card art (no screenshot): a mark in the tile, a label under it. */
.art-jmap { display: grid; place-content: center; justify-items: center; gap: 2px; }
.art-jmap svg { width: min(70%, 420px); height: auto; overflow: visible; }
.art-jmap .speed { stroke: color-mix(in srgb, var(--link) 55%, transparent); }
.art-jmap .env-shadow { fill: rgba(0, 0, 0, .22); filter: blur(5px); }
.art-jmap span { font-weight: 600; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .08em; color: var(--ink); }