/* Intro draft grid: 60-unit reference icons rendered at 30 CSS pixels. */
.index-page {
  --index-content-scale: 1.3;
  --index-connector-width: calc(1.5px / var(--index-content-scale));
  --bg: #fff;
  --surface: #fff;
  --type-small: 10px;
  --type-medium: 20px;
  --type-large: 40px;
  --index-page-gutter: 45px;
  --index-content-offset: 45px;
  --mobile-control-size: 30px;
  --mobile-display-size: var(--type-medium);
  background: #fff;
}
/* Keep the original animated contour background visible behind the new layout. */
.index-page .index-layout-header {
  --header-control-size: 30px;
  --header-content-offset: var(--index-content-offset);
  min-height: 30px;
  margin: 30px var(--index-page-gutter) 30px;
  padding-left: var(--index-content-offset);
  flex-wrap: nowrap;
  gap: 15px;
}
.index-page .index-layout-header h1 {
  flex: 0 1 auto;
  font-size: var(--type-medium);
  line-height: 30px;
  background: transparent;
}
.index-page .index-layout-header::before { top: calc(15px + var(--connector-y-adjust, 0px)); left: var(--connector-x-adjust, 0px); height: var(--index-connector-width); mask-image: var(--header-connector-mask); }
.index-page .index-layout-header::after { top: 15px; bottom: -30px; left: 0; width: var(--index-connector-width); }
.index-page .index-header-actions { gap: 15px; }
.index-page .index-header-button { padding: 4px; font-size: var(--type-medium); }
.index-page .index-header-help-text { font-size: var(--type-small); padding: 15px; border: 0; box-shadow: inset 0 0 0 var(--index-connector-width) #000; }
.index-page main { padding-inline: var(--index-page-gutter); padding-bottom: 90px; }
.index-page .project-index {
  --drawer-row-start: var(--index-content-offset);
  --index-menu-width: 100%;
  --index-drawer-heading-size: var(--type-medium);
  --index-section-heading-size: var(--type-medium);
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.index-page .project-index::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: 0;
  left: var(--connector-x-adjust, 0px);
  mask-image: var(--subsection-connector-mask);
  width: var(--index-connector-width);
  background: #000;
  pointer-events: none;
}
.index-page .project-index :is(.project-index-root, .project-index-destination-heading) {
  width: fit-content;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin-left: 0;
  padding: 0 0 0 var(--index-content-offset);
  overflow: visible;
  animation: none !important;
}
.index-page .project-index :is(.project-index-root, .project-index-destination-heading)::before {
  content: '';
  position: absolute;
  top: calc(15px + var(--connector-y-adjust, 0px));
  left: calc(15px + var(--connector-x-adjust, 0px));
  width: 30px;
  height: var(--index-connector-width);
  background: #000;
  opacity: 0;
  transition: none;
}
.index-page .project-index :is(.project-index-root, .project-index-destination-heading):is(:hover, :focus-visible)[aria-expanded="false"]::before { opacity: 1; }
.index-page .project-index-frame { display: none; }
.index-page .project-index :is(.project-index-symbol, .project-index-destination-heading > .project-index-symbol) {
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex-basis: 30px;
  margin: 0;
  background: #000;
  color: #fff;
  transform: none;
  rotate: 0deg;
}
.index-page .project-index-symbol-mark { width: 16px; height: 16px; }
.index-page .project-index :is(.project-index-root, .project-index-destination-heading)[aria-expanded="true"] .project-index-symbol-mark { transform: none; rotate: 45deg; }
.index-page .project-index-symbol-mark::before,
.index-page .project-index-symbol-mark::after { width: 16px; height: calc(var(--type-medium) * 0.108); }
.index-page .project-index-symbol--star::before { width: 16px; height: 16px; }
.index-page .project-index :is(.project-index-heading, .project-index-destination-title, .project-index-destination-heading h2) {
  width: max-content;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 0 0 0;
  font-size: var(--type-medium);
  font-weight: 500;
  line-height: 30px;
  background: #000;
  color: #fff;
  scale: 1;
}
.index-page .project-index #infoTitle { width: max-content; }
.index-page .project-index-branch {
  --project-branch-indent: 0px;
  --project-branch-top: 0px;
  --project-label-top: 0px;
  width: 100%;
  margin: 0;
  padding: 0;
  animation: none !important;
}
.index-page .project-index :is(.project-index-branch, .project-index-projects-panel, .project-index-info, .project-index-cv)::after,
.index-page .project-index :is(.project-index-branch, .project-index-projects-panel)::before { content: none; }
.index-page .project-index-destination { margin-top: 30px; animation: none !important; }
.index-page .project-index.is-projects-open .project-index-info,
.index-page .project-index.is-projects-closing .project-index-info,
.index-page .project-index.is-info-open .project-index-cv,
.index-page .project-index.is-info-closing .project-index-cv { margin-top: 0; }
.index-page .project-index :is(.project-index-projects-panel, .project-index-info-content, .project-index-cv-content) {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin: 0;
  padding: 0;
  animation: none !important;
  transition: grid-template-rows 700ms cubic-bezier(.45,0,.2,1);
}
.index-page .project-index.is-projects-open .project-index-projects-panel,
.index-page .project-index .project-index-info-content.is-open,
.index-page .project-index .project-index-cv-content.is-open { grid-template-rows: 1fr; }
.index-page .project-index .project-index-projects-panel { transition-duration: 900ms; }
.index-page .project-index :is(.project-index-projects-panel, .project-index-info-content, .project-index-cv-content)[hidden] { display: none; }
.index-page .project-index :is(.project-index-projects-panel-inner, .project-index-info-content-inner, .project-index-cv-content-inner) {
  min-height: 0;
  margin: 0;
  padding: 0 0 0 var(--index-content-offset);
  overflow: hidden;
  transition: padding 700ms cubic-bezier(.45,0,.2,1);
}
.index-page .project-index.is-projects-open .project-index-projects-panel-inner { padding-block: 30px 60px; overflow: visible; }
.index-page .project-index .project-index-projects-panel-inner { transition-duration: 900ms; }
.index-page .project-index-group,
.index-page .project-index-group:last-child { display: grid; min-height: 0; padding: 0; }
.index-page .project-index-group + .project-index-group { margin-top: 30px; }
.index-page .project-index-group h2,
.index-page .project-index-cv .cv-section > h3 {
  /* Align the final rotated letter with the first body line ink, not its line box. */
  --subsection-label-ink-offset: 2.5px;
  --spine-label-width: 20px;
  grid-area: 1 / 1;
  position: relative;
  align-self: start;
  justify-self: start;
  top: var(--subsection-label-ink-offset);
  left: calc(-1 * var(--index-content-offset) - var(--spine-label-width) / 2);
  width: 20px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: var(--type-medium);
  font-weight: 500;
  line-height: 1;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  animation: none !important;
}
.index-page .project-index-list { grid-area: 1 / 1; gap: 15px; }
.index-page .project-index .project-index-link {
  opacity: 1;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--type-small);
  line-height: 15px;
  animation: none !important;
}
.index-page .project-index .project-index-link :is(.project-index-detail, .project-index-title, .project-index-highlight) {
  max-width: 100%;
  opacity: 1;
  overflow: visible;
  white-space: normal;
  transform: none;
  animation: none !important;
}
.index-page .project-index-link .project-index-scale,
.index-page .project-index-link .project-index-context { color: #000; font-weight: 400; }
.index-page .project-index-metadata { display: flex; flex-wrap: wrap; gap: 0 3px; align-items: baseline; }
.index-page .project-index-highlight { padding: 0 1px; font-weight: 700; }
.index-page .project-index .project-index-info-content-inner {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.index-page .project-index .project-index-info-content.is-open .project-index-info-content-inner { padding-block: 30px 45px; }
.index-page .project-index-info .personal-photo-frame {
  grid-column: 1;
  grid-row: 1;
  width: 150px;
  height: 195px;
  margin: 0;
  padding: 0;
  justify-self: start;
  opacity: 1;
  transform: none;
  animation: none !important;
}
.index-page .personal-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.index-page .project-index-info .intro { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; background: #fff; }
.index-page .project-index-info-contact { margin: 0; display: grid; gap: 15px; font-size: var(--type-small); line-height: 15px; }
.index-page .project-index .project-index-info-row { display: flex; flex-wrap: wrap; gap: 0 15px; margin: 0; animation: none !important; }
.index-page .project-index-info-row dt { color: #000; }
.index-page .project-index-info-row dd { font-weight: 700; overflow-wrap: anywhere; }
.index-page .project-index .project-index-cv-content.is-open .project-index-cv-content-inner { padding-block: 30px 0; }
.index-page .project-index .project-index-cv-content.is-open .project-index-cv-content-inner { overflow: visible; }
.index-page .project-index-cv .cv-section { --cv-section-indent: var(--index-content-offset); display: grid; min-height: 0; padding: 0; }
.index-page .project-index-cv .cv-section + .cv-section { margin-top: 30px; }
.index-page .project-index-cv .cv-section-content { grid-area: 1 / 1; display: grid; gap: 15px; }
.index-page .project-index .project-index-cv .cv-entry { font-size: var(--type-small); line-height: 15px; margin: 0; animation: none !important; }
.index-page .project-index .project-index-cv .cv-section[aria-labelledby="cvEducationTitle"] .cv-entry { line-height: 15px; }
.index-page .project-index-cv .cv-date { color: #000; }
.index-page .project-index-cv .cv-muted { color: #888; }
.index-page .project-index-cv mark { padding: 0 1px; }
.index-page .project-index-cv .cv-section[aria-labelledby="cvExperienceTitle"] .cv-section-content { display: grid; gap: 15px; }
@media (max-width: 780px) {
  .index-page { --index-page-gutter: 30px; }
  .index-page .project-index .project-index-info-content-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .index-page .project-index-info .intro { grid-column: 1; grid-row: 2; }
  .index-page .project-index-info-row { gap: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .index-page .project-index :is(.project-index-projects-panel, .project-index-info-content, .project-index-cv-content, .project-index-projects-panel-inner, .project-index-info-content-inner, .project-index-cv-content-inner) { transition: none; }
}

.index-page .project-index :is(.project-index-heading, .project-index-destination-title, .project-index-destination-heading h2, .project-index-info, .project-index-cv)::before { content: none; }

/* Wide screens: contained previews beside the complete text column. */
.index-page .project-index-link .project-index-link-preview {
  display: none;
  pointer-events: none;
}
.index-page .project-index-link.has-side-preview .project-index-link-preview {
  display: block;
  top: var(--project-preview-center);
  left: var(--project-preview-left);
  width: var(--project-preview-width);
  height: var(--project-preview-height);
  max-width: none;
  max-height: none;
  clip-path: none;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}
.index-page .project-index-link.has-side-preview:is(:hover, :focus-visible) .project-index-link-preview {
  opacity: 1;
  transform: translateY(-50%);
}
.index-page .project-index-link.has-side-preview .project-index-link-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-position: center;
}
@media (width < 700px), (hover: none), (pointer: coarse) {
  .index-page .project-index-link { width: 100%; }
  .index-page .project-index-link .project-index-link-preview {
    display: block !important;
    position: static;
    order: -1;
    width: min(300px, 100%);
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0 0 10px;
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
  .index-page .project-index-link .project-index-link-preview img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    object-position: left center;
  }
  .index-page .project-index-list { gap: 30px; }
}

.index-page .index-layout-header h1 { flex: 0 0 auto; white-space: nowrap; }
.index-page .index-header-actions { margin-left: auto; }
.index-header-full-title { display: inline-block; white-space: nowrap; }
.index-header-short-title { display: none; }
.index-layout-header.is-compact .index-header-full-title {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
}
.index-layout-header.is-compact .index-header-short-title { display: inline; }

/* Scale only page content, keeping the fixed terrain layer at its original size. */
.index-page > :is(.index-layout-header, main, .site-footer) { zoom: var(--index-content-scale); }
.index-page main.container { width: auto; }

.index-page .project-index :is(.project-index-root, .project-index-destination-heading):focus-visible { outline-width: var(--index-connector-width); }

.index-mobile-credits { display: none; }
@media (width < 700px) {
  .index-page:not(.concise-project-page) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh / 1.1);
    min-height: calc(100dvh / 1.1);
  }
  .index-page:not(.concise-project-page) .index-header-help,
  .index-page:not(.concise-project-page) > .site-footer { display: none; }
  .index-mobile-credits {
    display: block;
    position: static;
    width: 100%;
    margin-top: auto;
    padding: 8px;
    box-sizing: border-box;
    color: #808080;
    font-family: var(--font-text);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }
  .index-mobile-credits > span { display: inline-block; }
}

@media (width < 700px) {
  .index-page { --index-page-gutter: 22.5px; --index-content-offset: 30px; }
}

/* Extend only the black background so text keeps its original left alignment. */
.index-page .project-index :is(.project-index-heading, .project-index-destination-title, .project-index-destination-heading h2) {
  box-shadow: -4px 0 0 #000, 4px 0 0 #000;
}

/* Remove the legacy mobile inset specific to the CV title. */
.index-page .project-index #cvTitle { padding: 0; }

.index-page .index-scroll-top {
  --project-page-gutter: calc(var(--index-page-gutter) * var(--index-content-scale));
  display: grid;
  place-items: center;
  width: 39px;
  min-width: 39px;
  height: 39px;
  min-height: 39px;
  border: 0;
  padding: 0;
  background: #000;
  color: #fff;
}
.index-page .index-scroll-top .concise-project-scroll-top-triangles { width: 20.8px; height: 20.8px; gap: 1.39px; }
.index-page .index-scroll-top .concise-project-scroll-top-triangles i { border-right-width: 10.4px; border-left-width: 10.4px; border-bottom-width: 9.7px; }

/* Uniform enlargement, including controls, typography, spacing and media. */
html { --site-scale: 1.1; zoom: var(--site-scale); }

@media (width < 700px) {
  .index-page .index-scroll-top {
    bottom: calc(var(--index-right-gutter) + env(safe-area-inset-bottom, 0px) + var(--visual-viewport-bottom, 0px));
  }
}

/* One right boundary for page content and controls, at every viewport width. */
.index-page {
  --index-right-gutter: var(--index-page-gutter);
  --page-right-inset: calc(var(--index-right-gutter) * var(--index-content-scale));
}
@media (width < 700px) { .index-page { --index-right-gutter: 15px; } }
.index-page .index-layout-header { margin-right: var(--index-right-gutter); min-width: 0; }
.index-page .index-layout-header::before { right: calc(-1 * var(--index-right-gutter)); }
.index-page main { padding-right: var(--index-right-gutter); }
.index-page .index-header-actions { flex-shrink: 0; margin-right: 0; }
.index-page .index-scroll-top { right: var(--page-right-inset); }
.index-page .index-layout-header h1 { min-width: 0; }