:root{
  --page-margin:20px;--pad-scale:.42;
  --nav-links:none;--nav-toggle:inline-flex;
  --hero-cols:1fr;--cols-2:minmax(0,1fr);--cols-3:minmax(0,1fr);--cols-4:minmax(0,1fr);
  --pdp-cols:minmax(0,1fr);--footer-cols:minmax(0,1fr);--principles-cols:minmax(0,1fr);
  --pdp-sticky:static;--hero-media-min:56vw;--split-min:auto;
}
@media (min-width:480px){:root{--page-margin:24px;--pad-scale:.5}}
@media (min-width:600px){:root{--cols-2:repeat(2,minmax(0,1fr));--cols-3:repeat(2,minmax(0,1fr));--cols-4:repeat(2,minmax(0,1fr));--footer-cols:repeat(2,minmax(0,1fr));--principles-cols:repeat(2,minmax(0,1fr));--pad-scale:.6}}
@media (min-width:768px){:root{--page-margin:32px;--pad-scale:.72;--nav-links:flex;--nav-toggle:none;--hero-cols:minmax(300px,46%) 1fr;--pdp-cols:minmax(0,55%) minmax(0,45%);--pdp-sticky:sticky;--hero-media-min:520px;--split-min:520px}}
@media (min-width:900px){:root{--cols-3:repeat(3,minmax(0,1fr));--principles-cols:repeat(3,minmax(0,1fr));--pad-scale:.85}}
@media (min-width:1024px){:root{--page-margin:48px;--pad-scale:1;--cols-4:repeat(4,minmax(0,1fr));--hero-cols:minmax(380px,44%) 1fr;--pdp-cols:minmax(0,58%) minmax(0,42%);--footer-cols:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
@media (min-width:1440px){:root{--page-margin:64px}}

/* Studio KVN — global rules. All layout lives in the markup; this file
   holds only what inline styles can't express: resets, states, responsive. */

html, body { margin: 0; padding: 0; background: #F7F4ED; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #26231F; text-decoration: none; transition: color 160ms ease, background-color 160ms ease; }
a:hover { color: #6B4B32; }
::selection { background: #E1D9C9; }

.btn-dark:hover { background: #6B4B32 !important; color: #F7F4ED !important; }
.tile { transition: background-color 220ms ease; }
.tile:hover { background: #E1D9C9 !important; }

.img-slot {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background: #E7E1D6;
  background-image: linear-gradient(135deg, rgba(38,35,31,0.035) 25%, transparent 25%, transparent 50%, rgba(38,35,31,0.035) 50%, rgba(38,35,31,0.035) 75%, transparent 75%);
  background-size: 14px 14px;
}
.img-slot span {
  padding: 16px 18px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9A9184; line-height: 1.6; max-width: 30ch;
}

input::placeholder { color: rgba(230,224,213,0.5); }

[style*="grid-template-columns"] > * { min-width: 0; }

/* Below the nav breakpoint the token grids have already collapsed; these only
   handle inline paddings the token pass could not reach. */
@media (max-width: 767px) {
  main div[style*="padding:calc(112px * var(--pad-scale)) calc(80px"],
  main div[style*="padding:calc(104px * var(--pad-scale)) calc(80px"] {
    padding-left: var(--page-margin) !important; padding-right: var(--page-margin) !important;
  }
  footer > div[style] { padding-bottom: calc(48px * var(--pad-scale)) !important; }
}

details summary::-webkit-details-marker { display: none; }
details[open] .faq-mark { transform: rotate(45deg); }
.faq-mark { display: inline-block; transition: transform 180ms ease; }
details summary:hover { color: #6B4B32; }


.piece .piece-alt { opacity: 0; transition: opacity 320ms ease; }

a:hover .piece .piece-alt,
.piece:hover .piece-alt { opacity: 1; }


#site-menu { display: none; }
#site-menu.open { display: flex; }
@media (min-width: 768px) { #site-menu.open { display: none; } }
@media (max-width: 767px) {
  .pdp-gallery img { max-height: none; }
  h1, h2 { letter-spacing: -0.01em !important; }
}

.film-shot { opacity: 0; animation: film-shot 32s infinite; transform-origin: 50% 45%; }
.film-shot-1 { animation-delay: 0s; }
.film-shot-2 { animation-delay: 8s; }
.film-shot-3 { animation-delay: 16s; }
.film-shot-4 { animation-delay: 24s; }
@keyframes film-shot {
  0% { opacity: 0; transform: scale(1); }
  6% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 0; transform: scale(1.07); }
  100% { opacity: 0; transform: scale(1.07); }
}
.film-cap { opacity: 0; animation: film-cap 32s infinite; }
.film-cap-1 { animation-delay: 0s; }
.film-cap-2 { animation-delay: 8s; }
.film-cap-3 { animation-delay: 16s; }
.film-cap-4 { animation-delay: 24s; }
@keyframes film-cap {
  0% { opacity: 0; transform: translateY(4px); }
  8% { opacity: 1; transform: none; }
  25% { opacity: 1; }
  31% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .film-shot, .film-cap { animation: none; }
  .film-shot-1, .film-cap-1 { opacity: 1; }
}