/* Chrome for the standalone pages (/about, /privacy, /terms).

   index.html is deliberately self-contained — one file, inline style and
   script — so this sheet does not try to share with it. It carries the same
   tokens and the same header/footer treatment, and nothing else. Change a
   token here and in index.html together. */

:root{
  --paper:#FAF7F2;
  --paper-2:#EFE9DD;
  --ink:#182119;
  --soft:#5C574E;
  --muted:#776F64;
  --line:#D8CFBE;
  --line-dark:rgba(244,239,229,.18);
  --green:#1F2E24;
  --green-2:#2D3B2D;
  --cream:#F4EFE5;
  --gold:#9A855F;
  --gold-ink:#806E4F;
  --serif:'Fraunces', Georgia, serif;
  --logo-font:'Playfair Display', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --edge:clamp(22px,5vw,72px);
  --wrap:1440px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; width:100%; height:auto;}
a{color:inherit;}
p{text-wrap:pretty;}
::selection{background:var(--green); color:var(--cream);}

.topbar{position:fixed; inset:0 0 auto; z-index:20; height:100px; background:rgba(250,247,242,.88); border-bottom:1px solid rgba(24,33,25,.12); backdrop-filter:blur(18px);}
.topbar-inner{max-width:var(--wrap); margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 var(--edge);}
.brand{font-family:var(--logo-font); font-size:40px; font-weight:700; letter-spacing:-.02em; text-decoration:none;}
.nav{display:flex; gap:34px; align-items:center;}
.nav a{font-size:15px; color:var(--soft); text-decoration:none; transition:color .35s var(--ease), transform .35s var(--ease); display:inline-block;}
.nav a:hover{color:var(--ink); transform:translateY(-1px);}
.nav a[aria-current="page"]{color:var(--ink);}
.nav .join{font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:4px; transition:border-color .35s var(--ease), transform .35s var(--ease);}
.nav .join:hover{border-color:var(--gold-ink); transform:translateY(-1px);}

.page{max-width:var(--wrap); margin:0 auto; padding:clamp(146px,14vh,178px) var(--edge) clamp(64px,8vw,110px);}
/* No rule here: every .prose section draws its own top rule, and a border
   under the head reads as a double line against the first of them. */
/* Two columns on the same axis the prose below uses, so the portrait's right
   edge lands on the same line as the body copy's.

   start, not end: aligning the bottoms pushed the kicker ~190px down the page
   while the photo stayed flush under the bar, so the left column read as
   starting late. Both now begin on the same line and the photo simply runs
   lower, which is the stagger the prose grid below already uses. */
.page-head{padding-bottom:clamp(20px,2.5vw,34px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,88px); align-items:start;}
.page-kicker{font-family:var(--mono); font-size:clamp(15px,1.35vw,19px); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:22px;}
.page-title{font-family:var(--serif); font-weight:300; letter-spacing:-.045em; line-height:1.04; font-size:clamp(40px,6vw,92px); max-width:14ch; font-variation-settings:"opsz" 144,"SOFT" 36;}
/* Looser than the home page h1 (.94) on purpose: the About title breaks as
   "...a physician / who needed it first.", putting the p and y descenders
   directly above the d and f ascenders. At .96 they collided. */
.page-title em{font-style:italic; color:var(--gold);}
.page-meta{margin-top:22px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}

/* Copy column: heading rail on the left, prose on the right, sharing the
   same axis the landing page's two-column sections use. */
.prose{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,88px); padding-top:clamp(40px,5vw,68px);}

/* Sits in the About head beside the title. Capped in px rather than as a
   percentage of its column so it stays a portrait and does not inflate into a
   hero image on a wide screen. */
.founder{width:100%; max-width:300px; justify-self:end;}
/* The source is 1086x1448 — 3:4 against this 4:5 box, so cover trims about
   6% of the height, split evenly top and bottom. The subject sits well inside
   that margin, so there is nothing to bias with object-position. */
.founder img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.founder figcaption{margin-top:13px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
/* The rail carries a section heading at display weight, not a tiny label —
   at half the measure a mono caption leaves the column looking empty. */
.prose h2{font-family:var(--serif); font-size:clamp(26px,2.8vw,40px); font-weight:350; letter-spacing:-.025em; line-height:1.05; color:var(--ink); padding-top:34px; border-top:1px solid var(--line);}
.prose .body{padding-top:34px; border-top:1px solid var(--line);}
.prose .body > * + *{margin-top:20px;}
.prose .body p{font-size:clamp(15.5px,1.25vw,17.5px); color:var(--soft); line-height:1.68; max-width:60ch;}
.prose .body p b,.prose .body p strong{color:var(--ink); font-weight:600;}
.prose .body p em{font-style:italic; color:var(--ink);}
.prose .body p.lede{font-family:var(--serif); font-size:clamp(20px,2.1vw,28px); font-weight:350; line-height:1.34; letter-spacing:-.015em; color:var(--ink);}
.prose .body ul{list-style:none; display:grid; gap:12px;}
.prose .body li{position:relative; padding-left:20px; font-size:clamp(15.5px,1.25vw,17.5px); color:var(--soft); max-width:60ch;}
.prose .body li::before{content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--gold);}

.signoff{margin-top:clamp(48px,6vw,78px); padding-top:clamp(30px,3.5vw,44px); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;}
.signoff-name{font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.5; color:var(--muted);}
.signoff-name b{display:block; font-style:normal; font-weight:400; color:var(--ink);}

.btn{min-height:56px; display:inline-flex; align-items:center; justify-content:center; padding:0 30px; border:1px solid var(--green); text-decoration:none; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; background:var(--green); color:var(--cream); transition:background .35s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);}
.btn:hover{background:var(--green-2); transform:translateY(-3px); box-shadow:0 14px 28px -12px rgba(31,46,36,.22);}
.btn:active{transform:translateY(-1px); transition-duration:.1s;}

.pending{margin-top:clamp(40px,5vw,64px); padding:26px 28px; border:1px dashed var(--gold); background:rgba(154,133,95,.07);}
.pending b{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:10px;}
.pending p{font-size:15px; color:var(--soft); max-width:60ch;}

footer{position:relative; max-width:var(--wrap); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px 32px; flex-wrap:wrap; padding:26px var(--edge); background:var(--green); color:rgba(244,239,229,.58); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;}
footer::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--green); z-index:-1;}
footer a{text-decoration:none; transition:color .35s var(--ease);}
footer a:hover{color:var(--cream);}
.footer-links{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center;}

@media (max-width:980px){
  .topbar{height:62px;}
  .nav a:not(.join){display:none;}
  .page{padding-top:106px;}
  .prose{grid-template-columns:1fr; gap:0;}
  .prose h2{padding-top:34px; margin-bottom:18px;}
  .prose .body{padding-top:0; border-top:none; padding-bottom:6px;}
  /* Stacked: title first, then the portrait beneath it, left-aligned on the
     page axis rather than pushed to a column edge that no longer exists. */
  .page-head{grid-template-columns:1fr; gap:0;}
  .founder{margin-top:clamp(26px,5vw,38px); justify-self:start; max-width:300px;}
}
@media (max-width:620px){
  .btn{width:100%;}
  .signoff{align-items:flex-start;}
}


/* Entrance. The subpages had no motion at all — everything simply appeared.
   The hidden state is gated behind .js-reveal, which the page only sets once
   its observer is actually running, so a script failure leaves the copy
   readable instead of blanking the page. */
.js-reveal .reveal{opacity:0; transform:translate3d(0,22px,0); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:opacity, transform;}
.js-reveal .reveal.in{opacity:1; transform:translate3d(0,0,0);}

/* The head reads as one unit, so the portrait follows the title rather than
   racing it. */
.js-reveal .founder.reveal{transition-delay:.12s;}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1; transform:none; transition:none;}
}