/* KOZA — October refinement: preserve the existing editorial layout. */
:root { --editorial: 'Yeseva One', Georgia, serif; }
body { font-family: Manrope, sans-serif; }
.header { background: #596116; color: #f0f0de; box-shadow: 0 9px 26px #26341e20; }
.header .logo, .header .nav a { color: #f0f0de; }
.header .logo-sprig { filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(180%) hue-rotate(28deg); }
.header .header-cta { background: #f0f0de; color: #29351f; }
.hero { background: #e8f5fc; padding-bottom: 85px; }
.hero .hero-sub { background: #d6edf8; }
.hero .round-link { background: #f0f0de; }
.hero .hero-visual { transform: scale(.89); transform-origin: 50% 46%; }
.hero .cloud-stage { filter: drop-shadow(7px 13px 0 #bedae5); }
.hero .cloud-stage:before, .hero .cloud-lobe { background: #f0f0de; }
.hero .cloud-stage img { width: 119%; top: 12%; left: -7%; }
.hero::after { display: none; }
.intro { background: #f0f0de; position: relative; overflow: visible; min-height: 880px; grid-template-columns: 49% 51%; }
.intro::before { content: ''; position: absolute; z-index: 6; left: 0; right: 0; top: -26px; height: 31px; pointer-events: none; background: radial-gradient(circle at 25px 31px, #f0f0de 25px, transparent 26px) 0 0 / 50px 31px repeat-x; }
.intro::after { z-index: 6; }
.intro > .section-number { top: 58px; right: 6%; }
.intro .nature-diary { grid-column: 1; grid-row: 1; align-self: stretch; width: 100%; height: auto; min-height: 880px; max-width: none; margin: 0; overflow: hidden; background: #303828; }
.intro .author-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.intro .intro-content { grid-column: 2; grid-row: 1; padding: 145px 9% 105px; text-align: left; align-self: center; }
.intro .intro-content h2 { font-family: 'Yeseva One', Georgia, serif; letter-spacing: -.04em; font-size: clamp(38px, 3.5vw, 61px); line-height: 1.2; max-width: 660px; margin: 0; }
.intro .intro-content .intro-hello { font-family: 'Yeseva One', Georgia, serif; font-size: clamp(21px, 2vw, 29px); line-height: 1.5; color: #596116; margin: 35px 0 18px; }
.intro .intro-content > p:not(.intro-hello) { font-size: 14px; line-height: 1.85; max-width: 560px; margin: 18px 0 0; }
.intro .intro-tags { justify-content: flex-start; margin-top: 30px; }
.collection-deco.d1 { display: none; }
.collection .product-one .product-image img { width: 112%; max-height: 275px; object-fit: contain; }
.quote { padding-bottom: 100px; }
.process { margin-top: 0; padding-top: 110px; border-radius: 0; position: relative; isolation: isolate; }
.process::before { content: ''; z-index: 5; pointer-events: none; position: absolute; top: -27px; left: 0; right: 0; height: 33px; background: radial-gradient(circle at 24px 26px, #fffdf6 24px, transparent 25px) 0 0 / 48px 33px repeat-x; transform: none; }
.process .step-preview img { object-position: center; }
@media (max-width: 1000px) {
  .intro { min-height: 760px; }
  .intro .nature-diary { min-height: 760px; }
  .intro .intro-content { padding: 115px 7% 75px; }
  .intro .intro-content h2 { font-size: clamp(35px, 4vw, 51px); }
  .intro .intro-content .intro-hello { font-size: 22px; }
}
@media (max-width: 650px) {
  .header .menu-toggle { color: #f0f0de; }
  .header .nav { background: #596116; color: #f0f0de; }
  .hero { padding-bottom: 53px; }
  .hero .hero-visual { transform: scale(.97); transform-origin: center; height: 312px; }
  .hero .cloud-stage img { width: 122%; top: 16%; left: -10%; }
  .intro { display: flex; flex-direction: column; min-height: 0; }
  .intro > .section-number { top: auto; bottom: 20px; right: 7%; }
  .intro .nature-diary { order: 0; height: 480px; min-height: 0; flex: none; }
  .intro .author-art { object-position: 50% 48%; }
  .intro .intro-content { order: 1; padding: 54px 7% 95px; }
  .intro .intro-content h2 { font-size: clamp(38px, 8.7vw, 51px); }
  .intro .intro-content .intro-hello { font-size: 23px; margin-top: 26px; }
  .intro .intro-content > p:not(.intro-hello) { font-size: 13px; }
  .intro::before { top: -21px; height: 25px; background: radial-gradient(circle at 18px 25px, #f0f0de 18px, transparent 19px) 0 0 / 36px 25px repeat-x; }
  .process { margin-top: 0; padding-top: 88px; border-radius: 0; }
  .process::before { top: -20px; height: 26px; background: radial-gradient(circle at 18px 20px, #fffdf6 18px, transparent 19px) 0 0 / 36px 26px repeat-x; }
}