:root {
  --page:      #111013;
  --tile:      #1A181D;  
  --line:      #26242A; 
  --bright:    #F4F2F0;  
  --muted:     #8B8790;
  --amber:     #EF9F27;
  --on-amber:  #412402; 
  --on-amber-2:#633806; 
}


* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--page);
  color: var(--bright);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 220px;
  flex: none;
  padding: 40px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--on-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.name { font-size: 19px; font-weight: 500; line-height: 1.25; }
.role { font-size: 13px; color: var(--muted); margin-top: 6px; }

nav { display: flex; flex-direction: column; gap: 18px; }

nav a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
nav a:hover,
nav a.active { color: var(--bright); }
nav a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }


main {
  flex: 1;
  min-width: 0;
  padding: 40px 36px;
}

h1 {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 32px;
  max-width: 16ch;
}


.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 12px;
}

.tile {
  background: var(--tile);
  border-radius: 14px;
  padding: 24px 20px;
}

.stat-number { font-size: 38px; font-weight: 500; line-height: 1; }
.stat-number span { font-size: 16px; color: var(--muted); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 6px; }

.tile-text {
  display: flex;
  align-items: center;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}


.pitch {
  grid-row: span 2;
  background: var(--amber);
  color: var(--on-amber);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pitch h2 { font-size: 25px; font-weight: 500; line-height: 1.25; }
.pitch p { font-size: 15px; color: var(--on-amber-2); margin-top: 12px; }

.pitch a {
  font-size: 16px;
  font-weight: 500;
  color: var(--on-amber);
  text-decoration: none;
  margin-top: 22px;
  border-bottom: 1px solid var(--on-amber);
  align-self: flex-start;
  padding-bottom: 2px;
}
.pitch a:focus-visible { outline: 2px solid var(--on-amber); outline-offset: 3px; }

.lower {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.tile h3 { font-size: 16px; font-weight: 500; margin-bottom: 16px; }

.work-row { display: flex; gap: 10px; }
.work-item {
  flex: 1;
  height: 90px;
  border-radius: 8px;
  background: var(--line);
}

.logo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.logo { height: 24px; border-radius: 5px; background: var(--line); }


.home-page { max-width: 1400px; }
.home-intro { max-width: 70ch; margin-bottom: 32px; }
.home-intro h1 { max-width: 25ch; margin-bottom: 20px; }
.home-link { display: inline-block; margin-top: 16px; color: var(--amber); text-underline-offset: 4px; }
.home-link:hover { color: var(--bright); }
.home-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-card h2 { color: var(--amber); font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.home-card h3 { font-size: 20px; margin-bottom: 8px; }
.home-card ul { padding-left: 20px; }
.home-card li + li { margin-top: 8px; }
.home-card .about-meta { margin-top: 12px; }
.home-grid .home-opportunity { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid .home-opportunity { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
  .home-grid { grid-template-columns: 1fr; }
}


.topic-strip { position: relative; margin-bottom: 32px; }
.topic-window { overflow: hidden; border-block: 1px solid var(--line); padding-block: 20px; }
.topic-track { display: flex; width: max-content; animation: topics-scroll 38s linear infinite; }
.topic-group { display: flex; flex-shrink: 0; align-items: center; }
.topic-group span { display: flex; align-items: center; white-space: nowrap; color: #B8B3BD; font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.topic-group span::after { content: "·"; color: var(--amber); margin-inline: 28px; }
@keyframes topics-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topic-track { animation: none; width: auto; }
  .topic-group { flex-wrap: wrap; gap: 12px 0; }
  .topic-group span { white-space: normal; }
  .topic-group[aria-hidden] { display: none; }
}


.about-page { max-width: 1240px; }
.about-intro { max-width: 70ch; margin-bottom: 32px; }
.about-intro a { overflow-wrap: anywhere; }
.about-eyebrow { color: var(--amber); font-size: 14px; margin-bottom: 12px; }
.about-intro h1 { margin-bottom: 20px; }
.about-intro p + p { margin-top: 12px; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.about-card h2 { color: var(--amber); font-size: 20px; font-weight: 500; margin-bottom: 20px; }
.about-card h3 { margin-bottom: 6px; }
.about-meta { color: #B8B3BD; font-size: 14px; }
.about-card .about-subheading { margin-top: 24px; }
.about-card ul { padding-left: 20px; margin-top: 12px; }
.about-card li + li { margin-top: 8px; }
.about-entry + .about-entry { margin-top: 24px; }
.about-card .about-skills { margin-top: 0; }

@media (max-width: 700px) {
  .about-grid { grid-template-columns: 1fr; }
}


.contact-intro { max-width: 52ch; margin-bottom: 16px; }
.contact-note { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.contact-list { display: grid; gap: 12px; max-width: 720px; }
.contact-list h2 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.contact-list a { color: var(--amber); overflow-wrap: anywhere; text-underline-offset: 4px; }
.contact-list a:hover { color: var(--bright); }
.contact-list a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.suggestion { max-width: 720px; margin-top: 24px; }
.suggestion h2 { font-size: 21px; font-weight: 500; margin-bottom: 16px; }
.suggestion label { display: block; margin-bottom: 8px; }
.suggestion textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--page);
  color: var(--bright);
  font: inherit;
  resize: vertical;
  min-height: 120px;
}
.suggestion textarea::placeholder { color: var(--muted); }
.suggestion textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.suggestion .contact-note { margin: 12px 0 0; }


@media (max-width: 900px) {
  body { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 28px 24px;
    gap: 28px;
  }

  nav { flex-direction: row; flex-wrap: wrap; gap: 20px; }

  main { padding: 28px 24px; }
  h1 { font-size: 28px; }

  .bento, .lower { grid-template-columns: 1fr 1fr; }
  .pitch { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 520px) {
  .bento, .lower { grid-template-columns: 1fr; }
  .pitch { grid-column: auto; }
}

@media (min-width: 1000px) {
  main { padding: 24px 28px; }
  .sidebar { width: 200px; padding: 28px 24px; }
  .home-page, .about-page { max-width: none; }
  .home-intro { max-width: 85ch; margin-bottom: 18px; }
  .home-intro h1 { max-width: 38ch; font-size: clamp(28px, 2.5vw, 36px); margin-bottom: 12px; }
  .home-intro .home-link { margin-top: 10px; }
  .topic-strip { margin-bottom: 18px; }
  .topic-window { padding-block: 14px; }
  .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .home-grid .home-opportunity { grid-column: 3; grid-row: 1 / span 2; }
  .home-card { padding: 18px; }
  .home-card h2 { margin-bottom: 10px; }
  .home-card .home-link { margin-top: 10px; }
  .about-intro { max-width: none; margin-bottom: 22px; }
  .about-intro h1 { margin-bottom: 12px; font-size: 32px; }
  .about-intro .about-eyebrow { margin-bottom: 8px; }
  .about-intro p { max-width: 110ch; }
  .about-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .about-card { padding: 18px 16px; font-size: 14px; }
  .about-card h2 { font-size: 18px; margin-bottom: 14px; }
  .about-card h3 { font-size: 15px; }
  .about-card .about-meta { font-size: 13px; }
  .about-card .about-subheading, .about-entry + .about-entry { margin-top: 16px; }
  .about-card ul { margin-top: 8px; }
  .about-card li + li { margin-top: 6px; }
  .contact-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 24px; align-content: start; }
  .contact-page > h1, .contact-page > .contact-intro, .contact-page > .contact-note { grid-column: 1 / -1; }
  .contact-page > h1 { margin-bottom: 16px; }
  .contact-list { grid-column: 1; }
  .suggestion { grid-column: 2; margin-top: 0; max-width: none; }
}


.avatar-photo { display: block; object-fit: cover; object-position: center 35%; }


.sidebar { padding-inline: 16px; }
.sidebar .name { font-size: 15px; white-space: nowrap; }
.portrait-link { display: block; width: fit-content; border-radius: 50%; }
.portrait-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.portrait-viewer { display: none; }
.portrait-viewer:target { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.portrait-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 88%); }
.portrait-panel { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.portrait-panel img { display: block; width: auto; height: auto; max-width: min(85vw, 600px); max-height: 80vh; object-fit: contain; border-radius: 12px; }
.portrait-close { color: var(--bright); padding: 6px 12px; background: var(--tile); border-radius: 6px; text-decoration: none; }
.portrait-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }