/* Authentic product capture and wide-screen composition. Keep the original
   phone/tablet layout; desktop overrides deliberately start above 1100px. */
.product-visual--capture {
  min-width: 0;
  padding: 44px 28px 32px;
  perspective: none;
}
.product-capture { position: relative; z-index: 1; width: 100%; min-width: 0; margin: 0; }
.product-screenshot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #77718f70;
  border-radius: 10px;
  background: #f6f4ef;
  box-shadow: 0 24px 64px #0006, 0 0 56px #6c63ff10;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.product-screenshot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.screenshot-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #ffffff30;
  border-radius: 6px;
  background: #0a0a0fed;
  color: var(--ice);
  font: 11px var(--mono);
}
.capture-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: #aaa5b9; font: 10px/1.6 var(--mono); letter-spacing: .03em; }
.capture-caption > span:first-child { color: var(--ice); }
.capture-caption i { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--emerald); }
.detail-capture { margin-top: 20px; padding-top: 0; }
.detail-capture .product-screenshot { max-width: 1600px; margin-inline: auto; }
.detail-capture .capture-caption { max-width: 1600px; margin-inline: auto; }

@media (hover: hover) and (pointer: fine) {
  .product-screenshot:hover { transform: translateY(-5px); box-shadow: 0 30px 80px #0008, 0 0 60px #6c63ff24; }
}
@media (min-width: 1101px) {
  .wrap { width: min(2560px, calc(100% - clamp(96px, 8vw, 280px))); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 96px); min-height: clamp(680px, calc(100svh - 88px), 980px); padding-top: 32px; padding-bottom: 100px; }
  .hero h1 { font-size: clamp(86px, 7.5vw, 148px); }
  .hero-copy { min-width: 0; }
  .hero-description { max-width: 580px; font-size: clamp(18px, 1.1vw, 22px); }
  .orbital-scene { width: min(100%, 920px); margin-left: 0; justify-self: center; }
  .studio-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(64px, 8vw, 200px); }
  .studio-copy { max-width: 650px; }
  .approach-item p { max-width: 440px; }
  .product-card { grid-template-columns: minmax(370px, .8fr) minmax(0, 1.4fr); }
  .product-copy { padding: clamp(36px, 3.2vw, 76px); }
  .product-description { max-width: 460px; font-size: 15px; }
  .product-visual--capture { min-height: 560px; padding: clamp(28px, 3vw, 64px); }
  .meaning-root > p:not(.micro-label) { max-width: 540px; }
  .meaning-statement .meaning-description { max-width: 580px; }
}
@media (max-width: 850px) {
  .product-visual--capture { min-height: 0; padding: 36px 28px 28px; }
}
@media (max-width: 620px) {
  .product-visual--capture { padding: 28px 16px 24px; }
  .capture-caption { font-size: 9px; gap: 6px; margin-top: 14px; }
  .screenshot-open { position: static; display: flex; justify-content: space-between; border: 0; border-top: 1px solid #77718f40; border-radius: 0; padding: 12px; font-size: 10px; }
  .detail-capture { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-screenshot, .product-screenshot:hover { transform: none; transition: none; }
}
@media print {
  .screenshot-open { display: none; }
}

/* Holographic product stage. No content, hit targets, or mobile sizing changes.
   Keep overflow/opacity/filter off the 3D parent to avoid flattening its layers. */
.hologram-stage { position: relative; width: 100%; min-width: 0; }
.hologram-glare, .hologram-rim { display: none; pointer-events: none; }
.product-visual--capture .product-screenshot:hover { transform: none; }

@media (min-width: 851px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .hologram-enabled .hologram-stage {
    perspective: 1600px;
    perspective-origin: 50% 45%;
  }
  html[data-motion="on"] .hologram-enabled .product-screenshot {
    --holo-x: 0;
    --holo-y: 0;
    --holo-power: 0;
    overflow: visible;
    transform-style: preserve-3d;
    transform: translate3d(0, calc(var(--holo-power) * -8px), 12px)
      rotateX(calc(3deg - var(--holo-y) * 7deg))
      rotateY(calc(-5deg + var(--holo-x) * 11deg)) rotateZ(-1deg);
    transition: none;
    border-color: #b7afff90;
    box-shadow: -12px 28px 64px #0008, 0 0 45px #6c63ff22;
  }
  .hologram-enabled .is-hologram-moving { will-change: transform; }
  .hologram-enabled .product-screenshot img { border-radius: 9px; }
  .hologram-enabled .product-screenshot::before,
  .hologram-enabled .product-screenshot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid #a39bff70;
    background: linear-gradient(130deg, #6c63ff22, #10101bf5 50%, #10b9811c);
    transform: translate3d(-9px, 14px, -28px);
    box-shadow: 0 0 28px #6c63ff20;
  }
  .hologram-enabled .product-screenshot::after {
    border-color: #10b98170;
    background: linear-gradient(140deg, #6c63ff0a, #10b9810c);
    transform: translate3d(10px, 27px, -58px);
    box-shadow: 0 15px 50px #10b98112;
  }
  .hologram-enabled .hologram-glare {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform: translateZ(1px);
    opacity: calc(.04 + var(--holo-power) * .2);
    background: radial-gradient(ellipse at var(--holo-light-x, 50%) var(--holo-light-y, 50%),
      #fff 0%, #c3bcff80 23%, #6c63ff00 65%);
  }
  .hologram-enabled .hologram-rim {
    display: block;
    position: absolute;
    inset: -8px;
    transform: translateZ(13px);
    opacity: calc(.45 + var(--holo-power) * .55);
    background:
      linear-gradient(#b9b2ff, #b9b2ff) left top / 26px 1px,
      linear-gradient(#b9b2ff, #b9b2ff) left top / 1px 26px,
      linear-gradient(#b9b2ff, #b9b2ff) left bottom / 26px 1px,
      linear-gradient(#b9b2ff, #b9b2ff) left bottom / 1px 26px,
      linear-gradient(#35dba5, #35dba5) right top / 26px 1px,
      linear-gradient(#35dba5, #35dba5) right top / 1px 26px,
      linear-gradient(#35dba5, #35dba5) right bottom / 26px 1px,
      linear-gradient(#35dba5, #35dba5) right bottom / 1px 26px;
    background-repeat: no-repeat;
  }
  .hologram-enabled .screenshot-open {
    transform: translateZ(26px);
    border-color: #b1a5ff80;
    box-shadow: 0 10px 28px #0005;
  }
  /* Keep keyboard navigation stable and the full-image link easy to activate. */
  html[data-motion="on"] .hologram-enabled .product-screenshot:focus-visible { transform: none; }
  .hologram-enabled .product-screenshot:focus-visible::before,
  .hologram-enabled .product-screenshot:focus-visible::after,
  .hologram-enabled .product-screenshot:focus-visible .hologram-glare,
  .hologram-enabled .product-screenshot:focus-visible .hologram-rim { display: none; }
  .hologram-enabled .product-screenshot:focus-visible .screenshot-open { transform: none; }
}
@media (forced-colors: active), print {
  .hologram-stage { perspective: none !important; }
  .hologram-stage .product-screenshot,
  .hologram-stage .screenshot-open { transform: none !important; }
  .hologram-stage .product-screenshot::before,
  .hologram-stage .product-screenshot::after,
  .hologram-glare, .hologram-rim { display: none !important; }
}

/* Final Kotuvium brand assets. The generated SVGs replace the old placeholder
   K glyphs while preserving the existing semantic links and layout. */
.site-header .wordmark {
  width: 190px;
  height: 52px;
  gap: 0;
  background: url('/assets/kotuvium-lockup.svg') left center / contain no-repeat;
}
.site-header .wordmark > .brand-mark,
.site-header .wordmark > span { display: none; }

.site-footer .wordmark {
  position: relative;
  gap: 10px;
  padding-left: 42px;
}
.site-footer .wordmark .brand-mark { display: none; }
.site-footer .wordmark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  background: url('/assets/kotuvium-mark-mono.svg') center / contain no-repeat;
}

.orbital-core {
  inset: 35%;
  filter: drop-shadow(0 0 22px #6c63ff50);
  background: url('/assets/kotuvium-mark.svg') center / contain no-repeat;
}
.orbital-core svg { display: none; }

.not-found > .wordmark,
.site-map + .site-footer .wordmark,
.site-map .wordmark {
  position: relative;
}

@media (max-width: 620px) {
  .site-header .wordmark { width: 154px; height: 46px; }
  .site-footer .wordmark { padding-left: 36px; }
  .site-footer .wordmark::before { width: 29px; height: 29px; }
  .orbital-core { inset: 32%; }
}