@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+JP:wght@400;600;700&display=swap");

:root {
  --ink: #0d1714;
  --green: #132720;
  --green-2: #1b342a;
  --wine: #4c2224;
  --gold: #b99a5c;
  --gold-bright: #dac182;
  --ivory: #f1eadc;
  --paper: #e5dbc8;
  --muted: #a9a18f;
  --line: rgba(208, 181, 120, 0.26);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 78% 7%, rgba(134, 90, 50, 0.17), transparent 23rem),
    linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 9px 9px,
    var(--ink);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  line-height: 1.8;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--ivory); color: var(--ink); padding: .65rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
  border-bottom: 1px solid var(--line);
  background: rgba(12, 24, 20, .88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; letter-spacing: .12em; }
.brand-mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(218,193,130,.72); color: var(--gold-bright); background: linear-gradient(145deg, rgba(218,193,130,.12), rgba(13,23,20,.3)); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 5px rgba(218,193,130,.22); transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--gold); background: var(--ink); }
.brand-mark::before { left: -3px; top: -3px; }
.brand-mark::after { right: -3px; bottom: -3px; }
.brand-mark > span { display: block; transform: rotate(-45deg); font: 600 1.15rem/1 "Cormorant Garamond", serif; letter-spacing: 0; }
.brand strong { display: block; font: 600 1.18rem/1 "Cormorant Garamond", serif; }
.brand small { display: block; margin-top: .4rem; color: var(--muted); font: .52rem/1 sans-serif; }
.site-header nav { display: flex; align-items: center; gap: 2rem; font-size: .76rem; letter-spacing: .08em; }
.site-header nav a { text-decoration: none; color: #d8d0c0; }
.nav-cta, .quiet-button, .back-button { border: 1px solid var(--line); color: var(--ivory); background: transparent; padding: .65rem 1rem; }
.nav-cta:hover, .quiet-button:hover, .back-button:hover { border-color: var(--gold); color: var(--gold-bright); }

.hero { min-height: calc(100vh - 76px); display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: 1500px; margin: auto; padding: 5rem clamp(1.5rem, 5vw, 5rem); overflow: hidden; }
.eyebrow { margin: 0 0 1rem; color: var(--gold); font: 600 .68rem/1.4 sans-serif; letter-spacing: .28em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 2rem; font-size: clamp(3rem, 5vw, 5.25rem); line-height: 1.24; letter-spacing: -.06em; font-weight: 500; }
h1 em { color: var(--gold-bright); font-style: normal; }
.hero-title-line { display: block; white-space: nowrap; }
.hero-lead { max-width: 34rem; color: #c6bdaa; font-size: 1rem; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin: 2.2rem 0 3rem; }
.primary-button { position: relative; overflow: hidden; border: 1px solid #e5ce90; padding: 1rem 1.4rem; color: #17140f; background: linear-gradient(115deg, #ead99f 0%, #c8a860 48%, #9f773a 100%); box-shadow: 0 16px 38px rgba(182,143,77,.24), inset 0 1px rgba(255,255,255,.38); font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.primary-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform .55s ease; }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-3px); box-shadow: 0 21px 46px rgba(182,143,77,.34), inset 0 1px rgba(255,255,255,.42); }
.primary-button:hover::before { transform: translateX(120%); }
.primary-button:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.hero-actions small { color: var(--muted); font-size: .7rem; }
.trust-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 44rem; margin: 0; padding: 0; list-style: none; }
.trust-list li { padding-top: .9rem; border-top: 1px solid var(--line); color: #c9c1b3; font-size: .72rem; }
.trust-list span { color: var(--gold); margin-right: .5rem; }

.hero-illustration { position: relative; margin: 0 -5% 0 0; background: transparent; overflow: hidden; }
.hero-illustration::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 35px 0 55px var(--ink), inset 0 0 70px rgba(13,23,20,.45); }
.hero-illustration img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-illustration figcaption { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--line); color: #cfc5b4; font-size: .68rem; }
.hero-illustration figcaption b { color: var(--gold); }
.hero-simple ol { margin: 0; padding: 0; list-style: none; }
.hero-simple li { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.hero-simple li > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-bright); font: 600 1rem/1 "Cormorant Garamond", serif; }
.hero-simple strong { display: block; margin-bottom: .2rem; font-size: .92rem; }
.hero-simple li p { margin: 0; color: var(--muted); font-size: .7rem; }
.sample-flow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.5rem; padding: 1rem; color: #cfc5b4; background: #0b1713; font-size: .68rem; }
.sample-flow b { color: var(--gold); }
.sample-flow strong { color: var(--gold-bright); }
.halo { position: absolute; inset: 10% 5% 5%; border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 90px rgba(192, 145, 72, .08), 0 0 120px rgba(0,0,0,.3); }
.halo::before, .halo::after { content: ""; position: absolute; border: 1px solid rgba(198,165,100,.13); border-radius: inherit; inset: 10%; }
.halo::after { inset: 22%; }
.reference-bottle { position: absolute; z-index: 2; left: 50%; top: 46%; width: 240px; transform: translate(-50%, -50%); text-align: center; }
.bottle-shape { position: relative; width: 112px; height: 255px; margin: auto; display: grid; place-items: center; border: 1px solid #b99a5c; border-radius: 12px 12px 28px 28px; background: linear-gradient(90deg, #351b15, #72452a 46%, #2c1814); box-shadow: var(--shadow), inset 0 0 32px rgba(234,181,89,.15); }
.bottle-shape::before { content: ""; position: absolute; width: 48px; height: 55px; top: -51px; border: 1px solid var(--gold); border-bottom: 0; border-radius: 5px 5px 0 0; background: #221713; }
.bottle-shape::after { content: ""; position: absolute; inset: 85px 10px 76px; border: 1px solid rgba(237,216,166,.55); background: #ded3b9; }
.bottle-shape span { position: relative; z-index: 1; color: #442b20; font: 700 2.2rem/1 "Cormorant Garamond", serif; }
.reference-bottle p { margin: 1.2rem 0 .2rem; color: var(--muted); font-size: .68rem; }
.reference-bottle strong { color: var(--gold-bright); font: 600 1.1rem/1.2 "Cormorant Garamond", serif; letter-spacing: .08em; }
.gift-route { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border: 1px solid var(--line); background: rgba(12,24,20,.83); box-shadow: 0 14px 30px rgba(0,0,0,.22); font-size: .72rem; }
.gift-route i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 700 .8rem/1 "Cormorant Garamond", serif; }
.route-a { top: 17%; left: 1%; }
.route-b { top: 35%; right: -2%; }
.route-c { bottom: 18%; left: 3%; }
.visual-note { position: absolute; right: 3%; bottom: 5%; color: #736d60; font: .62rem/1 sans-serif; letter-spacing: .2em; }

.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: rgba(30,50,41,.35); }
.proof-strip p { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0; min-height: 120px; border-right: 1px solid var(--line); }
.proof-strip p:last-child { border: 0; }
.proof-strip strong { color: var(--gold-bright); font: 600 2.8rem/1 "Cormorant Garamond", serif; }
.proof-strip span { color: var(--muted); font-size: .72rem; }

.diagnosis-shell { position: relative; width: calc(100% - 3rem); max-width: 1240px; min-height: 520px; margin: 7rem auto; border: 1px solid var(--line); background: radial-gradient(circle at 80% 0%, rgba(142,94,50,.18), transparent 24rem), #101e19; box-shadow: var(--shadow); }
.diagnosis-shell::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(203,174,113,.09); }
.diagnosis-intro { display: block; width: 100%; max-width: none; margin: auto; padding: clamp(3rem, 5vw, 5rem); }
.diagnosis-intro h2 { width: 100%; margin-bottom: 2.5rem; font-size: clamp(3.1rem, 6.6vw, 7rem); line-height: 1.2; letter-spacing: -.055em; white-space: nowrap; }
.diagnosis-intro > p:not(.eyebrow) { max-width: 70rem; color: #bcb3a2; font-size: .95rem; }
.diagnosis-start-button { display: inline-flex; align-items: center; justify-content: space-between; width: min(100%, 330px); min-height: 72px; margin-top: 2.5rem; padding: .85rem .9rem .85rem 1.5rem; border-radius: 3px; font-size: 1rem; letter-spacing: .06em; }
.button-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin-left: 1.2rem; border: 1px solid rgba(23,20,15,.45); border-radius: 50%; color: #f1dfac; background: rgba(20,24,17,.82); font: 500 1.25rem/1 sans-serif; transition: transform .22s ease; }
.diagnosis-start-button:hover .button-arrow { transform: translateX(3px); }
.diagnosis-intro h2, .section-heading h2, .promise-section h2 { font-size: clamp(2.3rem, 4.6vw, 4.5rem); line-height: 1.25; font-weight: 500; }
.diagnosis-intro > p:not(.eyebrow) { color: #bcb3a2; }
.quiz, .result { position: relative; z-index: 2; padding: clamp(1.5rem, 5vw, 4rem); }
.quiz-topbar { display: grid; grid-template-columns: 150px 1fr 240px; align-items: center; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.quiz-topbar p { margin: 0; }
.quiz-topbar p span { display: block; color: var(--gold); font: .62rem/1 sans-serif; letter-spacing: .15em; }
.quiz-topbar p strong { display: block; margin-top: .5rem; font-size: .9rem; }
.progress-track { height: 2px; background: rgba(255,255,255,.08); }
.progress-track span { display: block; width: 20%; height: 100%; background: var(--gold); transition: width .25s ease; }
.selected-anchor { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: .85rem 1rem; border: 1px solid rgba(203,174,113,.22); background: rgba(185,154,92,.055); }
.selected-anchor span { color: var(--gold); font-size: .62rem; letter-spacing: .12em; }
.selected-anchor strong { color: var(--ivory); font-size: .84rem; }
.question { padding: 3.5rem 0 2rem; }
.question h3 { max-width: 780px; margin-bottom: .7rem; font-size: clamp(1.8rem, 3.7vw, 3.1rem); line-height: 1.35; font-weight: 500; }
.question > p { color: var(--muted); }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.option-button { min-height: 130px; padding: 1.3rem; text-align: left; border: 1px solid var(--line); color: var(--ivory); background: rgba(255,255,255,.018); }
.option-button:hover, .option-button:focus-visible { border-color: var(--gold); background: rgba(188,151,82,.08); outline: none; transform: translateY(-2px); }
.option-button strong { display: block; margin-bottom: .55rem; font-size: 1rem; }
.option-button small { color: var(--muted); line-height: 1.6; }
.bottle-options { grid-template-columns: repeat(4, 1fr); }
.bottle-options .option-button { min-height: 150px; }
.bottle-options .country { display: block; color: var(--gold); font: .58rem/1 sans-serif; letter-spacing: .15em; margin-bottom: .8rem; }
.search-row { margin-top: 2rem; }
.search-row input { width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); color: var(--ivory); background: #0b1612; outline: none; }
.search-row input:focus { border-color: var(--gold); }
.selection-guide { display: flex; align-items: center; gap: .9rem; min-height: 48px; margin: 1rem 0; color: var(--muted); font-size: .72rem; }
.selection-guide strong { color: var(--ivory); font-size: .9rem; }
.selection-guide span { color: var(--muted); }
.brand-back { padding: .55rem .8rem; border: 1px solid var(--line); color: var(--gold-bright); background: transparent; font-size: .7rem; }
.brand-back:hover, .brand-back:focus-visible { border-color: var(--gold); outline: none; }
.brand-option small { display: block; }
.quiz-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.quiz-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.quiz-footer p { margin: 0; color: #777266; font-size: .68rem; }

.result-heading { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.result-heading h2 { margin-bottom: .6rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.3; font-weight: 500; }
.result-heading > div > p:last-child { color: var(--muted); }
.result-actions { display: flex; align-items: flex-start; gap: .5rem; flex-shrink: 0; }
.result-actions-bottom { align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.recipient-card { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 0; color: #bfb6a6; font-size: .72rem; }
.recipient-card span { padding: .4rem .7rem; border: 1px solid rgba(203,174,113,.2); }
.preference-profile { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 4rem); margin: .5rem 0 2rem; padding: clamp(1.4rem, 3vw, 2.3rem); border: 1px solid rgba(218,193,130,.34); background: radial-gradient(circle at 92% 10%, rgba(185,154,92,.12), transparent 18rem), rgba(255,255,255,.018); box-shadow: inset 0 0 0 6px rgba(13,23,20,.42); }
.preference-profile-heading > span { display: block; margin-bottom: .75rem; color: var(--gold); font-size: .62rem; font-weight: 700; letter-spacing: .18em; }
.preference-profile-heading h3 { margin-bottom: .8rem; font-size: clamp(1.35rem, 2.4vw, 2.1rem); line-height: 1.45; font-weight: 600; }
.preference-profile-heading p { margin: 0; color: #8f8778; font-size: .68rem; }
.profile-point { padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(203,174,113,.16); }
.profile-point h4 { margin: 0 0 .45rem; color: var(--gold); font-size: .68rem; letter-spacing: .1em; }
.profile-point p { margin: 0; color: #ddd3c2; font-size: .86rem; line-height: 1.9; }
.preference-profile-body ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.preference-profile-body li { padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--gold-bright); background: rgba(185,154,92,.055); font-size: .68rem; }
.preference-profile-body small { color: #817a6d; font-size: .62rem; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 2rem; }
.price-results { margin-top: 3rem; }
.price-band-section { margin: 0 0 5rem; scroll-margin-top: 6rem; }
.price-band-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; padding: 0 0 1.2rem; border-bottom: 1px solid rgba(218,193,130,.42); }
.price-band-heading span { color: var(--gold); font: .6rem/1 sans-serif; letter-spacing: .16em; }
.price-band-heading h3 { margin: .55rem 0 0; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 500; }
.price-band-heading > p { margin: 0; color: var(--muted); text-align: right; font-size: .76rem; }
.result-card { position: relative; display: flex; flex-direction: column; min-height: 570px; padding: 1.5rem; border: 1px solid var(--line); background: rgba(255,255,255,.018); overflow: hidden; }
.result-card.featured { border-color: var(--gold); background: linear-gradient(145deg, rgba(184,145,78,.13), rgba(255,255,255,.015)); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.result-card.featured::before { content: "あなた向けの本命"; position: absolute; right: -43px; top: 25px; width: 170px; padding: .25rem 0; transform: rotate(45deg); text-align: center; color: #16140e; background: var(--gold-bright); font: 700 .55rem/1.3 sans-serif; }
.result-type { color: var(--gold); font: .62rem/1 sans-serif; letter-spacing: .16em; }
.result-lane { display: block; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.result-lane-badge { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 104px; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-bright); background: linear-gradient(135deg, rgba(218,193,130,.14), rgba(185,154,92,.04)); box-shadow: inset 0 0 0 3px rgba(13,23,20,.55); font-size: .9rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; writing-mode: horizontal-tb; }
.result-lane-title { margin: .85rem 0 0; color: #cfc5b4; text-align: left; font-size: .72rem; }
.result-card h3 { margin: 1.2rem 0 .5rem; font-size: 1.45rem; line-height: 1.4; }
.result-meta { color: var(--muted); font-size: .68rem; }
.price-guide { margin: .6rem 0 1rem; color: var(--gold-bright); font-size: .85rem; }
.feature-line { margin: .3rem 0 1.1rem; padding: .9rem 1rem; border-left: 2px solid var(--gold); background: rgba(185,154,92,.06); }
.feature-line span { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .58rem; letter-spacing: .1em; }
.feature-line strong { color: var(--ivory); font-size: .9rem; }
.selection-reason { min-height: 150px; margin-bottom: 1rem; padding: .9rem 1rem; border-left: 2px solid rgba(218,193,130,.62); background: rgba(185,154,92,.045); }
.selection-reason > span, .gift-note > span { display: block; margin-bottom: .45rem; color: var(--gold); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.selection-reason p { margin: 0; color: #cec4b3; font-size: .74rem; line-height: 1.85; }
.taste-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; }
.taste-tags li { padding: .25rem .55rem; border: 1px solid rgba(203,174,113,.2); color: #bfb5a3; font-size: .62rem; }
.gift-note { margin-top: auto; padding: 1rem 0 0; border-top: 1px solid rgba(218,193,130,.24); }
.gift-note p { margin: 0; color: var(--ivory); font-size: .74rem; line-height: 1.85; }
.shop-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: 1rem; }
.shop-links a { padding: .65rem .2rem; text-align: center; text-decoration: none; border: 1px solid var(--line); color: var(--ivory); font-size: .64rem; }
.shop-links a:hover { border-color: var(--gold); color: var(--gold-bright); }
.affiliate-note { margin: 1rem 0 0; color: #7f796d; font-size: .65rem; }
.relationship-section { margin-top: 6rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.relationship-heading { max-width: 760px; margin-bottom: 2rem; }
.relationship-heading h3 { margin: .5rem 0 .8rem; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.35; font-weight: 500; }
.relationship-heading > p:last-child { color: var(--muted); }
.relationship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.relationship-card { display: flex; flex-direction: column; min-height: 310px; padding: 1.5rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(185,154,92,.07), rgba(255,255,255,.012)); }
.relationship-card > span { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.relationship-card h4 { margin: .8rem 0; font-size: 1.25rem; line-height: 1.45; }
.relationship-card p { color: #c9c0b0; font-size: .76rem; line-height: 1.9; }
.relationship-card small { margin-top: auto; color: var(--muted); }

.how-section, .anchor-section { max-width: 1240px; margin: 10rem auto; padding: 0 1.5rem; }
.section-heading { max-width: 800px; margin-bottom: 4rem; }
.section-heading > p:last-child { color: var(--muted); }
.section-heading.compact { margin-bottom: 2.5rem; }
.direction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.direction-grid article { position: relative; min-height: 360px; padding: 2rem; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.025), transparent); }
.direction-no { position: absolute; right: 1.5rem; top: 1rem; color: #554f45; font: 2rem/1 "Cormorant Garamond", serif; }
.seal { display: inline-flex; align-items: center; justify-content: center; min-width: 108px; min-height: 48px; margin: 2.2rem 0 2.5rem; padding: .65rem 1.15rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-bright); background: linear-gradient(135deg, rgba(218,193,130,.15), rgba(185,154,92,.04)); box-shadow: inset 0 0 0 3px rgba(13,23,20,.5), 0 8px 24px rgba(0,0,0,.12); font: 700 .95rem/1 "Noto Serif JP", serif; letter-spacing: .16em; }
.direction-grid h3 { font-size: 1.45rem; }
.direction-grid p { color: #b4ab9b; font-size: .82rem; }
.direction-grid small { position: absolute; bottom: 1.8rem; color: var(--gold); font-size: .64rem; }

.anchor-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.anchor-item { min-height: 150px; padding: 1.4rem; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ivory); text-align: left; background: transparent; }
.anchor-item:hover { background: rgba(185,154,92,.06); }
.anchor-item span { display: block; color: var(--gold); font: .58rem/1 sans-serif; letter-spacing: .14em; }
.anchor-item strong { display: block; margin: .8rem 0 .4rem; font-size: .88rem; }
.anchor-item small { color: #777165; }

.promise-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding: 8rem max(1.5rem, calc((100vw - 1190px) / 2)); border-block: 1px solid var(--line); background: linear-gradient(130deg, #14251f, #111b17); }
.promise-copy { padding-top: 2rem; color: #bdb3a2; }
.promise-copy p { padding: 1rem 0; border-bottom: 1px solid var(--line); }

footer { padding: 4rem clamp(1.5rem, 7vw, 7rem); background: #080e0c; }
.footer-brand { display: flex; gap: 1rem; align-items: center; }
.footer-brand strong { font: 600 1.3rem/1 "Cormorant Garamond", serif; letter-spacing: .12em; }
.footer-brand p { margin: .4rem 0 0; color: var(--muted); font-size: .7rem; }
.responsible { max-width: 850px; margin: 3rem 0 1rem; color: #817c72; font-size: .65rem; }
.copyright { color: #5c5851; font: .58rem/1 sans-serif; letter-spacing: .1em; }

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

@media (max-width: 980px) {
  .site-header nav a { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .hero-illustration { width: 100%; max-width: 850px; margin: 0; }
  .hero-illustration::after { box-shadow: inset 0 25px 45px var(--ink), inset 0 0 60px rgba(13,23,20,.3); }
  .diagnosis-intro h2 { white-space: normal; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-strip p:nth-child(2) { border-right: 0; }
  .proof-strip p:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .quiz-topbar { grid-template-columns: 110px 1fr; }
  .progress-track { grid-column: 1 / -1; }
  .bottle-options { grid-template-columns: repeat(3, 1fr); }
  .result-grid { grid-template-columns: 1fr; }
  .price-band-heading { grid-template-columns: 1fr; gap: .7rem; }
  .price-band-heading > p { text-align: left; }
  .preference-profile { grid-template-columns: 1fr; }
  .result-card { min-height: 0; }
  .selection-reason { min-height: 0; }
  .direction-grid { grid-template-columns: 1fr; }
  .direction-grid article { min-height: 300px; }
  .anchor-list { grid-template-columns: repeat(3, 1fr); }
  .relationship-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header { min-height: 66px; padding-inline: 1rem; }
  .brand small { display: none; }
  .site-header nav { gap: .5rem; }
  .nav-cta { padding: .55rem .7rem; font-size: .68rem; }
  .hero { min-height: auto; padding: 4.5rem 1.25rem 3rem; }
  h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .trust-list { grid-template-columns: 1fr; }
  .hero-illustration { margin-inline: -1rem; width: calc(100% + 2rem); }
  .gift-route { font-size: .65rem; }
  .route-a { left: -3%; }
  .route-b { right: -4%; }
  .proof-strip p { min-height: 90px; gap: .6rem; }
  .proof-strip strong { font-size: 2rem; }
  .proof-strip span { max-width: 80px; line-height: 1.4; }
  .diagnosis-shell { width: calc(100% - 2rem); margin: 4rem auto; }
  .diagnosis-intro { padding: 4rem 1.5rem; }
  .quiz, .result { padding: 1.2rem; }
  .quiz-topbar { grid-template-columns: 90px 1fr; gap: 1rem; }
  .selected-anchor { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .selection-guide { align-items: flex-start; flex-direction: column; }
  .option-grid, .bottle-options { grid-template-columns: 1fr; }
  .option-button, .bottle-options .option-button { min-height: 105px; }
  .quiz-footer { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .quiz-actions { width: 100%; }
  .quiz-actions button { flex: 1 1 180px; }
  .result-heading { flex-direction: column; }
  .result-actions { flex-wrap: wrap; }
  .result-actions-bottom { width: 100%; }
  .result-actions-bottom button { flex: 1 1 180px; }
  .price-band-section { margin-bottom: 4rem; }
  .shop-links { grid-template-columns: 1fr; }
  .how-section, .anchor-section { margin: 7rem auto; }
  .anchor-list { grid-template-columns: 1fr 1fr; }
  .anchor-item { min-height: 135px; }
  .promise-section { grid-template-columns: 1fr; gap: 1rem; padding-block: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}