:root { --x: 42%; --y: 38%; }

body,
.kolon-root {
  color: var(--ivory);
  background:
    radial-gradient(circle at 88% 8%, rgba(169, 140, 95, 0.12), transparent 28%),
    #0b0f12;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before,
.kolon-root::before {
  content: "";
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
  background-image: url("/assets/native-grain.svg");
  background-size: 240px;
}

body::before {
  position: fixed;
}

.kolon-root {
  position: relative;
  isolation: isolate;
}

.kolon-root::before {
  position: absolute;
}

.kolon-root .cover {
  min-height: calc(100svh - 92px);
}

@media (max-width: 1199px) {
  .kolon-root .cover {
    min-height: calc(100svh - 60px);
  }
}

.picker, .site, .cover, .mast, .toc, .sheet, .closer, .legal, .dock { position: relative; z-index: 1; }
.site { border-color: rgba(238, 233, 225, 0.1); background: rgba(7, 9, 11, 0.72); backdrop-filter: blur(12px); }
.crumb { color: rgba(238, 233, 225, 0.5); }
.crumb b { color: var(--ivory); }
.site img { filter: invert(1); opacity: 0.92; }
.crumb-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumb-list li:not(:last-child)::after { content: "·"; margin-left: 8px; color: rgba(238, 233, 225, 0.3); }

.cover {
  --slit: 34%;
  position: relative;
  min-height: 94vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #07090b;
}
.cover img {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: 26% 16%;
  filter: saturate(0.68) contrast(1.12);
  animation: drift 22s linear alternate both;
}
.cover--face img { object-position: 48% 22%; }
.cover--breast img { object-position: 50% 36%; }
.cover--body img { object-position: 50% 42%; }

@keyframes drift {
  to { transform: scale(1.06) translate3d(-2%, 1.4%, 0); }
}
.cover .veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 11, 0.18) 0%, transparent 24%, rgba(7, 9, 11, 0.88) 100%),
    linear-gradient(90deg, rgba(7, 9, 11, 0.55), transparent 46%);
}
.cover .lamp {
  position: absolute;
  width: 420px;
  height: 420px;
  left: var(--x);
  top: var(--y);
  background: radial-gradient(circle, rgba(196, 164, 106, 0.22), transparent 62%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.cover .scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slit);
  width: 2px;
  background: linear-gradient(to bottom, transparent, #f3e2b8, var(--brass), transparent);
  box-shadow: 0 0 28px rgba(196, 164, 106, 0.45);
  animation: slit 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes slit {
  0%, 100% { transform: translateX(-40px); opacity: 0.2; }
  45% { opacity: 1; }
  50% { transform: translateX(38vw); opacity: 0.15; }
}
.cover .copy {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) clamp(22px, 5vw, 72px) 48px;
}
.tick {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--brass);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tick i { width: 42px; height: 1px; background: var(--brass); }
h1 {
  max-width: 10ch;
  margin: 0;
  font: 400 clamp(56px, 8vw, 118px) / 0.86 var(--display);
  letter-spacing: -0.045em;
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.whisper { color: rgba(238, 233, 225, 0.42); font-style: italic; letter-spacing: 0.04em; }
.lead {
  max-width: 34em;
  margin: 20px 0 0;
  color: rgba(238, 233, 225, 0.78);
  font-size: 18px;
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  min-height: 48px;
  padding: 0 18px 0 22px;
  color: #f6f1e8;
  background:
    linear-gradient(180deg, rgba(255, 246, 228, 0.26) 0%, transparent 46%),
    linear-gradient(180deg, #b89a6a 0%, var(--brass) 52%, #8c7348 100%);
  border: 1px solid rgba(255, 244, 220, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.38),
    0 12px 28px rgba(72, 54, 28, 0.2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 240ms ease, filter 240ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 52%, rgba(255, 246, 228, 0.28) 100%);
  transform: translateX(-100%);
  transition: transform 480ms var(--ease);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:hover::before { transform: none; }
.btn--ghost {
  color: var(--ivory);
  background: transparent;
  border-color: rgba(169, 140, 95, 0.55);
  box-shadow: none;
}

.mast {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px clamp(22px, 5vw, 72px) 0;
}
.rules {
  display: block;
  height: 5px;
  margin: 16px 0;
  border-top: 1px solid rgba(169, 140, 95, 0.75);
  border-bottom: 1px solid rgba(169, 140, 95, 0.28);
}
.trust {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.trust b { display: block; font: 400 26px/1 var(--display); }
.trust span { color: rgba(238, 233, 225, 0.48); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 8px clamp(22px, 5vw, 72px) 8px;
}
.toc a {
  padding: 10px 14px;
  color: rgba(238, 233, 225, 0.62);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.toc a:hover { color: var(--brass-light); }

.sheet { max-width: 1480px; margin: 0 auto; padding: clamp(72px, 8vw, 120px) clamp(22px, 5vw, 72px); }
.split { display: grid; grid-template-columns: 1.28fr 0.72fr; gap: 40px; align-items: stretch; }
.plate {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #0c1012;
  box-shadow:
    0 0 0 1px rgba(169, 140, 95, 0.38),
    0 0 0 14px rgba(11, 15, 18, 0.55),
    0 40px 80px rgba(0, 0, 0, 0.35);
}
.plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 18%;
  filter: saturate(0.7) contrast(1.08);
  transform: scale(1.06);
  transition: transform 1.1s var(--ease), filter 500ms ease;
}
.plate--face img { object-position: 48% 24%; }
.plate--breast img { object-position: 50% 38%; }
.plate--body img { object-position: 50% 44%; }
.plate:hover img { transform: scale(1); filter: none; }
.plate .sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 246, 228, 0.16) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease);
  pointer-events: none;
}
.plate:hover .sheen { transform: translateX(120%); }
.corner,
.corner::after {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.corner { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.corner::after { content: ""; right: 16px; bottom: 16px; left: auto; top: auto; border-left: 0; border-top: 0; }
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(8, 10, 12, 0.9));
}
.cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 36px 40px;
}
.cap h2 {
  max-width: 15ch;
  margin: 8px 0 12px;
  font: 400 clamp(32px, 3.2vw, 50px) / 1.02 var(--display);
}
.cap p { margin: 0; color: rgba(238, 233, 225, 0.7); line-height: 1.55; }
.stack { display: flex; flex-direction: column; justify-content: center; }
.stack a {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 26px 8px 26px 18px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 233, 225, 0.12);
}
.stack a:first-child { border-top: 1px solid rgba(238, 233, 225, 0.12); }
.stack a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--ease);
}
.stack a:hover::before { transform: scaleY(1); }
.folio { color: var(--brass); font: 400 22px/1 var(--display); }
.stack h3 {
  margin: 0;
  font: 400 28px/1.15 var(--display);
  transition: transform 420ms var(--ease);
}
.stack a:hover h3 { transform: translateX(8px); }

.read { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.read h2, .prose h2, .faq h2, .doctor h2, .sheet > h2 {
  margin: 0 0 18px;
  font: 400 clamp(34px, 3.4vw, 52px) / 0.98 var(--display);
}
.prose p, .read p, .faq p, .doctor p {
  margin: 0 0 16px;
  color: rgba(238, 233, 225, 0.68);
  font-size: 16px;
  line-height: 1.7;
}
.drop::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--brass);
  font: 400 62px/0.75 var(--display);
}

.mid-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding: 28px 32px;
  background: linear-gradient(90deg, rgba(169, 140, 95, 0.1), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(169, 140, 95, 0.28);
}
.mid-cta p { margin: 0; color: rgba(238, 233, 225, 0.7); font: italic 400 26px/1.2 var(--display); }

.spine { position: relative; }
.spine::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--brass), transparent);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 32px 0;
}
.step b {
  position: relative;
  z-index: 1;
  color: var(--brass);
  font: 400 34px/1 var(--display);
}
.step h3 { margin: 0 0 8px; font: 400 30px/1.1 var(--display); }
.step p { margin: 0; color: rgba(238, 233, 225, 0.66); line-height: 1.65; }

.checks { margin: 0; padding: 0; list-style: none; }
.checks li {
  position: relative;
  padding: 20px 0 20px 22px;
  border-bottom: 1px solid rgba(238, 233, 225, 0.1);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 10px;
  height: 1px;
  background: var(--brass);
}
.checks b { display: block; margin-bottom: 4px; font: italic 400 24px/1.15 var(--display); color: var(--ivory); }

.faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; }
.faq-list details { border-bottom: 1px solid rgba(238, 233, 225, 0.1); }
.faq-list details:first-child { border-top: 1px solid rgba(238, 233, 225, 0.1); }
.faq summary {
  cursor: pointer;
  padding: 22px 0;
  font: italic 400 26px/1.2 var(--display);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { color: var(--brass-light); }
.faq details p { padding-bottom: 18px; }

.doctor {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  min-height: 620px;
  overflow: hidden;
  background: #12181c;
  box-shadow: 0 0 0 1px rgba(169, 140, 95, 0.22);
}
.doctor img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: 14% 32%;
  filter: saturate(0.74) contrast(1.06);
}
.doctor .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 72px);
  background:
    linear-gradient(180deg, rgba(238, 233, 225, 0.04), transparent 40%),
    #161c20;
}
.line { font: italic 400 28px/1.25 var(--display); color: var(--brass-light); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pills span {
  padding: 7px 11px;
  color: var(--brass-light);
  border: 1px solid rgba(169, 140, 95, 0.38);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.index a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 26px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 233, 225, 0.12);
}
.index a:first-child { border-top: 1px solid rgba(238, 233, 225, 0.12); }
.index h3 { margin: 0; font: 400 32px/1.15 var(--display); }

.closer {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  max-width: 1480px;
  margin: 0 auto 80px;
  min-height: 420px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(169, 140, 95, 0.28);
}
.closer .copy { display: flex; flex-direction: column; justify-content: end; padding: clamp(36px, 5vw, 64px); background: #12181c; }
.closer h2 { margin: 10px 0 16px; font: 400 clamp(36px, 4vw, 58px) / 0.96 var(--display); }
.closer p { margin: 0 0 8px; color: rgba(238, 233, 225, 0.6); }
.closer .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.closer figure { margin: 0; position: relative; }
.closer img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 16%; filter: saturate(0.7); }

.dock {
  display: none;
}
.legal { color: rgba(238, 233, 225, 0.38); }

@media (max-width: 900px) {
  .split, .read, .faq, .doctor, .closer, .mid-cta { grid-template-columns: 1fr; }
  .cover { min-height: 86vh; }
  h1 { font-size: clamp(48px, 16vw, 72px); }
  .plate, .doctor img { min-height: 380px; }
  .spine::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cover img, .cover .scan, .plate img, .plate .sheen { animation: none; transition: none; }
}