@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

:root {
  /* Settings (Tokens) */
  --color-bg: #f8fafc; /* slate-50 */
  --color-surface: #ffffff;
  --color-border: #e2e8f0; /* slate-200 */
  --color-border-dark: #bfccde; /* slate-200 */
  --color-text: #1e293b; /* slate-800 */
  --color-text-strong: #0f172a; /* slate-900 */
  --color-text-muted: #64748b; /* slate-500 */
  --color-accent-pink: #db2777; /* pink-600 */
  --color-accent-amber: #f59e0b; /* amber-500 */
  --color-accent-blue: #2563eb; /* blue-600 */

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --measure: 60ch;
  --ratio: 1.5;
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--color-text-strong);
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* Composition (Layout Primitives) */

.layout-page {
  max-inline-size: 80rem;
  margin-inline: auto;
  padding-inline: clamp(var(--s1), 5vw, var(--s3));
}

.layout-stack > * + * {
  margin-block-start: var(--s1);
}

.layout-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  align-items: center;
}

.layout-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.layout-sidebar > :first-child {
  flex-basis: 25rem;
  flex-grow: 1;
}

.layout-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.layout-grid {
  display: grid;
  gap: 1px; /* Bauhaus grid line effect */
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
}

/* Blocks */

/* Site Header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-block-size: 5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--s0);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--color-text-strong);
  view-transition-name: site-logo;
}

.site-header__logo-skull {
  &.vision-skull {
    font-size: 0.15rem; /* Native em scaling */
  }
}

.site-header__nav {
  display: none; /* Hidden on mobile by default */
  gap: var(--s3);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Base Utilities */
[v-cloak] { display: none !important; }

/* Mobile Menu Toggle Button */
.site-header__menu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--s0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-strong);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-inline-end: calc(var(--s0) * -1); /* Align flush to right edge */
}

.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus {
  color: var(--color-accent-pink);
  transform: scale(1.1);
  outline: none;
}

/* --- Mobile Menu Animations --- */
@keyframes menu-slide-down {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes link-slide-in {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes mobile-graphic-fade {
  from { opacity: 0; transform: scale(0.9) translateY(2rem); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile Menu Opened State */
.site-header__nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(100svh - 5rem);
  background-color: var(--color-surface);
  align-items: stretch;
  z-index: 60;
  border-block-start: 1px solid var(--color-border);
  padding: 0;
  gap: 0;
  animation: menu-slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden; /* Important for the massive graphic */
}

.site-header__nav.is-open .site-header__link {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: var(--s2) var(--s4);
  text-align: left;
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  color: var(--color-text-strong);
  text-transform: none; /* Override uppercase on desktop */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  animation: link-slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  z-index: 2; /* keep above graphic */
}

/* Stagger the links */
.site-header__nav.is-open .site-header__link:nth-child(1) { animation-delay: 0.1s; }
.site-header__nav.is-open .site-header__link:nth-child(2) { animation-delay: 0.15s; }
.site-header__nav.is-open .site-header__link:nth-child(3) { animation-delay: 0.2s; }
.site-header__nav.is-open .site-header__link:nth-child(4) { animation-delay: 0.25s; }
.site-header__nav.is-open .site-header__link:nth-child(5) { animation-delay: 0.3s; }
.site-header__nav.is-open .site-header__link:nth-child(6) { animation-delay: 0.35s; }


/* Dynamic Bauhaus staggered hover colors for mobile links */
.site-header__nav.is-open .site-header__link:hover,
.site-header__nav.is-open .site-header__link:focus {
  padding-inline-start: var(--s5);
  background-color: var(--color-bg);
}

.site-header__nav.is-open .site-header__link:nth-child(1):hover { color: var(--color-accent-pink); }
.site-header__nav.is-open .site-header__link:nth-child(2):hover { color: var(--color-accent-amber); }
.site-header__nav.is-open .site-header__link:nth-child(3):hover { color: var(--color-accent-blue); }
.site-header__nav.is-open .site-header__link:nth-child(4):hover { color: var(--color-accent-pink); }

/* --- Mobile Menu Decorative Graphic --- */
.mobile-menu-graphic {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-end: -2rem; /* Bleed off right edge */
  width: 18rem;
  height: 18rem;
  pointer-events: none;
  opacity: 0;
  animation: mobile-graphic-fade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  z-index: 1; /* Behind links */
}

.hero__graphic {
  overflow: hidden;
}

/* Modifiers for the embedded hero-graphic */
.hero-graphic--mobile-menu .hero-graphic__step {
  background-color: var(--color-accent-amber);
  clip-path: polygon(0% 100%, 100% 100%, 100% 50%, 66% 50%, 66% 25%, 33% 25%, 33% 0%, 0% 0%);
  width: 80%; height: 80%; bottom: 0; left: 0; top: auto; opacity: 0.6;
}
.hero-graphic--mobile-menu .hero-graphic__circle {
  background-color: var(--color-accent-pink);
  width: 60%; height: 60%; top: 10%; right: 10%; left: auto; opacity: 0.8; mix-blend-mode: multiply;
}
.hero-graphic--mobile-menu .hero-graphic__block {
  background-color: var(--color-accent-blue);
  width: 30%; height: 30%; top: 0; left: 10%; opacity: 0.7;
}
.hero-graphic--mobile-menu .hero-graphic__line--horizontal {
  top: 75%; left: -10%; width: 120%; opacity: 0.3;
}
.hero-graphic--mobile-menu .hero-graphic__line--vertical {
  left: 25%; top: -10%; height: 120%; opacity: 0.3;
}

@media (min-width: 48rem) {
  /* Neutralize any mobile states if the user expands the window to desktop */
  .mobile-menu-graphic { display: none; }

  .site-header__nav, .site-header__nav.is-open {
    display: flex;
    flex-direction: row;
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    align-items: center;
    gap: var(--s3);
    animation: none;
    overflow: visible;
  }
  .site-header__nav.is-open .site-header__link {
    font-size: 0.875rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0;
    width: auto;
    color: var(--color-text-muted);
    animation: none;
    opacity: 1; /* Reset opacity from the mobile animation start-state */
  }
  .site-header__nav.is-open .site-header__link:hover,
  .site-header__nav.is-open .site-header__link:focus {
    padding-inline-start: 0;
    background-color: transparent;
    color: var(--color-accent-pink);
  }
  .site-header__menu-toggle { display: none; }
}

.site-header__link:hover { color: var(--color-accent-pink); transition: color 0.3s; }

/* Hero Section */
.hero {
  min-block-size: 85svh;
  align-items: center;
  padding-block: var(--s4);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s0);
}

.hero__eyebrow-line {
  inline-size: 3rem;
  block-size: 1px;
  background-color: var(--color-border);
}

.hero__eyebrow-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.hero__title {
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  view-transition-name: hero-title;
}

.hero__title-accent { color: var(--color-accent-pink); }

.hero__body {
  max-inline-size: 30rem;
  font-weight: 300;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-cta-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition: all 0.3s;
}

.hero-cta-link:hover .hero-cta-link__icon {
  border-color: var(--color-accent-pink);
  background-color: #fdf2f8;
}

/* Hero Graphic */
.hero-graphic {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  max-inline-size: 28rem;
}

.hero-graphic__circle {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-end: 10%;
  inline-size: 66%;
  aspect-ratio: 1;
  background-color: var(--color-accent-pink);
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.hero-graphic__step {
  position: absolute;
  inset-block-end: 10%;
  inset-inline-start: 10%;
  inline-size: 75%;
  block-size: 55%;
  background-color: var(--color-accent-amber);
  mix-blend-mode: multiply;
  clip-path: polygon(0% 100%, 100% 100%, 100% 60%, 80% 60%, 80% 30%, 60% 30%, 60% 0%, 0% 0%);
}

.hero-graphic__block {
  position: absolute;
  inset-block-start: 33%;
  inset-inline-start: 0;
  inline-size: 33%;
  aspect-ratio: 1;
  background-color: var(--color-accent-blue);
  mix-blend-mode: multiply;
}

.hero-graphic__line {
  position: absolute;
  background-color: var(--color-text-strong);
}

.hero-graphic__line--horizontal { inset-block-start: 50%; inline-size: 120%; inset-inline-start: -10%; block-size: 1px; }
.hero-graphic__line--vertical { inset-inline-start: 50%; block-size: 120%; inset-block-start: -10%; inline-size: 1px; }

/* About Hero Graphic Modifier */
.hero-graphic--about .hero-graphic__step {
  background-color: var(--color-accent-amber);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  inline-size: 80%;
  block-size: 75%;
  inset-block-end: 0;
  inset-inline-start: 10%;
  inset-block-start: auto;
}
.hero-graphic--about .hero-graphic__circle {
  background-color: var(--color-accent-blue);
  border-radius: 50% 50% 0 0;
  inline-size: 60%;
  block-size: 30%;
  inset-block-start: 15%;
  inset-inline-end: 10%;
  inset-inline-start: auto;
  opacity: 0.9;
  mix-blend-mode: normal;
  aspect-ratio: auto;
}
.hero-graphic--about .hero-graphic__block {
  background-color: var(--color-accent-pink);
  inline-size: 25%;
  block-size: 25%;
  inset-block-end: 15%;
  inset-inline-start: 0;
  inset-block-start: auto;
  border-radius: 10%;
  aspect-ratio: auto;
}
.hero-graphic--about .hero-graphic__line--vertical {
  inset-inline-start: 35%;
}
.hero-graphic--about .hero-graphic__line--horizontal {
  inset-block-start: 85%;
}

/* Blog Hero Graphic Modifier */
.hero-graphic--blog {
  transform: rotate(15deg) scale(0.9);
}
.hero-graphic--blog .hero-graphic__circle--1 {
  background-color: var(--color-accent-pink);
  inline-size: 40%;
  block-size: 40%;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.hero-graphic--blog .hero-graphic__block {
  background-color: var(--color-accent-blue);
  inline-size: 30%;
  block-size: 30%;
  inset-block-end: 10%;
  inset-inline-end: 0;
  inset-block-start: auto;
  inset-inline-start: auto;
  border-radius: 50% 0 50% 0;
  aspect-ratio: auto;
}
.hero-graphic--blog .hero-graphic__circle--2 {
  position: absolute;
  background-color: var(--color-accent-amber);
  inline-size: 15%;
  block-size: 15%;
  inset-block-start: 50%;
  inset-inline-start: 60%;
  inset-inline-end: auto;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.hero-graphic--blog .hero-graphic__line--1 {
  position: absolute;
  background-color: var(--color-text-strong);
  inline-size: 60%;
  block-size: 4px;
  inset-block-start: 20%;
  inset-inline-start: 40%;
}
.hero-graphic--blog .hero-graphic__line--2 {
  position: absolute;
  background-color: var(--color-text-strong);
  inline-size: 4px;
  block-size: 60%;
  inset-block-end: 0;
  inset-inline-start: 20%;
}
.hero-graphic--blog .hero-graphic__line--3 {
  position: absolute;
  background-color: var(--color-accent-pink);
  inline-size: 40%;
  block-size: 4px;
  inset-block-end: 25%;
  inset-inline-start: 20%;
}

/* Portfolio Hero Graphic Modifier */
.hero-graphic--portfolio {
  transform: scale(0.95);
}
.hero-graphic--portfolio .hero-graphic__block {
  background-color: var(--color-accent-amber);
  inline-size: 40%;
  block-size: 70%;
  inset-block-start: 15%;
  inset-inline-start: 10%;
  border-radius: 0 50% 50% 0;
}
.hero-graphic--portfolio .hero-graphic__circle {
  background-color: var(--color-accent-pink);
  inline-size: 55%;
  block-size: 55%;
  inset-block-end: 10%;
  inset-inline-end: 10%;
  inset-block-start: auto;
  inset-inline-start: auto;
  opacity: 0.85;
  mix-blend-mode: multiply;
  z-index: 2;
}
.hero-graphic--portfolio .hero-graphic__step {
  background-color: var(--color-accent-blue);
  inline-size: 40%;
  block-size: 40%;
  inset-block-start: 5%;
  inset-inline-end: 15%;
  inset-inline-start: auto;
  clip-path: polygon(100% 0, 0 0, 0 40%, 20% 40%, 20% 70%, 40% 70%, 40% 100%, 100% 100%);
}
.hero-graphic--portfolio .hero-graphic__line--horizontal {
  inset-block-start: 65%;
  inline-size: 110%;
  inset-inline-start: 0;
  background-color: var(--color-text-strong);
}
.hero-graphic--portfolio .hero-graphic__line--vertical {
  inset-inline-start: 35%;
  block-size: 110%;
  inset-block-start: 0;
  background-color: var(--color-accent-blue);
}
/* Disciplines */
.disciplines {
  background-color: var(--color-surface);
  border-block-start: 1px solid var(--color-border);

  > .layout-page {
    padding-block: var(--s5);
  }
}

.disciplines__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s1);
}

@media (min-width: 48rem) {
  .disciplines__header { flex-direction: row; align-items: flex-end; }
}

.disciplines__title { font-size: clamp(2rem, 5vw, 3.5rem); }

.disciplines__tagline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  max-inline-size: 15rem;
}

.disciplines-grid {
  border: 1px solid var(--color-border);
  background-color: var(--color-border);
  margin-block-start: var(--s4);
}

/* Portfolio Card */
.portfolio-card {
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  block-size: 100%;
  transition: background-color 0.5s;
}
.portfolio-card__visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.portfolio-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 20px 20px;
}
.portfolio-card__fallback {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: var(--color-text);
  opacity: 0.1;
  mix-blend-mode: multiply;
}
.portfolio-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: grayscale(20%) saturate(150%);
}
.portfolio-card:hover .portfolio-card__visual img {
  transform: scale(1.05);
}
.portfolio-card__content {
  padding: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: background-color 0.5s;
}
.portfolio-card:hover .portfolio-card__content {
  background-color: var(--color-bg);
}
.portfolio-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-block-end: var(--s4);
}
.portfolio-card__category {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.portfolio-card__icon {
  color: var(--color-border-dark);
  transition: color 0.3s;
}
.portfolio-card__body {
  margin-top: auto;
}
.portfolio-card__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  margin-block-end: var(--s1);
  transition: color 0.3s;
}
.portfolio-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.6;
}

/* Modifiers for Hover Colors */
.portfolio-card--pink:hover .portfolio-card__category,
.portfolio-card--pink:hover .portfolio-card__icon,
.portfolio-card--pink:hover .portfolio-card__title { color: var(--color-accent-pink); }

.portfolio-card--amber:hover .portfolio-card__category,
.portfolio-card--amber:hover .portfolio-card__icon,
.portfolio-card--amber:hover .portfolio-card__title { color: var(--color-accent-amber); }

.portfolio-card--blue:hover .portfolio-card__category,
.portfolio-card--blue:hover .portfolio-card__icon,
.portfolio-card--blue:hover .portfolio-card__title { color: var(--color-accent-blue); }

/* Case Study (Portfolio Item) Context */
.case-study__hero {
  min-block-size: 50svh;
  padding-block: var(--s4);
}
.case-study__breadcrumb-link { text-decoration: underline; }
.case-study__breadcrumb-sep { margin-inline: 0.5rem; }
.case-study__hero-body {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-inline-size: 40rem;
}
.case-study__main { padding-block-end: var(--s5); }
.case-study__feature-img { margin-block-end: var(--s4); }
.case-study__feature-img img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(10%) saturate(120%);
}
.case-study__body {
  max-inline-size: 65ch;
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.75;
  font-weight: 300;

  a {
    color: var(--color-accent-pink);
    text-decoration: underline;
  }
}
.case-study__gallery { margin-block-start: var(--s5); }

/* Bauhaus Gallery Grid */
.bauhaus-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  grid-auto-rows: 25rem;
  gap: var(--s2);
  grid-auto-flow: dense;
}

.bauhaus-gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--color-border);
}

.bauhaus-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bauhaus-gallery__item:hover img {
  transform: scale(1.05);
}

/* Dynamic Bauhaus staggered sizing */
@media (min-width: 48rem) {
  .bauhaus-gallery__item:nth-child(4n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .bauhaus-gallery__item:nth-child(5n) {
    grid-column: span 2;
  }
}

.error-state {
  background-color: #fee2e2;
  color: #991b1b;
  padding: var(--s3);
  border: 1px solid #fca5a5;
  margin-block: var(--s4);
}
.empty-state {
  padding: var(--s4);
  color: var(--color-text-muted);
}
.empty-state__hint {
  font-size: 0.875rem;
}

/* Base Utilities */
.no-border-top { border-block-start: none !important; }
.bg-surface { background-color: var(--color-bg) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* Basic Page Content */
.basic-page__header { margin-block-end: var(--s5); }
.basic-page__title { font-size: clamp(2.5rem, 8vw, 4rem); }
.basic-page__content { max-inline-size: 55rem; }
.basic-page__body-wrapper { font-size: 1.125rem; font-weight: 300; }

/* Blog Elements */
.blog-card {
  min-block-size: auto;
  cursor: pointer;
}
.blog-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: var(--s1);
}
.blog-card__cta { margin-top: var(--s3); }
.blog-card__icon { width: 1.5rem; height: 1.5rem; }

.blog-header { margin-block-end: var(--s5); }
.blog-header__title { font-size: clamp(2.5rem, 8vw, 4rem); }
.blog-header__categories {
  color: var(--color-accent-pink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.blog-header__summary {
  max-inline-size: var(--measure);
  margin-block-start: var(--s2);
}
.blog-header__image {
  width: 100%;
  max-block-size: 60vh;
  object-fit: cover;
  margin-block-start: var(--s4);
}

.blog-content { max-inline-size: 55rem; }
.blog-content__wrapper { font-size: 1.125rem; font-weight: 300; }

.blog-tags {
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--s3);
  margin-block-start: var(--s4);
}

.blog-navigation {
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--s4);
}
.blog-navigation__cluster { justify-content: space-between; }
.blog-navigation__link--prev { flex-direction: row-reverse; }
.blog-navigation__link-text {
  font-size: 1rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.blog-navigation__icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s0);
}
.discipline-card {
  background-color: var(--color-surface);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  min-block-size: 20rem;
  transition: background-color 0.5s;
}

.discipline-card__header {
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--s4);
}

.discipline-card__index {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

.discipline-card--pink:hover { background-color: #fdf2f8; }
.discipline-card--amber:hover { background-color: #fffbeb; }
.discipline-card--blue:hover { background-color: #eff6ff; }

/* Vision Section */
.vision {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 64rem) {
  .vision { flex-direction: row; }
}

.vision__graphic {
  flex: 1;
  background-color: var(--color-surface);
  padding: clamp(var(--s1), 4vw, var(--s4));
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-end: 1px solid var(--color-border);
  position: relative;
}

.vision__graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-size: 40px 40px;
  background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px);
}

.vision-skull {
  position: relative;
  /* font-size: 1rem; REMOVED: Let it inherit organically to allow responsive em scaling */
  inline-size: 18em;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.vision-skull__cranium {
  inline-size: 100%;
  block-size: 15em;
  background-color: #f1f5f9;
  border-radius: 10em 10em .2em .2em;
  border: 0.0625em solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.vision-skull__eye {
  position: absolute;
  inset-block-start: 6em;
  inline-size: 5em;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision-skull__eye--blue { inset-inline-start: 2em; background-color: var(--color-accent-blue); }
.vision-skull__eye--amber { inset-inline-end: 2em; background-color: var(--color-accent-amber); }
.vision-skull__eye-inner { inline-size: 2em; aspect-ratio: 1; background-color: var(--color-bg); border-radius: 50%; }

.vision-skull__nose {
  position: absolute;
  inset-block-start: 11em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 2em;
  block-size: 2em;
  background-color: var(--color-accent-pink);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.vision-skull__jaw {
    inline-size: 9em;
    block-size: 5em;
    background-color: #f1f5f9;
    border: 0.0625em solid var(--color-border);
    border-block-start: none;
    border-radius: 0 0 1.5em 1.5em;
    margin-block-start: -1em;
    display: flex;
    justify-content: space-evenly;
    padding-block-start: 1em;
    position: relative;
    z-index: 10;
}

.vision-skull__tooth { inline-size: 0.125em; block-size: 2em; background-color: var(--color-border-dark); }

.vision__content {
  flex: 1;
  padding-block: var(--s5);
  justify-content: center;
}

.vision__title { font-size: clamp(1.5rem, 4vw, 3rem); }

.vision__accent {
  inline-size: 4rem;
  block-size: 2px;
  background-color: var(--color-accent-pink);
}

.vision__copy {
  max-inline-size: var(--measure);
  color: var(--color-text-muted);
  font-weight: 300;
}

/* Footer */
.site-footer {
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding-block: var(--s4);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

@media (min-width: 48rem) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

.site-footer__logo { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; }

.site-footer__dot { inline-size: 0.5rem; aspect-ratio: 1; border-radius: 50%; }
.site-footer__dot--pink { background-color: var(--color-accent-pink); }
.site-footer__dot--amber { background-color: var(--color-accent-amber); }
.site-footer__dot--blue { background-color: var(--color-accent-blue); }

.site-footer__meta { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.site-footer__email { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; }
.site-footer__email:hover { color: var(--color-accent-pink); }

.site-footer__links {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--s0);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Forms */
.form-group { display: flex; flex-direction: column; gap: var(--s-1); }
.form-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); font-weight: 500; }
.form-input {
  font-family: inherit; font-size: 1rem; color: var(--color-text-strong);
  padding: var(--s1); border: 1px solid var(--color-border); border-radius: 0; background-color: var(--color-surface);
  transition: border-color 0.3s;
}
.form-input:focus { outline: none; border-color: var(--color-accent-pink); }
.form-button {
  font-family: inherit; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  padding: var(--s1) var(--s4); background-color: var(--color-text-strong); color: var(--color-surface);
  border: none; cursor: pointer; transition: background-color 0.3s, transform 0.2s;
}
.form-button:hover { background-color: var(--color-accent-pink); transform: translateY(-2px); }

/* Story Block Layout */
.story-block {
  display: grid;
  gap: var(--s4);
  align-items: center;
}
@media (min-width: 48rem) {
  .story-block {
    grid-template-columns: 1fr 2fr;
  }
  .story-block--reverse {
    grid-template-columns: 2fr 1fr;
  }
}
.story-block__graphic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.discipline-card--story {
  min-block-size: auto;
  padding: clamp(var(--s1), 5vw, var(--s4));
}
.discipline-card__text--story {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
}
.text-highlight { font-weight: 500; }
.text-highlight--blue { color: var(--color-accent-blue); }

/* Aztec Bauhaus Graphics */
.aztec-graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 15rem;
  margin: 0 auto;
}

.aztec-graphic__step-pyramid {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: var(--color-accent-amber);
  clip-path: polygon(
    10% 100%, 10% 80%, 20% 80%, 20% 60%, 30% 60%, 30% 40%, 40% 40%, 40% 20%, 60% 20%, 60% 40%, 70% 40%, 70% 60%, 80% 60%, 80% 80%, 90% 80%, 90% 100%
  );
}

.aztec-graphic__sun {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 40%;
  background-color: var(--color-accent-pink);
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.aztec-graphic__eye {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 10%;
  background-color: var(--color-surface);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.aztec-graphic__serpent {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 60%;
  background-color: var(--color-accent-blue);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 20%, 20% 20%, 20% 40%, 100% 40%, 100% 60%, 0% 60%, 0% 80%, 80% 80%, 80% 100%, 0% 100%
  );
}

.aztec-graphic__feather {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 30%;
  height: 30%;
  background-color: var(--color-accent-pink);
  border-radius: 50% 0 50% 0;
}

/* Contact Specific */
.contact-section { margin-block: var(--s5); }
.contact-intro { flex-basis: 20rem; flex-grow: 1; }
.contact-intro__title { margin-block-end: var(--s1); font-size: clamp(2rem, 5vw, 3rem); view-transition-name: none; }
.contact-intro__dots { margin-block-start: var(--s2); }
.contact-intro__dot { inline-size: 1rem; aspect-ratio: 1; }
.contact-form { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; max-inline-size: 35rem; }
.contact-form__row { gap: var(--s1); }
.contact-form__group { flex-grow: 1; flex-basis: 10rem; }
.contact-form__submit { margin-block-start: var(--s2); }
/* View Transitions API */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

::view-transition-new(root) {
    animation: 200ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

/* ==========================================================================
   Lite YouTube Embed
   ========================================================================== */
lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}
/* gradient */
lite-youtube::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    top: 0;
    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
    height: 99px;
    width: 100%;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: hsl(0deg 0% 93.33%);
    text-shadow: 0 0 2px rgba(0,0,0,.5);
    font-size: 18px;
    padding: 25px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
lite-youtube:hover::before { color: white; }
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0; border: 0;
}
lite-youtube > .lyt-playbtn {
    display: block; width: 100%; height: 100%;
    background: no-repeat center/68px 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute; cursor: pointer; z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: 0;
}
lite-youtube:hover > .lyt-playbtn, lite-youtube .lyt-playbtn:focus { filter: none; }
lite-youtube.lyt-activated { cursor: unset; }
lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lyt-playbtn { opacity: 0; pointer-events: none; }
.lyt-visually-hidden {
    clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px;
    overflow: hidden; position: absolute; white-space: nowrap; width: 1px;
}