.portfolio-page {
  --page: #141414;
  --surface: #1c1c1b;
  --ink: #f5f1e7;
  --muted: #b7b3a9;
  --gold: #f3c45b;
  --rule: #363530;
  --header-height: 68px;
  background: var(--page);
  color: var(--ink);
  color-scheme: dark;
}

.portfolio-page ::selection { background: var(--gold); color: #171610; }
.portfolio-page #main:focus { outline: none; }
.portfolio-page main [id] { scroll-margin-top: calc(var(--header-height) + 13px); }
.portfolio-shell { width: min(calc(100% - 112px), 1312px); margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.portfolio-page) { scroll-behavior: smooth; }
}

.portfolio-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}

.portfolio-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--header-height);
  gap: 20px;
}

.portfolio-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  color: var(--ink);
  font: 700 1.05rem/1.15 var(--font-display);
  letter-spacing: -.025em;
  text-decoration: none;
}

.portfolio-monogram {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid #645434;
  border-radius: 3px;
  background: #282217;
  color: var(--gold);
  font: 700 .73rem/1 var(--font-mono);
  letter-spacing: -.035em;
}

.portfolio-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 43px); }
.portfolio-nav a {
  display: grid;
  place-items: center;
  min-height: 44px;
  position: relative;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.portfolio-nav a:hover, .portfolio-nav a[aria-current] { color: var(--ink); }
.portfolio-nav a[aria-current]::after {
  position: absolute;
  bottom: 4px;
  width: 14px;
  height: 1px;
  background: var(--gold);
  content: "";
}

.portfolio-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: var(--gold);
  pointer-events: none;
}

.portfolio-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  font: 600 .72rem/1.4 var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.portfolio-kicker span { width: 7px; height: 7px; flex: none; background: var(--gold); }

.portfolio-section {
  position: relative;
  border-top: 1px solid var(--rule);
}

.portfolio-section::before {
  position: absolute;
  top: -1px;
  left: max(56px, calc((100% - 1312px) / 2));
  right: max(56px, calc((100% - 1312px) / 2));
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
  content: "";
  pointer-events: none;
}

.portfolio-section[data-arrived]::before {
  animation: portfolio-section-rule 950ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes portfolio-section-rule {
  from { transform: scaleX(0); opacity: .85; }
  72% { transform: scaleX(1); opacity: .56; }
  to { transform: scaleX(1); opacity: .24; }
}

.section-inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(42px, 8vw, 120px);
  padding-block: clamp(65px, 9vw, 130px);
}

.portfolio-section-header h2 {
  max-width: 12ch;
  margin: 16px 0 19px;
  font: 600 clamp(2.7rem, 4.7vw, 4.8rem)/.97 var(--font-display);
  letter-spacing: -.073em;
}

.portfolio-section-header p:not(.portfolio-kicker) {
  max-width: 36ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.work-section { background: #181817; }
.project-category { border-block-start: 1px solid #3e3c35; }
.project-category:last-child { border-block-end: 1px solid #3e3c35; }
.project-category summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 63px;
  padding: 10px 10px 10px 0;
  list-style: none;
  cursor: pointer;
  font: 600 clamp(1.1rem, 1.9vw, 1.58rem)/1.2 var(--font-display);
  letter-spacing: -.032em;
}

.project-category summary::-webkit-details-marker { display: none; }
.project-category summary:hover, .project-category[open] summary { color: var(--gold); }
.project-category summary:focus-visible { outline-offset: 1px; }
.category-toggle { position: relative; display: block; width: 17px; height: 17px; flex: none; }
.category-toggle::before, .category-toggle::after {
  position: absolute;
  top: 8px;
  left: 1px;
  width: 15px;
  height: 1px;
  background: currentColor;
  content: "";
}

.category-toggle::after { transform: rotate(90deg); transition: transform 190ms ease; }
.project-category[open] .category-toggle::after { transform: rotate(0deg); }
.category-content { display: grid; gap: 15px; padding: 0 22px 22px 0; color: var(--muted); line-height: 1.5; }
.category-empty { font: 500 .73rem/1.4 var(--font-mono); color: #a9a497; }
.category-project-link {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--gold);
  font: 600 .82rem/1.4 var(--font-sans);
  text-decoration: none;
}
.category-project-link:hover { text-decoration: underline; }
.about-section { background: var(--surface); }
.capabilities h3 {
  margin: 0 0 15px;
  color: var(--gold);
  font: 600 .75rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.capabilities dl > div { padding-block: 17px; border-block-start: 1px solid #44413a; }
.capabilities dl > div:last-child { border-block-end: 1px solid #44413a; }
.capabilities dt { margin: 0 0 6px; font: 600 1.18rem/1.25 var(--font-display); }
.capabilities dd { color: var(--muted); font-size: .91rem; line-height: 1.5; }

.portfolio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  min-height: 83px;
  font-size: .86rem;
}

.portfolio-footer p [data-name] { font-weight: 700; }
.footer-role { margin-left: 8px; color: var(--muted); }
.portfolio-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; }
.portfolio-footer a:hover { color: var(--ink); }
.portfolio-footer a span { color: var(--gold); }

@media (max-width: 1000px) {
  .portfolio-shell { width: calc(100% - 72px); }
  .portfolio-section::before { left: 36px; right: 36px; }
}

@media (max-width: 760px) {
  .portfolio-page { --header-height: 60px; }
  .portfolio-shell { width: calc(100% - 40px); }
  .portfolio-section::before { left: 20px; right: 20px; }
  .portfolio-brand { gap: 7px; font-size: .91rem; }
  .portfolio-monogram { width: 29px; height: 29px; }
  .portfolio-nav { gap: clamp(10px, 2.9vw, 26px); }
  .portfolio-nav a { font-size: .8rem; }
  .portfolio-header-inner { gap: 10px; }
  .section-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .portfolio-section-header h2 { margin-block: 13px 15px; }
}

@media (max-width: 360px) {
  .portfolio-shell { width: calc(100% - 32px); }
  .portfolio-section::before { left: 16px; right: 16px; }
  .portfolio-brand { font-size: .84rem; }
  .portfolio-nav a { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-section[data-arrived]::before { animation: none; }
}