/* Light only, by design (Matt, 2026-07-27). The white design IS the brand, the same
   choice jamesclear.com and peterattiamd.com make. color-scheme: only tells the browser
   not to auto-darken form controls. Do not add a prefers-color-scheme dark block. */
:root {
  color-scheme: only light;
  /* Page is a soft off-white, not pure white (Matt, 2026-07-27: #fff glared).
     Cards and quotes are pure white so they lift off the page instead of blending.
     To adjust: --bg lighter = #fafbfc, softer = #f4f7f9, warmer = #faf9f6. */
  --bg: #f7f9fb;
  --ink: #16232e;
  --sec: #5a6673;
  --border: #cbd6e0;
  --tint: #ffffff;
  --accent: #0e7c66;
  --on-accent: #ffffff;
  /* Section bands. Rhythm is white / white / tint / accent / white / tint / dark,
     so card-heavy sections sit on tint and cards lift off them. */
  --band-white: #ffffff;
  --band-tint: #d3e0ec;
  /* Deep navy, not the old teal (Matt, 2026-07-27). Everything else in the palette is
     blue (bg, tint, ink); the teal band was the only hue outside that family and read as
     an interruption mid-page. Green survives as an accent at link and footer level, which
     is where an accent belongs. Deliberately lighter than --band-dark: on courses.html
     this band sits directly against the footer, and matching them would fuse the two. */
  --band-accent: #1d3b57;
  --band-dark: #16232e;
  --on-dark: #dfe6ea;
  --on-dark-dim: #93a3ae;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.19rem;
  line-height: 1.68;
}
/* A band spans the viewport and owns the background; .wrap constrains the content. */
.band { width: 100%; }
.band > .wrap { padding: 4.25rem 2rem; }
.band--white { background: var(--band-white); }
.band--tint { background: var(--band-tint); }
.band--tint .card, .band--tint blockquote.voice, .band--tint .embed-wrap iframe {
  border-color: #bccddc;
}
/* Text tints here are blue-neutral, matching the navy band. They were mint (#eaf5f1,
   #d3e8e1, #cfe5dd) back when the band was teal; on navy that reads visibly green. */
.band--accent { background: var(--band-accent); color: #e8eff7; }
.band--accent .label { color: #ffffff; }
.band--accent p { color: #cfdcea; }
.band--accent .theme {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.band--accent .theme .theme-name { color: #ffffff; }
.band--accent .theme p { color: #c9d8e8; }
/* Links here had no rule of their own, so they fell through to the global green accent
   on the band background, which measured 1.5:1 and was unreadable. White is 11.6:1 on
   the navy. .cta keeps its dark-on-white by higher specificity. */
.band--accent a { color: #ffffff; }
.band--accent .cta { background: #ffffff; color: #1d3b57; }
.band--accent .cta:hover { opacity: 0.92; }
.band--dark { background: var(--band-dark); color: var(--on-dark); }
/* On courses.html the accent band runs straight into the footer. Since both went navy
   the seam is only 1.38:1 and the two blocks fuse; the old teal separated itself by hue.
   This hairline fires only on that adjacency, so every other page is untouched. */
.band--accent + .band--dark { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.band--dark a { color: #7fd3ba; }
.band--dark .label { color: #7fd3ba; }
.band--nav > .wrap { padding-top: 1.5rem; padding-bottom: 0; }
/* Retired 2026-07-27: a wider band gave the page a second left edge. One width only. */
.band--hero > .wrap { padding-top: 0; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 2rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
p { margin-bottom: 0.95rem; }

nav.site {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
nav.site .wordmark { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.02rem; }
nav.site .links a {
  color: var(--sec); text-decoration: none; font-size: 1.02rem; font-weight: 500; margin-left: 1.5rem;
}
nav.site .links a:hover { color: var(--ink); }
nav.site .links a[aria-current="page"] {
  color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

.hero { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 2.5rem 0 2.25rem; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.15rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 0.8rem;
}
.hero .byline { color: var(--sec); font-size: 1.12rem; margin-bottom: 0.5rem; }
.hero .proof { color: var(--sec); font-size: 1.05rem; margin-bottom: 1.3rem; }
.hero-photo {
  width: 260px; height: 320px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--border);
}
.hero-photo-placeholder {
  width: 260px; height: 320px; border-radius: 14px;
  background: var(--tint); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--sec); font-size: 2.4rem; letter-spacing: 0.05em;
}
.portrait-sm {
  width: 108px; height: 132px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border); float: right; margin: 0 0 0.8rem 1.2rem;
}
.portrait-sm-placeholder {
  width: 108px; height: 132px; border-radius: 10px;
  background: var(--tint); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--sec); font-size: 1.3rem; float: right; margin: 0 0 0.8rem 1.2rem;
}

/* Sections are bands now; the background change separates them, so no rules or padding. */
section.band { padding: 0; border-top: none; }
h2.label {
  font-size: clamp(1.65rem, 3.4vw, 2.15rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink); margin: 0 0 1.1rem; text-transform: none;
}
/* Text keeps a readable measure even though the page is wider. 44rem is a compromise:
   ~74 characters a line (inside the comfortable 60-75 band, which matters for a 55+
   audience) while closing most of the visible gap against the full-width card grids.
   Going flush with the cards would mean ~94 characters, which is too long to read. */
section p, section ul, .wrap > p, .wrap > ul, .wrap > blockquote { max-width: 44rem; }
.page-title { font-size: clamp(2rem, 4.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; margin: 2.75rem 0 1.5rem; }

.card {
  background: var(--tint);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}

.cta {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: 8px; padding: 0.75rem 1.6rem; font-weight: 700; font-size: 1.06rem;
  text-decoration: none;
}
.cta:hover { opacity: 0.9; }
/* Secondary button: same size and weight, light green fill so it reads as a live
   button (a hollow ghost read as disabled to Matt, 2026-08-06), while the solid
   primary stays dominant. Used beside the primary in the hero. */
.cta--outline {
  background: #e4f2ee; color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cta--outline:hover { background: var(--accent); color: var(--on-accent); opacity: 1; }
.band--accent .cta--outline {
  background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff;
}

.signup { display: flex; gap: 1.6rem; align-items: flex-start; }
.signup > div:last-child { flex: 1; min-width: 0; }
/* The faux book cover was removed 2026-07-27: it read as an unexplained rectangle and it
   depicted a PDF that does not exist. When the reading list is built, generate a real cover
   image (same approach as assets/og-image.jpg) rather than drawing one in CSS. */
.embed-wrap iframe {
  width: 100%; max-width: 100%; height: 150px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--tint);
}
.promise { font-size: 0.9rem; color: var(--sec); margin-top: 0.5rem; }

.pull {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.35rem; line-height: 1.5; text-align: center;
  color: var(--sec); padding: 0.5rem 1rem;
}
.pull a { color: var(--sec); font-size: 0.85rem; font-family: -apple-system, sans-serif; font-style: normal; display: block; margin-top: 0.6rem; }

blockquote.voice {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  color: var(--ink); background: var(--tint);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.3rem; margin-bottom: 0.9rem; font-size: 1.05rem;
}
blockquote.voice cite {
  display: block; font-style: normal; font-size: 0.85rem; color: var(--sec);
  font-family: -apple-system, sans-serif; margin-top: 0.4rem;
}

ul.courses { list-style: none; margin-bottom: 0.95rem; }
ul.courses li { padding: 0.45rem 0; border-bottom: 1px dotted var(--border); font-size: 1.02rem; }
ul.courses li:last-child { border-bottom: none; }
ul.courses .series { font-weight: 600; }

/* .survey-links removed 2026-07-27 with the course-feedback sections it styled. */

figure.banner { margin: 1.5rem 0 1.75rem; }
figure.banner img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--border);
}
figure.banner figcaption {
  font-size: 0.85rem; color: var(--sec); margin-top: 0.5rem;
}
/* Smaller inline figure (home page teaching preview) so a 640px source stays crisp */
figure.banner.inset { max-width: 30rem; }

footer { text-align: center; font-size: 0.9rem; color: var(--on-dark-dim); }
footer a { color: var(--on-dark); }
footer .fine { color: var(--on-dark-dim); }
/* Scoped disclaimer: goes only on medically related content, never sitewide. */
.fine {
  font-size: 0.88rem; color: var(--sec); margin-top: 0.9rem;
  padding-top: 0.7rem; border-top: 1px dotted var(--border); max-width: 40rem;
}

/* ---------------------------------------------------------------------------
   Density components (2026-07-27). The home page carries the full tour, so it
   needs cards and grids. Everything below uses existing tokens only.
   NOTE: the global `section p, section ul { max-width: 40rem }` rule above caps
   text inside these components too, so each one resets it locally.
   --------------------------------------------------------------------------- */

.cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cta-sub { color: var(--sec); font-size: 1.02rem; font-weight: 500; }


.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
.split.reverse { grid-template-columns: auto 1fr; }
/* Image-left variant so photos alternate sides down the page (hero photo sits right,
   About sits left — Matt, 2026-08-06). Mobile stacking is unaffected: the media
   queries below already put every .split image first in the single column. */
.split--flip { grid-template-columns: 1fr 1.35fr; }
.split--flip img { order: -1; }
/* Mirror a photo so the subject faces the adjacent text instead of the page edge.
   Only for images with no legible text in frame. */
.mirror { transform: scaleX(-1); }
.split p { max-width: none; }
.split img {
  width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border);
}

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid--three { grid-template-columns: repeat(3, 1fr); }
.grid > .card { margin-bottom: 0; height: 100%; }
.grid .card p, .grid .card ul { max-width: none; }
.card--feature { grid-column: 1 / -1; }
.card .card-title {
  font-weight: 700; font-size: 1.15rem; display: block;
  color: var(--ink); margin: 0 0 0.15rem; line-height: 1.25;
}
a.card-title { color: var(--accent); }
.card .card-desc { color: var(--sec); font-size: 1rem; margin: 0.35rem 0 0.6rem; }

ul.sessions {
  list-style: none; margin: 0; padding-top: 0.5rem;
  border-top: 1px dotted var(--border);
}
ul.sessions li { font-size: 0.98rem; color: var(--sec); padding: 0.22rem 0; }

.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quote-row blockquote.voice {
  margin-bottom: 0; height: 100%; font-size: 1.05rem; max-width: none;
}
.quote-note { font-size: 0.85rem; color: var(--sec); margin-top: 0.7rem; }

/* Rotating quotes. A row marked [data-rotate] may hold more than three quotes; JS shows
   one group of three at a time. If JS never runs, this rule leaves the first three
   visible, so the page is correct with or without it. */
.quote-row[data-rotate] blockquote.voice:nth-child(n+4) { display: none; }
.quote-row.is-rotating blockquote.voice { display: none; }
.quote-row.is-rotating blockquote.voice.is-active { display: block; }
/* Fade only the incoming group. The row keeps a JS-set min-height so swapping groups
   of unequal length never shifts the page. */
.quote-row.is-rotating.is-fading blockquote.voice.is-active { animation: quote-in 0.45s ease both; }
@keyframes quote-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .quote-row.is-rotating.is-fading blockquote.voice.is-active { animation: none; }
}

/* No breakout. The photo shares the same left and right edges as every other block. */
figure.banner.wide { width: 100%; }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.theme {
  background: var(--tint); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.9rem 1.05rem;
}
.theme .theme-name { font-weight: 700; font-size: 1.1rem; display: block; }
.theme p { color: var(--sec); font-size: 1rem; max-width: none; margin: 0.3rem 0 0; }

/* ---------------------------------------------------------------------------
   Course companion notes (2026-07-27). Long-form reading, one page per course,
   printed to PDF by scripts/build_handout_pdfs.py. The site's global reset
   strips list markers and indents, so notes lists restore them here rather than
   in the page.
   --------------------------------------------------------------------------- */

.notes { max-width: 40rem; }
.notes .standfirst { color: var(--sec); font-size: 1.05rem; margin-bottom: 1.5rem; }
.notes h2 {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  margin: 2.5rem 0 0.3rem; padding-top: 1.6rem; border-top: 1px solid var(--border);
}
.notes h2:first-of-type { padding-top: 0; border-top: none; margin-top: 1.5rem; }
.notes h2 + .class-sub { color: var(--sec); margin-bottom: 1.2rem; }
.notes h3 {
  font-size: 1.12rem; font-weight: 600; margin: 1.8rem 0 0.6rem;
}
.notes ul, .notes ol { margin: 0 0 1rem 1.4rem; }
.notes li { padding: 0.16rem 0; }
.notes ul { list-style: disc; }
.notes ol { list-style: decimal; }
.notes .formula {
  font-size: 1.15rem; font-weight: 600; text-align: center;
  background: var(--tint); border: 1px solid var(--accent); border-radius: 10px;
  padding: 0.9rem 1rem; margin: 1.2rem 0;
}
.notes .card p:last-child, .notes .card ul:last-child { margin-bottom: 0; }
.notes .card .card-title { margin-bottom: 0.4rem; }

/* Boxed action list that closes each class */
.try {
  background: var(--tint); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 1rem 1.3rem 1rem 1.5rem; margin: 1.2rem 0;
}
.try .try-title {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent); display: block; margin-bottom: 0.5rem;
}
.try ul { margin-bottom: 0; }

.notes .paired { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0; }
.notes .paired .card { margin-bottom: 0; }
.notes .paired p { max-width: none; font-size: 0.97rem; }

.notes-foot { color: var(--sec); font-size: 0.92rem; margin-top: 2rem; }

/* Tablet: anything that would fall under ~240px a column collapses here, and the
   two-column hero and split blocks give the text room instead of squeezing it beside
   a fixed-width photo. */
@media (max-width: 820px) {
  .grid--three, .quote-row { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-photo, .hero-photo-placeholder { order: -1; width: 200px; height: 246px; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 1.6rem; }
  .split img { order: -1; width: 100%; max-width: 320px; }
}
@media (max-width: 640px) {
  body { font-size: 1.06rem; }
  .notes .paired { grid-template-columns: 1fr; }
  .wrap { padding: 0 1.3rem; }
  .band > .wrap { padding: 2.5rem 1.3rem; }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0 1.5rem; }
  .hero-photo, .hero-photo-placeholder { order: -1; width: 150px; height: 185px; }
  .signup { flex-direction: column; }
  nav.site { flex-direction: column; gap: 0.5rem; }
  nav.site .links a { margin: 0 1.5rem 0 0; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 1.4rem; }
  .split img { order: -1; width: 100%; max-width: 320px; }
  .grid, .grid--three, .quote-row, .theme-grid { grid-template-columns: 1fr; }
  figure.banner.wide { width: auto; margin-left: 0; transform: none; }
}

/* ---------------------------------------------------------------------------
   Print (2026-07-27). Drives the companion-notes PDFs and also makes any page
   print sensibly from the browser. Screen navigation and the Substack embed
   have no meaning on paper, so they are dropped. Keep the site address visible:
   a printed page that has been passed along should still say where it came from.
   --------------------------------------------------------------------------- */
@page { margin: 0.5in 0.55in; }
.print-id { display: none; }

@media print {
  :root { --bg: #ffffff; --border: #cfd8e0; }
  /* Budget, set by Matt 2026-07-27: two pages of notes per class, resources may
     take a third. The type below is tuned to hold that budget. If a class runs
     long, cut words rather than shrinking this further. */
  body { font-size: 9.2pt; line-height: 1.3; background: #fff; }
  .wrap { max-width: none; padding: 0; }
  nav.site, #subscribe, .embed-wrap, .cta, .screen-only { display: none; }
  a { color: var(--ink); text-decoration: none; }
  p { margin-bottom: 0.5rem; }
  .page-title { font-size: 1.5rem; margin: 0 0 0.5rem; }
  .notes { max-width: none; }
  .notes .standfirst { font-size: 1rem; margin-bottom: 0.6rem; }
  /* Page breaks are explicit: put .page-break on the heading that should start a
     fresh sheet (the resources block). Automatic breaking on every h2 was wrong once
     a handout became one session per page rather than four classes on one. The
     screen's rule above the heading would print as a stray line at the top. */
  .notes h2 { font-size: 1.25rem; border-top: none; padding-top: 0; margin-top: 0.9rem; }
  .notes .page-break { break-before: page; page-break-before: always; }
  .notes h3 { font-size: 1rem; margin: 0.7rem 0 0.25rem; break-after: avoid; page-break-after: avoid; }
  .try p:last-child { margin-bottom: 0; margin-top: 0.35rem; }
  .notes ul, .notes ol { margin: 0 0 0.55rem 1.05rem; }
  .notes li { padding: 0.02rem 0; }
  .notes .formula { font-size: 1rem; padding: 0.45rem 0.7rem; margin: 0.6rem 0; }
  .notes .paired { gap: 0.5rem; }
  .notes .paired .card { padding: 0.6rem 0.8rem; }
  .try { padding: 0.55rem 0.9rem 0.55rem 1rem; margin: 0.6rem 0 0; }
  /* Short one-line lists (question sets) set in two columns on paper only.
     They stay single column on screen, where narrow windows are the constraint. */
  .notes ul.cols { columns: 2; column-gap: 1.5rem; }
  /* Side by side on paper too, since the paired cards are short. A two column
     grid cannot split across a page break, so it is kept whole and pushed to the
     next page if it does not fit. */
  .notes .paired { gap: 0.5rem; break-inside: avoid; page-break-inside: avoid; }
  .try, .card, blockquote.voice { break-inside: avoid; page-break-inside: avoid; }
  /* The footer is white on a dark band on screen. On paper the band is gone, so
     its colors have to be restated or the contact line prints nearly invisible. */
  footer { border-top: 1px solid var(--border); margin-top: 1.5rem; color: var(--sec); }
  footer a, footer .fine, footer .print-id { color: var(--sec); }
  .print-id { display: block; }
}