/* Navy, gold, and ivory from Grant's supplied GR identity. */
:root {
  color-scheme: dark;
  --paper: #080e18;
  --ink: #f3f0e5;
  --muted: #a6b2c3;
  --line: #283548;
  --dark: #0e1929;
  --accent: #d2b675;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--accent); color: #0a1220; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--accent); }
.header { height: 104px; background: #0b1422; border-bottom-color: #334052; }
.wordmark { gap: 15px; }
.brand-logo { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; }
.brand-name { font-size: 21px; font-weight: 600; letter-spacing: .035em; }
.header nav { font-size: 12px; color: #dce2eb; }
.header nav a:hover { color: var(--accent); }
.header nav .nav-contact { color: var(--accent); border-bottom-color: #8e794d; }
.personal-banner { width: 100%; background: #080c13; overflow: hidden; }
.personal-banner > img { width: 100%; height: auto; aspect-ratio: 2048 / 858; object-fit: contain; }
.banner-caption { background: #101c2e; border-block: 1px solid #2b394e; }
.banner-caption .wrap { display: flex; justify-content: space-between; gap: 28px; padding-block: 17px; }
.banner-caption span { color: #c1a66e; font-size: 9px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.banner-caption span:last-child { color: #9eacbf; }
.hero { padding-top: 48px; }
.hero-top .eyebrow, .section-number { color: var(--accent); }
h1 span { color: var(--accent); }
.hero-copy { padding-bottom: 30px; }
.hero-intro p { color: #bdc7d5; }
.hero-intro .text-link { color: var(--accent); }
.hero-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.reel-button { background: #132136; border: 1px solid #35445a; color: var(--ink); min-width: 286px; min-height: 76px; }
.reel-button small { color: var(--muted); }
.reel-button:hover { background: #1c304b; border-color: var(--accent); }
.play-icon { color: var(--accent); border-color: #8e794d; }
.studio-role { font-size: 11px; color: #c0cad7; text-align: right; line-height: 1.7; }
.studio-role > span { display: block; color: #a18c60; font-size: 10px; }
.metrics { padding-top: 53px; }
.metric-value { color: #e8e8e7; }
.metric-value > span { color: var(--accent); }
.text-link { color: var(--accent); }
.filters button { color: #bcc6d4; }
.filters button.active { background: var(--accent); color: #0b1422; }
.filters button.active span { color: #3c3322; }
.filters button:hover { border-color: #687382; }
.project-image { background: #132136; border: 1px solid #29364a; }
.project-type { background: rgba(10, 19, 32, .93); color: #eee5d3; border: 1px solid rgba(210,182,117,.35); }
.open-project { color: var(--accent); background: #101c2e; border: 1px solid rgba(210,182,117,.5); }
.project-image:hover .open-project { color: #0a1320; background: var(--accent); }
.project h3 button:hover { color: var(--accent); }
.leadership { background: #0e1929; border-block: 1px solid var(--line); }
.lead-intro p, .detail-body p { color: #aebccd; }
.lead-intro p + p { color: #f0e7d6; }
.lead-rows { border-top-color: #354257; }
.lead-rows details { border-bottom-color: #354257; }
.lead-rows summary:hover { color: var(--accent); }
.detail-tags span { color: #b9c4d3; border-color: #3b4a60; }
.portrait-column > img { background: #132136; border: 1px solid #354257; }
.about-copy .about-lead { color: #e9e6df; }
.button-dark, .button-accent, .contact-main .button { background: var(--accent); color: #0a1320; }
.button-dark:hover, .button-accent:hover, .contact-main .button:hover { background: #e8ce93; }
.timeline > div:before { background: var(--accent); }
.timeline span { color: var(--accent); }
.tools p { color: #bdc7d6; }
.tools p span { color: #8c784c; }
.contact { background: #14243b; border-block: 1px solid #354661; }
.contact-main h2 em { color: var(--accent); }
.contact-main > div p { color: #d5dce6; }
.contact-main > div p.location-note { color: #acbcd1; }
.availability { color: #c3cbd5; }
.availability > span { background: var(--accent); }
.contact-links { border-top-color: #3a4b63; }
.contact-links a:hover { color: var(--accent); }
.contact-links a > span { color: var(--accent); }
footer { min-height: 136px; }
footer .brand-logo { width: 52px; height: 52px; }
footer .brand-name { font-size: 16px; }
.back-top { color: var(--accent); }
dialog { background: #101b2b; color: var(--ink); border: 1px solid #354661; }
dialog::backdrop { background: rgba(2, 7, 14, .88); }
.dialog-top { background: #101b2b; border-bottom: 1px solid #334158; }
.dialog-close { color: #e3d2ae; }
.dialog-copy h2 { color: #f3f0e5; }
.dialog-details p { color: #d9e0e9; }
@media (max-width: 1150px) {
  .brand-name { font-size: 18px; }
  .header nav { gap: 27px; }
}
@media (max-width: 800px) {
  .header { height: 90px; }
  .brand-logo { width: 56px; height: 56px; }
  .wordmark { gap: 10px; }
  .brand-name { font-size: 17px; }
  .header nav { gap: 18px; font-size: 10px; }
  .banner-caption .wrap { gap: 18px; padding-block: 13px; }
  .banner-caption span { font-size: 8px; }
  .hero { padding-top: 35px; }
  .hero-bottom { padding-bottom: 32px; }
  .studio-role { max-width: 220px; font-size: 10px; }
}
@media (max-width: 580px) {
  .header { height: 84px; }
  .brand-logo { width: 54px; height: 54px; }
  .brand-name { font-size: 18px; }
  .header nav { top: 83px; background: #0b1422; }
  .banner-caption .wrap { padding-block: 11px; }
  .banner-caption span { font-size: 7px; letter-spacing: .075em; }
  .banner-caption span:last-child { display: none; }
  .hero { padding-top: 29px; }
  .hero-copy { padding-top: 24px; padding-bottom: 23px; }
  .hero-bottom { display: block; padding-bottom: 28px; }
  .reel-button { width: 100%; max-width: 100%; min-width: 0; margin-top: 0; padding: 13px 18px; }
  .studio-role { display: block; max-width: unset; text-align: left; margin-top: 17px; font-size: 9px; }
  .studio-role > span { display: inline; margin-left: 8px; font-size: 9px; }
  .metrics { padding-block: 40px; }
  footer { min-height: 135px; }
  footer .wordmark { gap: 10px; }
  footer .brand-logo { width: 44px; height: 44px; }
  footer .brand-name { font-size: 15px; }
}

/* A direct resume entry and a clear invitation to connect. */
.header { gap:38px; }
.header .wordmark { flex-shrink:0; }
.header-resume { display:inline-flex; align-items:center; gap:10px; margin-right:auto; background:var(--accent); color:#101a29; font-size:14px; font-weight:700; white-space:nowrap; padding:16px 20px; min-height:54px; border:1px solid #e0c98e; border-radius:4px; box-shadow:0 5px 16px #0003; }
.header-resume svg { width:20px; height:22px; }
.header-resume:hover { background:#ead49f; color:#101a29; }
.header nav { gap:24px; }
.contact .opportunity-statement { max-width:1190px; margin:0; font-size:clamp(34px,4.25vw,64px); line-height:1.2; letter-spacing:-.035em; }
.contact .contact-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px 40px; margin-top:50px; padding-top:32px; }
.contact .contact-links a { font-size:clamp(21px,2.1vw,30px); line-height:1.4; font-weight:500; letter-spacing:-.02em; gap:16px; }
.contact-landscape { padding-top:clamp(180px,23vw,480px); background:#01192d url('assets/footer-mountain-home.webp') center top / 100% auto no-repeat; border:0; }
.contact-landscape .opportunity-statement { text-shadow:0 2px 16px #00101e66; }
.contact-landscape .contact-links { border-color:#53677c; }
@media(max-width:1200px) {
 .header { padding-inline:28px; gap:28px; }
 .header nav { gap:18px; }
 .header-resume { font-size:13px; padding-inline:16px; }
}
@media(max-width:1150px) {
 .header .menu-toggle { display:flex; align-items:center; gap:12px; background:none; padding:12px 0; }
 .header nav { display:none; position:absolute; top:100%; left:0; right:0; padding:20px 28px 28px; background:#0b1422; border-bottom:1px solid var(--line); align-items:stretch; }
 .header nav.open { display:flex; flex-direction:column; gap:6px; }
 .header nav a,.header nav .intro-reopen { padding:14px 0; font-size:16px; }
 .header nav .nav-contact { border:0; justify-content:space-between; }
}
@media(max-width:580px) {
 .header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 14px; height:auto; min-height:112px; padding:14px 22px; }
 .header .wordmark { grid-column:1; grid-row:1; }
 .header .brand-logo { width:44px; height:44px; }
 .header .brand-name { font-size:17px; }
 .header-resume { grid-column:1 / -1; grid-row:2; margin:12px 0 2px 59px; justify-self:start; gap:8px; padding:12px 14px; min-height:48px; font-size:13px; }
 .header-resume svg { display:block; width:18px; height:20px; }
 .header .menu-toggle { grid-column:2; grid-row:1; }
 .contact .opportunity-statement { font-size:34px; line-height:1.24; }
 .contact .contact-links { flex-direction:column; align-items:start; gap:24px; padding-top:28px; margin-top:34px; }
 .contact .contact-links a { font-size:22px; gap:12px; }
}
@media(max-width:360px) {
 .header { padding-inline:16px; }
 .header .brand-name { font-size:15px; }
 .header .wordmark { gap:10px; }
 .header-resume { margin-left:0; }
 .contact .opportunity-statement { font-size:31px; }
 .contact .contact-links a { font-size:19px; }
}