:root {
  --paper:#f8f5ee;
  --gold:#93723f;
  --ink:#292b23;
}

.header {
  height:88px;
  position:relative;
  background:#f8f5ee;
}

.header .logo strong {
  font-size:42px;
}

.header nav a {
  font-size:12px;
  letter-spacing:.6px;
}

.pill {
  background:transparent;
  color:var(--ink);
  border:1px solid #b6a88e;
}

.heritage-strip {
  display:flex;
  justify-content:space-around;
  gap:30px;
  padding:26px 5%;
  background:#f7f3eb;
  border-bottom:1px solid var(--line);
}

.heritage-strip>span {
  font-family:Georgia,serif;
  color:#756043;
  font-size:21px;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:18px;
}

.heritage-strip small {
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;
  letter-spacing:0;
  color:#7b7669;
}

.section {
  padding-top:88px;
  padding-bottom:88px;
}

.section-heading {
  margin-bottom:44px;
}

.section-heading h2 {
  font-weight:400;
}

.english-title {
  font-size:clamp(30px,3.2vw,48px);
  letter-spacing:-.8px;
}

.heritage {
  background:#faf7f1;
}

.heritage-cards {
  gap:22px;
}

.heritage-cards article {
  border-radius:2px;
  background:transparent;
}

.heritage-cards img,
.heritage-photo {
  height:210px;
  border-radius:2px;
}

.products-section {
  background:#f8f5ef;
}

.product-grid {
  gap:42px 26px;
}

.product-image {
  height:auto;
  aspect-ratio:1/1;
  border:0;
  border-radius:2px;
  padding:0;
  background:#eee8df;
  overflow:hidden;
}

.product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:normal;
  transition:transform .65s ease;
}

.product-image.legacy {
  padding:25px;
}

.product-image.legacy img {
  object-fit:contain;
  mix-blend-mode:multiply;
}

.product-card:hover img {
  transform:scale(1.04);
}

.product-caption {
  padding-top:20px;
}

.product-caption h3 {
  font-size:21px;
}

.product-caption .category {
  font-size:11px;
  letter-spacing:1.8px;
}

.product-caption .detail-link {
  font-size:13px;
}

.brand-story {
  background:#353d2d;
}

.story-number {
  color:#cfc0a1;
}

.science {
  background:#e9e7dc;
}

.ingredient-grid {
  gap:32px;
}

.ingredient-grid article {
  border-top-color:#9eaa8b;
}

.safety {
  background:#f8f5ee;
}

.faq {
  background:#faf8f4;
}

.detail-layout {
  grid-template-columns:50% 50%;
}

.detail-gallery {
  align-items:stretch;
  justify-content:flex-start;
  padding:55px 22px 25px;
  background:#eee9e0;
  gap:14px;
}

.detail-gallery .detail-main {
  width:100%;
  height:auto;
  aspect-ratio:1;
  max-height:none;
  object-fit:contain;
  mix-blend-mode:normal;
}

.gallery-thumbs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.gallery-thumbs button {
  padding:0;
  border:1px solid transparent;
  width:64px;
  height:64px;
  background:#f8f5ee;
}

.gallery-thumbs button[aria-pressed=true] {
  border:2px solid #967643;
}

.gallery-thumbs img {
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  mix-blend-mode:normal;
}

.original-link {
  font-size:12px;
  border-bottom:1px solid #aaa08c;
  align-self:flex-start;
  margin-top:4px;
}

.detail-caption {
  font-size:12px;
  color:#6b6457;
}

@media(max-width:1050px) {
.heritage-strip>span {
  display:block;
  text-align:center;
  font-size:19px;
}

.heritage-strip small {
  display:block;
  margin-top:4px;
}

.header nav {
  gap:18px;
}

.header nav a {
  font-size:11px;
}

}

@media(max-width:760px) {
.header {
  height:76px;
  padding:0 20px;
}

.header nav {
  top:76px;
}

.header>.logo strong {
  font-size:37px;
}

.header .pill {
  font-size:11px;
  min-width:84px;
}

.heritage-strip {
  gap:12px;
  padding:20px 12px;
}

.heritage-strip>span {
  font-size:15px;
  letter-spacing:.5px;
}

.heritage-strip small {
  font-size:10px;
  line-height:1.6;
  max-width:90px;
  margin:5px auto 0;
}

.section {
  padding-top:50px;
  padding-bottom:50px;
}

.heritage {
  background:#353d2d;
}

.heritage-cards img,
.heritage-photo {
  height:140px;
}

.products-section {
  padding:45px 20px;
}

.products-section .section-heading {
  padding:0;
  margin-bottom:30px;
}

.english-title {
  font-size:29px;
  letter-spacing:-1px;
}

.product-grid,
.skincare-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:visible;
  padding:0;
  gap:30px 14px;
}

.product-image {
  height:auto;
  padding:0;
  aspect-ratio:1;
}

.product-image.legacy {
  padding:12px;
}

.product-caption {
  padding:13px 1px 0;
}

.product-caption h3 {
  font-size:15px;
  line-height:1.6;
}

.product-caption .category {
  font-size:9px;
  line-height:1.5;
  letter-spacing:.6px;
  display:block;
  min-height:27px;
}

.product-caption p {
  font-size:12px;
  line-height:1.7;
}

.product-caption .detail-link {
  font-size:11px;
  margin-top:9px;
}

.brand-story {
  gap:28px;
}

.detail-layout {
  grid-template-columns:1fr;
}

.detail-gallery {
  flex-direction:column;
  padding:45px 18px 18px;
  align-items:stretch;
}

.detail-gallery .detail-main {
  width:100%;
  max-height:340px;
}

.gallery-thumbs button {
  width:55px;
  height:55px;
}

.gallery-thumbs img {
  width:100%;
}

.detail-copy {
  padding:25px 22px;
}

}

@media(max-width:380px) {
.heritage-strip small {
  font-size:9px;
}

.product-caption h3 {
  font-size:14px;
}

}

@media(prefers-reduced-motion:reduce) {
.product-image img {
  transition:none;
}

html {
  scroll-behavior:auto;
}

}


/* One viewport hero. Playback does not depend on scroll distance. */
.cinema {
  position: relative;
  background: #f2ede3;
}
.cinema-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48% 52%;
  grid-template-rows: 1fr auto;
  height: calc(100svh - 88px);
  min-height: 500px;
  max-height: 960px;
  padding: 36px 7% 24px;
  overflow: hidden;
}
.film-surface,
.film-surface picture,
.film-surface img,
.film-surface video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.film-surface { z-index: -1; background: #f2ede3; }
.film-surface picture { display: block; }
.film-surface img,
.film-surface video { object-fit: cover; object-position: center; }
.film-surface video { opacity: 0; pointer-events: none; }
.film-has-frame .film-surface video { opacity: 1; }
.cinema .hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 0;
  max-width: 520px;
}
.cinema h1 {
  font-size: clamp(36px, 4.5vw, 70px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -2px;
}
.cinema .eyebrow { color: #6b5c40; margin-bottom: 24px; }
.cinema .hero-description { font-size: 17px; line-height: 2; margin-top: 24px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-height: 44px;
  margin-top: 18px;
  border-bottom: 1px solid #9d947b;
  font-size: 14px;
}
.film-footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 1.5px;
}
@media (max-width: 760px) {
  .cinema-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  .film-surface {
    position: relative;
    order: 0;
    inset: auto;
    z-index: 0;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    min-height: 0;
    min-width: 0;
  }
  .film-surface img,
  .film-surface video { object-fit: cover; object-position: center; }
  .cinema .hero-copy {
    order: 1;
    width: 100%;
    max-width: none;
    padding: 32px 22px 36px;
    text-align: center;
  }
  .cinema h1 { font-size: clamp(30px, 8vw, 37px); line-height: 1.35; letter-spacing: -1.2px; }
  .cinema .eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 12px; }
  .cinema .hero-description { font-size: 13px; line-height: 1.8; margin-top: 12px; }
  .text-link { min-height: 44px; margin-top: 12px; font-size: 12px; }
  .film-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Preserve the whole bottle at every desktop aspect ratio. */
.film-surface { background: #f2ede3; }
@media (min-width: 761px) {
  .film-surface img, .film-surface video {
    width: auto;
    max-width: 100%;
    height: 100%;
    left: auto;
    right: 0;
    object-fit: contain;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 25%);
    mask-image: linear-gradient(to right, transparent, #000 25%);
  }
}