/* jeremylasne.com, after joncphillips.com. A column with hairline sides,
   Figtree for the words and Geist Mono for the small labels, the ocean of
   sharks small and faint behind (ocean.js), light by default and dark on
   demand. Three pages: / (the hello, with the newsletter and CreatorMatch),
   /apps (the newsletter and the mobile app portfolio), /personal. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #050b16;
  --panel: rgba(5, 11, 22, .72);
  --fg: #eaf4fb;
  --fg-80: rgba(234, 244, 251, .8);
  --fg-60: rgba(234, 244, 251, .6);
  --fg-40: rgba(234, 244, 251, .42);
  --fg-25: rgba(234, 244, 251, .25);
  --fg-12: rgba(234, 244, 251, .12);
  --fg-06: rgba(234, 244, 251, .06);
  --blue: #5fa8d3;
  --on-blue: #04101c;
  --cm: #8cd43f;
  --live: #86efac;
  --live-bg: rgba(74, 222, 128, .14);
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* the column, and the air inside it */
  --col: 900px;
  --pad: clamp(20px, 6vw, 56px);
  /* the nav's height: one line on a computer, two on a phone */
  --nav-h: 58px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f7;
  --panel: rgba(238, 243, 247, .78);
  --fg: #0b1626;
  --fg-80: rgba(11, 22, 38, .8);
  --fg-60: rgba(11, 22, 38, .62);
  --fg-40: rgba(11, 22, 38, .45);
  --fg-25: rgba(11, 22, 38, .26);
  --fg-12: rgba(11, 22, 38, .12);
  --fg-06: rgba(11, 22, 38, .05);
  --blue: #2a76a8;
  --on-blue: #ffffff;
  --cm: #4d8a12;
  --live: #15803d;
  --live-bg: rgba(22, 163, 74, .12);
  color-scheme: light;
}

html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 16px/1.6 var(--sans); color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background .3s, color .3s;
}
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { background: var(--blue); color: var(--on-blue); }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- the ocean, behind everything (ocean.js) ---- */
#ocean { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- the column: hairline sides, a veil over the water so the words read ---- */
.col {
  position: relative; z-index: 2; width: min(100%, var(--col)); min-height: 100svh; margin-inline: auto;
  background: var(--panel); border-inline: 1px solid var(--fg-12);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
@media (max-width: 899px) { .col { border-inline: 0; } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0) * 1ms); }

/* ---- the nav: the sections on the left, my name on the right ---- */
.nav {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 18px; transition: background .3s, box-shadow .3s;
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--fg-12); }
.links { display: flex; gap: clamp(14px, 3vw, 22px); font-size: 14px; font-weight: 500; }
.links a { color: var(--fg-80); transition: color .15s; }
.links a:hover, .links a[aria-current] { color: var(--fg); }
.links a[aria-current] { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.mark { font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.links a { white-space: nowrap; }
@media (max-width: 600px) { :root { --nav-h: 76px; } }
/* a phone: my name on top, the three pages on a line under it */
@media (max-width: 600px) {
  .nav { flex-wrap: wrap; row-gap: 12px; padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 14px; }
  .mark { order: -1; width: 100%; }
  .links { gap: 18px; font-size: 14px; }
}
.mark i { font-style: normal; color: var(--blue); margin: 0 .1em; }

/* ---- the home: the whole screen, a few lines, CreatorMatch in its colour ---- */
.home .col { display: flex; flex-direction: column; }
.home main { flex: 1; display: flex; }
.intro {
  display: flex; flex-direction: column; justify-content: center; gap: 18px; width: 100%;
  padding: clamp(24px, 6vh, 64px) var(--pad) clamp(40px, 8vh, 80px);
}
.intro h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
.intro p:not(.socials) { max-width: 46ch; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.65; color: var(--fg-80); }
.intro .socials { margin-top: 8px; }
.face {
  display: inline-block; width: .9em; height: .9em; margin: 0 .22em 0 .04em; vertical-align: -.1em; border-radius: 50%; object-fit: cover;
  background: var(--fg-12); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg-25);
}
.u { text-decoration: underline; text-decoration-color: var(--fg-40); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .15s, color .15s; }
.u:hover { color: var(--fg); text-decoration-color: currentColor; }
.hl {
  color: var(--cm); background: color-mix(in srgb, var(--cm) 14%, transparent); padding: .05em .3em; margin: 0 -.05em;
  border-radius: .3em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .2s;
}
.hl:hover { background: color-mix(in srgb, var(--cm) 26%, transparent); }
mark.hl { font-weight: 600; }
.hl-blue { color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); }
/* the three key phrases of the subheadline: underlined only */
.ul { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-skip-ink: auto; color: var(--fg); }
.caret { display: inline-block; width: .5em; height: 1em; margin-left: .2em; translate: 0 .15em; background: var(--fg); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- the hello of /apps and /personal ---- */
.hero { padding: clamp(28px, 6vw, 56px) var(--pad) clamp(40px, 6vw, 56px); }
.hero h1 { max-width: 20ch; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.16; font-weight: 400; letter-spacing: -.02em; }
.hero h1 b { font-weight: 800; letter-spacing: -.03em; }
.page-hero h1 { max-width: 24ch; }

/* /apps: the hello fills the screen under the nav; the portfolio waits one scroll below */
.hero-full {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100svh - var(--nav-h) - env(safe-area-inset-top)); padding-top: 24px; padding-bottom: 88px;
}
.hero-full h1 { max-width: 16ch; font-size: clamp(34px, 8.8vw, 54px); line-height: 1.1; letter-spacing: -.025em; }
/* the key words of the /apps headline: bold italic */
.hero h1 em { font-style: italic; }
.hero-full .lede { max-width: 50ch; margin-top: clamp(18px, 3vh, 26px); font-size: clamp(17px, 4.4vw, 19px); line-height: 1.65; }
.hero-full .join { margin-top: clamp(24px, 4vh, 36px); }
.scroll-cue {
  position: absolute; left: var(--pad); bottom: 28px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-40); transition: color .15s;
}
.scroll-cue:hover { color: var(--fg); }
.scroll-cue span { font-size: 14px; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
/* /apps: the hello only introduces the portfolio, which follows right under it */
.hero-full.hero-short { min-height: 0; padding-top: clamp(40px, 8vw, 88px); padding-bottom: clamp(44px, 7vw, 72px); }
/* a short screen (landscape phone): the hello keeps its natural height */
@media (max-height: 560px) { .hero-full { min-height: 0; padding-bottom: 80px; } }
.lede { max-width: 54ch; margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--fg-80); }

/* the newsletter: the field and the button in one box */
.join {
  display: flex; align-items: center; gap: 8px; max-width: 470px; margin-top: 30px; padding: 6px;
  border-radius: 10px; background: var(--fg-06); box-shadow: inset 0 0 0 1px var(--fg-12); transition: box-shadow .2s;
}
.join:focus-within { box-shadow: inset 0 0 0 1px var(--blue); }
.join input {
  flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 0; background: none; outline: none;
  font: 14px var(--mono); color: var(--fg);
}
.join input::placeholder { color: var(--fg-40); }
.join button {
  flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--blue); color: var(--on-blue); font: 600 13px var(--sans); transition: filter .15s, transform .15s;
}
.join button:hover { filter: brightness(1.1); }
.join button:active { transform: scale(.97); }
.join button:disabled { opacity: .6; cursor: default; }
.join-note { margin-top: 10px; font-size: 12px; color: var(--fg-60); }
.join-note.ok { color: var(--live); }
@media (max-width: 600px) {
  .join input { font-size: 16px; }
  .join-note { font-size: 13px; }
}
@media (max-width: 420px) {
  .join { flex-direction: column; align-items: stretch; }
  .join input { height: 48px; }
  .join button { height: 48px; font-size: 15px; }
}

.socials { display: flex; gap: 14px; margin-top: 26px; }
.socials a { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px; color: var(--fg-60); transition: color .15s; }
.socials a + a { margin-left: 4px; }
.socials a:hover { color: var(--fg); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
@media (pointer: coarse) { .socials a { width: 44px; height: 44px; margin: -14px; } .socials a + a { margin-left: 2px; } }

/* ---- a section: a label row between hairlines, then its rows ---- */
.sec-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--pad); border-block: 1px solid var(--fg-12);
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-60);
}
.sec-head h2 { font: inherit; }
.sec-head span { color: var(--fg-40); }
.sec + .sec .sec-head { border-top: 0; }

/* the Kaught reel: the video is the card, a tap opens kaught.app */
.reel {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #120b06; isolation: isolate;
  border-bottom: 1px solid var(--fg-12);
}
.reel > img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.reel video { opacity: 0; transition: opacity .5s, transform .8s cubic-bezier(.22,1,.36,1); }
.reel video.ready { opacity: 1; }
.reel-tag {
  position: absolute; z-index: 2; left: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px;
  background: rgba(5, 11, 22, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.reel-tag img { width: 28px; height: 28px; border-radius: 26%; }
.reel-tag .live { margin-left: 2px; }
.reel-go { opacity: .7; transition: transform .2s, opacity .2s; }
@media (hover: hover) {
  .reel:hover > img, .reel:hover video { transform: scale(1.02); }
  .reel:hover .reel-go { opacity: 1; transform: translate(2px, -2px); }
}
.reel:focus-visible { outline-offset: -3px; }

.live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--live-bg); color: var(--live); font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.reel .live { background: rgba(74, 222, 128, .18); color: #86efac; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* a row, as the article rows of joncphillips.com: a key, a name and a line, something on the right */
.row {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 24px); padding: 22px var(--pad);
  border-bottom: 1px solid var(--fg-12); transition: background .2s;
}
a.row:hover { background: var(--fg-06); }
.row-key {
  flex: none; width: 44px; padding-right: clamp(14px, 3vw, 24px); box-sizing: content-box; border-right: 1px solid var(--fg-12);
  font: 600 11px/2.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-60); text-align: center;
}
.row-ic { flex: none; width: 40px; height: 40px; border-radius: 26%; box-shadow: 0 0 0 1px var(--fg-12); }
.row-main { flex: 1; display: grid; min-width: 0; }
.row-main b { font-size: clamp(19px, 2.4vw, 22px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; transition: color .2s; }
.row-main span { font-size: 14px; color: var(--fg-60); }
.row-go { flex: none; font-size: 18px; color: var(--fg-40); transition: color .2s, transform .2s; }
a.row:hover .row-main b { color: var(--blue); }
a.row:hover .row-go { color: var(--fg); transform: translate(2px, -2px); }
.pill { flex: none; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fg-25); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-60); }
/* HealthClass: a big card of question marks, the name and a redacted line, in stealth */
.mystery {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  min-height: clamp(260px, 42vw, 380px); padding: clamp(22px, 4vw, 36px) var(--pad); overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--fg-12);
  background:
    radial-gradient(circle at 1px 1px, var(--fg-12) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 60%),
    var(--fg-06);
}
.mystery-q {
  position: absolute; z-index: -1; right: 6%; top: 50%; translate: 0 -50%;
  font: 800 clamp(200px, 38vw, 340px)/1 var(--sans); letter-spacing: -.05em; color: color-mix(in srgb, var(--blue) 26%, transparent);
  animation: bob 6s ease-in-out infinite;
}
.mystery-q2 { right: 34%; top: 22%; font-size: clamp(60px, 11vw, 110px); color: var(--fg-12); rotate: -14deg; animation-delay: -2s; }
.mystery-q3 { right: 26%; top: 78%; font-size: clamp(40px, 7vw, 70px); color: var(--fg-12); rotate: 12deg; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.mystery-text { display: grid; gap: 6px; }
.mystery-soon { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.mystery h3 { font-size: clamp(38px, 8vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.mystery-mark { margin-left: .04em; color: var(--blue); }
.mystery p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.redact { display: inline-block; width: clamp(110px, 22vw, 180px); height: 12px; border-radius: 3px; background: var(--fg-25); filter: blur(.5px); }
.redact.r2 { width: clamp(70px, 14vw, 110px); }
.mystery-pill { align-self: flex-start; background: color-mix(in srgb, var(--bg) 60%, transparent); }

/* the personal projects: three cells, as the "building right now" grid of joncphillips.com */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border-bottom: 1px solid var(--fg-12); }
.grid li + li { border-left: 1px solid var(--fg-12); }
.cell { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 28px clamp(18px, 3vw, 30px) 30px; transition: background .2s; }
.cell:hover { background: var(--fg-06); }
.cell-ic { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 1px var(--fg-12); }
.cell-ic.pulse { display: grid; place-items: center; background: linear-gradient(160deg, #3d6d93, #0d1b2a); }
.cell-ic.pulse svg { width: 60%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cell b { font: 700 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
.cell:hover b { color: var(--blue); }
.cell-line { font-size: 14px; line-height: 1.55; color: var(--fg-80); }
.cell-url { margin-top: auto; padding-top: 10px; font: 11px var(--mono); color: var(--fg-40); }
@media (max-width: 719px) {
  .grid { grid-template-columns: 1fr; }
  .grid li + li { border-left: 0; border-top: 1px solid var(--fg-12); }
  .cell { padding-inline: var(--pad); }
}
@media (max-width: 599px) {
  .reel-tag { gap: 7px; padding: 4px 10px 4px 4px; font-size: 13px; }
  .reel-tag img { width: 22px; height: 22px; }
}

/* ---- the footer ---- */
.foot { padding: clamp(40px, 7vw, 64px) var(--pad) calc(28px + env(safe-area-inset-bottom)); }
/* the foot of every page: one line, the copyright and the theme switch */
.foot-mini {
  display: flex; justify-content: space-between; align-items: center; padding-top: 32px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-40);
}

.theme {
  display: grid; place-items: center; width: 32px; height: 32px; margin: -8px; border: 0; background: none;
  color: var(--fg-60); cursor: pointer; transition: color .15s;
}
.theme:hover { color: var(--fg); }
.theme svg { width: 15px; height: 15px; fill: currentColor; }
:root[data-theme="light"] .theme .sun, :root:not([data-theme="light"]) .theme .moon { display: none; }
@media (pointer: coarse) { .theme { width: 44px; height: 44px; margin: -14px; } }

/* ---- the email popup: "Copied" and the address ---- */
.mailpop {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mailpop[data-open] { opacity: 1; pointer-events: auto; }
.mailpop-card {
  position: relative; width: min(100%, 400px); padding: 22px 22px 20px; border-radius: 16px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--fg-12), 0 30px 70px -24px rgba(0,0,0,.7);
  transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.mailpop[data-open] .mailpop-card { transform: none; }
.mailpop-top { display: flex; justify-content: space-between; align-items: center; }
.mailpop-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--live-bg); color: var(--live); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mailpop-state svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mailpop-state.is-plain { background: var(--fg-06); color: var(--fg-60); }
.mailpop-x { display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -8px -8px 0; border: 0; border-radius: 50%; background: none; color: var(--fg-60); cursor: pointer; font-size: 20px; line-height: 1; }
.mailpop-x:hover { color: var(--fg); background: var(--fg-06); }
.mailpop-email {
  display: block; margin-top: 18px; font-size: clamp(19px, 5.4vw, 23px); font-weight: 700; letter-spacing: -.01em;
  word-break: break-all; -webkit-user-select: all; user-select: all;
}
.mailpop-write {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 20px; border-radius: 10px;
  background: var(--fg-06); box-shadow: inset 0 0 0 1px var(--fg-12); font-size: 14px; font-weight: 600; transition: background .15s;
}
.mailpop-write:hover { background: var(--fg-12); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .live::before, .caret, .scroll-cue span, .mystery-q { animation: none; }
  .mailpop, .mailpop-card { transition: none; }
  .reel > img, .reel video, .reel-go { transition: none; }
}

@media (max-width: 360px) { .links { gap: 12px; font-size: 13px; } }
/* a jump to a section stops under the sticky nav */
.sec { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top)); }

/* the nav icons: a mail for the newsletter, the open-source mark for Personal, money for CreatorMatch */
.links a, .wl-links a { display: inline-flex; align-items: center; gap: 6px; }
.nav-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav-ic-fill { fill: currentColor; stroke: none; }
@media (max-width: 420px) { .links a, .wl-links a { gap: 4px; } .nav-ic { width: 13px; height: 13px; } }

/* ---- /apps: the archive of lessons (date, then title, a hairline between) ---- */
.lessons { margin: 0 var(--pad); padding: 0; list-style: none; }
.lessons:empty { display: none; }
.lesson { display: block; padding: 22px 0; border-bottom: 1px solid var(--fg-12); }
.lesson-meta { display: block; font-size: 12px; color: var(--fg-60); }
.lesson b { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); transition: color .15s; }
@media (hover: hover) { .lesson:hover b { color: var(--blue); } }
.lessons-empty { margin: 0 var(--pad); padding: 22px 0 28px; font-size: 15px; color: var(--fg-60); }
.lessons:not(:empty) + .lessons-empty { display: none; }

/* ---- a lesson: one issue of the newsletter as a page (/apps/lessons/...) ---- */
.post { padding: clamp(20px, 4vw, 40px) var(--pad) clamp(36px, 6vw, 56px); }
.post-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-60); transition: color .15s;
}
.post-back:hover { color: var(--fg); }
.post-meta { margin-top: 14px; font-size: 13px; color: var(--fg-60); }
/* a blue marker stroke under the key words of the title */
.post h1 .marker {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--blue) 32%, transparent) 62%, color-mix(in srgb, var(--blue) 32%, transparent) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em;
}
.post h1 { max-width: 17ch; margin-top: 8px; font-size: clamp(34px, 7vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.prose { margin-top: clamp(28px, 5vw, 44px); font-size: clamp(17px, 2vw, 18px); line-height: 1.72; color: var(--fg-80); }
.prose > * { max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.prose strong { font-weight: 700; color: var(--fg); }
.prose h2 { margin-top: 2.1em; font-size: clamp(21px, 2.6vw, 24px); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--fg); }
.prose h2 + p { margin-top: .55em; }
/* the three things, each number written by hand */
.three { display: grid; gap: 12px; margin: 1.1em 0 1.2em; list-style: none; counter-reset: n; }
.three li { position: relative; padding-left: 42px; counter-increment: n; }
.three li::before {
  content: counter(n); position: absolute; left: 4px; top: -.18em;
  font: 700 34px/1 "Caveat", cursive; color: var(--blue); rotate: -6deg;
}
.loop-lines { padding-left: 16px; border-left: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); font-weight: 600; color: var(--fg); }
.post-end { margin-top: 2.2em !important; font-weight: 700; color: var(--fg); }
.post-sign { margin-top: .6em !important; font: 700 34px/1 "Caveat", cursive; color: var(--fg); rotate: -4deg; transform-origin: left center; width: fit-content; }

/* the schema, drawn by hand on a sheet of dotted paper; the arrows draw themselves once it is seen */
.prose > .sketch {
  max-width: none; margin: 1.6em calc(var(--pad) * -.5) .4em; padding: clamp(10px, 3vw, 26px);
  border-radius: 14px; box-shadow: inset 0 0 0 1px var(--fg-12);
  background: radial-gradient(circle at 1px 1px, var(--fg-12) 1px, transparent 1.5px) 0 0 / 20px 20px, var(--fg-06);
}
.sketch svg { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; overflow: visible; }
.sketch path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk-ink { stroke: var(--fg); }
.sk-blue { stroke: var(--blue); }
.sk-green { stroke: var(--cm); }
.sk-mute { stroke: var(--fg-40); }
.sk-hatch { opacity: .6; }
.sketch .sk-solid { fill: var(--fg); stroke: none; opacity: .8; }
.sketch text { font-family: "Caveat", cursive; fill: var(--fg); }
.sk-name { font-size: 40px; font-weight: 700; }
.sk-sub { font-size: 30px; font-weight: 500; fill: var(--fg-60) !important; }
.sk-coin { font-size: 24px; font-weight: 700; fill: var(--cm) !important; }
.sk-dots { font-size: 30px; font-weight: 700; }
.sk-loop1 { font-size: 30px; font-weight: 500; fill: var(--fg-60) !important; }
.sk-loop { font-size: 54px; font-weight: 700; fill: var(--blue) !important; }
.sk-arrow path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sketch.is-waiting .sk-arrow path { stroke-dashoffset: 1; }
.sketch.is-drawing .sk-arrow path { transition: stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) calc(var(--i) * 380ms + 150ms); }
@media (max-width: 600px) { .prose > .sketch { margin-inline: calc(var(--pad) * -.6); } }


.sk-red { stroke: #d6453b; }
:root:not([data-theme="light"]) .sk-red { stroke: #f0776c; }
.sk-note { font-size: 36px; font-weight: 700; }
.sk-stop { font-size: 22px; font-weight: 700; }
/* a short list in a lesson: a bold key, then its line */
.days { display: grid; gap: 6px; margin: .8em 0 1em; list-style: none; }
.days li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; }
.days b { color: var(--fg); font-weight: 700; }
@media (max-width: 420px) { .days li { grid-template-columns: 6.5em 1fr; } }

/* HealthClass: the film of healthclass.app as its card, like the Kaught reel; coming soon */
.reel-hc { background: #fffbf6; }
.soon { margin-left: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(247, 198, 206, .22); color: #f7c6ce; font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* the third app: its name redacted too */
.redact-name { width: clamp(150px, 30vw, 260px); height: .62em; vertical-align: .08em; border-radius: 6px; background: var(--fg-25); }
/* the lessons sit above the portfolio: the last row leaves its line to the portfolio's head */
.lessons li:last-child .lesson { border-bottom: 0; }
.archive + .sec .sec-head { border-top: 1px solid var(--fg-12); }

/* the two-phone schema: more colors on the vibe-coded side, the button's word */
.sk-yellow { stroke: #d99a16; }
.sk-purple { stroke: #8b5cf6; }
.sk-btn { font-size: 26px; font-weight: 700; fill: var(--fg); }
/* the apps at the foot of a lesson: two cards, the still and the name */
.prose > .post-apps { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.2em 0 .4em; }
.post-app { display: grid; gap: 10px; }
.post-app img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--fg-12); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.post-app > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-app b { color: var(--fg); font-weight: 700; transition: color .15s; }
@media (hover: hover) { .post-app:hover img { transform: translateY(-2px); } .post-app:hover b { color: var(--blue); } }
@media (max-width: 520px) { .prose > .post-apps { grid-template-columns: 1fr; } }
/* the website-hub schema: small labels and the page tiles */
.sk-tiny { font-size: 22px; font-weight: 500; fill: var(--fg-60) !important; }
.sk-tile { font-size: 27px; font-weight: 700; fill: var(--fg); }
.sk-mini { font-size: 17px; font-weight: 500; fill: var(--fg-60) !important; }