/* Shared layout contract, loaded after the three art directions. */
html[data-style] {
  --shell-max: 1360px;
  --shell-gutter: clamp(24px, 3.2vw, 48px);
  --chrome-height: 80px;
  --layout-gap: 32px;
}
html[data-style] :is(.nav-shell, .view) {
  width: calc(100% - var(--shell-gutter) * 2);
  max-width: var(--shell-max);
  margin-inline: auto;
}
html[data-style] .site-header { height: var(--chrome-height); }
html[data-style] .nav-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
html[data-style] .desktop-nav {
  position: static;
  transform: none;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
html[data-style] .nav-tools {
  justify-self: end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
html[data-style] .nav-tools > * { flex-shrink: 0; }
html[data-style] :is(.style-toggle, .theme-switch, .motion-toggle, .menu-button, .resume-short) {
  min-height: 38px;
  height: auto;
}
html[data-style] .section-topline { height: 58px; flex-shrink: 0; }
html[data-style] .site-menu {
  top: var(--chrome-height);
  bottom: 0;
  padding-inline: max(var(--shell-gutter), calc((100% - var(--shell-max)) / 2));
}
html[data-style] body:before { top: var(--chrome-height); }
html[data-style] .edge-streams { top: var(--chrome-height); }
html[data-style] .view { min-height: calc(100svh - var(--chrome-height)); }
html[data-style] :is(.projects-view, .research-view) { display: flex; flex-direction: column; }
html[data-style] .page-lead {
  padding: 44px 0 36px;
  gap: var(--layout-gap);
  align-items: flex-end;
}
html[data-style] .page-lead > div { min-width: 0; flex: 1; }
html[data-style] .page-lead > p { flex: 0 1 320px; min-width: 0; padding-bottom: 4px; }
html[data-style] .page-footer {
  min-height: 68px;
  padding-block: 18px;
  margin-top: auto;
  align-items: center;
  gap: 20px;
}
html[data-style] :is(.about-grid, .research-layout, .contact-layout, .project-grid) > * { min-width: 0; }
html[data-style] .detail-column { align-items: stretch; }
html[data-style] .block-heading { align-items: baseline; min-height: 34px; }
html[data-style] .block-heading h2 { white-space: normal; }
html[data-style] .capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(98px, auto);
}
html[data-style] .capability-grid > div {
  min-width: 0;
  height: 100%;
  align-content: center;
}
html[data-style] .capability-grid strong { overflow-wrap: anywhere; }
html[data-style] .download-heading { display: none; }
/* Real grid cells replace absolutely positioned titles, so translations can wrap. */
html[data-style=editorial] .portfolio-download,
html[data-style=cartoon] .portfolio-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-rows: auto 1fr;
  gap: 24px 12px;
  align-content: stretch;
  align-items: end;
  justify-content: normal;
  min-width: 0;
}
html[data-style=editorial] .portfolio-download:before,
html[data-style=editorial] .portfolio-download:after,
html[data-style=cartoon] .portfolio-download:before,
html[data-style=cartoon] .portfolio-download:after { display: none; }
html[data-style=editorial] .portfolio-download > .download-heading,
html[data-style=cartoon] .portfolio-download > .download-heading {
  display: block;
  grid-area: 1 / 1 / 2 / -1;
  align-self: start;
  justify-self: start;
  margin: 0;
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 550;
  line-height: 1.45;
  color: var(--accent);
  overflow-wrap: anywhere;
}
html[data-style=cartoon] .portfolio-download > .download-heading {
  font-family: var(--comic-font);
  font-weight: 400;
  color: var(--text);
  rotate: -2deg;
}
html[data-style=editorial] .portfolio-download > .download-info,
html[data-style=cartoon] .portfolio-download > .download-info {
  grid-area: 2 / 1;
  align-self: end;
  justify-self: start;
  min-width: 0;
  margin: 0;
}
html[data-style=editorial] .portfolio-download > svg,
html[data-style=cartoon] .portfolio-download > svg { grid-area: 2 / 2; align-self: end; margin-bottom: 3px; }
html[data-style=editorial] .portfolio-download { min-height: 230px; }
html[data-style=cartoon] .portfolio-download { min-height: 230px; }
/* Rows share fixed media proportions, two-line title slots and bottom-aligned tags. */
html[data-style] .project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px var(--layout-gap);
  align-items: stretch;
  padding-bottom: 48px;
}
html[data-style] .project-card { display: flex; flex-direction: column; min-width: 0; }
html[data-style] .project-image { aspect-ratio: 8 / 5; flex-shrink: 0; }
html[data-style] .project-card-top {
  min-height: 24px;
  align-items: center;
  margin: 17px 0 10px;
  line-height: 1.6;
}
html[data-style] .project-card h2 {
  min-height: 2.8em;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
}
html[data-style] .project-card h2 > button { align-items: flex-start; line-height: inherit; }
html[data-style] .project-card h2 > button > span { flex-shrink: 0; }
html[data-style] .project-card > p { margin: 10px 0 18px; line-height: 1.9; }
html[data-style] .project-card > .tags { margin-top: auto; align-items: center; min-height: 27px; }
html[data-style] :is(.research-layout, .contact-layout) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
html[data-style] .contact-layout { padding: 52px 0 64px; }
html[data-style] .contact-row { grid-template-columns: minmax(0, 1fr) 28px; }
html[data-style] .contact-row > a { min-width: 0; overflow-wrap: anywhere; }
html[data-style] .download-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-style] .download-pair > a { min-width: 0; align-content: start; }
html[data-style] .download-pair :is(strong, span) { overflow-wrap: anywhere; }
html[data-style] .dialog-sticky { padding: 16px 24px; }
html[data-style] .dialog-content { padding: 30px 32px 34px; }
@media (max-width: 1200px) {
  html[data-style=editorial] .detail-column,
  html[data-style=cartoon] .detail-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  html[data-style=editorial] .portfolio-download,
  html[data-style=cartoon] .portfolio-download {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
    grid-template-rows: auto;
    min-height: 104px;
    padding: 22px;
    gap: 18px;
    align-items: center;
    align-content: center;
  }
  html[data-style=editorial] .portfolio-download > .download-heading,
  html[data-style=cartoon] .portfolio-download > .download-heading { grid-area: 1 / 1; align-self: center; }
  html[data-style=editorial] .portfolio-download > .download-info,
  html[data-style=cartoon] .portfolio-download > .download-info { grid-area: 1 / 2; align-self: center; justify-self: end; }
  html[data-style=editorial] .portfolio-download > svg,
  html[data-style=cartoon] .portfolio-download > svg { grid-area: 1 / 3; align-self: center; margin: 0; }
}
@media (max-width: 1100px) {
  html[data-style] .nav-shell { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  html[data-style] .desktop-nav { display: none; }
}
@media (max-width: 800px) {
  html[data-style] .page-lead { align-items: flex-start; flex-direction: column; gap: 18px; padding: 32px 0 28px; }
  html[data-style] .page-lead > p { flex: none; max-width: 42em; }
  html[data-style] :is(.research-layout, .contact-layout) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  html[data-style] .research-layout { padding-top: 0; }
}
@media (max-width: 680px) {
  html[data-style] { --shell-gutter: 20px; --chrome-height: 72px; --layout-gap: 24px; }
  html[data-style] .nav-shell { gap: 8px; }
  html[data-style] .brand { font-size: 20px; letter-spacing: -.4px; }
  html[data-style] .nav-tools { gap: 6px; }
  html[data-style] .nav-tools > .resume-short,
  html[data-style] .menu-button > span,
  html[data-style] .style-toggle > span,
  html[data-style] .motion-toggle > span,
  html[data-style] .motion-toggle > i { display: none; }
  html[data-style] .nav-tools :is(button, a) { min-height: 44px; }
  html[data-style] .style-toggle { padding: 0 6px; gap: 4px; }
  html[data-style] .style-toggle > svg { width: 12px; height: 12px; }
  html[data-style] .motion-toggle { width: 30px; padding: 0; justify-content: center; }
  html[data-style] .theme-switch { width: 48px; padding-inline: 5px; gap: 4px; }
  html[data-style] .theme-switch > svg { width: 12px; height: 12px; }
  html[data-style] .menu-button { min-width: 26px; width: 26px; justify-content: center; }
  html[data-style] .section-topline { height: 54px; gap: 10px; }
  html[data-style] .topline-copy { display: none; }
  html[data-style] .about-grid { display: flex; flex-direction: column; max-height: none; gap: 0; }
  html[data-style] .intro-column { width: 100%; padding-inline: 0; }
  html[data-style] .visual-column { width: 100%; max-width: 440px; padding-inline: 0; border-inline: 0; align-self: center; }
  html[data-style] .detail-column { display: flex; flex-direction: column; gap: 32px; width: 100%; padding-inline: 0; }
  html[data-style] .detail-column > * { width: auto; max-width: 100%; }
  html[data-style] .project-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  html[data-style] .project-card h2 { min-height: 0; }
  html[data-style] .filters { gap: 8px; flex-wrap: wrap; }
  html[data-style] #project-count { display: none; }
  html[data-style] .project-toolbar { margin-bottom: 26px; }
  html[data-style] .contact-layout { min-height: 0; padding: 34px 0 48px; }
  html[data-style] .contact-details { max-width: 100%; }
  html[data-style=editorial] .portfolio-download,
  html[data-style=cartoon] .portfolio-download { grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; gap: 18px 12px; min-height: 126px; }
  html[data-style=editorial] .portfolio-download > .download-heading,
  html[data-style=cartoon] .portfolio-download > .download-heading { grid-area: 1 / 1 / 2 / -1; }
  html[data-style=editorial] .portfolio-download > .download-info,
  html[data-style=cartoon] .portfolio-download > .download-info { grid-area: 2 / 1; justify-self: start; }
  html[data-style=editorial] .portfolio-download > svg,
  html[data-style=cartoon] .portfolio-download > svg { grid-area: 2 / 2; }
  html[data-style] .dialog-content { padding: 24px 22px 28px; }
  html[data-style] .page-footer { min-height: 68px; align-items: flex-start; flex-wrap: wrap; gap: 10px 20px; font-size: 8px; }
}
@media (max-width: 380px) {
  html[data-style] { --shell-gutter: 16px; }
  html[data-style] .brand { font-size: 18px; }
  html[data-style] .capability-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(82px, auto); }
  html[data-style] .download-pair { grid-template-columns: minmax(0, 1fr); }
  html[data-style] .download-pair > a + a { border-left: 0; }
  html[data-style=cartoon] .download-pair > a + a { border: 1.5px solid var(--comic-ink); }
}
@media print {
  html[data-style] .view { width: 100%; min-height: 0; }
  html[data-style] :is(.about-grid, .detail-column, .contact-layout, .research-layout) { display: block; }
  html[data-style] .portfolio-download { min-height: 0; }
  html[data-style] .project-card { break-inside: avoid; }
}

/* One consistent menu affordance across all art directions. */
html[data-style] .menu-button > span {
  display: inline;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
}
html[data-style] .menu-button {
  width: auto;
  min-width: 62px;
  gap: 8px;
  justify-content: center;
}
html[data-style] .menu-button > svg { width: 17px; height: 17px; }
html[data-style] .github-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: var(--paper);
}
html[data-style] .github-link > svg { width: 19px; height: 19px; }
html[data-style] .github-link:hover { color: var(--accent); border-color: var(--accent); }
html[data-style=cartoon] .github-link {
  border: 1.5px solid var(--comic-ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--comic-shadow);
}
@media (max-width: 680px) {
  html[data-style] { --chrome-height: 112px; }
  html[data-style] .nav-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 26px 44px;
    padding-block: 14px;
    align-content: center;
    gap: 8px;
  }
  html[data-style] .brand { justify-self: start; }
  html[data-style] .nav-tools {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-end;
    gap: 8px;
  }
  html[data-style] .menu-button { min-width: 62px; min-height: 44px; }
  html[data-style] .github-link { width: 34px; min-height: 44px; }
}
@media print { html[data-style] .github-link { display: none; } }