:root {
  --bg: #f5f1e8;
  --ink: #1d3032;
  --muted: #657775;
  --accent: #e76345;
  --soft: #dce6df;
  --panel: #ebe5d9;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light
}

html {
  background: var(--bg);
  scroll-padding-top: env(safe-area-inset-top, 0px)
}

*,
*::before,
*::after {
  box-sizing: inherit
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased
}

a {
  color: inherit
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

.logo {
  font: 800 1.1rem var(--display);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem
}

.logo i {
  width: 1.2rem;
  height: 1.2rem;
  background: var(--accent);
  border-radius: 60% 40% 55% 45%/50% 60% 40% 50%
}

header a.m {
  color: var(--muted);
  text-decoration: none
}

header a.m:hover {
  color: var(--ink)
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 30%, transparent)
}

.tab {
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: .5rem .7rem;
  color: var(--muted);
  font: 600 .92rem var(--body);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease
}

.tab:hover,
.tab:focus-visible {
  color: var(--ink)
}

.tab:hover {
  border-bottom-color: var(--accent)
}

[hidden] {
  display: none !important
}

.text-panel {
  min-height: 12rem;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  scroll-margin-top: 1.5rem
}

.course-list {
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.portfolio-title {
  margin: 0;
  padding: 1.4rem 0 .35rem;
  font: 700 clamp(1.6rem, 3.5vw, 2.35rem)/1.15 var(--display);
  letter-spacing: -.04em
}

.course-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  color: var(--ink);
  font: 600 clamp(1rem, 2vw, 1.35rem)/1.35 var(--display);
  text-decoration: none;
  transition: color .2s ease, padding .2s ease
}

.course-row:hover {
  padding-right: .75rem;
  padding-left: .75rem;
  color: var(--muted)
}

.course-row-external {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel))
}

.course-row-external:hover {
  padding-right: 1.15rem;
  padding-left: 1.15rem;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--ink)
}

.course-row-title {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.course-row-title small {
  color: var(--muted);
  font: 500 .72rem/1.4 var(--body)
}

.course-row-external .course-meta {
  gap: .45rem;
  padding: .45rem .7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase
}

.course-row-external .course-meta b {
  color: inherit;
  font-size: 1rem
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--muted);
  font: 500 .95rem var(--body);
  white-space: nowrap
}

.course-meta b {
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 500
}

.back-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--muted);
  text-decoration-color: var(--accent);
  text-underline-offset: .3em
}

.back-link:hover {
  color: var(--ink)
}

.course-intro {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem)
}

.course-intro h1 {
  max-width: 15ch
}

.course-intro>p:last-child,
.course-work>p {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem)
}

.course-year {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em
}

.course-work {
  min-height: 10rem;
  padding: 1.5rem 0 clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent)
}

.course-work h2 {
  font: 700 clamp(1.6rem, 3.5vw, 2.5rem)/1.15 var(--display);
  letter-spacing: -.04em
}

.information-hero {
  padding-bottom: 2rem
}

.information-hero>p:last-child {
  max-width: 36rem
}

.dashboard-section,
.homeworks-section {
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent)
}

.iv-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.25rem
}

.iv-section-heading h2 {
  margin: 0;
  font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--display);
  letter-spacing: -.04em
}

.iv-badge,
.homework-count {
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap
}

.dashboard-preview-link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: .9rem;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%)
}

.dashboard-preview-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease
}

.dashboard-preview-link:hover img {
  transform: scale(1.015)
}

.dashboard-open-cta {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: .82rem;
  font-weight: 700
}

.dashboard-caption {
  margin: .65rem 0 0;
  color: var(--muted);
  font-size: .8rem
}

.homework-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem
}

.homework-card {
  display: block;
  min-width: 0;
  width: 100%;
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease
}

.homework-card:hover,
.homework-card[aria-expanded="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 90%, transparent)
}

.homework-card:hover {
  transform: translateY(-2px)
}

.homework-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: .55rem;
  background: var(--soft)
}

.homework-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.homework-card[data-homework="physical-vis"] .homework-art img {
  object-position: top center
}

.homework-art-four {
  background: #b6ccd3
}

.homework-art-four img {
  object-fit: contain
}

.homework-label {
  display: block;
  margin: .85rem 0 .35rem;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em
}

.homework-title {
  display: block;
  font: 600 .95rem/1.3 var(--display)
}

.homework-panels {
  margin-top: 1.25rem
}

.homework-panel {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  scroll-margin-top: 1rem
}

.homework-panel>p {
  max-width: 52rem;
  margin: .7rem 0;
  color: var(--muted);
  line-height: 1.7
}

.homework-panel>p strong {
  color: var(--ink)
}

.homework-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: .5rem
}

.homework-panel-heading .section-kicker {
  margin-bottom: .4rem
}

.homework-panel-heading h3 {
  margin: 0;
  font: 700 clamp(1.25rem, 2.5vw, 1.8rem)/1.2 var(--display)
}

.homework-kind {
  padding: .4rem .65rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap
}

.dear-data-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem
}

.dear-data-images figure,
.homework-video,
.homework-artifact {
  margin: 0
}

.dear-data-images img {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  border-radius: .5rem;
  background: #f4f0e6
}

.dear-data-images figcaption,
.homework-video figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .82rem
}

.homework-video {
  max-width: 52rem;
  margin-top: 1.25rem
}

.dashboard-video {
  max-width: 52rem;
  margin: 1.25rem 0 0
}

.dashboard-video figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .82rem
}

.homework-video video {
  display: block;
  width: 100%;
  border-radius: .65rem;
  background: #05090d
}

.homework-artifact {
  max-width: 56rem;
  margin: 1.25rem auto 0;
  padding: .5rem;
  border-radius: .65rem;
  background: #f4f0e6
}

.homework-artifact img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .35rem
}

.zine-booklet {
  width: min(100%, 48rem);
  margin: 1.5rem auto .25rem
}

.zine-book {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  aspect-ratio: 1016 / 720;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: .55rem;
  background: #d9d4ca;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 32%);
  transform-style: preserve-3d
}

.zine-book.is-single {
  width: 50%;
  grid-template-columns: 1fr;
  aspect-ratio: 508 / 720;
  margin-inline: auto
}

.zine-book::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.1rem;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgb(29 28 25 / 16%), rgb(255 255 255 / 28%) 48%, rgb(29 28 25 / 12%));
  transform: translateX(-50%)
}

.zine-book.is-single::after {
  display: none
}

.zine-page {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: #f4f0e6;
  box-shadow: inset 0 0 1.5rem rgb(36 34 30 / 9%)
}

.zine-left {
  box-shadow: inset -1.1rem 0 1.5rem -1.2rem rgb(0 0 0 / 45%)
}

.zine-right {
  box-shadow: inset 1.1rem 0 1.5rem -1.2rem rgb(0 0 0 / 45%)
}

.zine-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.zine-page[hidden] {
  display: none
}

.zine-page[role="button"] {
  cursor: pointer
}

.zine-page[role="button"] img {
  transition: filter .18s ease
}

.zine-page[role="button"]:hover img {
  filter: brightness(.96)
}

.zine-book.is-turning-next {
  animation: turn-spread-next .5s cubic-bezier(.2, .7, .2, 1)
}

.zine-book.is-turning-prev {
  animation: turn-spread-prev .5s cubic-bezier(.2, .7, .2, 1)
}

@keyframes turn-spread-next {
  0% {
    opacity: .82;
    transform: perspective(1100px) rotateY(-4deg) translateX(10px)
  }

  55% {
    opacity: 1;
    transform: perspective(1100px) rotateY(2deg) translateX(-3px)
  }

  100% {
    transform: perspective(1100px) rotateY(0) translateX(0)
  }
}

@keyframes turn-spread-prev {
  0% {
    opacity: .82;
    transform: perspective(1100px) rotateY(4deg) translateX(-10px)
  }

  55% {
    opacity: 1;
    transform: perspective(1100px) rotateY(-2deg) translateX(3px)
  }

  100% {
    transform: perspective(1100px) rotateY(0) translateX(0)
  }
}

.zine-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: .8rem
}

.zine-controls button {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  font: 600 1rem var(--body);
  cursor: pointer
}

.zine-controls button:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.zine-count {
  min-width: 3rem;
  color: var(--muted);
  font-size: .85rem;
  text-align: center
}

.zine-note {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .75rem;
  text-align: center
}

@media (prefers-reduced-motion: reduce) {

  .zine-book.is-turning-next,
  .zine-book.is-turning-prev {
    animation: none
  }
}

.project-hero {
  max-width: 58rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem)
}

.project-hero h1 {
  max-width: 16ch;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  text-transform: uppercase
}

.project-lead {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.6
}

.project-section {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.project-section h2 {
  margin: 0 0 1.5rem;
  font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--display);
  letter-spacing: -.04em
}

.project-section h3 {
  font: 700 clamp(1.05rem, 1.8vw, 1.35rem)/1.35 var(--display)
}

.project-section p {
  line-height: 1.6
}

.section-kicker,
.step-label {
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em
}

.project-tags,
.topic-list,
.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0;
  list-style: none
}

.project-tags span,
.topic-list li,
.feature-chips li {
  padding: .4rem .7rem;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
  color: var(--muted);
  font-size: .82rem
}

.flow-section {
  padding: 1.5rem 0 2rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.flow-heading {
  margin-bottom: 2rem
}

.flow-heading h2,
.project-section h2 {
  margin: 0 0 1.1rem;
  font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--display);
  letter-spacing: -.04em
}

.flow-step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent)
}

.flow-number {
  color: var(--accent);
  font: 700 1.5rem/1 var(--display)
}

.step-label {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em
}

.flow-content h3 {
  margin: 0 0 .75rem;
  font: 700 clamp(1.05rem, 1.8vw, 1.35rem)/1.35 var(--display)
}

.topic-list {
  margin: 0 0 1rem
}

.topic-list li {
  padding: .35rem .6rem;
  background: color-mix(in srgb, var(--soft) 35%, transparent);
  border: 0;
  color: var(--ink);
  font-size: .78rem
}

.flow-outcome {
  max-width: 52rem;
  margin: 1rem 0;
  color: var(--muted);
  line-height: 1.7
}

.flow-outcome strong {
  margin-right: .5rem;
  color: var(--ink)
}

.project-gallery {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem
}

.gallery-heading h2 {
  margin: 0;
  font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--display);
  letter-spacing: -.04em
}

.gallery-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  background: var(--panel)
}

.gallery-slide {
  position: absolute;
  inset: 0;
  margin: 0
}

.gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gallery-stage>button,
.hci-gallery-stage>button {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: rgb(8 11 15 / 78%);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .2s ease, background .2s ease
}

.gallery-stage>button:hover,
.hci-gallery-stage>button:hover {
  background: var(--accent);
  color: var(--bg)
}

.gallery-stage>button:focus-visible,
.hci-gallery-stage>button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  opacity: 1;
  pointer-events: auto
}

.gallery-stage>.gallery-prev {
  left: .65rem
}

.gallery-stage>.gallery-next {
  right: .65rem
}

.gallery-stage:hover>button,
.gallery-stage:focus-within>button,
.hci-gallery-stage:hover>button,
.hci-gallery-stage:focus-within>button {
  opacity: 1;
  pointer-events: auto
}

.gallery-dots,
.hci-photo-dots {
  position: absolute;
  z-index: 1;
  right: .5rem;
  bottom: .65rem;
  left: .5rem;
  display: flex;
  justify-content: center;
  gap: .3rem;
  padding: .45rem .55rem;
  border-radius: 999px;
  background: rgb(8 11 15 / 72%)
}

.gallery-dot,
.hci-photo-dot {
  width: .42rem;
  height: .42rem;
  flex: 0 0 .42rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 52%);
  cursor: pointer;
  transition: width .2s ease, flex-basis .2s ease, background .2s ease
}

.gallery-dot.is-active,
.hci-photo-dot.is-active {
  width: 1.1rem;
  flex-basis: 1.1rem;
  background: var(--accent)
}

.gallery-dot:focus-visible,
.hci-photo-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}

@media (hover: none) {

  .gallery-stage>button,
  .hci-gallery-stage>button {
    opacity: 1;
    pointer-events: auto
  }
}

.video-figure {
  max-width: 56rem;
  margin: 1.5rem 0 0
}

.video-figure figcaption {
  color: var(--muted)
}

.video-figure figcaption {
  margin-top: .65rem;
  font-size: .85rem
}

.project-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.project-section .project-lead {
  max-width: 48rem;
  margin-top: 0
}

.feature-chips {
  margin: 1.5rem 0 2rem
}

.feature-chips li {
  border-color: transparent;
  background: var(--soft);
  color: var(--ink);
  font-weight: 600
}

.video-figure {
  max-width: 48rem
}

.research-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: .75rem;
  background: var(--panel)
}

.research-copy .section-kicker {
  margin-bottom: .4rem
}

.research-copy h3 {
  margin: 0 0 .35rem;
  font: 700 1.2rem/1.3 var(--display)
}

.research-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: .9rem
}

.research-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none
}

.research-link:hover {
  filter: brightness(1.08)
}

.hci-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem 0 2rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent)
}

.hci-jump-links a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 13rem;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: .65rem;
  background: var(--panel);
  font-weight: 700;
  text-decoration: none
}

.hci-jump-links a span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500
}

.hci-jump-links a:hover {
  border-color: var(--accent)
}

.hci-project {
  scroll-margin-top: 1rem
}

.hci-project-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem
}

.hci-project-heading h2 {
  margin: 0
}

.hci-project-heading .section-kicker {
  margin-bottom: .5rem
}

.hci-project-number {
  color: var(--accent);
  font: 700 clamp(2rem, 5vw, 4rem)/1 var(--display)
}

.hci-project>.project-lead {
  margin-bottom: .7rem
}

.hci-description {
  max-width: 50rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.7
}

.hci-method-note {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .65rem;
  margin: 1rem 0 1.4rem;
  padding: .5rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: .84rem;
  font-weight: 700
}

.hci-method-note span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500
}

.hci-prototype-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0
}

.hci-photo-slide {
  min-width: 0
}

.hci-photo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem
}

.hci-photo-slide h3 {
  margin: 0;
  font: 600 .92rem/1.4 var(--display);
  color: var(--muted)
}

.hci-gallery-stage {
  position: relative;
  width: min(100%, 19rem);
  aspect-ratio: 393 / 852;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: .8rem;
  background: #11151a
}

.hci-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hci-photo-prev {
  left: .65rem
}

.hci-photo-next {
  right: .65rem
}

.hci-figma-preview {
  overflow: hidden;
  max-width: 30rem;
  margin: 1.1rem 0 1.25rem;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: .85rem;
  background: #161a20;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%)
}

.hci-figma-preview img {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: contain
}

.hci-bakeoff2-preview {
  max-width: 54rem;
  margin: 1.25rem auto 1.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: .8rem;
  background: #050505
}

.hci-bakeoff2-preview img {
  display: block;
  width: 100%;
  height: auto
}

.hci-figma-button {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  margin: 0 auto 1.5rem;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 .45rem 1.25rem color-mix(in srgb, var(--accent) 25%, transparent);
  transition: transform .2s ease, filter .2s ease
}

.hci-figma-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08)
}

.hci-figma-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px
}

.hci-resource-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem
}

.hci-file-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none
}

.hci-file-link:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.hci-results-heading {
  margin: 1.75rem 0 .75rem
}

.hci-results-heading .section-kicker {
  margin-bottom: .35rem
}

.hci-results-heading h3 {
  margin: 0;
  font: 700 1.2rem/1.3 var(--display)
}

.hci-bar-chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 2.2vw, 1.5rem);
  max-width: none;
  margin: 1.2rem 0 1.5rem;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--panel) 72%, transparent)
}

.hci-bar-item {
  display: grid;
  grid-template-rows: auto 11rem auto auto;
  justify-items: center;
  min-width: 0;
  text-align: center
}

.hci-bar-value {
  align-self: end;
  margin-bottom: .55rem;
  color: var(--accent);
  font: 700 1rem var(--display);
  white-space: nowrap
}

.hci-bar-value span {
  margin-left: .1rem;
  font-size: .7rem
}

.hci-bar-track {
  display: flex;
  width: min(62%, 5.5rem);
  height: 11rem;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  background: linear-gradient(to bottom, transparent calc(100% - 1px), color-mix(in srgb, var(--muted) 14%, transparent) calc(100% - 1px))
}

.hci-bar-track span {
  display: block;
  width: 100%;
  height: var(--bar-height);
  border-radius: .4rem .4rem 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 52%, var(--panel)))
}

.hci-bar-label {
  margin-top: .65rem;
  font: 600 .82rem/1.35 var(--display)
}

.hci-bar-detail {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4
}

.hci-results-note {
  max-width: 52rem;
  margin: .9rem 0 1.25rem;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65
}

.hci-final-result {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 1.35rem 0 1.6rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel))
}

.hci-final-result-number {
  color: var(--accent);
  font: 700 clamp(2.5rem, 6vw, 4rem)/1 var(--display);
  letter-spacing: -.06em;
  white-space: nowrap
}

.hci-final-result-number span {
  margin-left: .15em;
  font-size: .42em;
  letter-spacing: 0
}

.hci-final-result-copy .section-kicker {
  margin-bottom: .35rem;
  color: var(--accent)
}

.hci-final-result-copy h3 {
  margin: 0 0 .35rem;
  font: 700 1.05rem/1.35 var(--display)
}

.hci-final-result-copy p:last-child {
  max-width: 45rem;
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6
}

.hci-final-result-copy strong {
  color: var(--ink)
}

@media (max-width: 560px) {
  .hci-final-result {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
    padding: 1.1rem
  }
}

.hci-source-files {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: .7rem;
  background: var(--panel)
}

.hci-source-files summary {
  cursor: pointer;
  font-weight: 600
}

.hci-source-files ul {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  margin: .8rem 0 0;
  padding-left: 1.2rem
}

.hci-source-files a {
  color: var(--muted);
  text-underline-offset: .2em
}

.hci-source-files a:hover {
  color: var(--ink)
}

.video-frame {
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  background: var(--panel)
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.future-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent)
}

.future-strip span {
  color: var(--muted)
}

#portfolio {
  scroll-margin-top: 1.5rem
}

.text-panel h2 {
  margin: 0 0 1rem;
  font: 800 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--display);
  letter-spacing: -.04em
}

.text-panel p {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem)
}

.contact-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 500;
  text-underline-offset: .25em;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px
}

.intro {
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem)
}

h1 {
  font: 800 clamp(1.8rem, 4vw, 3.5rem)/1.05 var(--display);
  letter-spacing: -.04em;
  margin: 0 0 1rem
}

.intro p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted)
}

@media (max-width:700px) {

  header {
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column
  }

  .tabs {
    width: 100%;
    justify-content: flex-start
  }

  .course-row {
    gap: .75rem;
    padding: 1.25rem 0
  }

  .course-meta {
    gap: .5rem;
    font-size: .85rem
  }

  .flow-step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem
  }

  .gallery-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .homework-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem
  }

  .iv-section-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .research-card {
    align-items: flex-start;
    flex-direction: column
  }

  .homework-panel-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .hci-jump-links a {
    flex: 1 1 10rem;
    min-width: 0
  }

  .hci-prototype-gallery {
    grid-template-columns: 1fr
  }

  .hci-bar-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.2rem
  }

  .hci-bar-item {
    grid-template-rows: auto 9rem auto auto
  }

  .hci-bar-track {
    height: 9rem
  }

  .hci-figma-button {
    padding: .8rem 1rem;
    font-size: .82rem
  }

  .dear-data-images {
    grid-template-columns: 1fr
  }

  .dear-data-images img {
    max-height: 42rem
  }

}

footer {
  background: var(--panel);
  color: var(--ink);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 1.5rem
}

footer .mail {
  font: 800 clamp(1.5rem, 4vw, 3rem)/1.1 var(--display);
  letter-spacing: -.03em;
  text-decoration: none;
  border-bottom: 4px solid var(--accent);
  word-break: break-word
}

footer .mail:hover {
  border-bottom-style: dashed
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-weight: 500
}

footer ul a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 55%, transparent)
}

footer :focus-visible {
  outline-color: var(--accent)
}

@media (prefers-reduced-motion:no-preference) {

  h1,
  .intro p {
    animation: rise .7s cubic-bezier(.2, .7, .2, 1) both
  }

  .intro p {
    animation-delay: .1s
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px)
    }
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    transition: none !important
  }
}

/* Portfolio visual refresh: editorial type, warm paper and clearer interactions. */
:root {
  --bg: #f5f1e8;
  --ink: #1d3032;
  --muted: #657775;
  --accent: #e76345;
  --soft: #dce6df;
  --panel: #ebe5d9;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse at 92% 4%, rgb(231 99 69 / 10%), transparent 29rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.65;
}

.wrap {
  max-width: 78rem;
}

header {
  position: relative;
  z-index: 2;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(29 48 50 / 14%);
}

.logo {
  font-weight: 700;
  letter-spacing: -.04em;
}

.logo i {
  border-radius: 35% 65% 60% 40%;
  transform: rotate(-18deg);
}

.tabs {
  gap: .25rem;
  border: 0;
}

.tab {
  padding: .55rem .9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
}

.tab:hover,
.tab:focus-visible {
  border-color: rgb(29 48 50 / 14%);
  background: #fffaf1;
  color: var(--ink);
}

.intro {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.intro::before {
  content: "DESIGN · CODE · PEOPLE";
  display: inline-block;
  margin-bottom: 1.35rem;
  padding: .45rem .8rem;
  border: 1px solid rgb(29 48 50 / 20%);
  border-radius: 999px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .14em;
}

h1 {
  max-width: 16ch;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .99;
}

.intro p {
  max-width: 36rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.course-list {
  padding: 1.35rem;
  border: 1px solid rgb(29 48 50 / 13%);
  border-radius: 1.25rem;
  background: rgb(255 252 246 / 68%);
  box-shadow: 0 1.25rem 3rem rgb(29 48 50 / 5%);
}

.portfolio-title {
  padding: .25rem .5rem 1rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.course-row {
  position: relative;
  margin: .4rem 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgb(29 48 50 / 12%);
  border-radius: .9rem;
  background: #f9f6ef;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.course-row:hover,
.course-row:focus-visible {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #fffaf1;
  color: var(--ink);
  box-shadow: 0 .5rem 1.25rem rgb(29 48 50 / 8%);
}

.course-meta {
  color: var(--muted);
  font-size: .83rem;
  font-weight: 700;
}

.course-meta b {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fffaf1;
  font-size: 1rem;
  transition: background .2s ease, transform .2s ease;
}

.course-row:hover .course-meta b {
  transform: rotate(45deg);
  background: var(--accent);
}

.course-row-external {
  margin-top: .9rem;
  border: 1px solid #1d3032;
  background: #1d3032;
  color: #fffaf1;
}

.course-row-external .course-meta {
  color: #f2c9a8;
}

.course-row-external .course-meta b {
  background: var(--accent);
  color: #1d3032;
}

.course-row-external:hover {
  border-color: var(--accent);
  background: #263d3e;
  color: #fffaf1;
}

.course-row-title small {
  color: #bdcbc4;
}

.text-panel {
  min-height: 0;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 1.25rem;
  background: var(--soft);
}

.text-panel h2,
.course-work h2,
.project-section h2,
.flow-heading h2,
.gallery-heading h2,
.iv-section-heading h2 {
  font-weight: 600;
  letter-spacing: -.055em;
}

.course-intro {
  padding-top: clamp(3rem, 7vw, 5rem);
}

.course-intro h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 5vw, 4.35rem);
}

.course-year,
.section-kicker,
.step-label {
  color: #ad4c35;
  font-size: .72rem;
  letter-spacing: .16em;
}

.course-work,
.project-section,
.flow-section,
.dashboard-section,
.homeworks-section {
  border-color: rgb(29 48 50 / 15%);
}

.project-section,
.flow-section {
  padding-top: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

.project-tags span,
.topic-list li,
.feature-chips li {
  border-color: rgb(29 48 50 / 17%);
  background: #fffaf1;
  color: var(--ink);
}

.flow-step {
  border-color: rgb(29 48 50 / 13%);
}

.flow-number {
  color: var(--accent);
}

.project-gallery {
  max-width: 38rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-color: rgb(29 48 50 / 15%);
}

.gallery-stage,
.hci-gallery-stage {
  border: 1px solid rgb(29 48 50 / 15%);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgb(29 48 50 / 12%);
}

.dashboard-section,
.homeworks-section {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.iv-badge,
.homework-count {
  border: 1px solid rgb(29 48 50 / 17%);
  background: var(--soft);
  color: var(--ink);
}

.dashboard-preview-link {
  border: 1px solid rgb(29 48 50 / 20%);
  border-radius: 1rem;
  box-shadow: 0 1.25rem 3rem rgb(29 48 50 / 12%);
  cursor: pointer;
}

.dashboard-preview-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}

.dashboard-preview-link:hover::after,
.dashboard-preview-link:focus-visible::after {
  border-color: var(--accent);
}

.dashboard-open-cta {
  background: var(--accent);
  color: #fffaf1;
  box-shadow: 0 .35rem 1rem rgb(29 48 50 / 25%);
}

.homework-card {
  position: relative;
  padding: .7rem;
  border: 1px solid rgb(29 48 50 / 16%);
  border-radius: 1rem;
  background: #fffaf1;
  box-shadow: 0 .5rem 1.25rem rgb(29 48 50 / 5%);
}

.homework-card::after {
  content: "Open details";
  display: block;
  margin: .65rem .2rem .15rem;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}

.homework-card:hover,
.homework-card[aria-expanded="true"] {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: #fffdf8;
  box-shadow: 0 .8rem 1.6rem rgb(29 48 50 / 11%);
}

.homework-card[aria-expanded="true"]::after {
  color: #ad4c35;
  content: "Close details";
}

.homework-art {
  border-radius: .7rem;
}

.homework-label {
  color: #ad4c35;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.homework-title {
  color: var(--ink);
  font-weight: 700;
}

.homework-panel,
.research-card,
.hci-final-result {
  border-radius: 1rem;
  background: #fffaf1;
}

.back-link,
.contact-link,
.hci-file-link {
  color: #245c58;
  font-weight: 700;
}

.back-link:hover,
.contact-link:hover,
.hci-file-link:hover {
  color: #ad4c35;
}

a,
button {
  -webkit-tap-highlight-color: rgb(231 99 69 / 18%);
}

button:focus-visible,
a:focus-visible {
  outline-color: var(--accent);
}

footer {
  background: #1d3032;
  color: #fffaf1;
}

footer .wrap {
  max-width: 78rem;
}

footer .mail {
  border-color: var(--accent);
}

footer ul a {
  border-color: rgb(255 250 241 / 50%);
}

@media (max-width: 700px) {
  .course-list {
    padding: .8rem;
  }

  .portfolio-title {
    padding-inline: .4rem;
  }

  .course-row {
    padding: 1rem .85rem;
    font-size: 1rem;
  }

  .course-row:hover,
  .course-row:focus-visible {
    padding-inline: .85rem;
  }

  .course-meta {
    gap: .4rem;
  }

  .course-row-external {
    padding: .9rem;
  }

  .text-panel {
    padding: 1.5rem;
  }
}

/* Academic journey and other projects */
.journey-section,
.other-projects-section {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgb(29 48 50 / 13%);
  border-radius: 1.25rem;
  background: rgb(255 252 246 / 72%);
}

.section-heading-block {
  max-width: 43rem;
  margin-bottom: 2rem;
}

.section-heading-block h2 {
  margin: 0 0 .8rem;
  font: 600 clamp(1.8rem, 4vw, 2.8rem)/1.08 var(--display);
  letter-spacing: -.06em;
}

.section-heading-block>p:last-child {
  margin: 0;
  color: var(--muted);
}

.journey-entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgb(29 48 50 / 14%);
  border-bottom: 1px solid rgb(29 48 50 / 14%);
}

.journey-marker {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fffaf1;
  font: 700 1.0rem var(--display);
}

.journey-period {
  margin: 0 0 .4rem;
  color: #ad4c35;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.journey-entry h3 {
  margin: 0 0 .45rem;
  font: 600 1.35rem/1.2 var(--display);
  letter-spacing: -.04em;
}

.journey-entry p:last-child {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
}

.journey-courses {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.2rem;
}

.journey-courses span {
  padding: .55rem .8rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: .82rem;
}

.journey-courses b {
  margin-right: .35rem;
  color: #245c58;
}

.other-project-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid #1d3032;
  border-radius: .9rem;
  background: #1d3032;
  color: #fffaf1;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.other-project-link:hover,
.other-project-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #263d3e;
}

.other-project-index {
  color: #f2c9a8;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.other-project-copy {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.other-project-copy strong {
  font: 600 1.08rem var(--display);
}

.other-project-copy small {
  color: #bdcbc4;
}

.other-project-arrow {
  color: #f2c9a8;
  font-size: 1.4rem;
  transition: transform .2s ease;
}

.other-project-link:hover .other-project-arrow {
  transform: translate(2px, -2px);
}

.other-project-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 700px) {

  .journey-section,
  .other-projects-section {
    padding: 1.25rem;
  }

  .other-project-link {
    grid-template-columns: 1fr auto;
  }

  .other-project-index {
    grid-column: 1 / -1;
  }

  .other-project-copy strong {
    font-size: 1rem;
  }
}

/* Study periods sit opposite each degree entry. */
.journey-entry {
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: start;
}

.journey-dates {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-top: .2rem;
  color: var(--ink);
  font: 700 .92rem/1.2 var(--display);
  white-space: nowrap;
}

.journey-dates time:first-child {
  color: var(--muted);
}

.journey-dates time:last-child,
.journey-present {
  color: #ad4c35;
}

.journey-present {
  font-weight: 700;
}

@media (max-width: 700px) {
  .journey-entry {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .journey-dates {
    grid-column: 2;
    grid-row: 2;
    padding-top: .1rem;
    font-size: .82rem;
  }
}

/* Siemens Accelerate NextGen project page */
.competition-tracks,
.siemens-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.competition-track {
  position: relative;
  min-height: 14rem;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid rgb(29 48 50 / 14%);
  border-radius: 1rem;
  background: #fffaf1;
}

.competition-track-number {
  position: absolute;
  top: .4rem;
  right: 1rem;
  color: rgb(29 48 50 / 9%);
  font: 700 4.5rem/1 var(--display);
}

.competition-track .section-kicker {
  margin-top: .4rem;
}

.competition-track h3,
.siemens-steps h3 {
  margin: .5rem 0;
  font: 600 1.3rem/1.2 var(--display);
  letter-spacing: -.04em;
}

.competition-track p:last-child,
.siemens-steps p {
  max-width: 33rem;
  margin-bottom: 0;
  color: var(--muted);
}

.siemens-copy {
  max-width: 48rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.siemens-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.siemens-steps article {
  padding: 1.1rem;
  border-top: 2px solid var(--accent);
  background: rgb(255 250 241 / 65%);
}

.siemens-steps article>span {
  color: #ad4c35;
  font: 700 .8rem var(--display);
}

.siemens-sources ul {
  display: grid;
  gap: .65rem;
  padding-left: 1.2rem;
}

.siemens-sources a {
  color: #245c58;
  text-underline-offset: .2em;
}

.siemens-sources a:hover {
  color: #ad4c35;
}

@media (max-width: 700px) {

  .competition-tracks,
  .siemens-steps {
    grid-template-columns: 1fr;
  }

  .competition-track {
    min-height: 0;
  }
}

/* Signalis architecture and project details */
.signalis-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  counter-reset: signalis;
}

.signalis-step {
  position: relative;
  min-height: 15rem;
  padding: 1.35rem;
  border: 1px solid rgb(29 48 50 / 14%);
  border-radius: 1rem;
  background: #fffaf1;
}

.signalis-step-number {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--soft);
  color: #245c58;
  font: 700 .8rem var(--display);
}

.signalis-step .section-kicker {
  margin-bottom: .35rem;
  font-size: .66rem;
}

.signalis-step h3 {
  margin: 0 0 .6rem;
  font: 600 1.25rem/1.2 var(--display);
  letter-spacing: -.04em;
}

.signalis-step p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.signalis-step strong {
  color: var(--ink);
}

.signalis-innovation {
  padding-inline: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid rgb(29 48 50 / 12%);
  border-radius: 1rem;
  background: var(--soft);
}

.signalis-innovation>p:not(.section-kicker) {
  max-width: 48rem;
  color: var(--muted);
}

.signalis-tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: .82rem;
}

.signalis-tech strong {
  padding: .4rem .75rem;
  border-radius: 999px;
  background: #1d3032;
  color: #fffaf1;
  font: 600 .9rem var(--display);
}

.signalis-sources {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding-left: 1.2rem;
}

.signalis-sources a {
  color: #245c58;
  text-underline-offset: .2em;
}

.signalis-sources a:hover {
  color: #ad4c35;
}

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

  .signalis-step {
    min-height: 0;
  }

  .signalis-tech {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Siemens Accelerate NextGen palette and finalist result */
body.siemens-theme {
  --bg: #000028;
  --ink: #ffffff;
  --muted: #c0c4d8;
  --accent: #01ffb9;
  --soft: #11183c;
  --panel: #080d35;
  color-scheme: dark;
  background: radial-gradient(ellipse at 92% 4%, rgb(0 230 220 / 11%), transparent 30rem), #000028;
  color: #ffffff;
}

body.siemens-theme header {
  border-color: rgb(255 255 255 / 16%);
}

body.siemens-theme .logo i {
  background: #00e6dc;
}

body.siemens-theme .tab {
  color: #c0c4d8;
}

body.siemens-theme .tab:hover,
body.siemens-theme .tab:focus-visible {
  border-color: rgb(1 255 185 / 42%);
  background: #10143a;
  color: #fff;
}

body.siemens-theme .back-link {
  color: #00e6dc;
  text-decoration-color: #00e6dc;
}

body.siemens-theme .back-link:hover,
body.siemens-theme .back-link:focus-visible {
  color: #01ffb9;
  text-decoration-color: #01ffb9;
}

body.siemens-theme .course-year,
body.siemens-theme .section-kicker {
  color: #00e6dc;
}

body.siemens-theme .project-section {
  border-color: rgb(255 255 255 / 17%);
}

body.siemens-theme .project-tags span {
  border: 1px solid rgb(1 255 185 / 38%);
  background: #0a1239;
  color: #fff;
}

body.siemens-theme .signalis-step {
  border-color: rgb(255 255 255 / 15%);
  background: #080d35;
}

body.siemens-theme .signalis-step-number {
  background: rgb(0 230 220 / 13%);
  color: #00e6dc;
}

body.siemens-theme .signalis-step p:last-child,
body.siemens-theme .signalis-innovation>p:not(.section-kicker),
body.siemens-theme .siemens-copy {
  color: #c0c4d8;
}

body.siemens-theme .signalis-innovation {
  border-color: rgb(0 230 220 / 38%);
  background: #080d35;
}

body.siemens-theme .signalis-tech strong {
  background: #01ffb9;
  color: #000028;
}

body.siemens-theme .signalis-sources a {
  color: #01ffb9;
}

body.siemens-theme .signalis-sources a:hover {
  color: #00e6dc;
}

body.siemens-theme footer {
  background: #080d35;
  color: #fff;
}

body.siemens-theme footer .mail {
  border-color: #01ffb9;
  color: #fff;
}

body.siemens-theme footer ul a {
  border-color: rgb(255 255 255 / 50%);
}

.siemens-finalist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  width: fit-content;
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  border: 1px solid #01ffb9;
  border-radius: .75rem;
  background: rgb(1 255 185 / 9%);
}

.siemens-finalist span {
  color: #00e6dc;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.siemens-finalist strong {
  color: #fff;
  font: 600 1.05rem var(--display);
}

.other-project-link-siemens {
  border-color: #00e6dc;
  box-shadow: inset 4px 0 #01ffb9;
}

.other-project-link-siemens .other-project-index,
.other-project-link-siemens .other-project-arrow {
  color: #01ffb9;
}

@media (max-width: 700px) {
  .siemens-finalist {
    align-items: flex-start;
    flex-direction: column;
  }
}

.other-project-link-siemens {
  background: #000028;
  color: #fff;
}

.other-project-link-siemens:hover,
.other-project-link-siemens:focus-visible {
  background: #080d35;
  color: #fff;
}

.other-project-link-siemens .other-project-copy small {
  color: #c0c4d8;
}

body.siemens-theme {
  --display: "Bricolage Grotesque", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* Siemens final gallery: follow each photo's native aspect ratio. */
.siemens-final-gallery {
  max-width: 48rem;
}

.siemens-final-gallery .gallery-stage {
  aspect-ratio: 3 / 2;
  background: #000028;
}

.siemens-final-gallery .gallery-slide img {
  object-fit: contain;
}

body.siemens-theme .siemens-final-gallery .gallery-stage {
  border-color: rgb(0 230 220 / 42%);
}

/* Competition introduction comes before the Signalis case study. */
body.siemens-theme .siemens-intro {
  padding-bottom: 2rem;
}

body.siemens-theme .siemens-intro h1 {
  max-width: 18ch;
}

.siemens-brief {
  max-width: 48rem;
  color: var(--muted);
  font-size: 1rem;
}

.siemens-reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  margin-top: 1.1rem;
}

.siemens-reference-links a {
  color: #01ffb9;
  font-size: .84rem;
  font-weight: 600;
  text-underline-offset: .2em;
}

.siemens-reference-links a:hover {
  color: #00e6dc;
}

.siemens-final-section {
  margin: 0 0 .5rem;
}

.siemens-final-section .siemens-finalist {
  margin-top: 0;
}

.signalis-overview h2 {
  margin-bottom: .7rem;
}

.signalis-overview h3 {
  margin: 1.5rem 0 .5rem;
  font: 600 1.2rem/1.2 var(--display);
}

body.siemens-theme .signalis-overview .project-lead {
  color: #fff;
}

/* Global portfolio palette and contrast-safe component states. */
:root {
  --bg: #14121f;
  --ink: #faf7f0;
  --muted: #c2bdc9;
  --accent: #ffd23f;
  --soft: #252231;
  --panel: #1c1a28;
  --accent-violet: #6c4bff;
  --accent-coral: #ff5d73;
  --accent-turquoise: #2ec4b6;
  color-scheme: dark;
}

body:not(.siemens-theme) {
  background: radial-gradient(ellipse at 8% 4%, rgb(108 75 255 / 12%), transparent 34rem),
    radial-gradient(ellipse at 92% 28%, rgb(46 196 182 / 8%), transparent 30rem), var(--bg);
  color: var(--ink);
}

body:not(.siemens-theme) header {
  border-color: rgb(250 247 240 / 16%);
}

body:not(.siemens-theme) .logo i {
  background: var(--accent-turquoise);
}

body:not(.siemens-theme) .tab {
  color: var(--muted);
}

body:not(.siemens-theme) .tab:hover,
body:not(.siemens-theme) .tab:focus-visible {
  border-color: rgb(108 75 255 / 60%);
  background: rgb(108 75 255 / 13%);
  color: var(--ink);
}

body:not(.siemens-theme) .course-list,
body:not(.siemens-theme) .journey-section,
body:not(.siemens-theme) .other-projects-section,
body:not(.siemens-theme) .text-panel,
body:not(.siemens-theme) .homework-panel,
body:not(.siemens-theme) .research-card,
body:not(.siemens-theme) .hci-final-result,
body:not(.siemens-theme) .hci-bar-chart,
body:not(.siemens-theme) .hci-source-files {
  border-color: rgb(250 247 240 / 13%);
  background-color: var(--panel);
  color: var(--ink);
}

body:not(.siemens-theme) .project-section {
  border-color: rgb(250 247 240 / 13%);
  background-color: transparent;
}

body:not(.siemens-theme) .course-row {
  border-color: rgb(250 247 240 / 13%);
  color: var(--ink);
}

body:not(.siemens-theme) .course-row:hover,
body:not(.siemens-theme) .course-row:focus-visible {
  border-color: var(--accent-violet);
  background: rgb(108 75 255 / 12%);
  color: var(--ink);
}

body:not(.siemens-theme) .course-meta b,
body:not(.siemens-theme) .journey-marker {
  background: var(--accent);
  color: #14121f;
}

body:not(.siemens-theme) .course-row-external,
body:not(.siemens-theme) .other-project-link {
  border-color: rgb(46 196 182 / 55%);
  background: #201e2d;
  color: var(--ink);
}

body:not(.siemens-theme) .course-row-external:hover,
body:not(.siemens-theme) .other-project-link:hover,
body:not(.siemens-theme) .other-project-link:focus-visible {
  border-color: var(--accent-violet);
  background: #29243d;
  color: var(--ink);
}

body:not(.siemens-theme) .course-row-external .course-meta b {
  background: var(--accent-turquoise);
  color: #14121f;
}

body:not(.siemens-theme) .other-project-index,
body:not(.siemens-theme) .other-project-arrow,
body:not(.siemens-theme) .journey-courses b {
  color: var(--accent-turquoise);
}

body:not(.siemens-theme) .other-project-copy small {
  color: var(--muted);
}

body:not(.siemens-theme) .journey-entry {
  border-color: rgb(250 247 240 / 15%);
}

body:not(.siemens-theme) .journey-period,
body:not(.siemens-theme) .journey-dates time:last-child,
body:not(.siemens-theme) .journey-present {
  color: var(--accent-coral);
}

body:not(.siemens-theme) .journey-courses span {
  background: #282538;
}

body:not(.siemens-theme) .competition-track,
body:not(.siemens-theme) .signalis-step,
body:not(.siemens-theme) .homework-card,
body:not(.siemens-theme) .hci-jump-links a {
  border-color: rgb(250 247 240 / 14%);
  background-color: #1c1a28;
  color: var(--ink);
}

body:not(.siemens-theme) .signalis-step-number {
  background: rgb(46 196 182 / 14%);
  color: var(--accent-turquoise);
}

body:not(.siemens-theme) .homework-card:hover,
body:not(.siemens-theme) .homework-card[aria-expanded="true"] {
  border-color: var(--accent);
  background: #29243d;
  color: var(--ink);
}

body:not(.siemens-theme) .topic-list li,
body:not(.siemens-theme) .feature-chips li {
  border-color: rgb(250 247 240 / 14%);
  background: #282538;
  color: var(--ink);
}

body:not(.siemens-theme) .project-tags span {
  border-color: rgb(255 210 63 / 35%);
  background: rgb(255 210 63 / 9%);
  color: var(--ink);
}

body:not(.siemens-theme) .section-kicker,
body:not(.siemens-theme) .homework-label {
  color: var(--accent-coral);
}

body:not(.siemens-theme) .back-link,
body:not(.siemens-theme) .contact-link,
body:not(.siemens-theme) .hci-file-link,
body:not(.siemens-theme) .siemens-sources a,
body:not(.siemens-theme) .signalis-sources a {
  color: var(--accent-turquoise);
}

body:not(.siemens-theme) .back-link:hover,
body:not(.siemens-theme) .contact-link:hover,
body:not(.siemens-theme) .hci-file-link:hover,
body:not(.siemens-theme) .siemens-sources a:hover,
body:not(.siemens-theme) .signalis-sources a:hover {
  color: var(--accent-violet);
}

body:not(.siemens-theme) .dashboard-open-cta,
body:not(.siemens-theme) .research-link,
body:not(.siemens-theme) .hci-figma-button {
  color: #14121f;
}

body:not(.siemens-theme) .dashboard-open-cta {
  box-shadow: 0 .35rem 1rem rgb(255 210 63 / 20%);
}

body:not(.siemens-theme) footer {
  background: #0e0d17;
  color: var(--ink);
}

body:not(.siemens-theme) footer .mail {
  border-color: var(--accent);
  color: var(--ink);
}

body:not(.siemens-theme) footer ul a {
  border-color: rgb(250 247 240 / 45%);
}

body:not(.siemens-theme) :focus-visible {
  outline-color: var(--accent);
}

/* Preserve the Siemens identity on the homepage project link. */
body:not(.siemens-theme) .other-project-link-siemens {
  border-color: #00e6dc;
  background: #000028;
  color: #fff;
  box-shadow: inset 4px 0 #01ffb9;
}

body:not(.siemens-theme) .other-project-link-siemens:hover,
body:not(.siemens-theme) .other-project-link-siemens:focus-visible {
  background: #080d35;
  color: #fff;
}

body:not(.siemens-theme) .other-project-link-siemens .other-project-index,
body:not(.siemens-theme) .other-project-link-siemens .other-project-arrow {
  color: #01ffb9;
}

body:not(.siemens-theme) .other-project-link-siemens .other-project-copy small {
  color: #c0c4d8;
}

body.siemens-theme .competition-track,
body.siemens-theme .signalis-step {
  border-color: rgb(255 255 255 / 15%);
  background: #080d35;
  color: #fff;
}

body.siemens-theme .competition-track-number {
  color: rgb(255 255 255 / 12%);
}

body.siemens-theme .siemens-steps article {
  background: #080d35;
}

body.siemens-theme .siemens-steps article>span {
  color: #00e6dc;
}

body.siemens-theme .siemens-sources a {
  color: #01ffb9;
}

body.siemens-theme .siemens-sources a:hover {
  color: #00e6dc;
}

/* Final presentation and LinkedIn announcement. */
body.siemens-theme .siemens-final-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 31.5rem);
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 1rem 0 2rem;
}

body.siemens-theme .siemens-final-showcase>.siemens-final-gallery,
body.siemens-theme .siemens-final-showcase>.linkedin-post {
  box-sizing: border-box;
  min-width: 0;
  padding: 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: #080d35;
}

body.siemens-theme .siemens-final-showcase>.siemens-final-gallery {
  display: flex;
  flex-direction: column;
}

body.siemens-theme .siemens-final-showcase .gallery-heading {
  min-height: 4rem;
}

body.siemens-theme .siemens-final-showcase .gallery-stage {
  flex: 1;
  min-height: 34rem;
  aspect-ratio: auto;
  isolation: isolate;
  border: 0;
  border-radius: .7rem;
  box-shadow: none;
  background: #000028;
}

body.siemens-theme .siemens-final-showcase .gallery-slide {
  z-index: 1;
  overflow: hidden;
}

body.siemens-theme .siemens-final-showcase .gallery-slide .gallery-backdrop {
  position: absolute;
  z-index: 0;
  inset: -1.5rem;
  width: calc(100% + 3rem);
  height: calc(100% + 3rem);
  object-fit: cover;
  filter: blur(1.25rem) brightness(.55);
  transform: scale(1.04);
}

body.siemens-theme .siemens-final-showcase .gallery-slide img:not(.gallery-backdrop) {
  position: relative;
  z-index: 1;
  object-fit: contain;
}

body.siemens-theme .siemens-final-showcase .gallery-stage::before {
  content: none;
}

body.siemens-theme .siemens-final-showcase>.linkedin-post {
  display: flex;
  flex-direction: column;
}

body.siemens-theme .siemens-final-showcase .linkedin-post h2 {
  margin-bottom: 1.5rem;
}

body.siemens-theme .siemens-final-showcase .linkedin-embed {
  width: 100%;
  max-width: 31.5rem;
  margin: 0;
}

body.siemens-theme .siemens-final-showcase .linkedin-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: .7rem;
}

@media (max-width:850px) {
  body.siemens-theme .siemens-final-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  body.siemens-theme .siemens-final-showcase>.siemens-final-gallery,
  body.siemens-theme .siemens-final-showcase>.linkedin-post {
    width: min(100%, 38rem);
    margin-inline: auto;
  }

  body.siemens-theme .siemens-final-showcase .gallery-stage {
    flex: none;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* Final showcase: one open layout, with the gallery leading and a fine divider. */
body.siemens-theme .siemens-final-showcase {
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
  gap: 0;
}

body.siemens-theme .siemens-final-showcase>.siemens-final-gallery,
body.siemens-theme .siemens-final-showcase>.linkedin-post {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.siemens-theme .siemens-final-showcase>.siemens-final-gallery {
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

body.siemens-theme .siemens-final-showcase .gallery-heading {
  min-height: 4rem;
}

body.siemens-theme .siemens-final-showcase .gallery-stage {
  flex: none;
  min-height: 0;
  aspect-ratio: 3 / 2;
}

body.siemens-theme .siemens-final-showcase>.linkedin-post {
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid rgb(255 255 255 / 18%);
}

body.siemens-theme .siemens-final-showcase .linkedin-post h2 {
  margin-bottom: 1.5rem;
}

body.siemens-theme .siemens-final-showcase .linkedin-embed {
  max-width: none;
}

@media (max-width: 850px) {
  body.siemens-theme .siemens-final-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  body.siemens-theme .siemens-final-showcase>.siemens-final-gallery,
  body.siemens-theme .siemens-final-showcase>.linkedin-post {
    width: min(100%, 38rem);
    margin-inline: auto;
    padding: 0;
  }

  body.siemens-theme .siemens-final-showcase>.linkedin-post {
    border-top: 1px solid rgb(255 255 255 / 18%);
    border-left: 0;
    padding-top: 2rem;
  }
}

body.siemens-theme .siemens-final-showcase>.siemens-final-gallery {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width:850px) {
  body.siemens-theme .siemens-final-showcase>.siemens-final-gallery {
    width: min(100%, 38rem);
    margin-inline: auto;
  }
}

@media (min-width:851px) {
  body.siemens-theme .siemens-final-showcase .siemens-final-gallery .gallery-stage {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Keep portfolio links readable before and during hover. */
body:not(.siemens-theme) .course-row {
  background: #1c1a28;
  color: var(--ink);
}

body:not(.siemens-theme) .course-row:hover,
body:not(.siemens-theme) .course-row:focus-visible {
  background: #29243d;
  color: var(--ink);
}

/* Cleaner shared footer and contact actions. */
footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 1.5rem 0;
  border-top: 1px solid rgb(250 247 240 / 16%);
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

footer .mail {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .55rem 0;
  border: 0;
  color: var(--ink);
  font: 600 .95rem/1.4 var(--body);
  letter-spacing: 0;
  text-decoration: none;
}

footer .mail:hover {
  color: var(--accent);
}

footer ul {
  gap: .5rem;
  margin: 0;
}

footer ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .5rem .85rem;
  border: 1px solid rgb(250 247 240 / 20%);
  border-radius: 999px;
  color: var(--muted);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

body:not(.siemens-theme) footer ul a:hover,
body:not(.siemens-theme) footer ul a:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #14121f;
}

body.siemens-theme footer ul a:hover,
body.siemens-theme footer ul a:focus-visible {
  border-color: #01ffb9;
  background: #01ffb9;
  color: #000028;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
}

.contact-links .contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  margin: 0;
  padding: .65rem 1rem;
  border: 1px solid rgb(46 196 182 / 45%);
  border-radius: 999px;
  background: #1c1a28;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.contact-links .contact-link:hover {
  border-color: var(--accent-violet);
  background: #29243d;
  color: var(--ink);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  footer .wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Text labels keep photo and book controls clear without arrow icons. */
.gallery-stage>button,
.hci-gallery-stage>button {
  width: auto;
  min-width: 2.5rem;
  padding-inline: .75rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}

.zine-controls button {
  width: auto;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: .75rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}

/* Photo carousel controls use arrows; other interface links stay text-only. */
.gallery-stage>button,
.hci-gallery-stage>button {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 400;
}

/* Let descriptive text use its parent width; keep the page and headings fluid. */
.wrap {
  width: 100%;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.course-intro>p:last-child,
.course-work>p,
.information-hero>p:last-child,
.intro p,
.project-lead,
.project-section .project-lead,
.text-panel p,
.journey-entry p:last-child,
.section-heading-block,
.competition-track p:last-child,
.siemens-steps p,
.siemens-copy,
.signalis-innovation>p:not(.section-kicker),
.siemens-brief {
  width: 100%;
  max-width: none;
}

.project-hero {
  width: 100%;
  max-width: none;
}

/* Keep the three portfolio page introductions on one shared layout. */
.portfolio-hero {
  max-width: none;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}

.portfolio-hero h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  text-transform: none;
}

.portfolio-hero > .project-lead,
.portfolio-hero > p:not(.course-year) {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}

.portfolio-hero .project-tags {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .wrap {
    padding-inline: 1rem;
  }

  .iv-section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .journey-entry {
    min-width: 0;
  }

  .journey-entry>div {
    min-width: 0;
  }

  .other-project-copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Subtle motion that responds to scrolling and gallery interaction. */
.js-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.tab.is-active,
.tab[aria-current="location"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.gallery-dots,
.hci-photo-dots {
  flex-wrap: wrap;
}

.carousel-progress {
  display: block;
  flex: 0 0 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 28%);
}

.carousel-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
}

.carousel-progress-fill.is-running {
  animation: carousel-progress 4.5s linear forwards;
}

@keyframes carousel-progress {
  to {
    transform: scaleX(1);
  }
}

.gallery-stage,
.hci-gallery-stage {
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
  }
}

.gallery-slide {
  opacity: 0;
  transition: opacity .38s ease;
}

.gallery-slide.is-current {
  opacity: 1;
}

.hci-photo-image {
  opacity: 0;
  transition: opacity .3s ease;
}

.hci-photo-image.is-visible {
  opacity: 1;
}

/* Keep the About and Contact panels framed like the other homepage sections. */
body:not(.siemens-theme) .text-panel {
  border: 1px solid rgb(250 247 240 / 13%);
  border-radius: 1.25rem;
}

.intro {
  overflow: visible;
}

.intro::after,
.intro .blob {
  content: "";
}

body:not(.siemens-theme) .intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 0;
  width: min(34rem, 70vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-violet), transparent 60%),
    radial-gradient(circle at 70% 60%, var(--accent-coral), transparent 55%),
    radial-gradient(circle at 40% 80%, var(--accent-turquoise), transparent 55%);
  filter: blur(60px);
  opacity: .55;
  animation: blob 14s ease-in-out infinite alternate;
}

@keyframes blob {
  to {
    transform: translate(-6%, 8%) rotate(40deg) scale(1.12);
  }
}

.hl {
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 .12em no-repeat;
  animation: underline-in .9s .5s forwards;
}

@keyframes underline-in {
  to {
    background-size: 100% .12em;
  }
}

.course-row {
  overflow: hidden;
  isolation: isolate;
}

.course-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--row, var(--accent-violet));
  transform: translateX(-101%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.course-row:hover::before,
.course-row:focus-visible::before {
  transform: translateX(0);
}

body:not(.siemens-theme) .course-row:hover,
body:not(.siemens-theme) .course-row:focus-visible {
  background: #1c1a28;
  color: #14121f;
}

body:not(.siemens-theme) .course-row:hover .course-meta {
  color: #14121f;
}

.course-row:nth-of-type(1) {
  --row: var(--accent);
}

/* amarelo */
.course-row:nth-of-type(2) {
  --row: var(--accent-coral);
}

.course-row:nth-of-type(3) {
  --row: var(--accent-turquoise);
}

@media (prefers-reduced-motion: no-preference) {
  .logo i {
    animation: blob-morph 7s ease-in-out infinite;
  }

  .logo:hover i {
    animation-duration: 1.5s;
  }
}

@keyframes blob-morph {

  0%,
  100% {
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    transform: rotate(-18deg);
  }

  50% {
    border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%;
    transform: rotate(12deg) scale(1.12);
  }
}

.swap {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.swap.is-out {
  opacity: 0;
  transform: translateY(.4em);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hl .ch {
    position: relative;
    display: inline-block;
    transition: transform .7s cubic-bezier(.3, 1.6, .5, 1);
  }

  /* Área invisível por baixo da letra, para o hover não "fugir" quando ela sobe */
  .hl .ch::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .35em;
  }

  /* Letra sob o rato */
  .hl .ch:hover {
    transform: translateY(-.22em);
    transition-duration: .15s;
  }

  /* Vizinhas diretas */
  .hl .ch:hover+.ch,
  .hl .ch:has(+ .ch:hover) {
    transform: translateY(-.1em);
    transition-duration: .2s;
  }

  /* Segundas vizinhas, para a onda ficar mais suave */
  .hl .ch:hover+.ch+.ch,
  .hl .ch:has(+ .ch + .ch:hover) {
    transform: translateY(-.04em);
    transition-duration: .25s;
  }
}