@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
:root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #eae7ef;
  background: #080a10;
  font-synthesis: none;
  scroll-behavior: smooth;
  --bg: #080a10;
  --ink: #eae7ef;
  --muted: #a09da9;
  --accent: #a38be4;
  --line: rgba(202, 186, 228, 0.17);
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #080a10;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: #8d6bd1;
  color: white;
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.skip {
  position: absolute;
  top: -100px;
  left: 10px;
  background: white;
  color: black;
  padding: 12px;
  z-index: 200;
}
.skip:focus {
  top: 10px;
}
.wrap {
  width: min(1320px, calc(100% - 9vw));
  margin-inline: auto;
}
.eyebrow {
  font:
    700 10px/1.5 'Manrope',
    sans-serif;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: #a991de;
}
.eyebrow:before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: #a991de;
  vertical-align: middle;
  margin-right: 10px;
}
header.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.65), rgba(5, 7, 12, 0));
  height: 89px;
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  min-width: 0;
}
.brand-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #a78ada;
  transform: rotate(45deg);
  background: rgba(128, 86, 196, 0.07);
}
.brand-icon b {
  display: block;
  transform: rotate(-45deg);
  font:
    600 22px 'Cormorant Garamond',
    serif;
  color: #e8d7ff;
}
.brand-text strong {
  font:
    700 14px 'Manrope',
    sans-serif;
  letter-spacing: 0.12em;
  display: block;
}
.brand-text span {
  display: block;
  font:
    600 9px 'Manrope',
    sans-serif;
  letter-spacing: 0.22em;
  color: #b5acc6;
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 31px;
}
.nav-links a {
  font: 600 11px 'Manrope';
  letter-spacing: 0.07em;
  color: #c9c6d3;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: white;
}
.button {
  background: #b19aea;
  color: #11101b;
  border: 1px solid #b19aea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  padding: 0 24px;
  font: 800 11px 'Manrope';
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition:
    transform 0.2s,
    background 0.2s,
    border 0.2s;
  white-space: nowrap;
}
.button:hover {
  transform: translateY(-2px);
  background: #d6c7f2;
}
.button.outline {
  background: transparent;
  color: white;
  border-color: rgba(222, 210, 244, 0.4);
}
.button.outline:hover {
  background: rgba(175, 145, 234, 0.14);
  border-color: #b19aea;
}
.nav-cta {
  min-height: 40px;
  font-size: 10px;
  padding: 0 16px;
}
.menu-toggle {
  display: none;
  background: transparent;
  color: white;
  border: 1px solid var(--line);
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.hero {
  min-height: 780px;
  height: min(900px, 100svh);
  position: relative;
  display: flex;
  align-items: center;
  padding: 135px 0 74px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      ellipse at 76% 38%,
      rgba(91, 60, 135, 0.32),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 30% 90%,
      rgba(36, 55, 94, 0.25),
      transparent 38%
    ),
    #080a10;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 16, 0.98) 0%,
    rgba(8, 10, 16, 0.84) 40%,
    rgba(8, 10, 16, 0.09) 100%
  );
  z-index: 2;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(100% - 1px),
      #8376a9 calc(100% - 1px)
    ),
    linear-gradient(transparent calc(100% - 1px), #8376a9 calc(100% - 1px));
  background-size: 100px 100px;
  pointer-events: none;
}
.hero-art {
  position: absolute;
  inset: 0 0 0 40%;
  filter: saturate(0.84);
}
.hero-art > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  opacity: 0.72;
  mix-blend-mode: screen;
}
.hero-art > img:nth-child(2) {
  width: 100%;
  height: 100%;
  inset: 0;
  object-position: center;
  opacity: 0.67;
}
.hero-art .fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 60% 46%,
      rgba(153, 96, 214, 0.38),
      transparent 33%
    ),
    radial-gradient(
      ellipse at 50% 62%,
      rgba(40, 63, 113, 0.42),
      transparent 50%
    );
}
.hero-glyph {
  position: absolute;
  font:
    500 min(48vw, 670px)/1 'Cormorant Garamond',
    serif;
  color: rgba(179, 147, 229, 0.09);
  left: 55%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 4;
}
.hero-copy {
  max-width: 790px;
}
.hero .eyebrow {
  color: #c1add9;
}
.hero h1 {
  font:
    500 clamp(76px, 9.2vw, 149px)/0.85 'Cormorant Garamond',
    Georgia,
    serif;
  letter-spacing: -0.046em;
  margin: 26px 0 27px;
  text-transform: uppercase;
  text-shadow: 0 7px 40px #050407;
}
.hero h1 em {
  font-weight: 400;
  font-style: italic;
  color: #c0a6ed;
  display: block;
}
.hero-description {
  max-width: 460px;
  color: #d7d2dc;
  font-size: 15px;
  line-height: 1.8;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.hero-bottom {
  position: absolute;
  z-index: 5;
  bottom: 24px;
  left: 4.5vw;
  right: 4.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #b6aebf;
  font: 700 10px 'Manrope';
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroll:after {
  content: '';
  width: 40px;
  height: 1px;
  background: #aa99be;
}
.section {
  padding: 100px 0;
}
.section-top {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
}
.section-top h2,
.intro h2,
.services h2,
.contact h2 {
  font:
    500 clamp(42px, 5.2vw, 72px)/0.96 'Cormorant Garamond',
    Georgia,
    serif;
  letter-spacing: -0.021em;
  margin: 14px 0 0;
}
.section-top p {
  color: #aaa5b4;
  font-size: 13px;
  line-height: 1.7;
  max-width: 330px;
}
.portfolio {
  background: linear-gradient(180deg, #080a10, #0b0c14);
}
.filterbar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 0 27px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--line);
}
.filter {
  border: 1px solid transparent;
  color: #a7a3b3;
  background: transparent;
  padding: 11px 14px;
  font: 700 10px 'Manrope';
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.filter:hover {
  color: white;
}
.filter[aria-pressed='true'] {
  color: #ecdefe;
  background: #211b2d;
  border-color: #675380;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.project-card {
  border: 1px solid rgba(200, 178, 236, 0.15);
  background: #10111a;
  text-align: left;
  padding: 0;
  color: white;
  display: block;
  width: 100%;
  transition:
    border-color 0.25s,
    transform 0.25s;
  overflow: hidden;
}
.project-card:hover,
.project-card:focus-visible {
  border-color: #a58bdb;
  transform: translateY(-4px);
}
.project-card.feature {
  grid-column: span 2;
}
.project-card .visual {
  position: relative;
  height: 320px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(100, 65, 159, 0.4),
      transparent 40%
    ),
    linear-gradient(145deg, #111825, #1b1323 70%, #070a0e);
}
.project-card.feature .visual {
  height: 440px;
}
.project-card.wide {
  grid-column: span 2;
}
.project-card.wide .visual {
  height: 380px;
}
.project-card .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.project-card:hover img {
  transform: scale(1.045);
}
.project-card .visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(6, 7, 10, 0.6));
}
.visual .art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a18dcd;
  font:
    500 120px 'Cormorant Garamond',
    serif;
  opacity: 0.25;
}
.visual-label {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  padding: 9px 12px;
  background: rgba(7, 9, 15, 0.73);
  border: 1px solid rgba(238, 219, 255, 0.16);
  backdrop-filter: blur(10px);
  color: #d2c8df;
  font: 700 10px 'Manrope';
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.project-info {
  padding: 24px 24px 27px;
}
.project-info .type {
  font: 700 10px 'Manrope';
  letter-spacing: 0.16em;
  color: #ae9cce;
  text-transform: uppercase;
}
.project-info h3 {
  font:
    500 32px/1.05 'Cormorant Garamond',
    serif;
  margin: 10px 0;
}
.project-info p {
  font-size: 12.5px;
  line-height: 1.68;
  color: #a7a3b2;
  margin: 0;
  min-height: 42px;
}
.project-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font: 700 10px 'Manrope';
  letter-spacing: 0.12em;
  color: #c7b9e1;
  text-transform: uppercase;
}
.count {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font: 700 10px 'Manrope';
  color: #8a8695;
}
.intro {
  position: relative;
  background: #11111a;
  padding: 110px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.intro:after {
  content: 'LR';
  position: absolute;
  right: -1vw;
  top: -105px;
  font:
    500 450px 'Cormorant Garamond',
    serif;
  color: rgba(137, 106, 194, 0.07);
  pointer-events: none;
}
.intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
  align-items: center;
  position: relative;
  z-index: 1;
}
.intro h2 {
  font-size: clamp(48px, 6vw, 85px);
}
.intro h2 em,
.services h2 em,
.contact h2 em {
  color: #bba0e9;
  font-weight: 400;
}
.intro-text {
  max-width: 520px;
}
.intro-text p {
  color: #b5b0bf;
  line-height: 1.9;
  font-size: 15px;
}
.stats {
  display: flex;
  gap: 32px;
  border-top: 1px solid var(--line);
  margin-top: 35px;
  padding-top: 23px;
}
.stats strong {
  font:
    500 36px 'Cormorant Garamond',
    serif;
  display: block;
  color: #eadcf9;
}
.stats span {
  font: 600 10px 'Manrope';
  letter-spacing: 0.12em;
  color: #a9a1b4;
  text-transform: uppercase;
}
.services {
  background: #090b12;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.service {
  padding: 28px 22px 35px;
  border: 1px solid var(--line);
  min-height: 245px;
  background: linear-gradient(
    160deg,
    rgba(36, 31, 51, 0.62),
    rgba(11, 13, 20, 0.65)
  );
}
.service-no {
  font: 700 10px 'Manrope';
  letter-spacing: 0.19em;
  color: #a990cf;
}
.service-symbol {
  margin-top: 30px;
  font: 400 33px 'Cormorant Garamond';
  color: #a889d5;
}
.service h3 {
  font: 500 25px 'Cormorant Garamond';
  margin: 11px 0;
}
.service p {
  font-size: 12px;
  line-height: 1.8;
  color: #a9a5b3;
  margin: 0;
}
.process {
  padding: 90px 0;
  border-top: 1px solid var(--line);
  background: #0b0c14;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}
.step {
  border-top: 1px solid #5b476c;
  padding-top: 20px;
}
.step b {
  font: 600 42px 'Cormorant Garamond';
  color: #b7a0e1;
}
.step h3 {
  font: 500 27px 'Cormorant Garamond';
  margin: 8px 0;
}
.step p {
  font-size: 13px;
  color: #a5a1b0;
  line-height: 1.8;
}
.contact {
  position: relative;
  padding: 112px 0 90px;
  background:
    radial-gradient(
      ellipse at 65% 60%,
      rgba(90, 59, 130, 0.27),
      transparent 50%
    ),
    #10101b;
  border-top: 1px solid var(--line);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.contact p {
  font-size: 14px;
  line-height: 1.9;
  color: #b8b2c2;
  max-width: 490px;
}
.contact-form {
  background: rgba(7, 9, 15, 0.58);
  border: 1px solid var(--line);
  padding: 25px;
  display: grid;
  gap: 17px;
}
.contact-form label {
  display: block;
  font: 700 10px 'Manrope';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c5b7d3;
  margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #3b3448;
  outline: none;
  border-radius: 0;
  background: #14121d;
  color: #f7f0fa;
  min-height: 42px;
  padding: 11px 13px;
  font: 400 13px 'DM Sans';
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #a58bdb;
}
.contact-note {
  font-size: 11px !important;
  line-height: 1.6 !important;
  margin: 0;
  color: #aba4b5 !important;
}
footer {
  background: #08090f;
  border-top: 1px solid var(--line);
  padding: 25px 0;
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  color: #807b8d;
  font: 700 10px 'Manrope';
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
dialog {
  max-height: min(90vh, 1000px);
  width: min(960px, calc(100vw - 22px));
  max-width: none;
  padding: 0;
  border: 1px solid #715b95;
  background: #100f18;
  color: white;
  box-shadow: 0 25px 160px #000c;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: rgba(4, 5, 10, 0.88);
  backdrop-filter: blur(8px);
}
.modal-close {
  position: sticky;
  float: right;
  top: 12px;
  margin-right: 12px;
  z-index: 11;
  background: #262033;
  color: white;
  border: 1px solid #a58bdb;
  width: 40px;
  height: 40px;
}
.modal-cover {
  position: relative;
  height: clamp(250px, 38vw, 470px);
  background: radial-gradient(#2d2546, #0f1018);
}
.modal-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal-content {
  padding: 35px clamp(22px, 4vw, 58px) 50px;
}
.modal-content h2 {
  font: 500 clamp(43px, 6vw, 72px)/0.9 'Cormorant Garamond';
  margin: 14px 0 12px;
}
.modal-content p {
  color: #bfb9ca;
  line-height: 1.78;
  font-size: 14px;
}
.modal-intro {
  max-width: 760px;
}
.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 32px;
}
.modal-tags span {
  border: 1px solid #4c3e5e;
  color: #c6b6de;
  font: 700 10px 'Manrope';
  padding: 9px 12px;
  letter-spacing: 0.07em;
}
.modal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.modal-columns h3 {
  font: 700 10px 'Manrope';
  letter-spacing: 0.17em;
  color: #bb9eec;
  text-transform: uppercase;
}
.modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.modal-gallery figure {
  margin: 0;
  background: #161320;
  min-height: 150px;
  display: grid;
  place-items: center;
}
.modal-gallery img {
  width: 100%;
  max-height: 530px;
  object-fit: contain;
}
.modal-gallery figcaption {
  font: 600 10px 'Manrope';
  color: #b1a5c2;
  letter-spacing: 0.07em;
  padding: 8px;
}
.toast {
  position: fixed;
  z-index: 110;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: #bca4e8;
  color: #131021;
  padding: 15px 20px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 980px) {
  .nav-links {
    gap: 18px;
  }
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-card.feature {
    grid-column: span 2;
  }
  .project-card.wide {
    grid-column: span 2;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero h1 {
    font-size: clamp(75px, 12vw, 125px);
  }
  .intro-layout {
    gap: 7vw;
  }
}
@media (max-width: 700px) {
  .wrap {
    width: calc(100% - 36px);
  }
  header.site-header {
    height: 74px;
  }
  .brand-text strong {
    font-size: 12px;
  }
  .brand-text span {
    font-size: 7px;
  }
  .brand-icon {
    width: 30px;
    height: 30px;
  }
  .nav-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: #12101b;
    padding: 28px 20px;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-links a {
    font-size: 13px;
  }
  .hero {
    height: auto;
    min-height: 740px;
    padding: 145px 0 96px;
  }
  .hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(8, 10, 16, 0.93) 0%,
        rgba(8, 10, 16, 0.52) 100%
      ),
      linear-gradient(0deg, rgba(8, 10, 16, 0.8), transparent 60%);
  }
  .hero-art {
    inset: 15% -40% 0 15%;
    opacity: 0.65;
  }
  .hero h1 {
    font-size: clamp(68px, 14vw, 100px);
    line-height: 0.9;
  }
  .hero-description {
    font-size: 13px;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-bottom {
    left: 18px;
    right: 18px;
    font-size: 9px;
  }
  .section {
    padding: 65px 0;
  }
  .section-top {
    display: block;
    margin-bottom: 30px;
  }
  .section-top p {
    margin-top: 19px;
  }
  .filterbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .filter {
    flex: 0 0 auto;
  }
  .project-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .project-card.feature,
  .project-card.wide {
    grid-column: span 1;
  }
  .project-card .visual,
  .project-card.feature .visual,
  .project-card.wide .visual {
    height: 330px;
  }
  .project-info {
    padding: 20px;
  }
  .intro {
    padding: 78px 0;
  }
  .intro-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .intro:after {
    font-size: 200px;
    top: -50px;
    right: -30px;
  }
  .stats {
    gap: 22px;
  }
  .service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .service {
    padding: 19px 15px;
    min-height: 222px;
  }
  .service h3 {
    font-size: 22px;
  }
  .process {
    padding: 62px 0;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .step {
    padding-top: 11px;
  }
  .contact {
    padding: 76px 0;
  }
  .footer-row {
    flex-wrap: wrap;
  }
  .modal-columns {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .modal-gallery {
    grid-template-columns: 1fr;
  }
  .modal-content {
    padding: 28px 20px 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* Portfolio v0.2 — category navigation and curated project studies */
.filterbar{gap:8px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:24px}
.filter{display:flex;align-items:center;gap:12px;border:1px solid rgba(176,153,215,.22);padding:12px 16px;min-height:48px;background:rgba(22,20,32,.56);transition:background .2s,border-color .2s}
.filter small{font:700 10px 'Manrope',sans-serif;letter-spacing:.04em;color:#9185ac}
.filter[aria-pressed='true']{border-color:#9f88d2;background:#292139;color:#f7efff}
.filter[aria-pressed='true'] small{color:#cebbf5}
.modal-cover-compact{height:300px}
.modal-cover-compact img{object-position:center 35%}
.detail-intro{border-top:1px solid var(--line);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#c2addf;font:700 10px 'Manrope',sans-serif;letter-spacing:.17em}
.detail-intro span:last-child{color:#8f87a0;font-size:9px}
.detail-section{margin-top:33px}
.detail-section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:19px}
.detail-section-head h3{font:500 clamp(30px,3.4vw,43px)/1.05 'Cormorant Garamond',Georgia,serif;margin:8px 0 6px}
.detail-section-head p{max-width:700px;color:#a9a5b5;font-size:12px;line-height:1.7;margin:0}
.detail-counter{color:#8d849d;font:700 10px 'Manrope',sans-serif;white-space:nowrap;letter-spacing:.1em}
.process-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.extended-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compare-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.detail-image-card{background:#1a1722;border:1px solid rgba(202,186,228,.15);margin:0;overflow:hidden}
.detail-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(130deg,#221b2c,#11121b);height:270px;overflow:hidden;cursor:zoom-in}
.detail-image-wrap img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.detail-image-wrap:hover img{transform:scale(1.035)}
.image-zoom-label{position:absolute;bottom:10px;right:10px;opacity:0;background:rgba(8,7,14,.85);border:1px solid rgba(215,195,244,.5);font:700 10px 'Manrope';letter-spacing:.1em;padding:8px 11px;transition:opacity .2s}
.detail-image-wrap:hover .image-zoom-label,.detail-image-wrap:focus-visible .image-zoom-label{opacity:1}
.detail-image-card figcaption{padding:14px 15px 17px;display:flex;flex-direction:column;gap:5px}
.detail-image-card figcaption small{font:700 10px 'Manrope';letter-spacing:.16em;color:#9d8bbe}
.detail-image-card figcaption strong{font:600 17px 'Cormorant Garamond',serif;color:#f2eafa}
.detail-image-card figcaption span{color:#aaa3b4;font:400 11px/1.6 'DM Sans',sans-serif}
.process-gallery .detail-image-wrap{height:250px}
.process-gallery .detail-image-card{border-color:rgba(180,143,233,.28)}
.detail-footer-note{margin-top:34px!important;padding-top:15px;border-top:1px solid var(--line);font-size:11px!important;color:#8d859b!important}
@media(max-width:700px){
.filterbar{overflow-x:auto;flex-wrap:nowrap;margin-inline:-18px;padding-inline:18px}
.filter{flex:0 0 auto}
.modal-cover-compact{height:210px}
.detail-section-head{display:block}
.detail-counter{display:block;margin-top:8px}
.detail-intro{align-items:flex-start;flex-direction:column;gap:7px}
.process-gallery,.extended-gallery,.compare-gallery{grid-template-columns:1fr}
.detail-image-wrap,.process-gallery .detail-image-wrap{height:265px}
}


/* Creative Archive v0.3: expandable gallery, artwork modal, contact channels */
.portfolio-pagination{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:30px}
.portfolio-pagination .count{text-align:center}
.load-more{width:min(370px,100%)}
.load-more[hidden]{display:none!important}
.detail-image-wrap{border:0;width:100%;color:inherit;appearance:none;padding:0;text-align:inherit}
.detail-image-wrap:focus-visible{outline:2px solid #bca3ea;outline-offset:-3px}
.contact-links{display:grid;gap:12px;margin:30px 0 0;max-width:550px}
.contact-link{display:grid;gap:8px;background:rgba(39,29,54,.55);border:1px solid rgba(171,147,214,.35);padding:18px 20px;transition:border-color .2s,transform .2s}
.contact-link:hover{transform:translateY(-2px);border-color:#b99de8}
.contact-link>span{font:700 10px 'Manrope';letter-spacing:.15em;color:#bfa4e5}
.contact-link strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.contact-form-heading h3{font:500 33px 'Cormorant Garamond',serif;margin:12px 0 5px}
.contact-form-heading p{font-size:12px;margin:0}
.form-actions{display:grid;gap:10px}
.form-actions .button{width:100%;justify-content:space-between}
.artwork-dialog{width:min(1150px,calc(100vw - 26px));max-width:none;max-height:92svh;background:#100d18;color:#f6edf9;border:1px solid #755b9b;padding:0;overflow-x:hidden;overflow-y:auto}
.artwork-dialog::backdrop{background:rgba(4,4,9,.88);backdrop-filter:blur(12px)}
.artwork-close{position:sticky;top:12px;float:right;margin-right:12px;margin-bottom:-50px;z-index:15;background:rgba(31,22,44,.95);color:#faf4ff;border:1px solid #aa90d9;padding:13px;font:700 10px 'Manrope';letter-spacing:.12em}
.artwork-layout{clear:both;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:660px}
.artwork-visual{background:radial-gradient(ellipse at center,#292038,#10111a 70%);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);min-width:0}
.artwork-picture{display:flex;align-items:center;justify-content:center;min-height:550px;padding:52px 24px 24px}
.artwork-picture img{width:100%;max-height:65svh;height:auto;object-fit:contain;box-shadow:0 12px 36px #0006}
.artwork-image-footer{border-top:1px solid var(--line);padding:18px 23px;display:flex;justify-content:space-between;gap:20px;color:#b8a3d2;font:700 10px 'Manrope';letter-spacing:.12em}
.artwork-story{min-width:0;padding:64px clamp(22px,4vw,50px) 35px;display:flex;flex-direction:column}
.artwork-series{font:700 11px 'Manrope';letter-spacing:.08em;color:#9f93b1;margin:15px 0 0}
.artwork-story h2{font:500 clamp(42px,5vw,70px)/.94 'Cormorant Garamond',serif;letter-spacing:-.025em;margin:16px 0 12px}
.artwork-intro{color:#b8b0c4;font-size:13px;line-height:1.8;margin:0 0 20px}
.artwork-rule{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:700 10px 'Manrope';letter-spacing:.1em;color:#b798e2}
.artwork-rule strong{color:#f0e7f3;font-size:12px;letter-spacing:0}
.artwork-chapter{padding:17px 0 6px;border-bottom:1px solid rgba(202,186,228,.12)}
.artwork-chapter h3{font:700 10px 'Manrope';letter-spacing:.16em;color:#c09fea;margin:0 0 9px}
.artwork-chapter p{font-size:12.5px;line-height:1.85;color:#b9b2c4;margin:0 0 12px}
.artwork-navigation{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:24px;color:#bfa3e5;font:700 10px 'Manrope';letter-spacing:.08em}
.artwork-navigation button{border:1px solid #56426d;background:#241a34;color:#f3e8ff;padding:11px;cursor:pointer;font:700 10px 'Manrope';letter-spacing:.05em}
.artwork-navigation button:hover{background:#45325f}
@media(max-width:800px){.artwork-layout{grid-template-columns:1fr}.artwork-visual{border-right:0;border-bottom:1px solid var(--line)}.artwork-picture{min-height:230px;padding:55px 15px 16px}.artwork-picture img{max-height:45svh}.artwork-story{padding:32px 23px}.artwork-story h2{font-size:46px}}
@media(max-width:420px){.artwork-dialog{width:calc(100vw - 12px);max-height:95svh}.artwork-picture img{max-height:37svh}.artwork-story{padding:27px 16px}.artwork-navigation button{font-size:9px}.contact-link strong{font-size:12px}}

/* v0.4 · Identidad del creador y recursos alojados en el sitio */
.brand-icon{transform:none;display:block;width:56px;height:56px;border:none;background:none;flex-shrink:0}
.brand-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 6px rgba(178,117,227,.18))}
.hero-art{inset:0;filter:saturate(.8)}
.hero-art > img,.hero-art > img:nth-child(2){width:100%;height:100%;object-fit:cover;object-position:center;opacity:.92;mix-blend-mode:normal}
.hero-art .fallback{background:radial-gradient(ellipse at 74% 40%,rgba(91,42,78,.3),transparent 50%),#0d0b11}
.hero::before{background:linear-gradient(90deg,rgba(8,10,16,.98) 0%,rgba(8,10,16,.90) 22%,rgba(8,10,16,.64) 47%,rgba(8,10,16,.05) 83%),linear-gradient(0deg,rgba(8,10,16,.38),transparent 30%)}
.hero h1{font-size:clamp(70px,8.4vw,134px)}
.hero-copy{max-width:840px}
.project-card .visual{isolation:isolate}
.project-card .visual img{position:relative;z-index:1}
.project-card .visual-label{z-index:2}
@media(max-width:700px){
 .brand-icon{width:45px;height:45px}
 .hero-art > img,.hero-art > img:nth-child(2){object-position:72% center;opacity:.76}
 .hero::before{background:linear-gradient(90deg,rgba(8,10,16,.93) 0%,rgba(8,10,16,.78) 50%,rgba(8,10,16,.4) 100%),linear-gradient(0deg,rgba(8,10,16,.7),transparent 80%)}
 .hero h1{font-size:clamp(64px,13vw,95px)}
}