/* MissionOaks.dev, the About page (/about, served by about.php). The look is the Video Day page's (his reel's title boxes, approved
   Oct 5): same colours, font and button. Nothing here is loaded from another site.
   Why each part is the way it is: .claude/tasks/about-page-2026-10-06.md */

@font-face {
  font-family: "Archivo";
  src: url("/webfonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ground: #0a1f18;
  --card: #0f2a21;
  --line: #25473d;
  --mint: #40d39a;
  --mint-deep: #04a77d;
  --ink: #06140f;
  --paper: #eef5f1;
  --soft: #a9c2b8;
  --yellow: #ffe500;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* the width of the photo: the name above it is sized from it */
  --w: min(78vw, 340px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
main { overflow: hidden; }
h1, h2, p { margin: 0; }

/* top bar */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 18px;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 6px 0; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.2px; }
.brand img { width: 32px; height: 32px; }
.top-cta {
  flex: none;
  padding: 9px 14px;
  border: 1.5px solid var(--mint);
  border-radius: 999px;
  color: var(--mint);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.top-cta:hover, .top-cta:focus-visible { background: var(--mint); color: var(--ink); }

/* first screen: his name in his reel's title boxes, his role, his photo */
.hero { display: flex; flex-direction: column; align-items: center; padding: 22px 18px 8px; text-align: center; }
h1 {
  font-weight: 900;
  font-stretch: 100%;
  font-size: calc(var(--w) * 0.2);
  line-height: 1;
  letter-spacing: -0.02em;
}
h1 .l { display: block; white-space: nowrap; }
h1 .box { display: inline-block; padding: 0.14em 0.28em 0.18em; background: #000; color: #fff; }
h1 .box.mint { background: var(--mint); color: var(--ink); }
h1 .l + .l { margin-top: calc(var(--w) * 0.02); }

.role { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--soft); }

/* no border and no shadow: the second read named a thin border as a template tell (Oct 6) */
.photo {
  width: var(--w);
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* the second photo: him on camera, beside how he works */
.photo2 { width: 58%; max-width: 220px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }

/* the letter */
.letter { max-width: 34rem; margin: 0 auto; padding: 30px 22px 8px; }
/* one hairline only, above the ask (the second read, Oct 6: a line over every section reads as a template) */
.letter section { padding: 18px 0; }
.letter section.last { margin-top: 14px; padding-top: 30px; border-top: 1px solid var(--line); }
.letter h2 { font-size: clamp(24px, 7.4vw, 28px); line-height: 1.12; font-weight: 900; letter-spacing: -0.02em; }
.letter p { margin-top: 12px; }
.letter p:first-child { margin-top: 0; }
.letter h2 + p { margin-top: 10px; }
.say { font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.proof { font-size: 20px; font-weight: 800; color: var(--mint); }
.in { color: var(--paper); text-underline-offset: 3px; }
.in:hover, .in:focus-visible { color: var(--mint); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* the one ask, and one link to what he does */
.last { text-align: center; }
.what { margin-bottom: 16px; font-size: 18px; font-weight: 700; }
.what a { padding: 10px 0; }
.cta {
  display: block;
  margin: 6px auto 0;
  padding: 17px 20px 16px;
  max-width: 22rem;
  background: var(--mint);
  color: var(--ink);
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  box-shadow: 0 6px 0 var(--mint-deep);
}
.cta:hover, .cta:focus-visible { transform: translateY(2px); box-shadow: 0 4px 0 var(--mint-deep); }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.or { max-width: 22rem; margin: 18px auto 0; font-size: 16px; line-height: 1.9; color: var(--soft); }
.or a { padding: 10px 0; }

footer { max-width: 34rem; margin: 0 auto; padding: 26px 22px 40px; border-top: 1px solid var(--line); color: var(--soft); font-size: 15px; }
footer p + p { margin-top: 6px; }
footer a { text-underline-offset: 3px; }
.legal { display: flex; gap: 18px; }
.legal a { padding: 10px 0; }

@media (min-width: 760px) {
  :root { --w: 360px; }
  .say { font-size: 28px; }
}
@media (max-width: 349px) {
  .top { padding-left: 14px; padding-right: 14px; }
  .brand { min-width: 0; font-size: 16px; }
}