@import url("./typography.css?v=ibm-plex-sans-20260815-5");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400&display=swap");

:root {
  --about-container: 1020px;
  --about-gutter: clamp(20px, 4vw, 40px);
  --about-reading-measure: 64ch;
  --about-section-space: clamp(58px, 7vw, 88px);
  /* Sampled from the existing Latrobe Pinboard logo. */
  --about-ink: #010101;
  --about-brand: #eb3d06;
  --about-paper: #fffdf9;
  --about-neutral: #f3efe8;
  --about-copy: #3f3a35;
  --about-rule: #d9d2c9;
  background: var(--about-paper);
  color: var(--about-ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--about-paper); }
a { color: var(--about-brand); }
a:focus-visible { outline: 3px solid var(--about-brand); outline-offset: 3px; }
.skip-link { position: fixed; top: 1rem; left: -999px; z-index: 10; padding: .75rem 1rem; color: var(--about-ink); background: var(--about-paper); border: 2px solid var(--about-brand); border-radius: 0; }
.skip-link:focus { left: 1rem; }

.site-header,
main { width: min(var(--about-container), calc(100% - (var(--about-gutter) * 2))); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 112px; border-bottom: 2px solid var(--about-brand); }
.brand-lockup { display: flex; align-items: center; gap: 20px; min-width: 0; }
.logo-link { display: inline-block; flex: 0 0 auto; }
.site-logo { display: block; width: 166px; height: auto; }
.brand-lockup p { max-width: 34ch; margin: 0; color: var(--about-copy); font-size: .94rem; line-height: 1.45; }
.board-link,
.primary-action,
.secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.board-link { flex: 0 0 auto; padding: 9px 14px; color: var(--about-ink); border: 1px solid var(--about-rule); border-radius: 2px; }
.board-link:hover { border-color: var(--about-brand); }

main { padding: clamp(52px, 6vw, 80px) 0 clamp(72px, 8vw, 104px); }
.about-hero { max-width: var(--about-reading-measure); padding-bottom: clamp(46px, 5.5vw, 68px); }
.eyebrow,
.section-kicker { margin: 0 0 10px; color: var(--about-brand); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1,
h2 { margin: 0; color: var(--about-ink); letter-spacing: -.04em; }
h1 { max-width: 16ch; font-size: clamp(3.6rem, 6vw, 5.65rem); line-height: .96; }
h2 { max-width: 17ch; font-size: clamp(1.7rem, 2.55vw, 2.32rem); line-height: 1.06; }
.lead { max-width: var(--about-reading-measure); margin: 24px 0 0; color: var(--about-copy); font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.62; }

/* One editorial system drives each narrative section. Grid children may shrink,
   while the copy track itself retains a readable measure. */
.about-section { display: grid; grid-template-columns: minmax(230px, .52fr) minmax(0, 1.48fr); gap: clamp(40px, 6vw, 72px); align-items: start; min-width: 0; padding: var(--about-section-space) 0; border-top: 1px solid var(--about-rule); }
.about-section > * { min-width: 0; }
.about-section > div:first-child { padding-left: 16px; border-left: 2px solid var(--about-brand); }
.about-split { padding-bottom: clamp(34px, 4vw, 48px); }
.prose { width: min(100%, var(--about-reading-measure)); min-width: 0; }
.prose p { margin: 0; color: var(--about-copy); font-size: 1.09375rem; line-height: 1.64; overflow-wrap: break-word; }
.prose p + p { margin-top: 16px; }
.prose a { font-weight: 700; text-underline-offset: 3px; }

.mission-note { width: min(100%, 650px); margin: clamp(28px, 4vw, 48px) 0 clamp(52px, 7vw, 82px); padding: 0; color: var(--about-ink); background: transparent; border: 0; }
.mission-note p { margin: 0; font-family: "IBM Plex Serif", serif; font-size: clamp(2.2rem, 4vw, 2.75rem); line-height: 1.15; }

/* The principles are one restrained editorial band, not a collection of UI cards. */
.principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 52px); padding-top: clamp(50px, 6vw, 72px); }
.principles article { display: grid; grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; }
.principles h2 { max-width: 12ch; margin-top: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.principles article > p:last-child { max-width: 25ch; margin: 14px 0 0; color: var(--about-copy); font-size: 1rem; line-height: 1.6; }
.principle-number { margin: 0 0 12px; color: var(--about-brand); font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1; }

/* The founder story is a bounded panel, never a full-viewport height or a
   nested fractional-width layout. It therefore remains content-driven. */
.founder-section { grid-template-columns: minmax(230px, .52fr) minmax(0, 1.48fr); gap: clamp(40px, 6vw, 72px); margin-top: 0; padding: var(--about-section-space) 0; background: transparent; border-top: 1px solid var(--about-rule); }
.founder-content { display: grid; grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 40px); align-items: start; min-width: 0; }
.founder-content > * { min-width: 0; }
.founder-photo { width: 100%; margin: 0; }
.founder-photo img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--about-rule); border-radius: 0; box-shadow: none; }
.founder-photo figcaption { margin-top: 10px; color: var(--about-copy); font-size: .8125rem; line-height: 1.45; }
.founder-content .prose { max-width: 52ch; }

.about-closing { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); grid-template-areas: "kicker kicker" "headline support" "headline actions"; column-gap: clamp(40px, 7vw, 88px); row-gap: 0; width: 100%; margin: var(--about-section-space) 0 0; padding: clamp(34px, 5vw, 56px); color: var(--about-paper); background: var(--about-ink); border-top: 3px solid var(--about-brand); }
.about-closing .section-kicker { grid-area: kicker; margin-bottom: 14px; }
.about-closing h2 { grid-area: headline; max-width: 15ch; color: var(--about-paper); }
.about-closing > p:not(.section-kicker) { grid-area: support; max-width: 38ch; margin: 0; color: var(--about-neutral); font-size: 1.0625rem; line-height: 1.62; }
.about-closing .section-kicker { color: var(--about-brand); }
.closing-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.primary-action { padding: 10px 16px; color: var(--about-paper); background: var(--about-brand); border: 1px solid var(--about-brand); border-radius: 2px; }
.primary-action:hover { color: var(--about-paper); background: var(--about-brand); }
.secondary-action { padding: 10px 12px; color: var(--about-paper); border-bottom: 1px solid var(--about-brand); }
.secondary-action:hover { color: var(--about-paper); }

.site-footer { width: 100%; padding: 30px 0 28px; color: var(--about-neutral); background: var(--about-ink); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(160px, .65fr) minmax(250px, 1fr); gap: clamp(24px, 4vw, 48px); width: min(var(--about-container), calc(100% - (var(--about-gutter) * 2))); margin-inline: auto; align-items: end; }
.footer-logo { display: block; width: 164px; height: auto; }
.footer-community,
.footer-utility p { margin: 8px 0 0; color: var(--about-neutral); font-size: .875rem; line-height: 1.5; }
.footer-nav { display: grid; gap: 8px; }
.footer-nav a,
.footer-utility a { color: var(--about-paper); font-size: .875rem; }
.footer-credit { max-width: 34ch; }

/* The page ends close enough to the footer to read as one closing movement. */
main:has(.about-closing) { padding-bottom: clamp(36px, 5vw, 56px); }

/* The founder heading moves above its media-and-copy pair before the nested
   columns can make the biography uncomfortably narrow. */
@media (max-width: 1100px) {
  .founder-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(40px, 5vw, 54px); }
}

@media (max-width: 900px) {
  .site-header { min-height: 98px; }
  .about-section,
  .founder-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  h2 { max-width: 22ch; }
  .founder-section { padding: clamp(36px, 6vw, 56px); }
  .founder-content { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); }
  .footer-utility { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --about-gutter: 16px; }
  .site-header { align-items: flex-start; min-height: 0; padding: 18px 0; }
  .brand-lockup { display: grid; gap: 8px; }
  .site-logo { width: 142px; }
  main { padding-top: 48px; }
  .about-section { gap: 18px; padding: 34px 0; }
  .founder-section { gap: 20px; margin-top: 12px; padding: 34px 24px; }
  .founder-content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .founder-photo { width: min(100%, 340px); }
  .about-closing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "headline" "support" "actions"; row-gap: 18px; padding: 32px 24px; }
  .about-closing .section-kicker { margin-bottom: 0; }
  .closing-actions { margin-top: 4px; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
  .footer-utility { grid-column: auto; }
}

@media (max-width: 430px) {
  .brand-lockup p { display: none; }
  .site-logo { width: 128px; }
  .board-link { padding-inline: 10px; font-size: .875rem; }
  h1 { font-size: clamp(2.55rem, 13vw, 3.35rem); }
  .closing-actions { display: grid; grid-template-columns: 1fr; }
  .secondary-action { justify-content: flex-start; }
}