/* Eight visible portfolio sections, a career timeline, and open Inspection. */

body:not(.board-page) .site-header { position: relative; gap: 28px; }
body:not(.board-page) .site-header .menu-toggle { display: flex; align-items: center; margin-left: auto; min-height: 44px; }
body:not(.board-page) .site-header .contact-link { margin-left: 0; }
body:not(.board-page) .site-nav { display: none; position: absolute; z-index: 30; top: 100%; right: 0; left: auto; width: min(420px, 100%); height: auto; padding: 10px; background: #11191d; border: 1px solid var(--line); box-shadow: 0 16px 35px #0008; }
body:not(.board-page) .site-nav.is-open { display: grid; gap: 0; }
body:not(.board-page) .site-nav a { min-height: 44px; padding: 10px 12px; font-size: 13px; line-height: 1.35; }
body:not(.board-page) .site-nav a:hover { background: #202b30; }
body:not(.board-page) .site-nav a[aria-current]::after { bottom: 5px; left: 12px; right: 12px; }

body.board-page .board-panel-home .board-header { height: 48px; gap: 28px; }
body.board-page .board-panel-home .board-header .wordmark { font-size: 22px; }
body.board-page .board-panel-home .board-nav a { font-size: 11px; }
body.board-page .board-panel-home .board-header > .contact-link { align-self: center; margin-top: 0; font-size: 12px; }
body.board-page .overview-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 2px 0 13px; }
body.board-page .overview-intro h1 { font-size: clamp(20px, 1.65vw, 29px); line-height: 1.15; letter-spacing: .05px; }
body.board-page .overview-intro p { font-size: 11px; line-height: 1.4; text-align: right; }
body.board-page .header-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 0 15px; padding: 0; border-top: 1px solid #465056; }
body.board-page .header-timeline li { position: relative; min-width: 0; padding: 10px 12px 0 0; }
body.board-page .header-timeline li::before { content: ''; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; background: var(--red); }
body.board-page .header-timeline .timeline-years { display: block; font-family: var(--heading); font-size: clamp(20px, 1.6vw, 28px); line-height: 1.1; color: var(--ink); }
body.board-page .header-timeline li > span:last-child { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }

/* Two equal halves. Structural and Kasatka each occupy a quarter. */
body.board-page .hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: clamp(410px, 28vw, 510px); }
body.board-page .hero-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
body.board-page .hero-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(128px, 1fr)); gap: 10px; min-width: 0; }
body.board-page .hero-card { position: relative; display: flex; min-width: 0; isolation: isolate; overflow: hidden; border: 1px solid #465056; background: #12191d; transition: border-color .2s, background-color .2s; }
body.board-page .hero-card:hover { border-color: #a9b3b7; }
body.board-page .hero-card .arrow { font-size: 24px; transition: transform .2s; }
body.board-page .hero-card:hover .arrow { transform: translate(2px, -2px); }
body.board-page .hero-major { flex-direction: column; }
body.board-page .hero-copy { position: relative; z-index: 1; min-width: 0; }
body.board-page .hero-major .hero-copy { padding: 18px 16px 14px; }
body.board-page .hero-kicker { display: block; margin-bottom: 10px; color: #d8dfe1; font-size: 9px; font-weight: 700; line-height: 1.35; letter-spacing: 1px; text-transform: uppercase; }
body.board-page .hero-kicker::before { content: ''; display: inline-block; width: 13px; height: 3px; margin: 0 7px 2px 0; background: var(--red); }
body.board-page .hero-major h2 { font-size: clamp(29px, 2.25vw, 42px); line-height: 1.02; letter-spacing: -.35px; }
body.board-page .hero-copy p { margin-top: 9px; font-size: 11px; line-height: 1.4; color: #c4cdd1; }
body.board-page .hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
body.board-page .hero-structural .hero-photo { object-position: 50% 82%; }
body.board-page .hero-structural::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #071014f2, #0710148c 36%, #0710140d 65%, #050b0edd); }
body.board-page .hero-card-foot { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding: 15px 16px; font-size: 10px; line-height: 1.35; color: #e0e6e8; }
body.board-page .hero-card-foot > span > span { display: block; margin-top: 4px; font-size: 9px; color: #b8c4c9; }
body.board-page .hero-kasatka { background: linear-gradient(135deg, #182226, #080d10); }
body.board-page .hero-kasatka-heading { display: flex; align-items: center; gap: 6px; }
body.board-page .hero-kasatka-heading h2 { flex: 1; min-width: 0; }
body.board-page .hero-kasatka-heading img { flex: 0 0 24%; width: 24%; max-width: 86px; height: auto; object-fit: contain; }
body.board-page .hero-kasatka .hero-copy p { color: var(--red); font-size: 12px; }
body.board-page .hero-report { margin: 0 13px; border: 1px solid #485358; background: #06090a; }
body.board-page .hero-report img { width: 100%; height: auto; object-fit: contain; }
body.board-page .hero-report-caption { padding: 9px 14px 0; font-size: 11px; line-height: 1.35; }
body.board-page .hero-report-caption span { display: block; margin-top: 3px; color: var(--dim); font-size: 9px; }
body.board-page .hero-kasatka .hero-card-foot { padding-top: 10px; }
body.board-page .hero-minor { align-items: center; }
body.board-page .hero-minor .hero-copy { width: 100%; padding: 14px 33px 14px 16px; }
body.board-page .hero-minor .hero-kicker { margin-bottom: 7px; font-size: 8px; letter-spacing: .8px; }
body.board-page .hero-minor h2 { font-size: clamp(22px, 1.65vw, 30px); line-height: 1.03; }
body.board-page .hero-minor .hero-copy p { margin-top: 7px; font-size: 11px; }
body.board-page .hero-minor > .arrow { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: 20px; }
body.board-page .hero-trading { background: linear-gradient(120deg, #142226, #0b1116); }
body.board-page .hero-trading .hero-photo { object-position: 50% 35%; }
body.board-page .hero-trading::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #070d16ed, #080e18a8 48%, #080e1828); }
body.board-page .hero-theatre { background: linear-gradient(110deg, #1f1015, #3b0912); }
body.board-page .hero-theatre .hero-copy { padding-right: 111px; }
body.board-page .hero-theatre-logo { position: absolute; right: -4px; top: 50%; width: 118px; height: 140px; transform: translateY(-50%); object-fit: contain; }
body.board-page .hero-mars .hero-photo { object-position: 50% 62%; }
body.board-page .hero-mars::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071015f5, #071015b8 62%, #07101555); }
body.board-page .hero-mars .hero-copy { padding-right: 71px; }
body.board-page .hero-mars-logo { position: absolute; right: 13px; top: 13px; width: 45px; height: 45px; object-fit: contain; }
body.board-page .hero-applications { background: linear-gradient(130deg, #19242b, #10171b); }
body.board-page .hero-writing { background: linear-gradient(130deg, #262220, #151819); }
body.board-page .hero-misc { background: linear-gradient(130deg, #202721, #11191a); }

/* The supplied Theatre 51 clip appears in the header and animation thumbnail. */
.hero-animation-wrap,
.studio-animation-wrap { position: relative; min-width: 0; }
.hero-animation-wrap { display: grid; }
.theatre-animation-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; pointer-events: none; }
body.board-page .hero-theatre { background: #10191d; }
body.board-page .hero-theatre::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #080e12f5, #080e12bc 50%, #080e1230); }
body.board-page .hero-theatre-logo { z-index: 1; right: 1px; filter: drop-shadow(0 2px 3px #000); }
.studio-t51::before,
body.board-page .studio-t51::before { display: none; }
.studio-t51::after,
body.board-page .studio-t51::after { background: linear-gradient(90deg, #060e1238, #060e1210 60%, #16040980); }
.studio-t51 .studio-t51-logo,
body.board-page .studio-t51 .studio-t51-logo { mix-blend-mode: normal; filter: drop-shadow(0 2px 4px #000); }
.animation-toggle { position: absolute; z-index: 4; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d5dfe788; border-radius: 50%; padding: 0; background: #071015d9; color: #f4f6f7; font-size: 13px; line-height: 1; }
.animation-toggle:hover { background: #24383f; border-color: #fff; }
.lightbox-native-video { display: block; width: 100%; max-height: 72vh; margin: auto; background: #030607; object-fit: contain; }

/* Buildings and Inspection are visible siblings, reached by ordinary links. */
.engineering-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.engineering-jumps a { padding: 7px 14px; border: 1px solid var(--line); font-size: 12px; color: #dbe1e3; }
.engineering-jumps a:hover { color: var(--red); border-color: var(--red); }
.engineering-section { margin: 24px 0 0; scroll-margin-top: 18px; }
.engineering-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.engineering-section-heading h2 { font-size: 30px; }
.engineering-section-heading > span { color: var(--dim); font-size: 11px; }
.inspection-intro { margin: 0 0 14px; font-size: 12px; }
.inspection-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
.inspection-photo { display: block; grid-row: auto; min-height: 340px; }
.inspection-assignments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inspection-assignments .inspection-card { min-width: 0; }
#inspection, #plans, #personal-portfolio, #theatre-51, #mars-game-studio, #web-applications, #writing, #misc-projects { scroll-margin-top: 18px; }
body.board-page .engineering-jumps { margin: 11px 0 16px; gap: 6px; }
body.board-page .engineering-jumps a { padding: 5px 11px; font-size: 10px; }
body.board-page .engineering-section { margin: 17px 0 0; }
body.board-page .engineering-section-heading { margin-bottom: 10px; }
body.board-page .engineering-section-heading h2 { font-size: 24px; }
body.board-page .engineering-section-heading > span { font-size: 9px; }
body.board-page .inspection-intro { font-size: 10px; line-height: 1.5; margin-bottom: 10px; }
body.board-page .inspection-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 10px; }
body.board-page .inspection-photo { grid-row: auto; min-height: 325px; height: auto; }
body.board-page .inspection-photo > img { object-position: 50% 80%; }
body.board-page .inspection-assignments { gap: 10px; }
body.board-page .inspection-card { padding: 12px; }
body.board-page .inspection-card h3 { font-size: 18px; line-height: 1.08; }
body.board-page .inspection-card p { font-size: 10px; line-height: 1.45; }
body.board-page .inspection-card .inspection-meta { font-size: 9px; }
body.board-page .engineering-bottom { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line); }

/* Full report pages: no shallow crop or zoom that trims the content. */
.research-art,
body.board-page .research-art { aspect-ratio: 4 / 3; }
.research-art img,
body.board-page .research-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.research-card:hover .research-art img,
body.board-page .research-card:hover .research-art img { transform: none; }
body.board-page .research-grid { gap: 18px 14px; }
body.board-page .research-caption h2 { font-size: 14px; line-height: 1.2; }
body.board-page .research-caption p { font-size: 10px; line-height: 1.35; }
body.board-page .board-panel-research .page-brand-logo { width: 58px; height: 58px; flex-basis: 58px; }
body.board-page .performance-section { margin-top: 20px; padding-top: 14px; }
body.board-page .performance-heading h2 { font-size: 22px; }
body.board-page .performance-note { font-size: 9px; line-height: 1.5; }

/* Personal trading dates and the selected Home Run Trades. */
.performance-metrics,
body.board-page .performance-metrics { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .9fr); align-items: baseline; }
.metric-period strong { font-size: clamp(26px, 2.8vw, 44px); letter-spacing: -.6px; }
body.board-page .metric-period strong { font-size: clamp(22px, 1.8vw, 32px); }
.home-run-trades { grid-column: 1 / -1; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 18px; }
.home-run-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 13px; }
.home-run-heading h3 { font-size: 28px; }
.home-run-heading p { font-size: 11px; color: var(--dim); }
.home-run-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.home-run-trade { min-width: 0; padding: 16px; border: 1px solid var(--line); border-top: 2px solid #ad332e; background: linear-gradient(135deg, #192125, #11181b); }
.home-run-trade h4 { font-size: 27px; letter-spacing: -.15px; overflow-wrap: anywhere; }
.home-run-trade p { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #c8d1d5; }
body.board-page .home-run-trades { padding-top: 15px; }
body.board-page .home-run-heading { margin-bottom: 11px; }
body.board-page .home-run-heading h3 { font-size: 25px; }
body.board-page .home-run-heading p { font-size: 10px; }
body.board-page .home-run-trade { padding: 13px 12px; }
body.board-page .home-run-trade h4 { font-size: 23px; }
body.board-page .home-run-trade p { margin-top: 7px; font-size: 11px; }

@media (min-width: 900px) and (max-width: 1399px) {
  body.board-page .home-run-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .home-run-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-period strong,
  body.board-page .metric-period strong { font-size: 24px; }
}
@media (max-width: 420px) {
  .performance-metrics,
  body.board-page .performance-metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .performance-metrics .metric,
  body.board-page .performance-metrics .metric { padding: 0; border: 0; }
  .metric-period strong,
  body.board-page .metric-period strong { font-size: 32px; }
}

body.board-page .board-panel-projects { grid-column: 1 / -1; }
body.board-page .additional-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 16px 0 12px; }
body.board-page .additional-project { min-width: 0; padding-right: 22px; border-right: 1px solid var(--line); }
body.board-page .additional-project:last-child { padding-right: 0; border-right: 0; }
body.board-page .additional-project .eyebrow { font-size: 9px; letter-spacing: 1px; }
body.board-page .additional-project h2 { margin-top: 10px; font-size: 30px; }
body.board-page .additional-project h3 { margin-top: 13px; font-size: 18px; }
body.board-page .additional-project p { margin-top: 9px; font-size: 12px; line-height: 1.6; }
body.board-page .additional-project .text-link { margin-top: 14px; font-size: 11px; }
body.board-page .additional-project .category-note { color: var(--dim); font-size: 10px; }

@media (min-width: 900px) and (max-width: 1199px) {
  body.board-page .inspection-grid { grid-template-columns: minmax(0, 1fr); }
  body.board-page .inspection-photo { height: 250px; min-height: 0; }
  body.board-page .inspection-photo > img { object-position: 50% 87%; }
}
@media (max-width: 1099px) {
  body.board-page .hero-grid { grid-template-columns: minmax(0, 1fr); }
  body.board-page .hero-primary { min-height: 390px; }
  body.board-page .hero-secondary { grid-template-rows: repeat(3, minmax(130px, 1fr)); }
  body.board-page .hero-major h2 { font-size: 38px; }
  body.board-page .hero-minor h2 { font-size: 28px; }
  body.board-page .overview-intro { align-items: start; flex-direction: column; gap: 5px; }
  body.board-page .overview-intro p { text-align: left; }
}
@media (max-width: 899px) {
  body.board-page .board-panel-home .board-header { border-bottom: 0; }
  body.board-page .hero-primary { min-height: 405px; }
  body.board-page .hero-major h2 { font-size: 36px; }
  body.board-page .hero-kicker { font-size: 10px; }
  body.board-page .hero-minor .hero-kicker { font-size: 9px; }
  body.board-page .hero-minor .hero-copy p { font-size: 12px; }
  body.board-page .header-timeline li > span:last-child { font-size: 10px; }
  body.board-page .engineering-section-heading h2 { font-size: 28px; }
  body.board-page .engineering-section-heading > span,
  body.board-page .inspection-intro { font-size: 11px; }
  body.board-page .research-caption h2 { font-size: 18px; }
  body.board-page .research-caption p { font-size: 11px; }
  body.board-page .additional-projects { gap: 16px; }
  body.board-page .additional-project { padding-right: 16px; }
  body.board-page .additional-project h2 { font-size: 26px; }
}
@media (max-width: 599px) {
  body.board-page .board-panel-home .board-header { height: auto; min-height: 77px; gap: 0 16px; }
  body.board-page .overview-intro h1 { font-size: 26px; }
  body.board-page .header-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; margin-top: 5px; }
  body.board-page .header-timeline li:nth-child(n+3) { border-top: 1px solid #465056; }
  body.board-page .header-timeline .timeline-years { font-size: 24px; }
  body.board-page .hero-primary,
  body.board-page .hero-secondary { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  body.board-page .hero-structural { min-height: 370px; }
  body.board-page .hero-kasatka { min-height: 390px; }
  body.board-page .hero-major h2 { font-size: 38px; }
  body.board-page .hero-major .hero-copy { padding: 20px 18px 16px; }
  body.board-page .hero-minor { min-height: 132px; }
  body.board-page .hero-minor h2 { font-size: 30px; }
  body.board-page .hero-copy p { font-size: 12px; }
  body.board-page .hero-report { margin: 0 17px; }
  body.board-page .hero-report-caption { padding: 12px 18px 0; font-size: 12px; }
  body.board-page .hero-card-foot { padding: 18px; font-size: 11px; }
  .inspection-grid,
  body.board-page .inspection-grid { grid-template-columns: minmax(0, 1fr); }
  .inspection-assignments,
  body.board-page .inspection-assignments { grid-template-columns: minmax(0, 1fr); }
  body.board-page .inspection-photo { min-height: 0; height: 350px; }
  body.board-page .inspection-card { padding: 16px; }
  body.board-page .inspection-card h3 { font-size: 23px; }
  body.board-page .inspection-card p { font-size: 12px; }
  body.board-page .inspection-card .inspection-meta { font-size: 10px; }
  body.board-page .additional-projects { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body.board-page .additional-project { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
  body.board-page .additional-project:last-child { border-bottom: 0; padding-bottom: 0; }
  body.board-page .additional-project h2 { font-size: 32px; }
  body:not(.board-page) .site-header { gap: 14px; }
  body:not(.board-page) .site-header .wordmark { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body.board-page .hero-card,
  body.board-page .hero-card .arrow { transition: none; }
}