/* Hallmark · final critique: P5 H5 E5 S5 R4 V5 · macrostructure: Asymmetric inset four-quadrant portfolio
 * route: custom (bespoke) · structure: four equal viewport quadrants with layered project evidence around a central portrait · idea: "four products, one builder"
 * paper: project-specific · accent: project-specific · display: Geist + Agdasima · body: Geist
 * axes: mixed / geometric-sans / multi-brand · contrast: pass (40–41) · mobile: pass (34, 49, 50–57)
 * nav: none · footer: none · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30) · studied: no
 */
@import url("tokens.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

html {
  background: var(--color-page);
  font-family: var(--font-body);
}

body {
  min-width: 20rem;
  min-height: 100svh;
  background: var(--color-page);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

.portfolio {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.project {
  --project-paper: var(--dream-paper);
  --project-ink: var(--dream-ink);
  --project-muted: var(--dream-muted);
  --project-accent: var(--dream-accent);
  --project-outline: var(--dream-outline);
  --project-veil: var(--dream-veil);
  --project-field: var(--dream-field);
  --project-tag: var(--dream-tag);

  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 35rem;
  flex-direction: column;
  overflow: clip;
  background: var(--project-field);
  color: var(--project-ink);
  text-decoration: none;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--dur-micro) var(--ease-out);
}

.project::before,
.project::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.project::before {
  z-index: var(--z-base);
  inset: 0;
  background: var(--project-veil);
}

.project::after {
  z-index: var(--z-raised);
  inset: var(--space-2xs);
  border: var(--rule-strong) solid var(--project-outline);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.project:focus-visible {
  z-index: var(--z-raised);
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: calc(var(--rule-strong) * -1);
}

.project:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.project:active {
  transform: scale(0.998);
}

.project[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.project__media {
  position: relative;
  z-index: var(--z-base);
  width: calc(100% - (2 * var(--space-md)));
  height: clamp(var(--media-height), 62vw, 40rem);
  flex: 0 0 auto;
  margin: var(--space-md) var(--space-md) 0;
}

.media-card {
  position: absolute;
  z-index: var(--z-base);
  margin: 0;
  overflow: clip;
  border: var(--rule-thin) solid var(--project-outline);
  border-radius: var(--radius-shot);
  background: var(--project-paper);
  box-shadow: var(--shadow-shot);
}

.media-card img {
  width: 100%;
  height: auto;
}

.media-card picture {
  display: block;
}

.project__media-label {
  position: absolute;
  z-index: calc(var(--z-base) + 4);
  max-width: var(--media-label-width);
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-thin) solid var(--project-outline);
  border-radius: var(--radius-tag);
  background: var(--project-paper);
  color: var(--project-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.media-card--dream-home {
  top: var(--space-xs);
  left: 2%;
  width: 96%;
  transform: rotate(-1.2deg);
}

.media-card--dream-scan {
  bottom: 0;
  left: 7%;
  z-index: calc(var(--z-base) + 2);
  width: 28%;
  transform: rotate(-2.4deg);
}

.media-card--dream-mask {
  right: 8%;
  bottom: var(--space-lg);
  z-index: calc(var(--z-base) + 3);
  width: 35%;
  transform: rotate(2.2deg);
}

.project__media--dream .project__media-label {
  right: 6%;
  bottom: 40%;
  transform: rotate(-1deg);
}

.media-card--library-detail {
  top: var(--space-sm);
  left: 0;
  width: 66%;
  transform: rotate(-1.4deg);
}

.media-card--library-prices {
  top: 30%;
  right: 0;
  z-index: calc(var(--z-base) + 2);
  width: 64%;
  transform: rotate(1.7deg);
}

.media-card--library-compare {
  right: 5%;
  bottom: var(--space-xs);
  z-index: calc(var(--z-base) + 3);
  width: 68%;
  transform: rotate(-0.8deg);
}

.project__media--cyber {
  height: clamp(var(--media-height-compact), 58vw, 36rem);
}

.media-card--cyber-brain {
  top: var(--space-xs);
  left: 0;
  width: 91%;
  transform: rotate(-1.5deg);
}

.media-card--cyber-netflix {
  top: 34%;
  right: 0;
  z-index: calc(var(--z-base) + 2);
  width: 86%;
  transform: rotate(1.5deg);
}

.media-card--cyber-help {
  bottom: var(--space-xs);
  left: 5%;
  z-index: calc(var(--z-base) + 3);
  width: 89%;
  transform: rotate(-0.9deg);
}

.media-card--clean-demo {
  top: var(--space-sm);
  left: 0;
  width: 92%;
  transform: rotate(-1.3deg);
}

.media-card--clean-action {
  right: 0;
  bottom: var(--space-sm);
  z-index: calc(var(--z-base) + 2);
  width: 59%;
  transform: rotate(1.8deg);
}

.project__content {
  position: relative;
  z-index: calc(var(--z-base) + 1);
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.project__kind,
.project__description,
.profile p {
  margin: 0;
}

.project__kind {
  color: var(--project-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.project h2 {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--project-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, var(--text-3xl));
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.project__description {
  max-width: 48ch;
  color: var(--project-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.project__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.project__skills li {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-thin) solid var(--project-outline);
  border-radius: var(--radius-tag);
  background: var(--project-tag);
  color: var(--project-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.project__visit {
  margin-top: auto;
  color: var(--project-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.project--library {
  --project-paper: var(--library-paper);
  --project-ink: var(--library-ink);
  --project-muted: var(--library-muted);
  --project-accent: var(--library-accent);
  --project-outline: var(--library-outline);
  --project-veil: var(--library-veil);
  --project-field: var(--library-field);
  --project-tag: var(--library-tag);
}

.project--cyber {
  --project-paper: var(--cyber-paper);
  --project-ink: var(--cyber-ink);
  --project-muted: var(--cyber-muted);
  --project-accent: var(--cyber-accent);
  --project-outline: var(--cyber-outline);
  --project-veil: var(--cyber-veil);
  --project-field: var(--cyber-field);
  --project-tag: var(--cyber-tag);
}

.project--cyber h2 {
  font-family: var(--font-cyber);
  font-size: clamp(2.8rem, 12vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.project--cyber h2 span {
  color: var(--cyber-accent);
}

.project--clean {
  --project-paper: var(--clean-paper);
  --project-ink: var(--clean-ink);
  --project-muted: var(--clean-muted);
  --project-accent: var(--clean-accent);
  --project-outline: var(--clean-outline);
  --project-veil: var(--clean-veil);
  --project-field: var(--clean-field);
  --project-tag: var(--clean-tag);
}

.profile {
  position: relative;
  order: -1;
  z-index: var(--z-profile);
  width: min(53.2vw, 14rem);
  aspect-ratio: 1;
  margin: var(--space-xl) auto;
  overflow: clip;
  border: var(--rule-strong) solid var(--color-profile-ring);
  border-radius: var(--radius-round);
  background: var(--color-page);
  box-shadow: var(--shadow-profile);
}

.profile::after {
  position: absolute;
  inset: 42% 0 0;
  background: var(--color-profile-gradient);
  content: "";
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 21%;
  transform: scale(1.04);
}

.profile figcaption {
  position: absolute;
  z-index: calc(var(--z-base) + 1);
  right: var(--space-lg);
  bottom: var(--space-lg);
  left: var(--space-lg);
  color: var(--color-ink-inverse);
  text-align: center;
}

.profile h1 {
  min-width: 0;
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 7vw, 2.35rem);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.profile p {
  font-size: clamp(0.74rem, 3.2vw, 0.9rem);
  font-weight: 600;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .project:hover {
    z-index: var(--z-raised);
  }

  .project:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 64rem) {
  body {
    overflow: clip;
  }

  .portfolio {
    position: relative;
    display: grid;
    width: 100%;
    height: 100svh;
    min-height: 36rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    overflow: clip;
  }

  .project {
    min-height: 0;
  }

  .project__media {
    position: absolute;
    top: 5%;
    bottom: 5%;
    width: 42%;
    height: 90%;
    margin: 0;
  }

  .project--left .project__media {
    left: 2%;
  }

  .project--right .project__media {
    right: 2%;
  }

  .media-card--dream-home {
    top: 2%;
    left: 0;
    width: 98%;
  }

  .media-card--dream-scan {
    bottom: 0;
    left: 7%;
    width: 27%;
  }

  .media-card--dream-mask {
    right: 6%;
    bottom: 4%;
    width: 34%;
  }

  .project__media--dream .project__media-label {
    right: 4%;
    bottom: 45%;
  }

  .media-card--library-detail {
    top: 1%;
    left: 0;
    width: 64%;
  }

  .media-card--library-prices {
    top: 21%;
    right: 0;
    width: 62%;
  }

  .media-card--library-compare {
    right: 3%;
    bottom: 0;
    width: 67%;
  }

  .media-card--cyber-brain {
    top: 0;
    left: 0;
    width: 92%;
  }

  .media-card--cyber-netflix {
    top: 33%;
    right: 0;
    width: 86%;
  }

  .media-card--cyber-help {
    bottom: 0;
    left: 4%;
    width: 90%;
  }

  .media-card--clean-demo {
    top: 2%;
    left: 0;
    width: 94%;
  }

  .media-card--clean-action {
    right: 0;
    bottom: 0;
    width: 61%;
  }

  .project__content {
    position: absolute;
    width: 35%;
    max-height: 84%;
    flex: 0 0 auto;
    gap: clamp(var(--space-xs), 1.1vh, var(--space-sm));
    padding: 0;
  }

  .project--left .project__content {
    left: 47%;
  }

  .project--right .project__content {
    right: 47%;
  }

  .project--top .project__content {
    top: clamp(var(--space-md), 3.5vh, var(--space-xl));
  }

  .project--bottom .project__content {
    bottom: clamp(var(--space-sm), 2vh, var(--space-lg));
  }

  .project h2 {
    font-size: clamp(1.55rem, 2.55vw, 2.6rem);
  }

  .project--cyber h2 {
    font-size: clamp(2.3rem, 3.8vw, 4.5rem);
  }

  .project__description {
    font-size: clamp(0.84rem, 1.12vw, 1rem);
    line-height: 1.45;
  }

  .project__skills {
    gap: var(--space-xs);
    margin-top: var(--space-2xs);
  }

  .project__skills li {
    padding: var(--space-3xs) var(--space-xs);
    font-size: clamp(0.54rem, 0.72vw, 0.68rem);
  }

  .project__visit {
    margin-top: var(--space-2xs);
    font-size: clamp(0.7rem, 0.84vw, var(--text-sm));
  }

  .profile {
    position: absolute;
    top: 50%;
    left: 50%;
    order: initial;
    width: clamp(10.5rem, 17.5vw, 16.1rem);
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .profile figcaption {
    right: clamp(var(--space-md), 2vw, var(--space-xl));
    bottom: clamp(var(--space-md), 2vw, var(--space-xl));
    left: clamp(var(--space-md), 2vw, var(--space-xl));
  }

  .profile h1 {
    font-size: clamp(1.1rem, 1.8vw, 1.7rem);
  }

  .profile p {
    font-size: clamp(0.62rem, 0.75vw, 0.78rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project,
  .project::after {
    transition-duration: var(--dur-micro);
  }

  .project:hover,
  .project:focus-visible,
  .project:active {
    transform: none;
  }
}