/* The site's own copies of the Arcade pairing (Latin letters only), so it loads nothing from anywhere else.
   Press Start 2P and Space Mono are open-source fonts under the SIL Open Font License 1.1. */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/press-start-2p.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/space-mono-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* a way past the menu for keyboard and screen-reader users: off screen until it has focus */
.skip { position: absolute; left: 12px; top: -80px; z-index: 40; padding: 12px 16px; background: #fff; color: #000; font: 600 16px/1 system-ui, "Segoe UI", Arial, sans-serif; text-decoration: none; }
.skip:focus { top: 12px; }

/* wrapping manners, shared by every look: dates stay whole, paragraphs avoid one-word last lines */
.nb { white-space: nowrap; }
p, li, dd { text-wrap: pretty; }
/* "A · B · C" lines. Each item carries its dot in a slot on its left; the row is pulled left by one slot
   and clipped there, so whichever item starts a line shows no dot and none is ever left hanging. */
.dots { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--dot, 1.1em)); clip-path: inset(0 0 0 var(--dot, 1.1em)); }
.dots > span { position: relative; padding-left: var(--dot, 1.1em); }
.dots > span::before { content: "\00B7"; position: absolute; left: 0; width: var(--dot, 1.1em); text-align: center; }

/* a photo card, shared by every look: the photo is a box with a floor on its shape (3:2, or 4:3 for the award)
   that grows when its card is stretched to match a taller neighbor. The picture covers the box, anchored so the
   faces stay in view; both source photos are cut taller than the box so growing shows more, not less. */
.feature { display: flex; flex-direction: column; }
.shot { position: relative; flex: 1 0 auto; aspect-ratio: 3 / 2; overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.award .shot { aspect-ratio: 4 / 3; }
.award .shot img { object-position: 50% 0; }
.club .shot img { object-position: 50% 34%; }

/* Mike's line in About: each sentence starts its own line. The LED goal sign is drawn only by looks that want it. */
.statement span { display: block; }
.goal-sign { display: none; }

/* text for screen readers only: the organization names, which the logos show to everyone else */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* employer logos: transparent cut-outs in one flat color, so a logo sits on the page like type instead of as a
   picture in a white box. White here; a color scheme can swap in the gold, green or red files. */
.logo { display: block; flex: none; background: left center / contain no-repeat; }
.logo-charlotte { aspect-ratio: 480 / 221; background-image: url("logo-charlotte-white.png"); }
.logo-cfa { aspect-ratio: 480 / 219; background-image: url("logo-cfa-white.png"); }

/* video preview card, shared by every look */
.vid { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: #fff; text-decoration: none; }
.vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vid:hover img { transform: scale(1.03); }
.vid-title { position: absolute; inset: 0 0 auto 0; padding: 14px 16px 38px; background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); font: 600 clamp(13px, 1.5vw, 16px)/1.25 "Barlow", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.vid-title small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; opacity: .85; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: #e4281b; transition: transform .15s ease; }
.vid-play::after { content: ""; position: absolute; left: 27px; top: 13px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.vid:hover .vid-play { transform: scale(1.1); }
.vid-yt { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; background: rgba(0, 0, 0, .72); font: 500 15px/1 "Barlow", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.vid-yt b { font-weight: 600; }
.yt-mark { position: relative; display: inline-block; width: 22px; height: 15px; border-radius: 4px; background: #e4281b; }
.yt-mark::after { content: ""; position: absolute; left: 9px; top: 4px; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #fff; }
@media (prefers-reduced-motion: reduce) { .vid img, .vid-play { transition: none; } }
/* GAME PLAN. A drafting grid: a sticky bar and a full-width header on top (name and intro on the left, framed
   portrait on the right), then six numbered sections in one centered column.
   Every color is a token below, so a color scheme is a short file that changes tokens and nothing else:
   --gold is the everyday accent, --spark marks the special parts only (the results, the 1x counts, section
   numbers, the photo's corner marks). Every type pairing is a short file too: --display, --body and --mono name
   the faces, --k scales the display sizes for faces that run wider, and --h1 sizes the name to its column.
   Sections sit one --gap apart with no rule between them: each heading carries its own. */
:root {
  color-scheme: dark;
  --bg: #012b1e;
  --panel: #01341f;
  --chalk: #f1eedf;
  --dim: #9dbbac;
  --gold: #d4bd7c;
  --spark: var(--gold);
  --line: rgba(212, 189, 124, .36);
  --hair: rgba(241, 238, 223, .14);
  --grid: rgba(241, 238, 223, .035);
  --grid-major: rgba(241, 238, 223, .06);
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body: "Barlow", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --k: 1;
  --h1: 15.4cqw;
  --gutter: clamp(18px, 4vw, 48px);
  --pad: max(var(--gutter), calc((100% - 1140px) / 2));
  --gap: clamp(34px, 4.6vw, 54px);
  --dot: 2em;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--chalk);
  font: 400 17px/1.6 var(--body);
}
h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; text-wrap: balance; }
a { color: inherit; text-underline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 600; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.btn { display: inline-block; padding: 13px 17px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold); font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn.primary { background: var(--gold); color: var(--bg); }
.btn:hover { background: var(--chalk); border-color: var(--chalk); color: var(--bg); }
.pts { display: grid; gap: 7px; }
.pts li { position: relative; padding-left: 20px; }
.pts li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1.5px; background: var(--gold); }
.when, .org, .id-role, .sub, .ways .k, .skills h3 { font: 500 12.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.when, .org { color: var(--dim); }
.fig img { width: 100%; }
.fig figcaption { margin-top: 7px; color: var(--dim); font-size: 14.5px; line-height: 1.4; }

/* bar */
.topnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding-inline: var(--pad); border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { font: 900 calc(21px * var(--k))/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.topnav ul { display: flex; gap: clamp(14px, 2vw, 24px); counter-reset: nav; }
.topnav li { counter-increment: nav; }
.topnav li a { display: block; margin-bottom: -1px; padding-block: 21px 19px; border-bottom: 2px solid transparent; color: var(--dim); font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.topnav li a::before { content: counter(nav, decimal-leading-zero); margin-right: 8px; color: var(--spark); }
.topnav li a:hover, .topnav li a[aria-current="true"] { color: var(--chalk); }
.topnav li a[aria-current="true"] { border-bottom-color: var(--spark); }
.menu-btn { display: none; }
@media (max-width: 1059px) { .topnav li a::before { content: none; } }

/* header */
.id { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 380px); gap: clamp(28px, 5.5vw, 80px); align-items: center; padding: clamp(26px, 4vw, 52px) var(--pad) 0; }
.id-main { grid-column: 1; grid-row: 1; min-width: 0; container-type: inline-size; }
/* the portrait sits in a thin frame with two corner marks, like a part called out on a plan */
.id-photo { position: relative; grid-column: 2; grid-row: 1; margin: 10px; padding: 8px; border: 1px solid var(--line); }
.id-photo::before, .id-photo::after { content: ""; position: absolute; width: 30px; height: 30px; }
.id-photo::before { left: -11px; top: -11px; border-left: 2px solid var(--spark); border-top: 2px solid var(--spark); }
.id-photo::after { right: -11px; bottom: -11px; border-right: 2px solid var(--spark); border-bottom: 2px solid var(--spark); }
.id-photo img { width: 100%; }
.id-role { color: var(--dim); }
h1 { margin-top: 12px; font-size: clamp(calc(46px * var(--k)), var(--h1), calc(128px * var(--k))); line-height: .88; }
h1 span { display: block; white-space: nowrap; }
h1 .last { color: var(--gold); }
.id-lede { max-width: 48ch; margin-top: clamp(18px, 2.4vw, 24px); font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; }
.hello { color: var(--gold); font-weight: 600; }
.id-status { display: flex; align-items: center; gap: 12px; margin-top: 20px; font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.id-status::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.id-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* at a glance: three results in one strip under the header. Every cell has the same three parts (the figure,
   what it is, one line) and opens the part of the page it comes from. */
.results { padding: clamp(24px, 3.4vw, 40px) var(--pad) 0; }
.results ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel); }
.results li { min-width: 0; border-left: 1px solid var(--line); }
.results li:first-child { border-left: 0; }
.results a { display: flex; flex-direction: column; height: 100%; padding: 16px clamp(16px, 2vw, 24px) 17px; text-decoration: none; transition: background-color .15s; }
.results a:hover { background: rgba(255, 255, 255, .035); }
.results b { display: block; color: var(--spark); font: 900 calc(clamp(44px, 4.6vw, 60px) * var(--k))/.84 var(--display); text-transform: uppercase; white-space: nowrap; }
.results b small { margin-left: .22em; color: var(--chalk); font-size: .38em; letter-spacing: .06em; }
.results .k { margin-top: 12px; color: var(--chalk); font: 500 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.results .d { margin-top: 3px; color: var(--dim); font-size: 14.5px; line-height: 1.35; }
/* each result says where it leads, so it reads as a link */
.results .go { margin-top: auto; padding-top: 12px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.results .go::after { content: " \2192"; }
.results a:hover .go, .results a:focus-visible .go { color: var(--spark); }

/* sections */
main { padding-inline: var(--pad); }
.sec { padding-top: var(--gap); scroll-margin-top: calc(76px - var(--gap)); }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(16px, 2.2vw, 24px); }
.sec-n { color: var(--spark); font: 500 13px/1 var(--mono); letter-spacing: .08em; }
h2 { font-size: calc(clamp(40px, 5.2vw, 64px) * var(--k)); line-height: .88; }
.sec-head::after { content: ""; flex: 1; align-self: center; min-width: 24px; height: 9px; border-inline: 1px solid var(--line); background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }

/* about: Mike's mission across the top, centered, then the two program photos, then the skills in one strip */
.mission { text-align: center; }
.mission .k { color: var(--gold); font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mission .k { color: var(--dim); }
.statement { margin-top: 8px; color: var(--chalk); font: 900 calc(clamp(30px, 3.6vw, 48px) * var(--k))/1 var(--display); text-transform: uppercase; text-wrap: balance; }
.statement span { display: block; margin-top: .12em; color: var(--spark); }
/* the team under each project: a grid of player cards with initials in the display face. Mike's card is in the
   spark color; the faculty advisor's runs the full width */
.team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.team-k { color: var(--gold); font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.crew li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); }
.crew .av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); color: var(--chalk); font: 900 calc(26px * var(--k))/1 var(--display); text-transform: uppercase; }
.crew .who { min-width: 0; }
.crew b { display: block; color: var(--chalk); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.crew small { display: block; margin-top: 3px; color: var(--dim); font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.crew .me { border-color: var(--spark); }
.crew .me .av { border-color: var(--spark); background: var(--spark); color: var(--bg); }
.crew .adv { grid-column: 1 / -1; border-style: dashed; }
@media (max-width: 519px) { .crew { grid-template-columns: minmax(0, 1fr); } }
.about-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); margin-top: clamp(18px, 2.6vw, 26px); }
.about-photos img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border: 1px solid var(--line); }
.skills { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px clamp(18px, 3vw, 36px); align-items: start; margin-top: clamp(22px, 3vw, 30px); padding-top: 16px; border-top: 1px solid var(--line); }
.skills h3 { padding-top: 2px; color: var(--dim); letter-spacing: .1em; }
.skills dl { display: contents; }
.skills dt { color: var(--chalk); font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.skills dd { margin-top: 3px; color: var(--dim); font-size: 15px; line-height: 1.45; }
.sub { padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--dim); letter-spacing: .1em; }

/* projects: two matching case-study cards side by side. Each card is its picture (16:9), then the course and
   dates, the name, the result, and the same four labeled lines; the cards stretch to the same height.
   The lesson from the Expo closes the section. */
.projs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.proj { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.proj-media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.proj-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proj-media .team { object-position: 50% 84%; }   /* the whole team and the machine, with room above their heads */
.proj-main { flex: 1; padding: clamp(16px, 2.2vw, 24px); }
.proj .when span { display: block; }
.proj h3 { margin-top: 8px; font-size: calc(clamp(30px, 3.2vw, 42px) * var(--k)); line-height: .92; }
.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; color: var(--dim); font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.result b { color: var(--spark); font: 900 calc(clamp(22px, 2.2vw, 26px) * var(--k))/1 var(--display); letter-spacing: .02em; }
.brief { margin-top: 16px; }
.brief > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; padding-block: 10px; border-top: 1px solid var(--hair); }
.brief > div:last-child { padding-bottom: 0; }
.brief dt { padding-top: 3px; color: var(--gold); font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brief dd { font-size: 15.5px; line-height: 1.5; }
.lesson { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: clamp(16px, 2.4vw, 24px); padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--line); }
.lesson p { font: 900 calc(clamp(22px, 2.4vw, 30px) * var(--k))/1 var(--display); text-transform: uppercase; text-wrap: balance; }
.lesson figcaption { color: var(--dim); font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* experience: one block per employer. The logo heads it with a measured rule running out to how long and how
   many roles; the roles sit on a rail under it. */
.employer + .employer { margin-top: clamp(28px, 3.6vw, 40px); }
.org-head { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px); }
.org-head .logo { height: clamp(56px, 6.4vw, 84px); }
.org-head::after { content: ""; order: 1; flex: 1; min-width: 24px; height: 9px; border-inline: 1px solid var(--line); background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.org-meta { order: 2; color: var(--dim); font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.jobs { --in: clamp(22px, 3vw, 38px); margin: clamp(16px, 2.2vw, 22px) 0 0 6px; padding-left: var(--in); border-left: 1px solid var(--line); }
.job { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px clamp(22px, 4vw, 56px); padding-bottom: clamp(18px, 2.4vw, 24px); }
.job:last-child { padding-bottom: 0; }
.job::before { content: ""; position: absolute; left: calc(-1 * var(--in) - 6px); top: 5px; width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); }
.job .when { grid-column: 1; color: var(--gold); }
.job-main { display: contents; }
.job h4 { grid-column: 1; font-size: calc(clamp(24px, 2.6vw, 34px) * var(--k)); line-height: .92; }
.job .org { grid-column: 1; margin-top: 5px; }
.job .pts { grid-column: 2; grid-row: 1 / span 3; padding-top: 2px; }

/* honors, activities: every photo is the top of the card it belongs to, and a card's photo grows so the
   two columns of a row end level */
.split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); }
/* activities: the club on the left; wrestling, then volunteering, down the right */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.side { display: grid; align-content: start; gap: clamp(20px, 2.6vw, 26px); min-width: 0; }
.lines li { padding-block: 13px; border-bottom: 1px solid var(--hair); }
.lines li:first-child { padding-top: 0; }
.lines li:last-child { padding-bottom: 0; border-bottom: 0; }
.lines h3, .lines h4 { font-size: calc(clamp(23px, 2.4vw, 29px) * var(--k)); line-height: .96; }
.lines .x { color: var(--spark); }
.lines .org { margin-top: 6px; color: var(--gold); font-size: 12px; }
.lines .desc { margin-top: 5px; color: var(--dim); font-size: 15.5px; line-height: 1.5; }
.feature { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.shot { border-bottom: 1px solid var(--line); }
.feature-body { padding: clamp(15px, 1.9vw, 20px); }
.feature h3 { font-size: calc(clamp(27px, 3vw, 37px) * var(--k)); line-height: .92; }
.feature .org { margin-top: 7px; color: var(--gold); }
.feature .result { margin-top: 9px; }
.feature .desc, .feature .pts { margin-top: 10px; }
.feature .desc { color: var(--dim); }


/* contact: the invitation on the left, the ways to reach Mike on the right */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px clamp(24px, 4vw, 48px); align-items: center; padding: clamp(18px, 2.8vw, 32px); border: 1.5px solid var(--gold); background: var(--panel); }
.contact-lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; }
.ways li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding-block: 11px; border-bottom: 1px solid var(--hair); }
.ways li:first-child { padding-top: 0; }
.ways li:last-child { padding-bottom: 0; border-bottom: 0; }
.ways .k { color: var(--dim); font-size: 11.5px; }
.ways .v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.ways a { font-size: clamp(16px, 1.7vw, 19px); font-weight: 600; overflow-wrap: anywhere; }
.ways .btn { padding: 8px 11px; font-size: 12px; }
.foot { padding: clamp(22px, 3.4vw, 34px) var(--pad) 36px; color: var(--dim); font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* tablet and phone */

@media (max-width: 899px) {
  .sec { scroll-margin-top: calc(78px - var(--gap)); }
  .topnav { min-height: 58px; }
  .menu-btn { display: block; padding: 11px 15px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold); font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .topnav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--pad) 12px; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 20px 30px rgba(0, 0, 0, .35); }
  .topnav[data-open="true"] ul { display: block; }
  .topnav li a { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
  .topnav li a::before { content: counter(nav, decimal-leading-zero); }
  .topnav li:last-child a { border-bottom: 0; }
  .topnav li a[aria-current="true"] { border-bottom-color: var(--hair); color: var(--spark); }
  .split, .contact, .projs { grid-template-columns: minmax(0, 1fr); }
  /* the skills read as rows: the group, then what is in it */
  .skills { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .skills dl { display: grid; gap: 9px; }
  .skills dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; }
  .skills dd { margin-top: 0; }

  .job { grid-template-columns: minmax(0, 1fr); }
  .job .pts { grid-column: 1; grid-row: auto; margin-top: 10px; padding-top: 0; }
}
/* in between: an award reads across (name and date, then what it was for), and its photo card lies on its side */
@media (min-width: 600px) and (max-width: 899px) {
  .split .lines li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(20px, 4vw, 32px); align-items: center; }
  .split .lines li > * { grid-column: 1; }
  .split .lines li > .desc { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .award { flex-direction: row; }
  .award .shot { flex: 0 0 42%; aspect-ratio: auto; min-height: 230px; border-bottom: 0; border-right: 1px solid var(--line); }
  .award .feature-body { align-self: center; }
}
@media (max-width: 699px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  /* the whole portrait first, hand sign included, at a size that leaves the name on the first screen */
  .id { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .id-main, .id-photo { grid-column: 1; grid-row: auto; }
  .id-photo { width: min(236px, 64%); }
  /* the three results stack: each figure, with what it is and its line beside it */
  .results ul { grid-template-columns: minmax(0, 1fr); }
  .results li { border-left: 0; border-top: 1px solid var(--line); }
  .results li:first-child { border-top: 0; }
  .results a { display: grid; grid-template-columns: minmax(118px, auto) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; padding: 13px 16px; }
  .results b { grid-row: 1 / span 3; align-self: center; }
  .results .go { grid-column: 2; padding-top: 7px; }
  .results .k { margin-top: 0; align-self: end; }
  .results .d { align-self: start; }
}
@media (max-width: 599px) {
  .org-head::after { display: none; }
  .about-photos { grid-template-columns: minmax(0, 1fr); }
  .brief > div { grid-template-columns: minmax(0, 1fr); }
  .brief dt { padding: 0 0 3px; }
  .skills dl > div { grid-template-columns: minmax(0, 1fr); }
  .skills dd { margin-top: 2px; }
}
@media (max-width: 560px) {
  #honors .sec-head::after { display: none; }
  .ways li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* BLACK: black first, white second. Black ground, white type, neutral rules, white logos, and silver where the green look
   uses gold (the surname, Mike's line, dates and markers). The special parts (--spark) are plain white here;
   Black + Blue and Black + Green, which load after this file, turn only those blue or green. */
:root {
  --bg: #0a0a0b;
  --panel: #131315;
  --chalk: #f5f5f3;
  --dim: #a3a3a9;
  --gold: #c9c9cf;
  --spark: #ffffff;
  --line: rgba(255, 255, 255, .22);
  --hair: rgba(255, 255, 255, .11);
  --grid: rgba(255, 255, 255, .028);
  --grid-major: rgba(255, 255, 255, .05);
}
/* the main button is white, so it reads as the one to press */
.btn.primary { border-color: var(--chalk); background: var(--chalk); }
/* the small labels stay quiet */
.ways .k, .lines .org, .feature .org, .org-meta { color: var(--dim); }

/* BLACK + PURPLE: the Black scheme with purple on the special parts only. 7.3:1 against the black. */
:root { --spark: #a78bfa; }
/* ARCADE type: Press Start 2P, the 8-bit arcade face, for the headings; Space Mono for the reading and the labels.
   Press Start 2P has one weight, and every letter is a full square, about twice as wide as the poster face, so
   the headings stay at 400 (no fake bold), the display sizes scale well down (--k), lines get room to breathe,
   and the name is sized to its column (--h1). */
:root { --display: "Press Start 2P", "Courier New", monospace; --body: "Space Mono", Consolas, "Courier New", monospace; --mono: "Space Mono", Consolas, "Courier New", monospace; --k: .5; --h1: 6.5cqw; }
h1, h2, h3, h4, .brand, .statement, .results b, .result b, .lesson p { font-weight: 400; }
h1 { font-size: clamp(16px, var(--h1), 64px); line-height: 1.2; }   /* a lower floor than the others: at 320px wide the name needs under 21px */
h2, .proj h3, .job h4, .lines h3, .lines h4, .feature h3 { line-height: 1.25; }
.statement, .lesson p { line-height: 1.35; }
.statement { font-size: calc(clamp(30px, 3.6vw, 48px) * .62); }   /* a step up, so the centered mission fills more of its width */
.results b { font-size: calc(clamp(44px, 4.6vw, 60px) * .6); line-height: 1.1; }
body { font-size: 15px; }
.results .d, .lines .desc, .feature .desc, .skills dd, .brief dd { font-size: 14px; }
/* phones: one width for every result's figure column, wide enough for 4TH OF 32, so the words beside them line up */
@media (max-width: 699px) { .results a { grid-template-columns: 136px minmax(0, 1fr); } }
.crew .av { font-weight: 400; }
.hello { margin-right: -.3em; }   /* a mono face gives the full stop a whole letter's width, so the space after it reads double */

/* the page for an address that does not exist */
.lost { max-width: 760px; padding: clamp(56px, 12vw, 140px) var(--pad) clamp(56px, 10vw, 120px); }
.lost h1 { margin-top: 14px; font-size: clamp(54px, 11vw, 112px); line-height: .88; }
.lost .id-lede { margin-top: 20px; }