.project-card {
  position: relative !important;
  overflow: hidden !important;
}

body.content-loading .roles,
body.content-loading .statement,
body.content-loading [data-work-list],
body.content-loading [data-project-grid] {
  visibility: hidden !important;
}

.statement {
  left: clamp(18px, 4vw, 54px) !important;
  right: auto !important;
  bottom: clamp(34px, 4vw, 58px) !important;
  width: min(1160px, calc(100vw - 108px)) !important;
  font-size: clamp(2.25rem, 4.6vw, 5.65rem) !important;
  line-height: 0.88 !important;
  text-wrap: balance !important;
}

.project-card-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  opacity: 0.5 !important;
  filter: grayscale(1) contrast(1.08) !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.project-card > span,
.project-card > strong {
  position: relative !important;
  z-index: 1 !important;
}

.project-card {
  transition: background-color 180ms ease, color 180ms ease, filter 180ms ease !important;
  --project-title-color: #cf4e39;
}

.project-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg, rgba(23, 20, 17, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(23, 20, 17, 0.12) 1px, transparent 1px) !important;
  background-color: var(--project-title-color) !important;
  background-size: 22px 22px !important;
  opacity: 0 !important;
  mix-blend-mode: multiply !important;
  transition: opacity 180ms ease !important;
  pointer-events: none !important;
}

.project-card:hover::after,
.project-card:focus-visible::after {
  opacity: 0.28 !important;
}

.project-card:hover .project-card-thumb,
.project-card:focus-visible .project-card-thumb {
  opacity: 0.72 !important;
  filter: grayscale(1) contrast(1.18) !important;
}

.project-card:hover > strong,
.project-card:focus-visible > strong {
  color: var(--project-title-color) !important;
}

@media (max-width: 780px) {
  .project-card-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    opacity: 0.5 !important;
    filter: grayscale(1) contrast(1.08) !important;
    mix-blend-mode: multiply !important;
  }
}

/* final long-statement hero layout */
.hero {
  display: grid !important;
  grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) !important;
  align-content: end !important;
  align-items: end !important;
  column-gap: clamp(28px, 5vw, 88px) !important;
  row-gap: 24px !important;
  min-height: 100vh !important;
  padding: 96px clamp(18px, 4vw, 54px) clamp(34px, 5vw, 64px) !important;
}

.hero .roles {
  position: static !important;
  grid-column: 1 !important;
  align-self: end !important;
  max-width: 260px !important;
  line-height: 1.25 !important;
}

.hero .statement {
  position: static !important;
  grid-column: 2 !important;
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 !important;
  font-size: clamp(2.1rem, 3.55vw, 4.55rem) !important;
  line-height: 0.9 !important;
  text-wrap: balance !important;
}

@media (min-width: 1200px) {
  .hero .statement {
    font-size: clamp(2.45rem, 3.15vw, 4.15rem) !important;
    max-width: 1120px !important;
  }
}

@media (max-width: 780px) {
  .hero {
    grid-template-columns: 1fr !important;
    align-content: end !important;
    min-height: 94vh !important;
    padding: 86px 18px 34px !important;
    row-gap: 24px !important;
  }

  .hero .roles {
    grid-column: 1 !important;
    max-width: min(330px, 100%) !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  .hero .statement {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.75rem, 7.65vw, 2.85rem) !important;
    line-height: 0.93 !important;
  }
}


.project-card > strong {
  display: block !important;
  width: 100% !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(2.4rem, 6vw, 6.2rem) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  color: #171411 !important;
}

.project-card-feature > strong {
  font-size: clamp(2.4rem, 6vw, 6.2rem) !important;
}

@media (max-width: 780px) {
  .hero {
    min-height: 94vh !important;
    padding-bottom: 34px !important;
    display: grid !important;
    align-content: end !important;
    gap: 22px !important;
  }

  .roles {
    position: static !important;
    max-width: calc(100% - 36px) !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    order: 1 !important;
  }

  .statement {
    position: static !important;
    width: calc(100% - 36px) !important;
    font-size: clamp(1.95rem, 9.2vw, 3.25rem) !important;
    line-height: 0.9 !important;
    order: 2 !important;
  }

  .project-grid {
    grid-auto-rows: clamp(158px, 46vw, 210px) !important;
  }

  .project-card {
    min-height: 0 !important;
    height: clamp(158px, 46vw, 210px) !important;
    padding: clamp(14px, 4vw, 20px) !important;
  }

  .project-card > span {
    font-size: 11px !important;
  }

  .project-card > strong,
  .project-card-feature > strong {
    font-size: clamp(1.35rem, 9.4vw, 3.2rem) !important;
    line-height: 0.86 !important;
    max-height: 3.45em !important;
    overflow: hidden !important;
  }
}

/* hero statement repair v8 */
.hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) !important;
  align-content: end !important;
  align-items: end !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  padding: 104px clamp(22px, 3.9vw, 72px) clamp(34px, 4.4vw, 70px) !important;
  column-gap: clamp(42px, 7vw, 150px) !important;
}

.hero > .roles {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  grid-column: 1 !important;
  display: grid !important;
  align-self: end !important;
  max-width: 280px !important;
  margin: 0 0 0.22em !important;
  font-size: 12px !important;
  line-height: 1.26 !important;
}

.hero > .statement {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  grid-column: 2 !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  justify-self: end !important;
  margin: 0 0 0 auto !important;
  font-size: clamp(2rem, 3.05vw, 3.9rem) !important;
  line-height: 0.95 !important;
  text-align: right !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance !important;
}

@media (min-width: 1600px) {
  .hero > .statement {
    font-size: clamp(2.15rem, 2.55vw, 3.65rem) !important;
    max-width: 1280px !important;
  }
}

@media (max-width: 780px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: 100svh !important;
    padding: 86px 18px 32px !important;
    row-gap: 24px !important;
  }

  .hero > .roles {
    grid-column: 1 !important;
    max-width: 78vw !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
  }

  .hero > .statement {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: start !important;
    margin: 0 !important;
    font-size: clamp(1.55rem, 7.2vw, 2.5rem) !important;
    line-height: 0.98 !important;
    text-align: left !important;
  }
}

/* combo 01: editorial home + archive projects + cinematic work + hidden dark mode */
:root {
  --paper: #f1eadf;
  --ink: #11100e;
  --muted: rgba(17, 16, 14, 0.62);
  --line: rgba(17, 16, 14, 0.22);
  --grid-soft: rgba(17, 16, 14, 0.05);
  --grid-medium: rgba(17, 16, 14, 0.12);
}

body {
  background:
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px),
    linear-gradient(var(--grid-soft) 1px, transparent 1px),
    var(--paper) !important;
  background-size: 38px 38px !important;
  color: var(--ink) !important;
  transition: background-color 240ms ease, color 240ms ease !important;
}

body.is-dark {
  --paper: #12100e;
  --ink: #f4efe6;
  --muted: rgba(244, 239, 230, 0.64);
  --line: rgba(244, 239, 230, 0.22);
  --grid-soft: rgba(244, 239, 230, 0.055);
  --grid-medium: rgba(244, 239, 230, 0.2);
}

.site-header {
  padding: 28px clamp(18px, 3vw, 44px) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
}

.wordmark,
nav a {
  color: var(--ink) !important;
  text-decoration: none !important;
}

.wordmark {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
}

.instagram-link {
  display: inline-grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.instagram-link svg {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

.instagram-link-nav {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  transform: translateY(-1px) !important;
}

.hero {
  grid-template-columns: minmax(220px, 31vw) minmax(0, 1fr) !important;
  min-height: 100svh !important;
  padding: clamp(92px, 10vh, 130px) clamp(18px, 3vw, 44px) clamp(28px, 4vw, 56px) !important;
  column-gap: clamp(26px, 4vw, 68px) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  border-bottom: 1px solid var(--ink) !important;
}

.hero::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  min-height: 62vh !important;
  background: var(--hero-image, url("assets/practice-photo.png")) center / cover no-repeat !important;
  background-size: cover !important;
  filter: grayscale(1) contrast(1.14) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.72 !important;
}

body.is-dark .hero::before {
  opacity: 0.42 !important;
  filter: grayscale(1) contrast(1.3) !important;
  mix-blend-mode: screen !important;
}

.hero::after {
  display: none !important;
}

.hero > .roles {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: clamp(18px, 2.2vw, 34px) !important;
  max-width: 180px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  mix-blend-mode: multiply !important;
}

body.is-dark .hero > .roles {
  mix-blend-mode: screen !important;
}

.hero > .statement {
  grid-column: 2 !important;
  align-self: end !important;
  justify-self: end !important;
  max-width: min(1180px, 100%) !important;
  font-size: clamp(2.75rem, 5.75vw, 8.9rem) !important;
  line-height: 0.82 !important;
  text-align: right !important;
  color: var(--ink) !important;
}

.manifest {
  min-height: 72vh !important;
  place-items: end center !important;
  padding: clamp(120px, 16vw, 230px) clamp(18px, 3vw, 44px) !important;
  border-bottom: 1px solid var(--line) !important;
}

.manifest-photo {
  width: min(320px, 31vw) !important;
  aspect-ratio: 3 / 4 !important;
  border: 1px solid var(--line) !important;
  filter: grayscale(1) contrast(1.22) !important;
  mix-blend-mode: multiply !important;
}

body.is-dark .manifest-photo {
  mix-blend-mode: screen !important;
  opacity: 0.8 !important;
}

.index-list {
  border-top: 0 !important;
}

.index-list article {
  grid-template-columns: 70px 1fr !important;
  padding: clamp(46px, 7vw, 110px) clamp(18px, 3vw, 48px) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.index-list article span {
  color: var(--muted) !important;
}

.index-list article h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(3.8rem, 11vw, 13rem) !important;
  font-weight: 900 !important;
  line-height: 0.73 !important;
  color: var(--ink) !important;
}

.index-list article p {
  grid-column: 2 !important;
  max-width: 720px !important;
  margin-top: clamp(18px, 3vw, 42px) !important;
  color: var(--muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.05rem, 1.7vw, 1.6rem) !important;
  line-height: 1.16 !important;
}

.work-project-spacer {
  min-height: clamp(140px, 18vw, 260px) !important;
  display: grid !important;
  align-items: end !important;
  padding: clamp(28px, 4vw, 54px) clamp(18px, 3vw, 48px) !important;
  border-bottom: 1px solid var(--line) !important;
  background:
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px),
    linear-gradient(var(--grid-soft) 1px, transparent 1px),
    transparent !important;
  background-size: 44px 44px !important;
}

.work-project-spacer span {
  color: var(--muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

.project-grid {
  margin-top: 0 !important;
  grid-template-columns: 1fr !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.project-card {
  min-height: clamp(92px, 13vw, 190px) !important;
  grid-template-columns: 70px 1fr minmax(90px, 18vw) !important;
  align-items: center !important;
  align-content: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
  padding: 0 clamp(14px, 2.4vw, 34px) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

.project-card-thumb {
  position: relative !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  inset: auto !important;
  width: 100% !important;
  height: clamp(72px, 10vw, 150px) !important;
  opacity: 0.48 !important;
  filter: grayscale(1) contrast(1.22) !important;
  mix-blend-mode: multiply !important;
}

body.is-dark .project-card-thumb {
  mix-blend-mode: screen !important;
  opacity: 0.34 !important;
}

.project-card > span {
  grid-column: 1 !important;
  color: var(--ink) !important;
  font-size: clamp(1.1rem, 2.3vw, 2.9rem) !important;
  font-weight: 900 !important;
}

.project-card > strong,
.project-card-feature > strong {
  grid-column: 2 !important;
  align-self: center !important;
  color: var(--ink) !important;
  font-size: clamp(2.6rem, 8vw, 10rem) !important;
  line-height: 0.76 !important;
  max-height: none !important;
}

.project-card::after {
  z-index: 0 !important;
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px) !important;
  background-color: var(--project-title-color) !important;
  background-size: 13px 13px !important;
  mix-blend-mode: multiply !important;
}

body.is-dark .project-card::after {
  mix-blend-mode: screen !important;
}

.project-card:hover::after,
.project-card:focus-visible::after {
  opacity: 0.24 !important;
}

.project-card:hover > strong,
.project-card:focus-visible > strong {
  color: var(--project-title-color) !important;
}

body.is-dark .project-card:hover > strong,
body.is-dark .project-card:focus-visible > strong {
  color: var(--ink) !important;
}

.contact {
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
}

.contact a {
  color: var(--ink) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.8rem, 5vw, 6rem) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.footer-note {
  max-width: min(620px, calc(100vw - 36px)) !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.82rem, 1.1vw, 1rem) !important;
  line-height: 1.28 !important;
  text-align: center !important;
}

.footer-note[hidden] {
  display: none !important;
}

.contact .instagram-link-footer {
  width: clamp(34px, 4vw, 58px) !important;
  height: clamp(34px, 4vw, 58px) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
}

.mode-egg {
  position: fixed !important;
  right: clamp(14px, 2vw, 28px) !important;
  bottom: clamp(14px, 2vw, 28px) !important;
  z-index: 9998 !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 0.24 !important;
  cursor: none !important;
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease !important;
}

.mode-egg:hover,
.mode-egg:focus-visible {
  opacity: 0.9 !important;
  transform: scale(1.35) !important;
  background: var(--ink) !important;
}

body.is-dark .mode-egg {
  background: var(--ink) !important;
  opacity: 0.5 !important;
}

body.is-dark .hand-cursor-visual {
  mix-blend-mode: screen !important;
  opacity: 0.58 !important;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
    align-content: end !important;
    padding: 82px 18px 28px !important;
    row-gap: 24px !important;
  }

  .hero::before {
    position: absolute !important;
    inset: 120px 18px auto auto !important;
    width: min(42vw, 160px) !important;
    min-height: 210px !important;
  }

  .hero::after {
    display: none !important;
  }

  .hero > .roles {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
    max-width: 220px !important;
    align-self: end !important;
  }

  .hero > .statement {
    grid-column: 1 !important;
    font-size: clamp(2.1rem, 11.5vw, 4.45rem) !important;
    line-height: 0.84 !important;
    text-align: left !important;
  }

  .manifest {
    min-height: 58vh !important;
  }

  .manifest-photo {
    width: min(240px, 62vw) !important;
  }

  .index-list article {
    grid-template-columns: 36px 1fr !important;
    gap: 18px !important;
  }

  .index-list article h2 {
    font-size: clamp(3rem, 16vw, 6.4rem) !important;
  }

  .index-list article p {
    grid-column: 2 !important;
  }

  .work-project-spacer {
    min-height: clamp(96px, 26vw, 150px) !important;
    padding: 22px 18px !important;
  }

  .project-card {
    grid-template-columns: 38px 1fr !important;
    min-height: clamp(118px, 30vw, 180px) !important;
  }

  .project-card-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .project-card > strong,
  .project-card-feature > strong {
    font-size: clamp(1.8rem, 12vw, 4rem) !important;
  }

  .mode-egg {
    width: 22px !important;
    height: 22px !important;
    cursor: auto !important;
  }
}

/* combo refinements 02 */
.hero::after {
  display: none !important;
}

.hero > .statement {
  font-size: clamp(2.35rem, 4.95vw, 7.05rem) !important;
  line-height: 0.86 !important;
  max-width: min(980px, 100%) !important;
}

.hero > .roles[data-roles-color="black"] {
  color: #11100e !important;
  mix-blend-mode: multiply !important;
}

.hero > .roles[data-roles-color="white"] {
  color: #f4efe6 !important;
  mix-blend-mode: normal !important;
}

body.is-dark .hero > .roles[data-roles-color="black"] {
  color: #11100e !important;
  text-shadow: 0 0 18px rgba(244, 239, 230, 0.42) !important;
}

body.is-dark .hero > .roles[data-roles-color="white"] {
  color: #f4efe6 !important;
  text-shadow: none !important;
}

.mode-egg {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    transparent !important;
  background-size: 9px 9px !important;
  opacity: 0.34 !important;
  transform: rotate(45deg) !important;
}

.mode-egg::before {
  content: "" !important;
  position: absolute !important;
  inset: 13px !important;
  border-radius: 50% !important;
  background: var(--ink) !important;
  transform: rotate(-45deg) !important;
}

.mode-egg::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1px !important;
  height: 54px !important;
  background: transparent !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

body.egg-disabled .mode-egg {
  opacity: 0.78 !important;
}

body.egg-disabled .mode-egg::after {
  background: var(--ink) !important;
}

.princess-counter {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 9996 !important;
  display: grid !important;
  place-items: center !important;
  color: #11100e !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(2.8rem, 8vw, 8rem) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  text-shadow: 0 0 8px rgba(244, 239, 230, 0.65) !important;
  mix-blend-mode: multiply !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  transition: opacity 90ms ease, transform 333ms ease !important;
}

.princess-counter.is-visible {
  opacity: 0.28 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.princess-counter.is-final {
  color: #cf1f1f !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

.princess-counter.is-visible.is-final {
  opacity: 0.82 !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
}

body.is-dark .princess-counter {
  color: #f4efe6 !important;
  mix-blend-mode: screen !important;
  text-shadow: 0 0 8px rgba(18, 16, 14, 0.8) !important;
}

body.is-dark .princess-counter.is-final {
  color: #ff3030 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

body.egg-disabled .princess-counter {
  display: none !important;
}

.love-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 0.08em !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: inherit !important;
  text-transform: inherit !important;
  cursor: none !important;
}

.love-trigger:hover,
.love-trigger:focus-visible {
  color: var(--project-title-color, #cf4e39) !important;
  outline: none !important;
}

.floating-doll.is-love {
  filter: drop-shadow(0 0 14px rgba(207, 78, 57, 0.38)) !important;
}

.mode-egg:hover,
.mode-egg:focus-visible {
  opacity: 0.92 !important;
  transform: rotate(45deg) scale(1.08) !important;
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    var(--project-title-color, #cf4e39) !important;
}

body.is-dark .mode-egg {
  opacity: 0.7 !important;
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    rgba(244, 239, 230, 0.1) !important;
}

@media (max-width: 900px) {
  .hero > .statement {
    font-size: clamp(1.72rem, 8.35vw, 3.6rem) !important;
    line-height: 0.93 !important;
    max-width: min(100%, 680px) !important;
  }

  .project-card {
    min-height: clamp(150px, 42vw, 230px) !important;
    padding: 14px 14px 16px !important;
    align-content: space-between !important;
  }

  .project-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, var(--paper) 0%, rgba(241, 234, 223, 0.86) 58%, rgba(241, 234, 223, 0.2) 100%) !important;
    pointer-events: none !important;
  }

  body.is-dark .project-card::before {
    background: linear-gradient(90deg, var(--paper) 0%, rgba(18, 16, 14, 0.86) 58%, rgba(18, 16, 14, 0.2) 100%) !important;
  }

  .project-card > span {
    position: relative !important;
    z-index: 2 !important;
    align-self: start !important;
    font-size: 12px !important;
  }

  .project-card > strong,
  .project-card-feature > strong {
    position: relative !important;
    z-index: 2 !important;
    max-width: 82% !important;
    font-size: clamp(1.45rem, 9.2vw, 3.25rem) !important;
    line-height: 0.84 !important;
    overflow-wrap: anywhere !important;
  }

  .project-card-thumb {
    z-index: 0 !important;
    opacity: 0.36 !important;
  }

  .mode-egg {
    width: 38px !important;
    height: 38px !important;
  }

  .mode-egg::before {
    inset: 11px !important;
  }

  .mode-egg::after {
    height: 46px !important;
  }

  .princess-counter {
    font-size: clamp(2.6rem, 18vw, 6rem) !important;
  }
}

/* CMS color schemes */
body[data-color-scheme="blush"] {
  --grid-light: rgba(225, 0, 53, 0.08) !important;
  --grid-medium: rgba(225, 0, 53, 0.18) !important;
}

body[data-color-scheme="butter"] {
  --grid-light: rgba(18, 17, 11, 0.06) !important;
  --grid-medium: rgba(18, 17, 11, 0.15) !important;
}

body[data-color-scheme="aqua"] {
  --grid-light: rgba(0, 128, 140, 0.08) !important;
  --grid-medium: rgba(0, 128, 140, 0.2) !important;
}

body[data-color-scheme="signal"] {
  --grid-light: rgba(92, 61, 196, 0.08) !important;
  --grid-medium: rgba(92, 61, 196, 0.2) !important;
}

body[data-color-scheme="blush"] .hero > .statement {
  color: #160a0d !important;
}

body.is-dark[data-color-scheme="blush"] .hero > .statement {
  color: #ffeaf0 !important;
}

body[data-color-scheme="butter"] .hero > .statement {
  color: #12110b !important;
}

body.is-dark[data-color-scheme="butter"] .hero > .statement {
  color: #f7f1ce !important;
}

body[data-color-scheme="aqua"] .hero > .statement {
  color: #071311 !important;
}

body.is-dark[data-color-scheme="aqua"] .hero > .statement {
  color: #e9fff6 !important;
}

body[data-color-scheme="signal"] .hero > .statement {
  color: #11100a !important;
}

body.is-dark[data-color-scheme="signal"] .hero > .statement {
  color: #fff8ae !important;
}

body[data-color-scheme="blush"] .manifest-photo,
body[data-color-scheme="blush"] .project-card-thumb {
  filter: grayscale(1) contrast(1.18) sepia(0.24) hue-rotate(300deg) saturate(1.4) !important;
}

body[data-color-scheme="butter"] .manifest-photo,
body[data-color-scheme="butter"] .project-card-thumb {
  filter: grayscale(1) contrast(1.18) sepia(0.18) hue-rotate(4deg) saturate(1.08) !important;
}

body[data-color-scheme="aqua"] .manifest-photo,
body[data-color-scheme="aqua"] .project-card-thumb {
  filter: grayscale(1) contrast(1.18) sepia(0.22) hue-rotate(120deg) saturate(1.5) !important;
}

body[data-color-scheme="signal"] .manifest-photo,
body[data-color-scheme="signal"] .project-card-thumb {
  filter: grayscale(1) contrast(1.28) sepia(0.36) hue-rotate(15deg) saturate(1.25) !important;
}

body[data-color-scheme="blush"] .project-card:hover::after,
body[data-color-scheme="blush"] .project-card:focus-visible::after {
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    rgba(255, 77, 128, 0.34) !important;
}

body[data-color-scheme="butter"] .project-card:hover::after,
body[data-color-scheme="butter"] .project-card:focus-visible::after {
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    rgba(247, 241, 206, 0.52) !important;
}

body[data-color-scheme="aqua"] .project-card:hover::after,
body[data-color-scheme="aqua"] .project-card:focus-visible::after {
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    rgba(0, 214, 134, 0.28) !important;
}

body[data-color-scheme="signal"] .project-card:hover::after,
body[data-color-scheme="signal"] .project-card:focus-visible::after {
  background:
    linear-gradient(90deg, var(--grid-medium) 1px, transparent 1px),
    linear-gradient(var(--grid-medium) 1px, transparent 1px),
    rgba(92, 61, 196, 0.25) !important;
}

/* Dark mode visibility fix */
body.is-dark .hero > .roles,
body.is-dark .hero > .roles[data-roles-color="black"],
body.is-dark .hero > .roles[data-roles-color="white"] {
  color: var(--ink) !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* keep editorial images uncropped */
.hero::before {
  background: var(--hero-image, url("assets/practice-photo.png")) center / contain no-repeat !important;
  background-size: contain !important;
}

.manifest-photo {
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* manifest image centered between section lines */
.manifest {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 72vh !important;
  padding: 0 clamp(18px, 3vw, 44px) !important;
}

@media (max-width: 900px) {
  .manifest {
    min-height: 58vh !important;
    padding: 0 18px !important;
  }
}

/* mobile hero image placement */
@media (max-width: 900px) {
  .hero {
    grid-template-rows: auto auto auto !important;
    align-content: end !important;
    row-gap: clamp(16px, 4vw, 26px) !important;
  }

  .hero::before {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: end !important;
    width: min(250px, 42vw) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 0 clamp(4px, 1.4vw, 12px) !important;
  }

  .hero > .roles {
    grid-row: 1 !important;
  }

  .hero > .statement {
    grid-row: 3 !important;
  }
}

/* final global hover color on the homepage */
.site-header a:hover,
.site-header a:focus-visible,
.site-header nav a:hover,
.site-header nav a:focus-visible,
.wordmark:hover,
.wordmark:focus-visible,
.contact a:hover,
.contact a:focus-visible,
.footer-note a:hover,
.footer-note a:focus-visible,
.instagram-link:hover,
.instagram-link:focus-visible {
  color: var(--red) !important;
}

.instagram-link:hover svg,
.instagram-link:focus-visible svg {
  stroke: var(--red) !important;
}

/* final mobile project grid: always two columns */
@media (max-width: 780px) {
  .project-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-top: 1px solid var(--line) !important;
  }

  .project-card,
  .project-card:has(.project-card-thumb) {
    min-width: 0 !important;
    min-height: clamp(168px, 48vw, 224px) !important;
    height: clamp(168px, 48vw, 224px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    align-content: space-between !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .project-card:nth-child(2n) {
    border-right: 0 !important;
  }

  .project-card:nth-child(3n) {
    border-right: 1px solid var(--line) !important;
  }

  .project-card:nth-child(6n),
  .project-card:nth-child(2n):nth-last-child(-n + 2) {
    border-right: 0 !important;
  }

  .project-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: start !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .project-card > strong,
  .project-card-feature > strong {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    justify-self: start !important;
    max-width: 100% !important;
    max-height: 3.4em !important;
    overflow: hidden !important;
    font-size: clamp(1.7rem, 8.8vw, 3.05rem) !important;
    line-height: 0.86 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .project-card-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 0.32 !important;
    object-fit: cover !important;
  }

  .project-card::before {
    display: none !important;
  }
}