/* About — direction J, an article: kicker, headline, byline, one 16:9 photo slot, then a 65ch reading column.
   The header and footer are site.css's own (REC-297: no page restyles the chrome). Reuses ../../styles.css tokens; nothing here adds a colour, a card or an icon. 8px grid. */

/* ---------- the article head: kicker, headline, byline ---------- */
.origin { padding: 40px 0 64px; }
/* one reading column for head and body: 19px type so 65ch is the same measure in both */
.o-col { max-width: 65ch; font-size: 19px; }
.o-head { display: flex; flex-direction: column; }
.o-kicker { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
.o-h1 { margin-top: 16px; font-size: 40px; line-height: 1.04; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; max-width: 16ch; }
/* phone: one fact per line, no separators; >= 760 one row with middots */
.o-byline { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; flex-wrap: wrap; gap: 0 8px; font-size: 15px; line-height: 24px; color: var(--ink-3); }
.o-byline strong { color: var(--ink); font-weight: 600; }
.o-byline time { font-variant-numeric: tabular-nums; }
.o-sep { display: none; }
.o-sep::before { content: "·"; }

/* ---------- the photo slot: a greyed 16:9 plate until Dave's own photo replaces it ---------- */
.o-photo { margin: 32px 0 0; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 16px; border-radius: var(--r-3);
  background: var(--sunk); border: 1px dashed var(--line-2); }
.o-photo--img { padding: 0; border: 0; overflow: hidden; background: var(--sunk); display: block; }
.o-photo--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-photo figcaption { max-width: 32ch; font-size: 13px; line-height: 1.45; letter-spacing: .01em; color: var(--ink-3); text-align: center; text-wrap: balance; }

/* ---------- the body: 19px / 1.6 on a 65ch measure ---------- */
.o-body { margin-top: 40px; line-height: 1.6; color: var(--ink-2); }
.o-body > * + * { margin-top: 1.2em; }
.o-body p { text-wrap: pretty; }
/* the one pull-quote: a hairline rule on the left, never a card */
.o-pull { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--line-2); }
.o-pull p { font-size: 24px; line-height: 1.33; letter-spacing: -.018em; font-weight: 600; color: var(--ink-2); text-wrap: pretty; }
.o-body > .o-pull + p { margin-top: 0; }
/* the sign-off: one line, a text link and the address — an article's close, not a contact section */
.o-body > .o-sign { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; font-size: 17px; line-height: 1.5; }
.o-sign-sep { display: none; }
.o-mail { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(52,67,201,.35); text-underline-offset: 4px; }
.o-mail:hover { color: var(--blue-hover); text-decoration-color: currentColor; }

/* ---------- >= 760 ---------- */
@media (min-width: 760px) {
  .origin { padding: 64px 0 88px; }
  .o-h1 { font-size: 52px; }
  .o-byline { margin-top: 32px; flex-direction: row; }
  .o-sep { display: inline; }
  .o-photo { margin-top: 40px; }
  .o-photo figcaption { font-size: 14px; }
  .o-body { margin-top: 56px; }
  .o-pull { margin: 40px 0; }
  .o-sign-sep { display: block; width: 1px; height: 20px; background: var(--line-2); }
}

/* ---------- >= 1080: head and body share one centred column; the photo takes the full wrap ---------- */
@media (min-width: 1080px) {
  .origin { padding: 96px 0 120px; }
  .o-col { margin-left: auto; margin-right: auto; }
  .o-h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.042em; margin-top: 16px; }
  .o-photo { margin-top: 56px; }
  .o-body { margin-top: 64px; }
}