/* ============================================================
   氣美 KIBI Brand Site
   Palette: Washi #F5F0E8 / Gold #B79C4A / Charcoal #333 / Sumi #2B2723
   Type: Noto Serif JP (JP heading) / Cormorant Garamond (EN) / Noto Sans JP (body)
   ============================================================ */

:root {
  --washi: #F5F0E8;
  --washi-deep: #EDE6D8;
  --gold: #B79C4A;
  --gold-soft: rgba(183, 156, 74, .45);
  --charcoal: #333333;
  --sumi: #2B2723;
  --silver: #A6A5AB;
  --serif: "Noto Serif JP", serif;
  --garamond: "Cormorant Garamond", serif;
  --sans: "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--charcoal);
  background: var(--washi);
  line-height: 2;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}

/* 日本語の複数行テキストで「す。」のような1〜2文字の孤立行(オーファン)が
   生まれないよう、対応ブラウザでは改行位置を最適化する。未対応ブラウザは
   通常の折り返しにフォールバックする。 */
p, h1, h2, h3 { text-wrap: pretty; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }
.center { text-align: center; }

section { position: relative; }
.section-light { background: var(--washi); padding: clamp(96px, 14vw, 200px) 0; }
.section-light.alt { background: var(--washi-deep); }
.section-dark { background: var(--sumi); color: var(--washi); padding: clamp(96px, 14vw, 200px) 0; }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--garamond);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 32px;
}
.eyebrow.gold { color: var(--gold); }

.heading-xl {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.75;
  letter-spacing: .18em;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.prose p { margin-bottom: 1.8em; max-width: 40em; }
.prose p.em { font-family: var(--serif); font-weight: 300; letter-spacing: .12em; color: var(--gold); }
.section-dark .prose p { color: rgba(245, 240, 232, .82); }

.prose-center { text-align: center; margin: 0 auto clamp(40px, 6vw, 56px); font-size: 15px; }
.prose-center.light { color: rgba(245, 240, 232, .82); }
.nowrap { white-space: nowrap; }

.keywords {
  margin-top: clamp(48px, 7vw, 80px);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--gold);
  font-size: 15px;
}
.keywords span { color: var(--silver); margin: 0 .4em; }

/* ---------- buttons ---------- */
.btn-solid {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .3em;
  padding: 20px 56px;
  color: var(--washi);
  background: var(--charcoal);
  transition: background .6s var(--ease), letter-spacing .6s var(--ease);
}
.btn-solid:hover { background: var(--gold); letter-spacing: .38em; }
.btn-solid.gold { background: var(--gold); color: var(--sumi); }
.btn-solid.gold:hover { background: var(--washi); }

.btn-line {
  display: inline-block;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .25em;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  transition: opacity .5s var(--ease);
}
.btn-line:hover { opacity: .6; }
.btn-line.gold { color: var(--gold); }
.btn-line.light { color: var(--washi); }
.btn-line .arrow { margin-left: 1em; transition: margin-left .5s var(--ease); }
.btn-line:hover .arrow { margin-left: 1.6em; }

.cta-note { margin-top: 24px; font-size: 12px; color: var(--silver); letter-spacing: .12em; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease), background .5s;
}
.site-header.visible { opacity: 1; transform: none; pointer-events: auto; }
.site-header.scrolled { background: rgba(245, 240, 232, .92); backdrop-filter: blur(8px); }
.header-logo { display: flex; align-items: center; gap: 15px; }
.header-logo img { height: 43px; width: auto; }
.header-nav { display: flex; gap: 28px; align-items: center; font-size: 13px; letter-spacing: .2em; }
.header-nav a { transition: color .4s; }
.header-nav a:hover { color: var(--gold); }
.nav-cta { color: var(--gold); border: 1px solid var(--gold-soft); padding: 9px 20px; }
.nav-cta:hover { background: var(--gold); color: var(--washi); }

/* ---------- 1. hero ---------- */
.hero { height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* ロゴ上部（丸紋）と手前の皿（下部）の両方を守るための基準点。
     0%=上端優先/100%=下端優先。55%は16:9で両者が収まる実測値 */
  object-position: center 55%;
  /* ズーム演出は行わない：元画像全体（左右含む）が常に見える状態を保つ */
}
/* コピーはKV焼き込みロゴ（中央）を避け、左上余白に縦書きで配置 */
.hero-inner {
  position: absolute; z-index: 2;
  top: clamp(72px, 13vh, 150px);
  left: clamp(28px, 6vw, 96px);
  writing-mode: vertical-rl;
}
.hero-copy {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: .28em; line-height: 1.9;
  color: #4a4438;
  text-shadow: 0 0 24px rgba(245, 240, 232, .75), 0 0 48px rgba(245, 240, 232, .5);
}
.hero-sub {
  margin-block-start: clamp(20px, 2vw, 32px);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .34em; color: #4f4839;
  text-shadow: 0 0 16px rgba(245, 240, 232, .9), 0 0 36px rgba(245, 240, 232, .6);
}
.hero .line { display: inline-block; opacity: 0; transform: translateY(24px); animation: lineUp 1.6s var(--ease) forwards; }
.hero-sub .line { animation-delay: .7s; }
@keyframes lineUp { to { opacity: 1; transform: none; } }

.scroll-cue {
  /* 中央下だとKV焼き込みロゴのタグライン文字と重なるため、右下の余白へ */
  position: absolute; z-index: 2;
  right: clamp(20px, 5vw, 64px); bottom: clamp(28px, 5vh, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.scroll-cue-label { font-family: var(--serif); font-size: 12px; letter-spacing: .35em; color: #5d5648; writing-mode: vertical-rl; }
.scroll-cue-line { width: 1px; height: 72px; background: var(--gold); transform-origin: top; animation: cueGrow 2.4s var(--ease) infinite; }
@keyframes cueGrow { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 3. why now ---------- */
.whynow { background: var(--sumi); color: var(--washi); padding: clamp(120px, 16vw, 240px) 0; overflow: hidden; }
.whynow-bg {
  position: absolute; inset: 0;
  background: url("../assets/grass-dark.jpg") center / cover no-repeat;
  opacity: .55;
}
.whynow .container { position: relative; z-index: 2; }

/* ---------- 4. method ---------- */
.method-track { position: relative; margin-top: clamp(24px, 4vw, 48px); }
.method-line {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(183, 156, 74, .22);
}
.method-line span { display: block; width: 100%; height: 0; background: var(--gold); transition: height .2s linear; }
.method-steps { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); }
.method-step { width: min(400px, 42%); position: relative; }
.method-step:nth-child(odd) { align-self: flex-start; text-align: right; }
.method-step:nth-child(even) { align-self: flex-end; }
.method-num { font-family: var(--garamond); font-size: 13px; letter-spacing: .4em; color: var(--gold); }
.method-kanji { font-family: var(--serif); font-weight: 200; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: .3em; margin: 10px 0 4px; }
.method-en { font-family: var(--garamond); font-style: italic; font-weight: 300; font-size: 16px; color: var(--silver); letter-spacing: .18em; margin-bottom: 16px; }
.method-text { font-size: 13.5px; color: #5d574c; }

/* ---------- 5. ingredients ---------- */
.yin-yang {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 48px);
}
.ingredient-tag { font-size: 12px; letter-spacing: .35em; color: var(--gold); margin-bottom: 18px; }
.ingredient-name { font-family: var(--serif); font-weight: 200; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .2em; margin-bottom: 20px; }
.ingredient-name .ruby { font-size: 12px; color: var(--silver); margin-left: 1em; letter-spacing: .3em; }
.ingredient-text { font-size: 14px; color: #5d574c; }
.ingredient:last-of-type { text-align: right; }
.ingredient-symbol { width: clamp(120px, 16vw, 200px); }
.ingredient-symbol .symbol-mark { display: block; width: 100%; height: auto; }
.ingredient-note {
  margin-top: clamp(56px, 8vw, 88px);
  text-align: center;
  font-family: var(--serif); font-weight: 300;
  letter-spacing: .18em; font-size: 15px; color: #5d574c;
}

/* ---------- 6. products ---------- */
.product-main {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 48px);
}
.product-photo { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.product-photo img { display: block; width: 100%; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.product-name { font-family: var(--serif); font-weight: 200; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: .28em; }
.product-en { font-family: var(--garamond); font-size: 13px; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin: 12px 0 28px; }
.product-text { font-size: 14px; color: rgba(245, 240, 232, .82); margin-bottom: 40px; max-width: 26em; }

.product-coming { margin-top: clamp(88px, 12vw, 140px); border-top: 1px solid rgba(245, 240, 232, .12); padding-top: clamp(48px, 6vw, 72px); }
.coming-label { font-family: var(--serif); letter-spacing: .3em; font-size: 15px; color: var(--gold); margin-bottom: 40px; }
.coming-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.coming-list li { border-left: 1px solid rgba(245, 240, 232, .18); padding-left: 20px; }
.coming-name { display: block; font-family: var(--serif); font-weight: 200; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: .24em; color: rgba(245, 240, 232, .6); }
.coming-en { display: block; font-family: var(--garamond); font-size: 12px; letter-spacing: .22em; color: rgba(166, 165, 171, .55); margin-top: 8px; }
.coming-note { margin-top: 40px; font-size: 12px; letter-spacing: .2em; color: rgba(166, 165, 171, .7); }

/* ---------- 7. founder ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.founder-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--gold-soft);
  background: var(--washi-deep);
}
.founder-sign { margin-top: 40px; font-family: var(--serif); font-weight: 300; font-size: 18px; letter-spacing: .35em; }
.founder-sign span { display: block; font-family: var(--garamond); font-size: 11px; letter-spacing: .4em; color: var(--gold); margin-top: 8px; text-transform: uppercase; }

/* ---------- 8. journal ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 4vw, 48px); }
.journal-card {
  background: var(--washi);
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(183, 156, 74, .18);
  transition: border-color .6s var(--ease), transform .6s var(--ease);
}
.journal-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.journal-cat { font-size: 11px; letter-spacing: .3em; color: var(--gold); margin-bottom: 18px; }
.journal-card h3 { font-family: var(--serif); font-weight: 300; font-size: 16px; letter-spacing: .08em; line-height: 1.9; margin-bottom: 14px; white-space: nowrap; }
.journal-lead { font-size: 13px; color: #6b6559; }
.journal-more { margin-top: 48px; text-align: center; font-size: 12px; letter-spacing: .2em; color: var(--silver); }

/* ---------- 9. retreat ---------- */
.retreat { min-height: 88svh; display: flex; align-items: center; overflow: hidden; color: var(--washi); }
.retreat-bg { position: absolute; inset: 0; }
.retreat-bg img { width: 100%; height: 100%; object-fit: cover; }
.retreat-bg::after { content: ""; position: absolute; inset: 0; background: rgba(28, 24, 18, .45); }
.retreat-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: clamp(120px, 16vw, 200px) 24px; width: 100%; }
.retreat-text { margin-bottom: 48px; color: rgba(245, 240, 232, .85); font-size: 15px; }

/* ---------- footer ---------- */
.site-footer { background: var(--sumi); color: rgba(245, 240, 232, .75); padding: clamp(72px, 9vw, 120px) 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 80px); }
.footer-logo { width: min(240px, 60%); filter: brightness(1.1); }
.footer-tag { margin-top: 24px; font-family: var(--serif); font-weight: 300; font-size: 13px; letter-spacing: .3em; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-head { font-family: var(--garamond); font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-nav a { display: block; font-size: 13px; letter-spacing: .1em; margin-bottom: 12px; color: rgba(245, 240, 232, .6); transition: color .4s; }
.footer-nav a:hover { color: var(--gold); }
.footer-bottom { margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid rgba(245, 240, 232, .12); padding-top: 32px; }
.footer-company { font-size: 12px; letter-spacing: .08em; margin-bottom: 12px; }
.footer-legal { font-size: 11px; color: rgba(166, 165, 171, .65); margin-bottom: 20px; }
.footer-copy { font-family: var(--garamond); font-size: 11px; letter-spacing: .2em; color: rgba(166, 165, 171, .5); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- community ---------- */
.community-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(24px, 4vw, 48px); }
.community-grid.two-col { grid-template-columns: 1fr 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
.community-card {
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(183, 156, 74, .25);
  background: var(--washi);
  transition: border-color .6s var(--ease), transform .6s var(--ease);
}
.community-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.community-card.main { border-color: var(--gold); background: linear-gradient(160deg, var(--washi), var(--washi-deep)); }
.community-name { font-family: var(--garamond); font-size: 18px; letter-spacing: .28em; margin-bottom: 16px; }
.community-card.main .community-name { color: var(--gold); }
.community-text { font-size: 13px; color: #6b6559; margin-bottom: 28px; }
.community-cta { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .header-nav { display: none; }
  /* モバイル：KVロゴの下端より下に横書きで配置 */
  .hero-inner { writing-mode: horizontal-tb; top: auto; left: 24px; right: 24px; bottom: 128px; text-align: center; }
  .hero-copy { font-size: 25px; letter-spacing: .16em; line-height: 1.7; }
  .hero-sub { margin: 12px 0 0; font-size: 13px; letter-spacing: .24em; }
  .scroll-cue-label { display: none; }
  .header-logo { gap: 12px; }
  .header-logo img { height: 36px; }
  .method-line { left: 8px; }
  .method-step { width: auto; padding-left: 40px; }
  .method-step:nth-child(odd) { align-self: stretch; text-align: left; }
  .method-step:nth-child(even) { align-self: stretch; }
  .yin-yang { grid-template-columns: 1fr; text-align: left; }
  .ingredient:last-of-type { text-align: left; }
  .ingredient-symbol { margin: 0 auto; order: -1; }
  .product-main { grid-template-columns: 1fr; }
  .coming-list { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 320px; }
  .journal-grid { grid-template-columns: 1fr; }
  .community-grid, .community-grid.two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .sp { display: block; }
}
@media (min-width: 861px) {
  .sp { display: none; }
}

/* ---------- legal pages ---------- */
.legal-main { padding: clamp(140px, 18vw, 200px) 0 clamp(96px, 12vw, 160px); }
.legal-updated { font-size: 12px; letter-spacing: .12em; color: var(--silver); margin-bottom: clamp(56px, 8vw, 88px); }
.legal-intro p { margin-bottom: 1.8em; max-width: 42em; font-size: 14px; color: #5d574c; }
.legal-subheading {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .16em;
  margin: clamp(72px, 9vw, 110px) 0 clamp(24px, 4vw, 32px);
}
.legal-doc { margin-top: clamp(56px, 8vw, 88px); border-top: 1px solid rgba(183, 156, 74, .18); }
.legal-item { padding: clamp(28px, 4vw, 40px) 0; border-bottom: 1px solid rgba(183, 156, 74, .18); }
.legal-item-title { font-family: var(--serif); font-weight: 300; font-size: 15px; letter-spacing: .22em; color: var(--gold); margin-bottom: 16px; }
.legal-item-body p { font-size: 13.5px; color: #5d574c; margin-bottom: 1em; max-width: 42em; }
.legal-item-body p:last-child { margin-bottom: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(183, 156, 74, .12); vertical-align: top; color: #5d574c; }
.legal-table th { width: 30%; font-family: var(--serif); font-weight: 300; letter-spacing: .08em; color: var(--charcoal); }
.legal-back { margin-top: clamp(64px, 8vw, 96px); }

@media (max-width: 860px) {
  .legal-table th { width: 40%; }
}

/* ---------- faq ---------- */
.faq-toc {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin: clamp(40px, 6vw, 56px) 0 clamp(56px, 8vw, 88px);
  padding: clamp(20px, 3vw, 28px) clamp(24px, 3vw, 32px);
  border: 1px solid rgba(183, 156, 74, .2);
  background: var(--washi-deep);
}
.faq-toc a {
  font-size: 12.5px; letter-spacing: .08em; color: #5d574c;
  border-bottom: 1px solid rgba(183, 156, 74, .35);
  padding-bottom: 2px; transition: color .4s, border-color .4s;
}
.faq-toc a:hover { color: var(--gold); border-color: var(--gold); }

.faq-category { margin-top: clamp(64px, 8vw, 96px); }
.faq-category:first-of-type { margin-top: 0; }
.faq-category-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .18em;
  color: var(--gold);
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(183, 156, 74, .3);
}

.faq-item { border-bottom: 1px solid rgba(183, 156, 74, .18); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  list-style: none; cursor: pointer;
  padding: clamp(18px, 2.6vw, 24px) 0;
  font-family: var(--serif); font-weight: 300;
  font-size: 14.5px; letter-spacing: .04em; line-height: 1.7;
  color: var(--charcoal);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-q-mark { color: var(--gold); font-family: var(--garamond); margin-right: .6em; }
.faq-toggle {
  flex: none; font-family: var(--garamond); font-size: 20px; color: var(--gold);
  transition: transform .4s var(--ease);
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-answer { margin: 0 0 clamp(20px, 3vw, 28px); font-size: 13.5px; color: #5d574c; max-width: 42em; }
.faq-answer p { margin-bottom: 1em; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- contact ---------- */
.contact-email {
  margin: clamp(48px, 7vw, 72px) 0 clamp(56px, 8vw, 88px);
  padding: clamp(24px, 3.4vw, 36px) clamp(28px, 4vw, 40px);
  border: 1px solid rgba(183, 156, 74, .25);
  background: var(--washi-deep);
}
.contact-email-label { font-size: 12px; letter-spacing: .3em; color: var(--gold); margin-bottom: 12px; }
.contact-email-address {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .06em;
}
.contact-email-note { margin-top: 12px; font-size: 12.5px; color: #6b6559; }

.contact-form { margin-top: clamp(24px, 3vw, 32px); max-width: 640px; }
.form-field { margin-bottom: clamp(28px, 4vw, 36px); }
.form-field label {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: 13px; letter-spacing: .1em; color: var(--charcoal); margin-bottom: 10px;
}
.form-required { color: var(--gold); margin-left: .5em; font-size: 11px; letter-spacing: 0; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(183, 156, 74, .35);
  padding: 10px 2px; font-family: var(--sans); font-weight: 300; font-size: 14px;
  color: var(--charcoal); line-height: 1.6; letter-spacing: .03em;
  transition: border-color .4s var(--ease);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 6px top 55%, right 0 top 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-submit-row { margin-top: clamp(16px, 3vw, 24px); display: flex; align-items: center; gap: 20px; }
.form-submit {
  font-family: var(--serif); font-size: 14px; letter-spacing: .3em;
  padding: 18px 52px; color: var(--washi); background: var(--charcoal); border: none; cursor: pointer;
  transition: background .5s var(--ease), letter-spacing .5s var(--ease);
}
.form-submit:hover { background: var(--gold); letter-spacing: .38em; }
.form-submit:disabled { opacity: .5; cursor: not-allowed; }
.form-status { font-size: 13px; letter-spacing: .04em; }
.form-status.success { color: var(--gold); }
.form-status.error { color: #a5514a; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg img, .hero .line, .scroll-cue-line { animation: none; }
  .hero .line { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}