/* ==========================================================================
   DEREK MARUNOWSKI PORTFOLIO
   Black Lotus / Shadow Work Theme
   Combined Stylesheet
   ==========================================================================

   Font pairing:
   - Display / editorial: Cormorant Garamond
   - Interface / body: Inter

   Sections included:
   1. Font import + design tokens
   2. Base styles
   3. Background system
   4. Fixed header + navigation
   5. Brand typography
   6. Hero typography
   7. Section typography
   8. Pillar / philosophy cards
   9. Portfolio / case-study cards
   10. Editorial / About styles
   11. Quotes
   12. Buttons
   13. Footer / closing statement
   14. Utilities
   15. Responsive behavior
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600&display=swap");


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  /* Text */
  --text-primary: #eee8df;
  --text-secondary: #b9b2a8;
  --text-muted: #7f7a73;
  --text-dark: #111214;

  /* Accent */
  --gold: #c69a5b;
  --gold-soft: #d8b77e;
  --gold-muted: #9b7445;

  /* Backgrounds */
  --bg-deep: #090a0c;
  --bg-panel: #111216;
  --bg-elevated: #17171c;

  /* Borders */
  --border-gold: rgba(198, 154, 91, 0.22);
  --border-gold-strong: rgba(198, 154, 91, 0.48);

  /* Sizing */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.4rem);
  --text-3xl: clamp(2.35rem, 5vw, 4rem);
  --text-hero: clamp(3.4rem, 8vw, 6.75rem);

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.14em;
  --tracking-wider: 0.24em;

  /* Layout */
  --header-height: 82px;
  --content-width: 1400px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--header-height);

  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Main shadow-work background */
  background:
    radial-gradient(
      circle at 75% 18%,
      rgba(198, 154, 91, 0.08) 0%,
      rgba(198, 154, 91, 0.025) 22%,
      transparent 48%
    ),
    radial-gradient(
      circle at 18% 65%,
      rgba(50, 45, 65, 0.14) 0%,
      rgba(25, 24, 32, 0.06) 32%,
      transparent 58%
    ),
    linear-gradient(
      155deg,
      #121317 0%,
      #0d0e11 40%,
      #090a0c 72%,
      #07080a 100%
    );

  background-attachment: fixed;
}

img {
  max-width: 100%;
}

p {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  color: var(--text-secondary);
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

a {
  color: inherit;
}

section {
  scroll-margin-top: 105px;
}


/* ==========================================================================
   3. BACKGROUND / SECTION SYSTEM
   ========================================================================== */

.hero {
  position: relative;
  min-height: 80vh;

  background:
    radial-gradient(
      ellipse at 72% 45%,
      rgba(198, 154, 91, 0.10) 0%,
      rgba(198, 154, 91, 0.035) 25%,
      transparent 55%
    ),
    linear-gradient(
      110deg,
      rgba(7, 8, 10, 0.98) 0%,
      rgba(10, 11, 14, 0.95) 52%,
      rgba(15, 15, 18, 0.90) 100%
    );
}

.section-dark {
  background: rgba(9, 10, 12, 0.92);
}

.section-raised {
  background:
    linear-gradient(
      180deg,
      rgba(20, 20, 24, 0.94),
      rgba(14, 15, 18, 0.96)
    );
}


/* ==========================================================================
   4. FIXED HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: var(--header-height);

  z-index: 1000;

  background:
    linear-gradient(
      180deg,
      rgba(9, 10, 12, 0.97) 0%,
      rgba(9, 10, 12, 0.91) 100%
    );

  border-bottom: 1px solid rgba(198, 154, 91, 0.20);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -1px;

  width: min(700px, 55%);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(198, 154, 91, 0.18),
      rgba(216, 183, 126, 0.32),
      rgba(198, 154, 91, 0.18),
      transparent
    );

  pointer-events: none;
}

.header-inner {
  width: min(var(--content-width), calc(100% - 64px));
  height: 100%;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;

  flex-shrink: 0;

  color: var(--text-primary);
  text-decoration: none;
}

.header-logo {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 14px rgba(198, 154, 91, 0.10))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.24));
}

.header-brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--text-primary);

  transition: color 180ms ease;
}

.header-brand:hover .header-brand-name {
  color: var(--gold-soft);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.site-nav a {
  position: relative;

  padding: 0.75rem 0;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--text-secondary);

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.site-nav a::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 2px;

  width: 0;
  height: 1px;

  background: var(--gold);

  transform: translateX(-50%);

  transition: width 200ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--gold-soft);
}

.site-nav a:hover::after,
.site-nav a.active::after,
.site-nav a[aria-current="page"]::after {
  width: 100%;
}

.site-nav a:focus-visible,
.header-brand:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 6px;
}


/* ==========================================================================
   5. BRAND / LOGO TYPOGRAPHY
   ========================================================================== */

.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--text-primary);
}

.brand-tagline {
  margin-top: 0.55rem;

  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;

  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  color: var(--gold);
}


/* ==========================================================================
   6. HERO TYPOGRAPHY
   ========================================================================== */

.hero-name {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 0.9;

  letter-spacing: var(--tracking-tight);

  color: var(--text-primary);
}

.hero-role {
  margin: 1.1rem 0 0;

  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: var(--gold);
}

.hero-statement {
  margin: 2rem 0 0;
  max-width: 14ch;

  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;

  letter-spacing: -0.01em;

  color: var(--text-primary);
}

.hero-intro {
  margin-top: 1.4rem;
  max-width: 58ch;

  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.8;

  color: var(--text-secondary);
}


/* ==========================================================================
   7. SECTION HEADINGS
   ========================================================================== */

.section-kicker {
  margin: 0 0 0.85rem;

  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  color: var(--gold);
}

.section-title {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1;

  letter-spacing: -0.015em;

  color: var(--text-primary);
}

.section-title--center {
  text-align: center;
}

.section-intro {
  margin-top: 1rem;

  font-size: var(--text-lg);
  line-height: 1.75;

  color: var(--text-secondary);
}


/* ==========================================================================
   8. PILLARS / PHILOSOPHY
   ========================================================================== */

.pillar-title {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.1;

  color: var(--gold-soft);
}

.pillar-copy {
  margin-top: 0.9rem;

  font-size: var(--text-sm);
  line-height: 1.7;

  color: var(--text-secondary);
}

.pillar-label {
  display: inline-block;
  margin-bottom: 0.8rem;

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: var(--gold-muted);
}


/* ==========================================================================
   9. PORTFOLIO / CASE STUDY CARDS
   ========================================================================== */

.portfolio-card {
  background:
    linear-gradient(
      145deg,
      rgba(25, 25, 30, 0.88),
      rgba(15, 16, 19, 0.94)
    );

  border: 1px solid var(--border-gold);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.portfolio-card:hover {
  border-color: var(--border-gold-strong);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(198, 154, 91, 0.055);

  transform: translateY(-3px);
}

.card-eyebrow {
  margin: 0 0 0.45rem;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--gold);
}

.card-title {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.08;

  color: var(--text-primary);
}

.card-description {
  margin-top: 0.75rem;

  font-size: 0.92rem;
  line-height: 1.65;

  color: var(--text-secondary);
}

.card-meta {
  margin-top: 1rem;

  font-size: 0.7rem;
  font-weight: 500;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--text-muted);
}


/* ==========================================================================
   10. ABOUT / EDITORIAL COPY
   ========================================================================== */

.editorial-lead {
  margin: 0;
  max-width: 24ch;

  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;

  color: var(--text-primary);
}

.editorial-body {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.85;

  color: var(--text-secondary);
}


/* ==========================================================================
   11. QUOTES / SHADOW WORK STATEMENTS
   ========================================================================== */

.pullquote {
  margin: 2rem 0;
  padding-left: 1.5rem;

  border-left: 1px solid var(--gold-muted);

  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;

  color: var(--text-primary);
}

.pullquote cite {
  display: block;
  margin-top: 1rem;

  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 500;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--gold);
}


/* ==========================================================================
   12. BUTTONS / CALLS TO ACTION
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3rem;
  padding: 0 1.4rem;

  border: 1px solid var(--gold-muted);
  border-radius: 0.2rem;

  background: transparent;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;

  color: var(--text-primary);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.button:hover {
  border-color: var(--gold-soft);

  background: rgba(198, 154, 91, 0.10);

  color: var(--gold-soft);

  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 4px;
}

.button--primary {
  border-color: var(--gold);

  background:
    linear-gradient(
      135deg,
      rgba(198, 154, 91, 0.94),
      rgba(145, 105, 61, 0.94)
    );

  color: var(--text-dark);
}

.button--primary:hover {
  background:
    linear-gradient(
      135deg,
      rgba(216, 183, 126, 1),
      rgba(170, 126, 72, 1)
    );

  color: var(--text-dark);
}


/* ==========================================================================
   13. FOOTER / CLOSING STATEMENT
   ========================================================================== */

.closing-statement {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;

  text-align: center;

  color: var(--gold-soft);
}

.footer-copy {
  font-size: 0.78rem;
  line-height: 1.6;

  color: var(--text-muted);
}


/* ==========================================================================
   14. UTILITIES
   ========================================================================== */

.text-gold {
  color: var(--gold);
}

.text-muted {
  color: var(--text-muted);
}

.text-uppercase {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.text-display {
  font-family: var(--font-display);
}

.text-body {
  font-family: var(--font-body);
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .header-inner {
    width: min(calc(100% - 36px), var(--content-width));
  }

  .header-brand-name {
    display: none;
  }

  .site-nav {
    gap: 1.35rem;
  }
}

@media (max-width: 720px) {
  body {
    line-height: 1.65;
  }

  .hero-name {
    line-height: 0.95;
  }

  .hero-statement {
    max-width: 16ch;
  }

  .hero-role,
  .brand-tagline {
    letter-spacing: 0.16em;
  }

  .section-title {
    line-height: 1.05;
  }
}

@media (max-width: 620px) {
  :root {
    --header-height: 70px;
  }

  .header-inner {
    width: calc(100% - 24px);
  }

  .header-logo {
    width: 46px;
    height: 46px;
  }

  .site-nav {
    gap: 0.9rem;
  }

  .site-nav a {
    font-size: 0.62rem;
    letter-spacing: 0.10em;
  }

  section {
    scroll-margin-top: 90px;
  }
}


/* ==========================================================================
   OPTIONAL: REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ==========================================================================
   16. PAGE LAYOUT + WORK CASE STUDIES
   ========================================================================== */

/*
   Shared content wrapper.
   Keeps hero, work, and future sections aligned to the same grid as the header.
*/
.content-shell {
  width: min(var(--content-width), calc(100% - 64px));
  margin-inline: auto;
}


/* ==========================================================================
   HERO LAYOUT
   ========================================================================== */

.hero {
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}


/* ==========================================================================
   WORK SECTION
   ========================================================================== */

.work-section {
  padding-block: clamp(5.5rem, 9vw, 9rem);
}

.work-intro {
  max-width: 850px;
  margin-bottom: clamp(4rem, 7vw, 6.5rem);
}

.work-intro .section-intro {
  max-width: 62ch;
}


/* ==========================================================================
   INDIVIDUAL PROJECT CASE STUDIES
   ========================================================================== */

.project-case-study {
  position: relative;
  padding-block: clamp(4rem, 7vw, 7rem);
  border-top: 1px solid rgba(198, 154, 91, 0.22);
}

/* Slight visual break between projects without creating hard stripes. */
.project-case-study::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(198, 154, 91, 0.035),
      transparent 30%
    );
}

.project-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: 2rem;
}

.project-index {
  min-width: 2.5rem;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.18em;

  color: var(--gold-muted);
}

.project-title {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;

  color: var(--text-primary);
}


/* ==========================================================================
   PROJECT SUMMARY
   ========================================================================== */

.project-summary-panel {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1.65fr);
  gap: clamp(1.5rem, 5vw, 4rem);

  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);

  background:
    linear-gradient(
      145deg,
      rgba(24, 24, 29, 0.86),
      rgba(13, 14, 17, 0.92)
    );

  border: 1px solid rgba(198, 154, 91, 0.18);
  border-radius: 0.35rem;

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.project-label {
  margin: 0;

  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.20em;
  text-transform: uppercase;

  color: var(--gold);
}

.project-summary {
  margin: 0;
  max-width: 72ch;

  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.35;

  color: var(--text-primary);
}


/* ==========================================================================
   PROJECT GALLERY
   ========================================================================== */

.project-gallery-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;

  margin-bottom: 1.25rem;
}

.project-gallery-note {
  margin: 0;
  max-width: 58ch;

  font-size: 0.82rem;
  line-height: 1.6;

  color: var(--text-muted);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.25rem);
}

.gallery-item {
  grid-column: span 4;
  margin: 0;

  overflow: hidden;

  border: 1px solid rgba(198, 154, 91, 0.16);
  border-radius: 0.35rem;

  background: rgba(12, 13, 16, 0.72);

  transition:
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.gallery-item--featured {
  grid-column: span 8;
  grid-row: span 2;
}

.gallery-item:hover {
  border-color: rgba(198, 154, 91, 0.38);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28);

  transform: translateY(-2px);
}

.gallery-item img,
.gallery-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gallery-item--featured img,
.gallery-item--featured .gallery-placeholder {
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
}

.gallery-placeholder {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 190px;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(198, 154, 91, 0.11),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #1a1a20,
      #0d0e11
    );

  color: var(--gold-muted);
}

.gallery-placeholder::before {
  content: "";
  position: absolute;
  inset: 12px;

  border: 1px solid rgba(198, 154, 91, 0.12);

  pointer-events: none;
}

.gallery-placeholder span {
  position: relative;
  z-index: 1;

  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gallery-item figcaption {
  padding: 0.85rem 1rem 1rem;

  font-size: 0.75rem;
  line-height: 1.55;

  color: var(--text-muted);
}


/* ==========================================================================
   PLACEHOLDER DESTINATION SECTIONS
   ========================================================================== */

.placeholder-section {
  min-height: 42vh;
  padding-block: clamp(5rem, 8vw, 8rem);
}


/* ==========================================================================
   RESPONSIVE WORK LAYOUT
   ========================================================================== */

@media (max-width: 900px) {
  .content-shell {
    width: min(calc(100% - 36px), var(--content-width));
  }

  .project-summary-panel {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .project-gallery-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .gallery-item,
  .gallery-item--featured {
    grid-column: span 6;
    grid-row: auto;
  }

  .gallery-item--featured img,
  .gallery-item--featured .gallery-placeholder {
    min-height: 280px;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 620px) {
  .content-shell {
    width: calc(100% - 24px);
  }

  .hero {
    min-height: calc(100svh - var(--header-height));
    padding-block: 4.5rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .project-heading {
    gap: 0.8rem;
  }

  .project-index {
    min-width: 1.7rem;
  }

  .project-title {
    font-size: clamp(2.1rem, 11vw, 3.4rem);
  }

  .project-summary {
    font-size: 1.25rem;
  }

  .gallery-item,
  .gallery-item--featured {
    grid-column: 1 / -1;
  }

  .gallery-item--featured img,
  .gallery-item--featured .gallery-placeholder {
    min-height: 220px;
  }
}
/* ==========================================================================
   17. HERO PORTRAIT
   Personal portrait treatment for the Black Lotus / Shadow Work theme.
   The original photo remains untouched; presentation is handled entirely here.
   ========================================================================== */

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.hero-content {
  position: relative;
  z-index: 2;
}


/* --------------------------------------------------------------------------
   Portrait container
   -------------------------------------------------------------------------- */

.hero-portrait {
  position: relative;
  z-index: 1;

  width: min(100%, 470px);
  margin: 0;
  justify-self: end;
}


/*
   The offset circles echo the lotus / reflection motif without competing
   with the photograph.
*/
.hero-portrait::before,
.hero-portrait::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-portrait::before {
  width: 82%;
  aspect-ratio: 1;
  top: -8%;
  right: -9%;

  border: 1px solid rgba(198, 154, 91, 0.24);
  border-radius: 50%;

  box-shadow:
    0 0 60px rgba(198, 154, 91, 0.055);
}

.hero-portrait::after {
  width: 46%;
  height: 1px;

  right: -4%;
  bottom: 4.75rem;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(198, 154, 91, 0.38),
      transparent
    );
}


/* --------------------------------------------------------------------------
   Image frame
   -------------------------------------------------------------------------- */

.hero-portrait-frame {
  position: relative;
  overflow: hidden;

  aspect-ratio: 4 / 5;

  border: 1px solid rgba(198, 154, 91, 0.34);
  border-radius: 48% 48% 1rem 1rem / 24% 24% 1rem 1rem;

  background: var(--bg-panel);

  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.52),
    0 0 55px rgba(198, 154, 91, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/*
   Darkens the bright outdoor background, keeps the face readable, and
   fades the bottom into the visual language of the page.
*/
.hero-portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at 49% 38%,
      transparent 0%,
      transparent 28%,
      rgba(7, 8, 10, 0.10) 54%,
      rgba(7, 8, 10, 0.44) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 8, 10, 0.10) 0%,
      rgba(7, 8, 10, 0.04) 42%,
      rgba(7, 8, 10, 0.28) 72%,
      rgba(7, 8, 10, 0.76) 100%
    );

  pointer-events: none;
}

.hero-portrait-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 38%;

  /*
    The photo is intentionally not made fully monochrome.
    The reduced saturation lets the warm skin and tan interior survive
    while fitting the charcoal/gold palette.
  */
  filter:
    saturate(0.68)
    contrast(1.08)
    brightness(0.82);
}


/* --------------------------------------------------------------------------
   Caption beneath portrait
   -------------------------------------------------------------------------- */

.hero-portrait-caption {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  margin-top: 1.1rem;

  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--gold-muted);
}


/* --------------------------------------------------------------------------
   Add a subtle dark veil behind the left hero copy for dependable contrast.
   -------------------------------------------------------------------------- */

.hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;

  inset: -2.5rem -5rem -2.5rem -4rem;

  background:
    radial-gradient(
      ellipse at 30% 48%,
      rgba(7, 8, 10, 0.72),
      rgba(7, 8, 10, 0.32) 55%,
      transparent 78%
    );

  pointer-events: none;
}


/* ==========================================================================
   PORTRAIT RESPONSIVE BEHAVIOR
   ========================================================================== */

@media (max-width: 1000px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.55fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .hero-portrait {
    width: min(100%, 380px);
  }
}


@media (max-width: 760px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-content {
    order: 1;
  }

  .hero-portrait {
    order: 2;

    width: min(78vw, 390px);

    margin-top: 1rem;
    justify-self: center;
  }

  .hero-portrait-frame {
    aspect-ratio: 4 / 4.8;
  }

  .hero-content::before {
    inset: -2rem -1rem;
  }
}


@media (max-width: 620px) {
  .hero {
    min-height: auto;
  }

  .hero-portrait {
    width: min(86vw, 350px);
    margin-top: 1.5rem;
  }

  .hero-portrait-caption {
    gap: 0.45rem;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .hero-portrait::before {
    width: 78%;
    right: -5%;
  }

  .hero-portrait::after {
    display: none;
  }
}
/* ==========================================================================
   18. THE GREEN HORDE — PROJECT-SPECIFIC GALLERY
   ========================================================================== */

/*
   Preserve the strength of the design-language board rather than cropping it
   aggressively like a standard portfolio thumbnail.
*/
.project-gallery--green-horde .gallery-item--featured img {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/*
   Supporting images use consistent frames but retain useful subject framing.
*/
.project-gallery--green-horde .gallery-item:not(.gallery-item--featured) img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0d0e11;
}

/* Keep the physical print's subject comfortably inside its frame. */
.project-gallery--green-horde .gallery-item:nth-child(4) img {
  object-position: center 48%;
}

/*
   Captions are slightly taller here because they describe the production
   pipeline rather than functioning as simple image labels.
*/
.project-gallery--green-horde figcaption {
  min-height: 6.4rem;
}

.project-gallery--green-horde figcaption strong {
  display: block;
  margin-bottom: 0.2rem;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--gold-soft);
}

@media (max-width: 900px) {
  .project-gallery--green-horde figcaption {
    min-height: 0;
  }
}
/* ==========================================================================
   19. BLOOD WIDOW — PROJECT-SPECIFIC GALLERY
   Movie-first presentation with the production team as supporting context.
   ========================================================================== */

.project-gallery--blood-widow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.8rem, 1.5vw, 1.25rem);
}

/*
   The vertical movie artwork acts as the visual anchor and is intentionally
   preserved in portrait format instead of being cropped into a landscape card.
*/
.project-gallery--blood-widow .blood-widow-poster {
  grid-column: span 4;
  grid-row: span 2;
}

.project-gallery--blood-widow .blood-widow-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;

  background:
    linear-gradient(
      145deg,
      rgba(18, 19, 23, 0.96),
      rgba(8, 9, 11, 0.98)
    );
}

/* The finished-film image gets the widest supporting position. */
.project-gallery--blood-widow .blood-widow-set {
  grid-column: span 8;
}

.project-gallery--blood-widow .blood-widow-set img {
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
  object-position: center;
}

/* Construction and team imagery split the lower supporting row. */
.project-gallery--blood-widow .blood-widow-stage,
.project-gallery--blood-widow .blood-widow-team {
  grid-column: span 4;
}

.project-gallery--blood-widow .blood-widow-stage img,
.project-gallery--blood-widow .blood-widow-team img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-gallery--blood-widow figcaption {
  min-height: 6.4rem;
}

.project-gallery--blood-widow figcaption strong {
  display: block;
  margin-bottom: 0.2rem;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--gold-soft);
}


/* Tablet */
@media (max-width: 900px) {
  .project-gallery--blood-widow .blood-widow-poster {
    grid-column: span 5;
    grid-row: span 2;
  }

  .project-gallery--blood-widow .blood-widow-set {
    grid-column: span 7;
  }

  .project-gallery--blood-widow .blood-widow-stage,
  .project-gallery--blood-widow .blood-widow-team {
    grid-column: span 7;
  }

  .project-gallery--blood-widow figcaption {
    min-height: 0;
  }
}


/* Mobile */
@media (max-width: 620px) {
  .project-gallery--blood-widow .blood-widow-poster,
  .project-gallery--blood-widow .blood-widow-set,
  .project-gallery--blood-widow .blood-widow-stage,
  .project-gallery--blood-widow .blood-widow-team {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .project-gallery--blood-widow .blood-widow-poster {
    width: min(78vw, 360px);
    justify-self: center;
  }

  .project-gallery--blood-widow .blood-widow-set img,
  .project-gallery--blood-widow .blood-widow-stage img,
  .project-gallery--blood-widow .blood-widow-team img {
    aspect-ratio: 16 / 10;
  }
}


/* ==========================================================================
   20. HEADER MONOGRAM LOGO
   Uses the generated DM monogram PNG in the fixed header.
   If you export an SVG version later, replace the image path in index.htm
   and keep these dimensions as a starting point.
   ========================================================================== */
/* ==========================================================================
   21. FULL SAIL UNIVERSITY — PROJECT GALLERY
   Four equal-weight examples emphasizing teaching tools, technical templates,
   workflow systems, and professional QA practices.
   ========================================================================== */

.project-gallery--full-sail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/*
   Override the generic gallery spans so all four examples receive equal visual
   weight. This is particularly useful for the spreadsheet and ClickUp captures,
   which contain interface details worth viewing at a larger size.
*/
.project-gallery--full-sail .gallery-item {
  grid-column: auto;
  grid-row: auto;
}

.gallery-image-link {
  display: block;
  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background: #0d0e11;
}

.project-gallery--full-sail .gallery-image-link img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;
  object-fit: cover;

  transition:
    transform 250ms ease,
    filter 250ms ease;
}

.project-gallery--full-sail .gallery-image-link:hover img {
  transform: scale(1.018);
  filter: brightness(1.06);
}

.project-gallery--full-sail .gallery-image-link:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: -4px;
}

.project-gallery--full-sail figcaption {
  min-height: 10.5rem;
  padding: 1rem 1.1rem 1.2rem;

  font-size: 0.80rem;
  line-height: 1.65;
}

.project-gallery--full-sail figcaption strong {
  display: block;
  margin-bottom: 0.35rem;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: var(--gold-soft);
}


/* Tablet and mobile */
@media (max-width: 760px) {
  .project-gallery--full-sail {
    grid-template-columns: 1fr;
  }

  .project-gallery--full-sail figcaption {
    min-height: 0;
  }
}
/* ==========================================================================
   22. CLICKABLE PROJECT GALLERIES
   Green Horde and Blood Widow now use the same click-to-full-size behavior
   as the Full Sail gallery.
   ========================================================================== */

.project-gallery--green-horde .gallery-image-link,
.project-gallery--blood-widow .gallery-image-link {
  display: block;
  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background: #0d0e11;
}

.project-gallery--green-horde .gallery-image-link img,
.project-gallery--blood-widow .gallery-image-link img {
  transition:
    transform 250ms ease,
    filter 250ms ease;
}

.project-gallery--green-horde .gallery-image-link:hover img,
.project-gallery--blood-widow .gallery-image-link:hover img {
  transform: scale(1.018);
  filter: brightness(1.06);
}

.project-gallery--green-horde .gallery-image-link:focus-visible,
.project-gallery--blood-widow .gallery-image-link:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: -4px;
}