/* ============================================================
   YAME TEA — Landing Page Styles  (v2 "Kiwami" dark edition)
   Cinematic luxury direction built around the product tin:
   near-black ink greens, antique gold accents, ivory type,
   oversized editorial serif, hairline rules, film grain,
   slow motion. 静けさと緊張感。
   ============================================================ */

:root {
  --black: #0b0f0c;      /* footer, deepest */
  --pine-900: #10150f;   /* darkest sections, scrolled header */
  --pine: #141a14;       /* dark section base */
  --pine-soft: #1d241c;
  --paper: #ece8db;      /* warm paper — light punctuation */
  --paper-alt: #e4dfcf;
  --white: #f1ede1;
  --ink: #16190f;        /* text on paper */
  --ink-soft: #6d6f5e;
  --ivory: #f2efe4;
  --gold: #c0a266;
  --gold-bright: #d4b878;
  --line: rgba(22, 25, 15, 0.15);
  --line-dark: rgba(242, 239, 228, 0.14);
  --line-gold: rgba(192, 162, 102, 0.4);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Jost", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ivory);
  background: var(--pine-900);
  line-height: 1.95;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* film grain over everything */
body::after {
  content: "";
  position: fixed; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 2000;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 56px; }

.jp { font-family: var(--jp); }

h1, h2 { font-family: var(--serif); font-weight: 300; letter-spacing: 0.005em; }
h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1.08; margin-bottom: 32px; }
h2 em, h1 em { font-style: italic; font-weight: 300; color: var(--gold-bright); }

.lead { font-size: 1.02rem; line-height: 2.1; }

/* ---------- Labels: gold small caps + hairline ---------- */
.label {
  display: flex; align-items: center; gap: 18px;
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
  margin-bottom: 34px;
}
.label::after { content: ""; width: 56px; height: 1px; background: var(--line-gold); }
.label .jp { letter-spacing: 0.3em; font-size: 10px; color: var(--gold); opacity: .85; }
.label.on-dark, .label.on-dark .jp { color: var(--gold); }
.label.on-dark::after { background: var(--line-gold); }
.label.center { justify-content: center; }
/* stronger gold on light paper for AA contrast */
.split.origin .label, .split.origin .label .jp,
.teas .label, .teas .label .jp { color: #8a6f35; }
.teas .card-label { color: #8a6f35; }

.card-label {
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 17px 44px;
  background: transparent;
  border: 1px solid;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.btn.light { color: var(--ivory); border-color: rgba(242,239,228,.4); }
.btn.light:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn.dark { color: var(--ink); border-color: rgba(22,25,15,.45); }
.btn.dark:hover { background: var(--ink); border-color: var(--ink); color: var(--gold-bright); }
.btn.sm { padding: 12px 26px; font-size: 10px; }
.btn.gold {
  background: var(--gold); border-color: var(--gold); color: var(--black);
  font-weight: 400;
}
.btn.gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--black); }

.textlink {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,239,228,.85);
  display: inline-flex; align-items: center; gap: 14px;
  transition: color .3s ease;
}
.textlink::after { content: ""; width: 40px; height: 1px; background: var(--gold-soft, rgba(192,162,102,.55)); transition: width .35s ease; }
.textlink:hover { color: var(--gold-bright); }
.textlink:hover::after { width: 64px; }

.viewmore, .viewall {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 2px;
  transition: color .3s ease;
}
.viewmore::after, .viewall::after { content: ""; width: 40px; height: 1px; background: rgba(192,162,102,.7); transition: width .35s ease; }
.viewmore:hover, .viewall:hover { color: #8a6f35; }
.viewmore:hover::after, .viewall:hover::after { width: 64px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s ease, padding .4s ease, backdrop-filter .4s ease;
  padding: 26px 0;
}
.site-header.scrolled {
  background: rgba(11, 15, 12, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(192,162,102,.14);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ivory); }
.brand .crest {
  width: 44px; height: 44px; border: 1px solid var(--line-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: var(--gold-bright);
  transition: background .35s ease, color .35s ease;
}
.brand:hover .crest { background: var(--gold); color: var(--black); }
.brand .mark { font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 0.46em; }
.nav { display: flex; align-items: center; gap: 56px; }
.nav a {
  position: relative;
  color: var(--ivory); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  opacity: .85; font-weight: 400; padding-bottom: 6px;
  transition: opacity .3s ease, color .3s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .35s ease;
}
.nav a:hover { opacity: 1; color: var(--gold-bright); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 28px; }
.lang-switch { display: flex; align-items: center; gap: 10px; color: rgba(242,239,228,.4); }
.lang-switch .sep { font-size: 11px; }
.lang-switch button {
  appearance: none; background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: 0.24em;
  color: rgba(242,239,228,.45);
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.lang-switch button.jp { font-family: var(--jp); letter-spacing: 0.14em; }
.lang-switch button:hover { color: var(--gold-bright); }
.lang-switch button[aria-pressed="true"] { color: var(--ivory); border-bottom-color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 0;
  min-height: clamp(560px, 78vh, 760px);
  display: flex; align-items: center;
  color: var(--ivory); overflow: hidden;
}
.hero-bg {
  position: absolute; top: 0; bottom: 0; right: 0; left: 45%;
  background: url("assets/generated/hero-tea-harvest.webp") center / cover no-repeat;
  animation: heroDrift 30s ease-in-out infinite alternate;
  transform-origin: left center;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1.0); }
  to { transform: scale(1.08); }
}
.hero-overlay {
  position: absolute; top: 0; bottom: 0; right: 0; left: 45%;
  background:
    linear-gradient(90deg, #10150f 0%, rgba(16,21,15,.45) 10%, rgba(16,21,15,0) 26%),
    linear-gradient(180deg, rgba(11,15,12,.25) 0%, rgba(11,15,12,0) 35%, rgba(11,15,12,.35) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: max(360px, calc(45vw - 120px)); padding: 140px 0 90px; }
.hero h1 {
  font-size: clamp(2.4rem, 3.9vw, 4.1rem); line-height: 1.08;
  margin-bottom: 34px;
  animation: riseIn 1.1s cubic-bezier(.19,1,.22,1) .15s both;
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--gold-bright); }
.hero-jp-sub {
  font-size: 12px; letter-spacing: 0.52em; margin-bottom: 30px;
  color: var(--gold-bright); text-transform: uppercase;
  animation: riseIn 1.1s cubic-bezier(.19,1,.22,1) .35s both;
}
.hero-sub {
  max-width: 480px; color: rgba(242,239,228,.82); line-height: 2.1; margin-bottom: 54px;
  animation: riseIn 1.1s cubic-bezier(.19,1,.22,1) .5s both;
}
.hero-cta {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  animation: riseIn 1.1s cubic-bezier(.19,1,.22,1) .65s both;
}
.hero-jp {
  position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 13px; letter-spacing: 0.66em; color: rgba(242,239,228,.55); z-index: 2;
  animation: fadeIn 2s ease 1.1s both;
}
.scroll-hint {
  position: absolute; bottom: 44px; left: 56px; z-index: 2;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,239,228,.55);
  display: inline-flex; align-items: center; gap: 16px;
  animation: fadeIn 2s ease 1.3s both;
}
.scroll-hint::before { content: ""; width: 48px; height: 1px; background: var(--line-gold); }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.reveal.in { opacity: 1; transform: none; }
.ritual-grid > .reveal:nth-child(2), .proof-grid > .reveal:nth-child(2) { transition-delay: .12s; }
.ritual-grid > .reveal:nth-child(3), .proof-grid > .reveal:nth-child(3) { transition-delay: .24s; }
.brew > .reveal:nth-child(2) { transition-delay: .12s; }
.brew > .reveal:nth-child(3) { transition-delay: .24s; }

/* ---------- Section base ---------- */
section { padding: 150px 0; }
.section-head { max-width: 680px; margin-bottom: 90px; }

/* ---------- Ritual (dark) ---------- */
.ritual { background: var(--pine-900); color: var(--ivory); }
.ritual h2 { color: var(--ivory); }
.ritual .lead { color: rgba(242,239,228,.62); }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; }
.ritual-card { border-top: 1px solid var(--line-dark); padding-top: 34px; position: relative; }
.ritual-card::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 48px; height: 1px; background: var(--gold);
}
.ritual-card h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 16px; color: var(--ivory); }
.ritual-card p { color: rgba(242,239,228,.55); font-size: .95rem; }

/* ---------- Origin (paper split) ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; padding: 0; }
.split.origin { background: var(--paper); color: var(--ink); }
.split-copy { position: relative; display: flex; align-items: center; overflow: hidden; }
.split-copy-inner { position: relative; z-index: 2; padding: 150px 100px; }
.split.origin p, .split.origin .lead { color: #50533f; }
.split.origin h2 { color: var(--ink); }
.watermark {
  position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: clamp(160px, 22vw, 300px); line-height: 1; color: rgba(22,25,15,.05);
  user-select: none; z-index: 1; white-space: nowrap;
}
.split-copy p + p { margin-top: 22px; }
.split-copy .lead { margin-bottom: 0; }
.split-media { position: relative; min-height: 700px; background: var(--paper-alt); overflow: hidden; }
.split-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.split-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,12,0) 45%, rgba(11,15,12,.62) 100%);
}
.specs {
  position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--line-gold);
  display: flex; flex-direction: column; gap: 34px; z-index: 2;
}
.specs dt {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 7px;
}
.specs dt .jp { margin-left: 10px; letter-spacing: 0.2em; }
.specs dd { margin: 0; font-size: 15px; letter-spacing: 0.18em; color: var(--ivory); }

/* ---------- Why Yame (proof, near-black) ---------- */
.why { background: var(--pine); color: var(--ivory); }
.why h2 { color: var(--ivory); }
.why .lead { color: rgba(242,239,228,.6); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); }
.proof-card { padding: 64px 48px 8px; border-left: 1px solid rgba(242,239,228,.1); }
.proof-card:first-child { border-left: none; padding-left: 0; }
.proof-card .big {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.6rem, 5.5vw, 5.2rem); line-height: 1; margin-bottom: 26px;
  color: var(--gold-bright);
}
.proof-card .big .unit { font-size: 1.4rem; margin-left: 10px; letter-spacing: .1em; color: var(--gold); }
.proof-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 16px; color: var(--ivory); }
.proof-card p { color: rgba(242,239,228,.52); font-size: .93rem; }

/* ---------- Our Teas (paper) ---------- */
.teas { background: var(--white); color: var(--ink); }
.teas h2 { color: var(--ink); }
.teas .lead { color: #50533f; }
.teas-intro > p { color: #50533f; }
.teas-layout { display: grid; grid-template-columns: 0.85fr 2fr; gap: 96px; align-items: start; }
.teas-layout > * { min-width: 0; }
.tea-cards .tea-card { min-width: 0; max-width: 100%; }
.teas-intro { position: sticky; top: 140px; }
.teas-intro .lead.jp { font-size: .95rem; letter-spacing: 0.1em; line-height: 2.2; margin-bottom: 20px; }
.teas-intro p { margin-bottom: 20px; }
.teas-intro .viewall { margin-top: 18px; }
.tea-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.tea-cards.single { grid-template-columns: 1fr; }

/* ---------- Product slider ---------- */
.product-slider { margin-bottom: 30px; }
.slider-track {
  display: flex; gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .slide {
  flex: 0 0 auto;
  width: min(500px, 58vh);
  margin: 0;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--paper-alt);
  display: flex; align-items: center; justify-content: center;
}
.slider-track .slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-track .slide.cutout img { object-fit: contain; padding: 44px; }
.slider-ui {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 26px;
}
.slider-count {
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; letter-spacing: 0.14em; color: #8a6f35;
}
.slider-count .slash { margin: 0 9px; opacity: .45; }
.slider-arrows { display: flex; gap: 14px; }
.slider-arrows button {
  appearance: none; cursor: pointer; background: transparent;
  width: 54px; height: 54px;
  border: 1px solid rgba(22, 25, 15, 0.3); border-radius: 50%;
  color: var(--ink); font-size: 19px; font-family: var(--sans); font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .35s ease, color .35s ease, border-color .35s ease, opacity .35s ease;
}
.slider-arrows button:hover {
  background: var(--ink); border-color: var(--ink); color: var(--gold-bright);
}
.slider-arrows button:disabled { opacity: .25; pointer-events: none; }
.tea-card figure {
  margin: 0 0 26px; background: var(--paper-alt); aspect-ratio: 4 / 5; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tea-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.tea-card:hover figure img { transform: scale(1.045); }
.tea-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 8px; color: var(--ink); }
.tea-card h3 .jp { font-size: 1.05rem; margin-left: 12px; letter-spacing: .2em; }
.tea-card .spec { font-size: .85rem; color: #7c7f6a; letter-spacing: .1em; margin-bottom: 22px; }
.buy-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.buy-row .price {
  font-family: var(--serif); font-weight: 400;
  font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: .02em;
}
.buy-row .btn.gold { padding: 16px 40px; }
.kit-row {
  margin-top: 100px; padding-top: 48px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.kit-row h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin-bottom: 10px; color: var(--ink); }
.kit-row p { color: #50533f; font-size: .95rem; }
.kit-row .spec { color: var(--ink); margin-left: 10px; letter-spacing: .06em; }

/* ---------- Beyond Matcha (near-black) ---------- */
.beyond { background: var(--pine-900); color: var(--ivory); }
.beyond h2 { color: var(--ivory); }
.beyond .lead { color: rgba(242,239,228,.66); margin-bottom: 48px; }
.beyond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.brew { border-top: 1px solid var(--line-dark); }
.brew-step { display: grid; grid-template-columns: auto 1fr; gap: 30px; padding: 32px 0; border-bottom: 1px solid rgba(242,239,228,.1); }
.brew-step .n { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; color: var(--gold); }
.brew-step h4 { margin: 0 0 8px; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--ivory); }
.brew-step p { color: rgba(242,239,228,.55); font-size: .93rem; }
.soon {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--line-gold);
  padding: 15px 32px;
  white-space: nowrap;
}
.kit-row .soon { color: #8a6f35; border-color: rgba(138, 111, 53, 0.45); }

/* ---------- Nothing Hidden ---------- */
.hidden-sec {
  position: relative; color: var(--ivory); text-align: center; padding: 180px 0;
  background: var(--pine-900);
  overflow: hidden;
}
.hidden-sec::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/generated/yame-tea-fields.webp") center / cover no-repeat;
  animation: kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}
.hidden-sec::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,12,.78), rgba(11,15,12,.55) 50%, rgba(11,15,12,.8));
}
.hidden-sec .wrap { position: relative; z-index: 2; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.16) translateY(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .hidden-sec::before, .hero-bg { animation: none; }
  .hero h1, .hero-jp-sub, .hero-sub, .hero-cta, .hero-jp, .scroll-hint { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
.hidden-sec .inner { max-width: 640px; margin: 0 auto; }
.hidden-sec h2 { color: var(--ivory); }
.hidden-sec p { color: rgba(242,239,228,.78); }
.hidden-sec .label { justify-content: center; }

/* ---------- Final CTA (dark) ---------- */
.final { background: var(--pine); color: var(--ivory); text-align: center; position: relative; }
.final::before {
  content: "八"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--jp);
  font-size: clamp(300px, 40vw, 560px); line-height: 1;
  color: rgba(242,239,228,.025);
  pointer-events: none; user-select: none;
}
.final .wrap { position: relative; z-index: 2; }
.final h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--ivory); }
.final-sub { color: rgba(242,239,228,.6); max-width: 500px; margin: 0 auto 52px; }
.final-cta { display: flex; gap: 44px; justify-content: center; align-items: center; flex-wrap: wrap; }
.final-cta .btn.dark { color: var(--ivory); border-color: rgba(242,239,228,.4); }
.final-cta .btn.dark:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.final-cta .viewmore { color: rgba(242,239,228,.8); }
.final-cta .viewmore:hover { color: var(--gold-bright); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--ivory); padding: 96px 0 48px; }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 56px; flex-wrap: wrap;
  padding-bottom: 60px; border-bottom: 1px solid rgba(242,239,228,.1);
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .crest {
  width: 48px; height: 48px; border: 1px solid var(--line-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--gold-bright);
}
.footer-brand .mark { font-size: 11px; letter-spacing: 0.46em; }
.footer-brand p { color: rgba(242,239,228,.42); font-size: .85rem; max-width: 260px; margin-top: 8px; }
.footer-nav { display: flex; gap: 80px; flex-wrap: wrap; }
.footer-col h5 {
  font-size: 10px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 20px; font-weight: 400;
}
.footer-col a { display: block; color: rgba(242,239,228,.68); font-size: .88rem; padding: 6px 0; letter-spacing: .08em; transition: color .3s ease; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 32px; font-size: .78rem; color: rgba(242,239,228,.3);
}
.footer-bottom .origin { letter-spacing: .26em; color: rgba(192,162,102,.5); }

/* ---------- Japanese-language typography ---------- */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] .proof-card h3,
html[lang="ja"] .kit-row h3 {
  font-family: var(--jp);
  font-weight: 400;
  letter-spacing: 0.06em;
}
html[lang="ja"] h2 { line-height: 1.5; font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
html[lang="ja"] .hero h1 {
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.45;
}
html[lang="ja"] .hero h1 em { font-style: normal; }
html[lang="ja"] .hero-jp-sub { font-family: var(--sans); font-size: 11px; letter-spacing: 0.42em; }
html[lang="ja"] .proof-card h3 { font-size: 1.25rem; }
html[lang="ja"] .teas-intro h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
html[lang="ja"] .kit-row h3 { font-size: 1.35rem; }
html[lang="ja"] .final h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
html[lang="ja"] .brew-step h4 { letter-spacing: 0.2em; }
html[lang="ja"] body,
html[lang="ja"] .lead,
html[lang="ja"] p { line-height: 2.05; }
html[lang="ja"] .btn, html[lang="ja"] .textlink,
html[lang="ja"] .viewmore, html[lang="ja"] .viewall,
html[lang="ja"] .nav a { letter-spacing: 0.22em; }
html[lang="ja"] .proof-card .big .unit { font-family: var(--jp); font-size: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .wrap { padding: 0 28px; }
  section { padding: 100px 0; }
  .nav { display: none; }
  .header-inner { padding: 0 28px; }
  .hero-jp { display: none; }
  .hero-bg { left: 0; background-position: 66% center; }
  .hero-overlay {
    left: 0;
    background:
      linear-gradient(180deg, rgba(11,15,12,.55) 0%, rgba(11,15,12,.2) 40%, rgba(11,15,12,.72) 100%),
      linear-gradient(95deg, rgba(11,15,12,.7) 0%, rgba(11,15,12,.35) 55%, rgba(11,15,12,.1) 100%);
  }
  .scroll-hint { left: 28px; }
  .hero-content { max-width: none; padding: 150px 0 110px; }
  .hero h1 { font-size: clamp(2.5rem, 9.5vw, 3.8rem); }
  .ritual-grid { grid-template-columns: 1fr; gap: 44px; }
  .section-head { margin-bottom: 60px; }
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 460px; order: -1; }
  .specs { right: 28px; gap: 20px; }
  .split-copy-inner { padding: 84px 28px; }
  .watermark { left: -10px; font-size: 180px; }
  .proof-grid { grid-template-columns: 1fr; border-top: none; }
  .proof-card { border-left: none; border-top: 1px solid var(--line-dark); padding: 44px 0 8px; }
  .teas-layout { grid-template-columns: 1fr; gap: 60px; }
  .teas-intro { position: static; }
  .tea-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .beyond-grid { grid-template-columns: 1fr; gap: 60px; }
  .kit-row { margin-top: 68px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .tea-cards { grid-template-columns: 1fr; }
  .slider-track { gap: 16px; }
  .slider-track .slide { width: 86%; }
  .slider-track .slide.cutout img { padding: 32px; }
  .slider-arrows button { width: 46px; height: 46px; font-size: 17px; }
  .hero-cta { gap: 22px; }
  .hero-cta .btn, .final-cta .btn { width: 100%; text-align: center; }
  .final-cta { gap: 26px; }
  .footer-nav { gap: 44px; }
  .specs { position: static; transform: none; padding: 26px 28px; border-left: none; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 24px; background: var(--paper); }
  .specs dt { color: #8a6f35; }
  .specs dd { color: var(--ink); }
  .split-media { display: flex; flex-direction: column; min-height: 0; }
  .split-media img { position: static; width: 100%; aspect-ratio: 1 / 1; height: auto; }
  .split-media::after { display: none; }
}