/* Editorial portfolio refresh: precise contrast, real work, a restrained lace edge. */
:root,
html[data-theme="light"] {
  --editor-paper: #e9ebed;
  --editor-paper-deep: #d8dcdf;
  --editor-ink: #15191d;
  --editor-secondary: #556068;
  --editor-wine: #71283f;
  --editor-rule: rgba(24, 32, 38, .18);
}

html[data-theme="dark"] {
  --editor-paper: #18191d;
  --editor-paper-deep: #25262d;
  --editor-ink: #eef0f1;
  --editor-secondary: #afb5bd;
  --editor-wine: #cd8199;
  --editor-rule: rgba(234, 239, 242, .17);
}

html[data-theme="light"] {
  --bg: #e9ebed;
  --surface: #f4f5f5;
  --surface-2: #dce0e2;
  --surface-light: #dfe2e4;
  --surface-light-elevated: #f4f5f5;
  --text-on-light: #15191d;
  --text-on-light-muted: #556068;
  --text: #15191d;
  --text-muted: #556068;
  --text-dim: #687078;
  --overlay: rgba(233, 235, 237, .94);
  --overlay-strong: rgba(233, 235, 237, .98);
}
html[data-theme="dark"] {
  --bg: #15161a;
  --surface: #222329;
  --surface-2: #2b2c32;
  --surface-light: #1d1e23;
  --surface-light-elevated: #292a30;
  --text-on-light: #eef0f1;
  --text-on-light-muted: #afb5bd;
  --text: #eef0f1;
  --text-muted: #afb5bd;
}
body { background: var(--editor-paper); background-image: none; }
nav { background: rgba(18, 16, 18, .96); border-bottom: 1px solid rgba(244,237,226,.12); }
html[data-theme="light"] nav { background: rgba(18, 16, 18, .96); }
nav .nav-logo, nav .nav-links a.active, nav .nav-links a:hover, nav .nav-contact { color: #f5eee4; }
nav .nav-links a { color: #c5b9b9; }
nav .nav-contact { border-color: rgba(245,238,228,.27); }

/* The light theme uses two solid editorial fields. The dark theme reverses the paper. */
.signature-hero {
  min-height: min(930px, calc(100svh - 70px));
  padding: clamp(96px, 8vw, 142px) 5.5% 0;
  grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
  gap: clamp(36px, 4vw, 74px);
  background: linear-gradient(90deg, #e9ebed 0 49.5%, #15161b 49.5% 100%);
  color: var(--editor-ink);
}
html[data-theme="dark"] .signature-hero {
  background: linear-gradient(90deg, #25262d 0 49.5%, #0c0d11 49.5% 100%);
}
.signature-hero::before, .signature-hero::after,
.stage-grid, .stage-orbit, .system-signal-card { display: none; }
.signature-hero::before {
  display: block;
  position: absolute;
  inset: 0 50.5% 0 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: .075;
  background: url("assets/lace-wallpaper.svg") repeat 0 0 / 200px 255px;
  mask-image: linear-gradient(90deg, transparent 34%, #000 100%);
  pointer-events: none;
}
html[data-theme="dark"] .signature-hero::before { opacity: .04; }
.signature-rail { color: var(--editor-secondary); letter-spacing: .16em; }
.signature-rail span:last-child { color: #d0bfc2; }
.signature-copy { position: relative; z-index: 4; padding: 0 0 32px; }
.signature-kicker { color: var(--editor-wine); letter-spacing: .15em; }
.signature-copy h1 {
  margin-top: clamp(22px, 4vw, 52px);
  font-size: clamp(5.3rem, 8.4vw, 10.8rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 700;
}
.signature-copy h1 span, .signature-copy h1 strong,
html[data-theme="light"] .signature-copy h1 span,
html[data-theme="light"] .signature-copy h1 strong { color: var(--editor-ink); }
.signature-copy h1 strong { letter-spacing: -.095em; }
.signature-copy h1 em,
html[data-theme="light"] .signature-copy h1 em {
  margin: .18em 0 0 .08em;
  color: var(--editor-wine);
  font-size: .5em;
  letter-spacing: -.075em;
}
.signature-intro, html[data-theme="light"] .signature-intro {
  max-width: 46ch;
  margin-top: 32px;
  color: var(--editor-secondary);
  font-size: clamp(.92rem, 1.05vw, 1.05rem);
  line-height: 1.65;
}
.signature-hero .hero-actions { margin-top: 28px; }
.signature-hero .btn-primary { border-radius: 2px; background: #79263e; }
.signature-hero .btn-outline, html[data-theme="light"] .signature-hero .btn-outline {
  border-radius: 2px;
  border-color: var(--editor-rule);
  color: var(--editor-ink);
}

.system-stage {
  width: 100%;
  aspect-ratio: 1.05;
  min-height: 580px;
  margin: 0;
  isolation: isolate;
  background: #101116;
  border: 1px solid rgba(247,237,223,.17);
  box-shadow: 0 32px 76px rgba(19,10,14,.22);
}
.system-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58px;
  z-index: 1;
  opacity: .34;
  background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px;
  pointer-events: none;
}
.system-stage::after {
  content: "FEATURED WORK / 01";
  position: absolute;
  right: 5%;
  top: 9%;
  color: rgba(245,237,226,.62);
  font: 600 .59rem/1 'DM Sans', sans-serif;
  letter-spacing: .22em;
}
.system-window {
  border-radius: 3px;
  border-color: rgba(247,237,223,.24);
  box-shadow: 0 24px 55px rgba(0,0,0,.38);
}
.system-window-main {
  left: -6%;
  top: 17%;
  width: 92%;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(-2deg);
}
.system-window-side {
  width: 29%;
  right: -3%;
  bottom: 9%;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(2deg);
}
.system-window-main .window-media { aspect-ratio: 1.68; }
.system-window-main .window-media img { object-position: top; }
.window-status { background: #171417; }
.stage-caption {
  left: 5%;
  bottom: 3%;
  max-width: 63%;
  border-left: 2px solid #a54b66;
  background: none;
  box-shadow: none;
}
.stage-caption strong { color: #eef0f1; }
.signature-flow {
  grid-column: 1 / -1;
  margin: clamp(34px, 4.5vw, 68px) -6.2% 0;
  padding: 20px 6.2%;
  background: #17191e;
  color: #e1e4e6;
  border-top: 1px solid rgba(244,237,226,.19);
  border-bottom: 1px solid rgba(244,237,226,.19);
}
html[data-theme="light"] .signature-flow { color: #e1e4e6; border-color: rgba(234,239,242,.19); }
.signature-flow i { color: #b6627a; }

.story-strip, .work-console, .profile-layout, .project-gallery-shell {
  background: var(--editor-paper);
  color: var(--editor-ink);
}
.story-strip { border-color: var(--editor-rule); }
.story-strip p { color: var(--editor-secondary); }
.story-strip p + p { border-color: var(--editor-rule); }
.work-console { padding-top: clamp(86px, 10vw, 150px); }
.console-heading h2, .project-gallery-heading h2 {
  color: var(--editor-ink);
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 650;
  letter-spacing: -.085em;
}
.console-heading h2 em { color: var(--editor-wine); font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; }
.console-shell { border-radius: 3px; box-shadow: 0 30px 74px rgba(18,11,15,.15); }
.console-browser, .gyne-desktop, .gyne-phone { border-radius: 3px; }
.closing-signal { background: #301821; }
.closing-signal::before { opacity: .28; background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px; }

/* About remains personal, with the portrait in its sticky column. */
.about-compact-hero {
  min-height: 67vh;
  background: linear-gradient(90deg, var(--editor-paper) 0 70%, #17171d 70% 100%);
}
html[data-theme="dark"] .about-compact-hero { background: linear-gradient(90deg, #25262d 0 70%, #0c0d11 70% 100%); }
.about-compact-hero::after {
  width: 30%;
  height: 58px;
  aspect-ratio: auto;
  right: 0;
  top: 0;
  border: 0;
  border-radius: 0;
  opacity: .35;
  background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px;
}
.about-hero-copy h1, .projects-hero-copy h1 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 650;
  letter-spacing: -.085em;
  line-height: .96;
}
.about-hero-copy h1 { color: var(--editor-ink); }
.about-hero-copy h1 em { font-family: 'Libre Baskerville', Georgia, serif; font-size: .76em; color: var(--editor-wine); }
.about-hero-copy > p { color: var(--editor-secondary); }
.about-hero-mark { background: #261920; border: 1px solid rgba(234,239,242,.2); border-radius: 2px; }
.about-hero-mark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58px;
  opacity: .42;
  background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px;
}
.about-hero-mark > span,
html[data-theme="light"] .about-hero-mark > span {
  color: #eef0f1;
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(5.8rem, 9vw, 9rem);
  font-weight: 650;
  letter-spacing: -.11em;
}
.about-hero-mark > div { color: #bec2c9; }
.profile-photo { box-shadow: 16px 16px 0 #752339; }
.profile-section { border-color: var(--editor-rule); }
.international-note::after { display: none; }

/* Work archive: a dark editorial opener and varied visual cards. */
.projects-gallery-hero {
  min-height: 71vh;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 26%);
  background: #17181d;
  color: #eef0f1;
}
.projects-gallery-hero::after { display: none; }
.projects-hero-copy h1 { color: #eef0f1; font-size: clamp(4.6rem, 8vw, 9rem); }
.projects-hero-copy h1 em { color: #c97990; font-family: 'Libre Baskerville', Georgia, serif; font-size: .78em; }
.projects-hero-copy > p { color: #bac0c7; }
.projects-hero-aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 0 24px 30px;
  max-width: none;
  border-left: 1px solid rgba(244,237,226,.16);
  background: linear-gradient(180deg, rgba(122,31,54,.34), transparent 42%);
}
.projects-hero-aside::before {
  content: "";
  height: 58px;
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  opacity: .36;
  background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px;
}
.projects-hero-aside strong { color: #eef0f1; font-size: clamp(4rem, 7vw, 7rem); letter-spacing: -.095em; }
.project-gallery-heading h2 { color: var(--editor-ink); }
.project-gallery-heading > p, .project-tier-heading p { color: var(--editor-secondary); }
.project-tier-heading-featured {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--editor-wine);
  border-bottom: 1px solid var(--editor-rule);
  padding: 22px 0;
}
.project-tier-heading span { color: var(--editor-wine); }
.project-card-gallery { gap: clamp(10px, 1.4vw, 20px); }
.project-select-card { border-radius: 3px; box-shadow: 0 16px 34px rgba(18,11,15,.14); }
.project-select-card-featured { min-height: clamp(440px, 43vw, 610px); }
.project-select-card-featured-third { min-height: clamp(400px, 39vw, 520px); }
.project-select-card-featured .project-card-overlay { padding: clamp(25px, 4vw, 56px); }
.project-select-card-featured .project-card-overlay h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(3.4rem, 6vw, 7rem);
  font-weight: 700;
  letter-spacing: -.075em;
}
.project-card-image img { filter: saturate(.82) contrast(1.04) brightness(.85); }
.project-card-overlay { background: linear-gradient(180deg, rgba(12,9,11,.02) 18%, rgba(12,9,11,.3) 38%, rgba(12,9,11,.9) 62%, #0c090b 100%); }
.project-select-card:hover .project-card-media { transform: scale(1.035); }
.project-section-header h2 { letter-spacing: -.065em; }

/* A translucent lace field gives the light archive texture while the cards stay clean. */
.project-gallery-shell, .profile-layout { position: relative; isolation: isolate; }
.project-gallery-shell::before, .profile-layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(42vw, 610px);
  height: min(740px, 80vw);
  opacity: .045;
  background: url("assets/lace-wallpaper.svg") repeat 0 0 / 200px 255px;
  mask-image: linear-gradient(270deg, #000 0%, transparent 85%);
  pointer-events: none;
}
html[data-theme="dark"] .project-gallery-shell::before,
html[data-theme="dark"] .profile-layout::before { opacity: .025; }
.project-gallery-shell::before { top: 0; }
.profile-layout::before { top: 5%; }
.international-note { background: rgba(113,40,63,.055); }
.project-details { border-radius: 4px; }

html[data-theme="light"] .contact-section,
html[data-theme="light"] footer { background: #17181d; color: #eef0f1; }
html[data-theme="light"] .contact-card { background: #222127; }
html[data-theme="light"] .theme-toggle { background: #e9ebed; color: #15191d; }

@media (max-width: 1100px) {
  .signature-hero { grid-template-columns: 1fr; min-height: auto; background: var(--editor-paper); }
  html[data-theme="dark"] .signature-hero { background: #242024; }
  .signature-copy { max-width: 760px; }
  .system-stage { width: min(850px, 100%); min-height: 0; margin: 0 auto; aspect-ratio: 1.34; }
  .signature-flow { margin-top: 26px; }
  .about-compact-hero { grid-template-columns: 1fr 25%; }
}

@media (max-width: 720px) {
  .signature-hero { padding: 93px 5% 0; gap: 24px; }
  .signature-rail { display: none; }
  .signature-copy h1 { font-size: clamp(4.2rem, 14vw, 6.4rem); }
  .signature-copy h1 em { white-space: normal; }
  .system-stage { aspect-ratio: 1.15; }
  .system-window-main { left: -2%; width: 90%; }
  .system-window-side { width: 31%; right: -2%; bottom: 13%; }
  .stage-caption { font-size: .7rem; max-width: 66%; }
  .signature-flow { margin: 20px -5.5% 0; padding: 18px 5.5%; }
  .about-compact-hero { min-height: 62vh; grid-template-columns: 1fr; background: var(--editor-paper); }
  html[data-theme="dark"] .about-compact-hero { background: #242024; }
  .about-compact-hero::after { width: 100%; opacity: .18; }
  .about-hero-mark { display: none; }
  .projects-gallery-hero { min-height: 64vh; grid-template-columns: 1fr; padding: 125px 6% 74px; }
  .projects-hero-copy h1 { font-size: clamp(3.7rem, 12vw, 6rem); }
  .projects-hero-aside { display: none; }
  .project-card-gallery { gap: 14px; }
  .project-select-card-featured, .project-select-card-featured-third { min-height: 400px; }
  .project-select-card-featured .project-card-overlay h3 { font-size: clamp(2.6rem, 9vw, 4.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .project-select-card:hover .project-card-media { transform: none; }
}

/* Keep featured-project titles inside their narrow desktop column. */
.console-copy { min-width: 0; }
.console-copy h3 { font-size: clamp(1.5rem, 2.2vw, 2.4rem); overflow-wrap: anywhere; }

/* ========================================
   NAVIGATION: larger, brighter links and a clear call to action
======================================== */
nav .nav-logo { font-size: 1.5rem; letter-spacing: -.04em; }
nav .nav-logo span { color: #c97990; }
nav .nav-links { gap: clamp(28px, 3.2vw, 48px); }
nav .nav-links a {
  padding: 6px 0;
  color: #d8cfcf;
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: .01em;
}
nav .nav-links a::after {
  bottom: -2px;
  height: 2px;
  background: #c97990;
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
nav .nav-links a:hover, nav .nav-links a.active { color: #fff; }
nav .nav-contact,
html[data-theme="light"] nav .nav-contact {
  padding: 11px 24px;
  border: 1px solid #8f2b46;
  border-radius: 2px;
  background: #79263e;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(143, 43, 70, .75);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
nav .nav-contact:hover {
  background: #8f2b46;
  border-color: #a8385a;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(168, 56, 90, .85);
}

@media (max-width: 700px) {
  nav .nav-logo { font-size: 1.15rem; }
  nav .nav-links { gap: 14px; }
  nav .nav-links a { font-size: .82rem; }
}

/* ========================================
   CASE STUDIES: a dark editorial opener, then the site's own paper
======================================== */
.project-sections .project-section,
html[data-theme="light"] .project-sections .project-section {
  --cs-surface: #f4f5f5;
  --cs-shadow: rgba(18, 11, 15, .16);
  padding-top: 0;
  background: var(--editor-paper) !important;
  color: var(--editor-ink);
}
html[data-theme="dark"] .project-sections .project-section {
  --cs-surface: #222329;
  --cs-shadow: rgba(0, 0, 0, .45);
}

/* The opener spans the full width, like the archive hero above it. */
.project-sections .project-section-header {
  padding: clamp(150px, 13vw, 200px) 0 clamp(46px, 5vw, 70px);
  margin-bottom: clamp(56px, 7vw, 96px);
  border-bottom: 0;
  color: #eef0f1;
  border-image: linear-gradient(112deg, #121317 0%, #19181d 40%, #2e1520 64%, #521b2d 86%, #6c2239 100%) fill 0 / / 0 100vw;
}
html[data-theme="dark"] .project-sections .project-section-header {
  border-image: linear-gradient(112deg, #0b0c0f 0%, #121116 40%, #27111b 64%, #461726 86%, #5e1d32 100%) fill 0 / / 0 100vw;
}
.project-sections .project-section-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  width: min(32vw, 420px);
  height: 58px;
  opacity: .36;
  background: url("assets/lace-edge.svg") repeat-x left top / 160px 58px;
  pointer-events: none;
}
.project-sections .project-section::before { z-index: 3; top: 92px; color: rgba(238, 240, 241, .045); }

.project-sections .project-back {
  position: absolute;
  z-index: 4;
  top: clamp(96px, 8.5vw, 128px);
  left: max(6%, calc((100% - 1380px) / 2));
  margin: 0;
  border-color: rgba(244, 237, 226, .22);
  border-radius: 2px;
  color: #c9cdd2;
  background: rgba(255, 255, 255, .03);
}
.project-sections .project-back:hover { color: #fff; border-color: #c97990; }
.project-sections .project-back span { color: #c97990; }

.project-sections .project-section-header h2 {
  margin: 30px 0 28px;
  color: #eef0f1;
  font-size: clamp(3.4rem, 7.2vw, 8rem);
  letter-spacing: -.075em;
}
.project-sections .project-section-header h2 em {
  display: block;
  margin: .26em 0 0 .04em;
  color: #c97990;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: .4em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.project-sections .project-section-summary { color: #bac0c7; font-size: 1rem; line-height: 1.75; }
.project-sections .project-section-summary code { color: #f0c5d1; background: rgba(201, 121, 144, .14); }

.project-sections .project-section-header .chip {
  border-color: rgba(244, 237, 226, .18);
  border-radius: 2px;
  color: #c9cdd2;
  background: rgba(255, 255, 255, .035);
}
.project-sections .project-section-header .chip.highlight {
  border-color: rgba(201, 121, 144, .5);
  color: #f3cfda;
  background: rgba(201, 121, 144, .16);
}
.project-sections .project-section-header .project-meta-row,
.project-sections .project-section-header .meta-block { border-color: rgba(244, 237, 226, .14); }
.project-sections .project-section-header .meta-block label { color: #8f959d; }
.project-sections .project-section-header .meta-block span { color: #eef0f1; }
.project-sections .project-section-header .meta-block a { color: #e7a9bb; text-underline-offset: 4px; }
.project-sections .project-section-header .meta-block a:hover { color: #fff; }

/* Body copy and side cards follow the active theme. */
.project-sections .project-grid { color: var(--editor-ink); }
.project-sections .project-text h3 { color: var(--editor-ink); }
.project-sections .project-text h3::before { background: var(--editor-wine); }
.project-sections .project-text p,
.project-sections .project-text li { color: var(--editor-secondary); }
.project-sections .project-text strong { color: var(--editor-ink); }
.project-sections .project-text code { color: var(--editor-wine); background: rgba(122, 31, 54, .09); }
html[data-theme="dark"] .project-sections .project-text code { background: rgba(205, 129, 153, .12); }

.project-sections .meta-card {
  border: 1px solid var(--editor-rule);
  border-top: 2px solid var(--editor-wine);
  border-radius: 3px;
  background: var(--cs-surface);
  color: var(--editor-ink);
  box-shadow: 0 24px 50px -38px var(--cs-shadow);
}
.project-sections .meta-card h4,
.project-sections .meta-list li { color: var(--editor-ink); }
.project-sections .meta-list li { border-color: var(--editor-rule); }
.project-sections .pill.hard {
  border-color: color-mix(in srgb, var(--editor-wine) 32%, transparent);
  border-radius: 2px;
  color: var(--editor-wine);
  background: color-mix(in srgb, var(--editor-wine) 8%, transparent);
}

.project-sections .project-details {
  border: 1px solid var(--editor-rule);
  border-left: 2px solid var(--editor-wine);
  border-radius: 3px;
  background: var(--cs-surface);
}
.project-sections .project-details summary { color: var(--editor-ink); }
.project-sections .project-details summary::after { color: var(--editor-wine); }
.project-sections .project-details[open] summary { border-color: var(--editor-rule); }

.project-sections .gallery-item {
  border: 1px solid var(--editor-rule);
  border-radius: 3px;
  box-shadow: 0 26px 56px -40px var(--cs-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
.project-sections .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 32px 64px -38px var(--cs-shadow); }
.project-sections .project-gallery { scrollbar-color: var(--editor-wine) transparent; }

/* Case covers and their windows take the site's sharp editorial corners. */
.project-sections .case-cover { border-radius: 4px; }
.project-sections .case-cover-window,
.project-sections .case-gyne-desktop { border-radius: 3px; }

@media (max-width: 720px) {
  .project-sections .project-section-header { padding-top: 140px; }
  .project-sections .project-back { top: 88px; left: 6%; }
  .project-sections .project-section-header h2 { font-size: clamp(2.7rem, 12vw, 4.2rem); }
  .project-sections .project-section-header h2 em { font-size: .5em; }
}
@media (prefers-reduced-motion: reduce) {
  .project-sections .gallery-item:hover { transform: none; }
}