:root {
  --paper: #f5f7fa;
  --ink: #18222d;
  --muted: #586675;
  --line: #23374c24;
}

body { background: var(--paper); }
.scene-wash, .grain { display: none; }
.hero { isolation: isolate; overflow: clip; min-height: calc(100svh - 48px); padding-top: 142px; }
#liquid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.figure-fallback { display: none; position: absolute; width: 43.5%; top: 34%; left: 53%; filter: brightness(.25); }
.scene-fallback .figure-fallback { display: block; }
.hero-editorial { margin-top: 76px; max-width: 52%; }
.hero h1 { font-size: 76px; line-height: 1.15; letter-spacing: 0; max-width: none; }
.hero h1 .title-line:first-child { font-family: Syncopate, sans-serif; font-size: 56px; font-weight: 400; text-transform: uppercase; line-height: 1.28; margin-bottom: 9px; }
.hero h1 .title-line:nth-child(2) { font-size: 1em; }
.hero h1 em { font-size: 1.04em; letter-spacing: 0; margin-inline-end: .1em; }
.title-line { padding-block: 9px; margin-block: -9px; padding-right: 0; }
.hero-aside { position: static; font-size: 14px; line-height: 1.65; letter-spacing: 0; margin-top: 24px; color: #5d6975; }
.sculpture-caption { top: auto; bottom: 26%; right: 8%; color: #697788; gap: 12px; font-size: 9px; letter-spacing: 0; }
.sculpture-caption small { display: none; }
.hero-bottom { margin-top: 52px; }
.hero-intro > .micro { font-size: 10px; letter-spacing: 0; }
.hero-intro > p { font-size: 14px; line-height: 1.7; letter-spacing: 0; }
.hero-baseline { padding-top: 34px; padding-bottom: 24px; }
.hero-baseline > .micro, .scroll-cue { font-size: 9px; letter-spacing: 0; }
.hero-top > .micro { font-size: 9px; letter-spacing: 0; }
.liquid-play { min-width: 220px; padding: 18px 23px; gap: 15px; box-shadow: inset 0 1px 0 #fff, 0 8px 24px #283b4e0b; }
.liquid-play small { display: none; }
.liquid-play > span:nth-child(2) { font-size: 14px; letter-spacing: 0; }
.text-link { font-size: 13px; }
.glass { background: #ffffff87; border-color: #ffffffd9; backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); }
.header-nav a { font-size: 12px; }
.header-nav a:last-child { background: #18222d; }
.intro { background: var(--paper); padding-top: 24px; padding-bottom: 110px; }
.reading-text { font-size: 58px; line-height: 1.25; letter-spacing: 0; max-width: 1160px; }
.reading-text em { font-size: 1.04em; }
.intro-bottom > p { font-size: 14px; line-height: 1.8; letter-spacing: 0; }
.intro-bottom > .micro { font-size: 10px; letter-spacing: 0; }
.collection { background: #171c23; }
.gallery-stage { background: #171c23; transition: background-color .9s; }
.gallery-stage[data-active="ikame"] { background-color: #1c2027; }
.gallery-stage[data-active="vaxtroy"] { background-color: #211e29; }
.gallery-stage[data-active="denk"] { background-color: #17232d; }
.gallery-stage[data-active="saol"] { background-color: #1b2528; }
.gallery-heading h2, .gallery-heading h2 em, .case h4, .case h4 em { letter-spacing: 0; }
.gallery-heading .micro, .case-kicker { font-size: 10px; letter-spacing: 0; }
.gallery-heading > p, .case-copy > p { font-size: 13px; line-height: 1.75; }
.case { border-color: #ffffff26; background: #ffffff03; }
.case h4 { font-size: 33px; line-height: 1.25; }
.case-tags li { font-size: 10px; border-radius: 4px; letter-spacing: 0; }
.case-more { font-size: 13px; }
.case-visual-label { font-size: 9px; letter-spacing: 0; }
.case-denk .case-visual-label { background: #18222dcc; color: #fff; border-color: #ffffff45; }
.gallery-bottom .micro { font-size: 9px; letter-spacing: 0; }
.case-ikame .case-photo { width: 240%; max-width: none; object-fit: cover; object-position: left center; }
.detail-art[data-product="ikame"] > img { width: 240%; max-width: none; object-fit: cover; object-position: left center; }
.navigation-dialog { background: #1b222cfa; }
.product-dialog { background: #1c242e; color: #edf1f7; }
.navigation-dialog nav a { letter-spacing: 0; }
.case h4 em { color: #c1cbd8; }
.detail-content > .micro { font-size: 9px; letter-spacing: 0; color: #a1afbd; }
.detail-content li { color: #c0cad5; }
.detail-content #dialog-note { color: #9ca9b8; }
.detail-art > .micro { font-size: 9px; letter-spacing: 0; background: #182331b3; }
.detail-content #dialog-intro { letter-spacing: 0; }
.detail-content li { font-size: 13px; }
.detail-content #dialog-note { font-size: 11px; }
.case-visual.product-stage {
  --orbit-line: #c9ccd65c;
  --float-duration: 8s;
  display: grid; place-items: center; background: #15171d;
}
.case-ikame .product-stage { --orbit-line: #a9bcb061; --float-duration: 9s; background: #141c1b; }
.case-denk .product-stage { --orbit-line: #32c5ed70; --float-duration: 7s; background: #101c24; }
.case-saol .product-stage { --orbit-line: #4ada9b66; --float-duration: 8.5s; background: #10201c; }
.product-stage .brand-orbits { pointer-events: none; }
.product-stage .brand-orbits span { border-color: var(--orbit-line); box-shadow: none; }
.product-stage .brand-orbits span:nth-child(2) { animation-delay: -6s; }
.product-stage .brand-orbits span:nth-child(3) { animation-delay: -12s; }
.case-denk .brand-orbits span:nth-child(2) { border-color: #c865f56b; }
.product-stage .product-art {
  position: relative; z-index: 1; width: 76%; height: auto; max-height: 58%;
  object-fit: contain; pointer-events: none;
  animation: product-float var(--float-duration) ease-in-out infinite;
}
.case-vaxtroy .product-stage { place-content: stretch; }
.product-stage .vaxtroy-lockup { display: block; max-height: none; container-type: inline-size; }
.vaxtroy-lockup-image {
  display: block; width: 100%; height: auto;
  /* Keep the original emblem and wordmark; replace only the tiny embedded slogan. */
  clip-path: polygon(0 0, 100% 0, 100% 61%, 37% 61%, 37% 100%, 0 100%);
}
.vaxtroy-tagline {
  position: absolute; top: 64%; left: 36%; right: 1%;
  font-family: Syncopate, sans-serif; font-size: clamp(11px, 4.3cqw, 24px);
  font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-align: center;
  white-space: nowrap; color: #dce4ec; text-shadow: 0 1px 2px #0009;
}
.product-stage:not([data-visual-motion="active"]) .product-art,
.product-stage:not([data-visual-motion="active"]) .brand-orbits span { animation-play-state: paused; }
@keyframes product-float {
  0%, 100% { transform: translate3d(0, 5px, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(.35deg); }
}
.philosophy h2, .philosophy h2 em, .principles-intro, .contact h2, .contact h2 em, .contact-link { letter-spacing: 0; }
.principles details p { font-size: 14px; line-height: 1.8; color: #5b6874; }
.philosophy-top > .micro { font-size: 10px; letter-spacing: 0; }
.contact { background: #e9eff5; }
.contact::before { display: none; }
.contact-top > .micro { font-size: 10px; letter-spacing: 0; }
.site-footer > span { font-size: 11px; }
.founder-note { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 48px; background: #111a21; color: #e4edf6; }
.founder-note .micro { font-size: 9px; color: #84b9c4; }
.founder-note h2 { font-size: 32px; font-weight: 500; margin-block: 12px; letter-spacing: 0; }
.founder-note h2 a { display: inline-flex; gap: 28px; align-items: center; }
.founder-note h2 a span { color: #57d0e3; font-size: 25px; }
.founder-note .founder-role { font-size: 12px; color: #a9bacb; }
.founder-note > p { align-self: center; max-width: 490px; font-size: 14px; line-height: 1.8; color: #bccbd9; }
@media (max-width: 760px) { .founder-note { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; } .founder-note h2 { font-size: 27px; } }
.cursor { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor span { font-size: 9px; letter-spacing: 0; }

@media (max-height: 800px) and (min-width: 761px) {
  .hero { padding-top: 130px; }
  .hero-editorial { margin-top: 50px; }
  .hero h1 { font-size: 68px; }
  .hero h1 .title-line:first-child { font-size: 50px; }
  .hero-aside { margin-top: 18px; }
  .hero-bottom { margin-top: 32px; }
  .hero-baseline { padding-top: 24px; padding-bottom: 18px; }
}

@media (min-width: 1600px) {
  .hero { padding-top: 160px; }
  .hero-editorial { margin-top: 100px; }
  .hero h1 { font-size: 96px; }
  .hero h1 .title-line:first-child { font-size: 68px; }
  .hero-bottom { margin-top: 72px; }
  .case h4 { font-size: 42px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-editorial { max-width: 53%; margin-top: 90px; }
  .hero h1 { font-size: 60px; }
  .hero h1 .title-line:first-child { font-size: 43px; }
  .hero-aside { font-size: 13px; }
  .sculpture-caption { display: none; }
  .reading-text { font-size: 47px; }
  .case h4 { font-size: 28px; }
  .case-copy > p { font-size: 12px; }
}

@media (max-width: 760px) {
  .hero { min-height: max(680px, calc(100svh - 72px)); padding-top: 116px; }
  .hero-top > .micro { font-size: 8px; }
  .hero-editorial { max-width: 100%; margin-top: 202px; }
  .hero h1 { font-size: 53px; line-height: 1.17; }
  .hero h1 .title-line:first-child { font-size: 36px; margin-bottom: 6px; }
  .hero-aside { display: none; }
  .hero-bottom { margin-top: 32px; gap: 20px; }
  .hero-intro > .micro { font-size: 9px; }
  .hero-intro > p { font-size: 13px; }
  .hero-baseline { padding-top: 28px; padding-bottom: 21px; }
  .hero-baseline > .micro, .scroll-cue { font-size: 8px; }
  .liquid-play { width: 58px; height: 58px; min-width: 58px; padding: 0; }
  .figure-fallback { top: 21%; left: 11%; width: 78%; }
  .intro { padding-block: 26px 70px; }
  .reading-text { font-size: 32px; line-height: 1.32; }
  .intro-bottom { gap: 24px; }
  .intro-bottom > p { font-size: 13px; max-width: 60%; }
  .intro-bottom > .micro { font-size: 8px; }
  .gallery-heading h2 { font-size: 43px; line-height: 1.12; }
  .gallery-heading .micro, .case-kicker { font-size: 9px; }
  .gallery-heading > p { font-size: 12px; }
  .case h4 { font-size: 31px; }
  .case-copy > p { font-size: 14px; }
  .case-tags li { font-size: 10px; }
  .gallery-bottom .micro { font-size: 8px; }
  .case-visual-label { font-size: 8px; }
  .philosophy h2 { font-size: 47px; }
  .philosophy-top > .micro { font-size: 8px; }
  .principles summary { font-size: 15px; }
  .principles details p { font-size: 14px; }
  .contact h2 { font-size: 58px; line-height: 1.08; }
  .contact-top > .micro { font-size: 8px; }
  .contact-link { font-size: 22px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 45px; }
  .hero h1 .title-line:first-child { font-size: 31px; }
  .hero-intro > .micro { font-size: 8px; }
  .hero-intro > p { font-size: 12px; }
  .hero-baseline > .micro, .scroll-cue { font-size: 7px; }
  .contact h2 { font-size: 51px; }
  .contact-link { font-size: 20px; }
}

/* The recovered reference is confined to the entrance. Everything below keeps its existing theme. */
.hero {
  --ink: #edf1f7;
  --muted: #a2aebb;
  color: var(--ink);
  background: #010307;
}
.universe-entry { overflow: hidden; }
.universe-entry:not([data-render="ready"]) { visibility: hidden; }
.entry-scroll-track { position: relative; }
.entry-scroll-track.is-active { height: 340svh; }
.hero.is-scroll-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
body[data-entry-pinned="true"] .site-header { position: fixed; }
.entry-wordmark {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  font-family: Syncopate, sans-serif; font-size: 96px; font-weight: 400;
  line-height: 1.15; letter-spacing: 0; color: #edf2f8;
  text-shadow: 0 1px 0 #afc0d2, 0 3px 0 #526375, 0 6px 10px #0008;
  visibility: hidden; pointer-events: none;
}
.entry-letter { display: block; position: relative; text-align: center; transform-origin: center; will-change: transform; }
.entry-letter i { position: absolute; right: 0; bottom: .05em; font: inherit; font-size: .45em; opacity: 0; }
.entry-subtitle {
  position: absolute; left: calc(3.5% + 1.5ch); right: calc(3.5% + 1.5ch); top: calc(100% + 24px);
  display: grid; font-family: Syncopate, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5;
  color: #edf5ff; text-shadow: 0 1px 1px #0008;
}
.entry-subtitle-line { position: relative; display: flex; justify-content: space-between; width: 100%; min-width: max-content; transform-origin: left center; }
.entry-subletter { display: block; position: relative; flex: none; white-space: pre; transform-origin: center; will-change: transform; }
@media (max-width: 1100px) { .entry-wordmark { font-size: 72px; } }
@media (max-width: 760px) {
  .entry-wordmark { font-size: 46px; }
  .entry-subtitle { font-size: 18px; }
}
@media (max-width: 500px) {
  .entry-wordmark { font-size: 30px; }
  .entry-subtitle { top: calc(100% + 14px); font-size: 13.5px; }
}
@media (max-width: 360px) {
  .entry-wordmark { font-size: 26px; }
  .entry-subtitle { font-size: 12px; }
}
.hero .hero-top, .hero-editorial, .hero-bottom, .hero-baseline { position: relative; z-index: 2; }
.hero .hero-top, .hero .hero-edition { color: #a3acba; }
.hero .hero-aside, .hero .hero-intro > p { color: #b2bbc7; }
.hero .hero-intro > .micro, .hero .hero-baseline { color: #9aa7b8; }
.hero .text-link { color: #e9eff8; border-color: #9aacc2; }
.hero .sculpture-caption { color: #91a3bb; }
.hero .liquid-play {
  color: #edf2f9;
  border-color: #a5bbd636;
  background: #12203150;
  box-shadow: inset 0 1px 0 #c8ddf115, 0 12px 32px #0005;
}
.hero .liquid-play:hover { background: #1e30496b; }
.hero .figure-fallback { filter: none; width: 38%; left: 40%; top: 28%; }
.site-header { --ink: #edf1f7; color: #edf1f7; }
.site-header .brand { mix-blend-mode: normal; }
.site-header .brand img { filter: url(#brand-on-dark); }
.site-header .glass { background: #09111c73; border-color: #becfe32b; box-shadow: inset 0 1px 0 #e7f1ff12; }
.site-header .glass::before, .hero .glass::before { opacity: 0; }
.site-header .header-nav a:hover { background: #c0d5ec14; }
.site-header .header-nav a:last-child { color: #eff4fb; background: #c7d9ee14; }
.site-header .header-nav a:last-child:hover { background: #c7d9ee26; }
.site-header .motion-toggle:hover, .site-header .menu-toggle:hover { background: #a8c3e21a; }

@media (min-width: 761px) and (max-width: 900px) {
  .hero-editorial { max-width: 100%; margin-top: 256px; }
  .hero .hero-aside { display: none; }
  .hero .sculpture-caption { display: none; }
  .site-header .header-nav { display: none; }
  .site-header .header-actions { margin-left: auto; }
}

/* Keep the recovered entrance's figure-led composition, not the previous split hero. */
.hero { min-height: max(700px, calc(100svh - 40px)); padding-top: 128px; }
.hero .hero-top { align-self: flex-start; }
.hero .hero-top > .micro { font-size: 11px; line-height: 1.8; color: #c8ccd3; }
.hero .hero-editorial { position: absolute; left: var(--gutter); bottom: 155px; margin: 0; max-width: min(900px, 76%); }
.hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 76px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: none;
}
.hero h1 .title-line { margin: 0; padding: 3px 8px 3px 0; overflow: visible; }
.hero h1 u { color: #19e4f7; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.hero .hero-bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 68px; margin: 0; align-items: center; }
.hero .hero-baseline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; padding: 18px 0; margin: 0; }
.hero .liquid-play { border-radius: 6px; min-width: 185px; padding: 12px 16px; box-shadow: inset 0 1px 0 #c8ddf115; }
.hero .play-icon { font-size: 26px; }
.hero .play-arrow { font-size: 20px; }
.hero .liquid-play > span:nth-child(2) { font-size: 12px; }
@media (min-width: 1600px) {
  .hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) { font-size: 88px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) { font-size: 60px; }
}
@media (max-width: 900px) {
  .hero .figure-fallback { width: 72%; left: 14%; top: 20%; }
  .hero { min-height: max(760px, calc(100svh - 36px)); padding-top: 104px; }
  .hero .hero-editorial { bottom: 155px; max-width: calc(100% - 2 * var(--gutter)); }
  .hero .hero-top > .micro { font-size: 9px; }
}
@media (max-width: 760px) {
  .hero { min-height: max(720px, calc(100svh - 32px)); }
  .hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) { font-size: 44px; }
  .hero .hero-editorial { bottom: 155px; }
  .hero .hero-bottom { bottom: 65px; gap: 16px; }
  .hero .text-link { font-size: 11px; gap: 14px; }
  .hero .liquid-play { min-width: 42px; width: 42px; height: 42px; padding: 0; }
  .hero .liquid-play > span:nth-child(2), .hero .play-arrow { display: none; }
  .hero .hero-baseline > .micro { display: none; }
  .hero .hero-baseline { justify-content: center; }
}
@media (max-width: 500px) {
  .hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) { font-size: 35px; }
}
@media (max-width: 360px) {
  .hero h1, .hero h1 .title-line:first-child, .hero h1 .title-line:nth-child(2) { font-size: 30px; }
}