:root { --ink:#11110f; --paper:#f1ede3; --deep:#ded7c7; --green:#6f8b39; --orange:#d86b35; --gold:#b69652; --white:#fbfaf5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Courier New",Courier,monospace; }
a { color:inherit; }
.site-shell { max-width:1600px; margin:0 auto; overflow:hidden; border-left:.5px solid var(--ink); border-right:.5px solid var(--ink); }
.masthead { height:auto; min-height:131px; display:grid; grid-template-columns:62px minmax(0,1.55fr) minmax(390px,.85fr); border-bottom:1px solid var(--ink); background:#fff; }
.masthead-main { grid-column:1/3; display:grid; grid-template-columns:1.25fr 1fr; border-right:1px solid var(--ink); min-width:0; }
.masthead-product { grid-column:3; display:grid; grid-template-columns:minmax(0,1fr) auto; min-width:0; background:var(--gold); }
.masthead-product .micro { background:#fff; }
.masthead-main>*,.masthead-product>* { padding:22px 28px; border-right:1px solid var(--ink); display:flex; align-items:center; }
.masthead-main>*:last-child,.masthead-product>*:last-child { border-right:0; }
.brand { text-decoration:none; padding-top:0; padding-bottom:0; }
.brand img { display:block; width:190px; height:100px; margin-left:33px; object-fit:contain; object-position:left center; }
.navline,.micro { font-size:14px; line-height:1.55; letter-spacing:.11em; text-transform:uppercase; }
.navline { justify-content:center; text-align:center; }
.index { width:114px; background:var(--gold); color:#fff; font-size:36px; font-weight:700; justify-content:center; }
.hero { min-height:770px; display:grid; grid-template-columns:62px minmax(0,1.55fr) minmax(390px,.85fr); border-bottom:1px solid var(--ink); position:relative; }
.hero::before { content:""; position:absolute; z-index:2; top:0; bottom:0; left:62px; width:1px; background:var(--ink); pointer-events:none; }
.product-carousel { position:relative; }
.product-nav { position:absolute; z-index:8; top:50%; width:54px; min-height:112px; padding:0; border:1px solid var(--ink); background:#fffffff0; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:8px; font:700 22px/1 "Courier New",Courier,monospace; cursor:pointer; transform:translateY(-50%); transition:background .2s ease,color .2s ease,transform .2s ease; }
.product-nav:hover { background:var(--gold); color:#fff; transform:translateY(-50%) scale(1.03); }
.product-nav:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.product-nav-prev { left:62px; border-left:0; }
.product-nav-next { right:0; border-right:0; }
.product-nav .nav-name { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.product-transition { animation:product-reveal .42s cubic-bezier(.22,.72,.3,1) both; }
@keyframes product-reveal { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
.vertical { border-right:0; writing-mode:vertical-rl; transform:rotate(180deg); padding:28px 17px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; display:flex; justify-content:space-between; }
.vertical span[lang="ja"] { transform:rotate(180deg); }
.hero-copy { position:relative; padding:66px 58px 52px; border-right:1px solid var(--ink); min-width:0; background:linear-gradient(90deg,#fffffff2 0%,#ffffffdf 58%,#ffffffb8 100%),url("assets/brand-story-fields.jpg") center/cover; overflow:hidden; }
.eyebrow { display:flex; align-items:center; gap:16px; margin:0; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow::before { content:""; width:54px; height:2px; background:var(--orange); }
h1 { margin:72px 0 0; font:500 clamp(104px,11vw,184px)/.76 Arial,sans-serif; letter-spacing:-.09em; text-transform:uppercase; }
h1 span { display:block; margin-left:13%; }
h1 i { color:var(--gold); font-style:normal; }
.jp-title { position:absolute; right:28px; top:148px; writing-mode:vertical-rl; font-size:18px; letter-spacing:.25em; }
.statement { margin:72px 0 0 14%; max-width:480px; font:18px/1.45 Georgia,serif; }
.statement strong { font-style:italic; font-weight:400; text-decoration:underline 2px var(--gold); text-underline-offset:5px; }
.product-stage { background:#fff; padding:32px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.stage-meta { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.pack-wrap { flex:1; display:grid; place-items:center; padding:24px 0; position:relative; }
.product-photo { display:block; width:min(100%,340px); max-height:520px; object-fit:contain; position:relative; z-index:1; }
.cta { display:flex; align-items:center; justify-content:space-between; padding:19px 22px; background:var(--gold); color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:700; border:1px solid var(--gold); transition:.22s ease; }
.cta:hover { background:var(--orange); border-color:var(--orange); }.cta:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }.cta-copy { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 10px; }.cta-copy strong { font-size:11px; }.cta-copy small { font-size:8px; font-weight:400; letter-spacing:.06em; }.cta-arrow { flex:0 0 auto; margin-left:12px; font-size:24px; }
.product-counter { position:absolute; right:32px; top:68px; z-index:3; display:flex; align-items:center; gap:8px; padding:7px 9px; background:#fff; border:1px solid var(--ink); font-size:9px; font-weight:700; letter-spacing:.08em; }
.product-counter i { width:22px; height:1px; background:var(--gold); }
.data-strip { min-height:118px; display:grid; grid-template-columns:62px minmax(290px,.55fr) minmax(500px,1fr) minmax(390px,.85fr); border-bottom:1px solid var(--ink); }
.data-strip>* { border-right:1px solid var(--ink); }.data-strip>*:last-child { border-right:0; }
.strip-no { padding:22px 28px; background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; writing-mode:vertical-rl; }
.product-note { min-width:0; padding:22px 28px 28px; display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.product-note .datum-label { margin-bottom:24px; color:var(--green); font-size:10px; font-weight:700; }
.product-note p { margin:0; font:18px/1.55 Georgia,serif; }
.data-main { min-width:0; }
.batch-register { display:flex; flex-direction:column; gap:18px; padding:22px 28px 26px; }
.batch-heading { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.batch-table { margin:0; border:1px solid var(--ink); }
.batch-table>div { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr); border-bottom:1px solid var(--ink); }
.batch-table>div:last-child { border-bottom:0; }
.batch-table dt,.batch-table dd { margin:0; padding:13px 16px; }
.batch-table dt { display:flex; align-items:center; background:#f2f0ea; border-right:1px solid var(--ink); font-size:15px; letter-spacing:.1em; text-transform:uppercase; }
.batch-table dd { font:15px/1.35 Georgia,serif; }
.cta-price { font-size:1.32em; font-weight:700; }
.batch-table dd i { display:inline-block; width:12px; height:12px; margin-right:8px; border-radius:50%; background:var(--green); vertical-align:-1px; }
.batch-origin small { display:block; margin-top:4px; font:9px/1.35 "Courier New",Courier,monospace; letter-spacing:.08em; text-transform:uppercase; }
.datum-label { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:13px; }.datum-value { font:18px/1.35 Georgia,serif; }
.taste { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:300px; padding:22px 12px 12px; position:relative; overflow:hidden; }
.taste .datum-label { align-self:flex-start; margin-left:16px; font-size:10px; }
.radar-chart { width:100%; min-height:270px; flex:1; display:grid; place-items:center; padding:36px 72px 34px; font-family:"Courier New",Courier,monospace; }
.radar-plot { --heptagon:polygon(50% 0%,89.1% 18.8%,98.7% 61.1%,71.7% 95%,28.3% 95%,1.3% 61.1%,10.9% 18.8%); --value-shape:polygon(50% 20%,81.3% 25%,79.2% 56.7%,67.4% 86%,37% 77%,20.8% 56.7%,18.7% 25%); --label-gap:8px; position:relative; width:min(100%,230px); aspect-ratio:1; }
.radar-ring { position:absolute; left:50%; top:50%; background:rgba(17,17,15,.72); clip-path:var(--heptagon); transform:translate(-50%,-50%); }
.radar-ring::after { content:""; position:absolute; inset:1px; background:#fff; clip-path:var(--heptagon); }
.ring-5 { width:100%; height:100%; }.ring-4 { width:80%; height:80%; }.ring-3 { width:60%; height:60%; }.ring-2 { width:40%; height:40%; }.ring-1 { width:20%; height:20%; }
.radar-axis { position:absolute; z-index:1; left:calc(50% - .5px); top:0; width:1px; height:50%; background:rgba(17,17,15,.28); transform-origin:50% 100%; }
.axis-1 { transform:rotate(0deg); }.axis-2 { transform:rotate(51.43deg); }.axis-3 { transform:rotate(102.86deg); }.axis-4 { transform:rotate(154.29deg); }.axis-5 { transform:rotate(205.71deg); }.axis-6 { transform:rotate(257.14deg); }.axis-7 { transform:rotate(308.57deg); }
.radar-value { position:absolute; z-index:2; inset:0; background:rgba(111,139,57,.48); clip-path:var(--value-shape); transition:clip-path .4s ease; }
.radar-dot,.radar-center { position:absolute; z-index:3; width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:var(--green); transform:translate(-50%,-50%); }
.dot-1 { left:50%; top:20%; }.dot-2 { left:81.3%; top:25%; }.dot-3 { left:79.2%; top:56.7%; }.dot-4 { left:67.4%; top:86%; }.dot-5 { left:37%; top:77%; }.dot-6 { left:20.8%; top:56.7%; }.dot-7 { left:18.7%; top:25%; }
.radar-center { left:50%; top:50%; width:6px; height:6px; background:var(--ink); }
.radar-label { position:absolute; z-index:4; display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.radar-label b { padding:3px 5px; background:var(--green); color:#fff; font-size:12px; line-height:1; }
.label-sweet { left:50%; top:0; transform:translate(-50%,calc(-100% - var(--label-gap))); }.label-umami { left:89.1%; top:18.8%; transform:translate(var(--label-gap),-50%); }.label-grassy { left:98.7%; top:61.1%; transform:translate(var(--label-gap),-50%); }.label-soft { left:71.7%; top:95%; transform:translate(var(--label-gap),var(--label-gap)); }.label-bitter { left:28.3%; top:95%; transform:translate(calc(-100% - var(--label-gap)),var(--label-gap)); }.label-astringent { left:1.3%; top:61.1%; transform:translate(calc(-100% - var(--label-gap)),-50%); }.label-roasted { left:10.9%; top:18.8%; transform:translate(calc(-100% - var(--label-gap)),-50%); }
.origin-band { display:grid; grid-template-columns:1fr 1fr; min-height:560px; border-bottom:1px solid var(--ink); }
.origin-panel { position:relative; background-size:cover; background-position:center; overflow:hidden; border-right:1px solid var(--ink); }
.origin-panel:last-child { border-right:0; }
.origin-fields { background-image:linear-gradient(180deg,#ffffff10,#00000042),url("assets/brand-story-fields.jpg"); }
.origin-craft { background-image:linear-gradient(180deg,#00000018,#00000078),url("assets/brand-story-craft.jpg"); }
.origin-copy { position:absolute; left:34px; top:34px; width:min(70%,480px); padding:26px; background:#ffffffe8; border:1px solid var(--ink); z-index:2; }
.origin-copy.light { top:auto; bottom:34px; color:#fff; background:#11110fe3; border-color:#fff; }
.origin-copy span { font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.origin-copy h2 { margin:28px 0 18px; font:500 clamp(44px,5vw,76px)/.86 Arial,sans-serif; letter-spacing:-.065em; text-transform:uppercase; }
.origin-copy p { margin:0; font:16px/1.45 Georgia,serif; }
.photo-study { display:grid; grid-template-columns:repeat(12,1fr); border-bottom:1px solid var(--ink); background:#fff; }
.photo-intro { grid-column:1/-1; min-height:260px; display:grid; grid-template-columns:62px 1fr 340px; border-bottom:1px solid var(--ink); position:relative; }
.photo-intro>* { padding:42px; }
.photo-code { padding:22px 10px; border-right:1px solid var(--ink); font-size:10px; letter-spacing:.14em; writing-mode:vertical-rl; }
.photo-intro h2 { margin:34px 0 0; font:500 clamp(52px,7vw,108px)/.84 Arial,sans-serif; letter-spacing:-.075em; text-transform:uppercase; }
.vendor-birds { position:relative; align-self:stretch; min-height:250px; padding:0; overflow:visible; transform:translateX(-64px); }
.vendor-bird { position:absolute; display:block; width:215px; height:215px; object-fit:contain; mix-blend-mode:normal; }
.vendor-bird-rob { left:8px; bottom:-4px; z-index:2; transform:rotate(-4deg); }
.vendor-bird-shima { right:-4px; top:2px; z-index:1; transform:rotate(5deg); }
.latte-protocol { grid-column:1/-1; height:860px; min-height:0; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); background:#fff; }
.protocol-copy { padding:48px 64px 52px; border-right:1px solid var(--ink); display:flex; flex-direction:column; min-width:0; }
.protocol-kicker { margin:0; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.protocol-kicker::after { content:""; display:inline-block; width:54px; height:2px; margin-left:16px; background:var(--gold); vertical-align:middle; }
.protocol-copy h3 { margin:44px 0 40px; font:700 clamp(54px,6vw,96px)/.8 Arial,sans-serif; letter-spacing:-.075em; text-transform:uppercase; }
.protocol-copy h3 span { color:var(--gold); }
.protocol-steps { list-style:none; margin:34px 0 0; padding:0; border:1px solid var(--ink); }
.protocol-steps li { display:grid; grid-template-columns:74px 1fr; min-height:92px; border-bottom:1px solid var(--ink); }
.protocol-steps li:last-child { border-bottom:0; }
.protocol-steps>li>span { display:grid; place-items:center; background:var(--ink); color:#fff; font:20px/1 Georgia,serif; }
.protocol-steps li div { padding:14px 20px; }
.protocol-steps b { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.protocol-steps p { margin:6px 0 0; font:16px/1.3 Georgia,serif; }
.protocol-photo { position:relative; height:100%; min-height:0; margin:0; overflow:hidden; background:var(--deep); }
.protocol-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; object-fit:cover; object-position:center bottom; }
.protocol-photo figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:18px; padding:15px 18px; background:#11110fe6; color:#fff; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.photo { margin:0; position:relative; overflow:hidden; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); }
.photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.photo:hover img { transform:scale(1.015); }
.photo figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:18px; padding:13px 16px; background:#11110fe6; color:#fff; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.photo-bowl { grid-column:1/-1; height:520px; border-right:0; }
.photo-bowl img { object-position:center 48%; }
.photo-powder { grid-column:1/6; height:620px; }
.photo-powder img { object-position:center 64%; }
.photo-pour { grid-column:6/-1; height:620px; border-right:0; }
.photo-pour img { object-position:center 53%; }
.about { display:grid; grid-template-columns:62px 1.2fr 1fr; min-height:500px; border-bottom:1px solid var(--ink); background:linear-gradient(90deg,#fffffff6 0%,#ffffffe8 68%,#ffffffba 100%),url("assets/brand-story-craft.jpg") center/cover; }.about>* { padding:54px 42px; border-right:1px solid var(--ink); }.about>*:last-child{border-right:0}.about-code{padding:24px 10px;font-size:11px;line-height:1.7;letter-spacing:.12em;writing-mode:vertical-rl}.about h2{font:500 clamp(48px,6vw,86px)/.9 Arial,sans-serif;letter-spacing:-.07em;margin:60px 0 0;text-transform:uppercase}.about-text{font:18px/1.55 Georgia,serif;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.about-text a{font:11px/1.4 "Courier New",monospace;text-transform:uppercase;letter-spacing:.1em;margin-top:30px;text-underline-offset:5px}.about-bird{width:230px;align-self:center;margin-bottom:auto;transform:rotate(-3deg)}
footer { min-height:88px; background:var(--ink); color:var(--white); padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:25px; font-size:18px; letter-spacing:.12em; }
footer > span { font-size:14px; }
footer a { text-decoration:none; text-underline-offset:5px; }
.footer-nav { display:flex; flex-wrap:wrap; align-items:center; gap:22px; font-size:14px; }
.footer-nav a { opacity:.82; transition:opacity .2s ease,color .2s ease; }
.footer-nav a:hover { opacity:1; color:var(--gold); }
@media(max-width:700px){ footer { flex-direction:column; align-items:flex-start; } .footer-nav { gap:14px 20px; } }
@media(max-width:1300px) and (min-width:901px){.radar-chart{padding-inline:58px}.radar-plot{width:min(100%,170px)}.radar-label{font-size:11px}.radar-label b{font-size:9px}}
@media(max-width:1260px) and (min-width:901px){.data-strip{grid-template-columns:62px minmax(280px,.65fr) minmax(0,1fr)}.data-strip .strip-no{grid-column:1;grid-row:1/3}.product-note{grid-column:2}.data-main{grid-column:3;border-right:0}.taste{grid-column:2/4;grid-row:2;border-top:1px solid var(--ink)}.radar-chart{padding-inline:90px}.radar-plot{width:min(100%,230px)}.radar-label{font-size:15px}.radar-label b{font-size:12px}}
@media(max-width:900px){.masthead{grid-template-columns:1fr 1fr}.masthead-main,.masthead-product{display:contents}.masthead-main>*,.masthead-product>*{border-right:0}.brand,.micro{border-right:1px solid var(--ink)}.brand,.navline{border-bottom:1px solid var(--ink)}.hero{grid-template-columns:48px 1fr}.hero-copy{border-right:0}.product-stage{grid-column:1/-1;border-top:1px solid var(--ink);min-height:640px}.product-nav-prev{left:48px}.product-nav{top:40%;}.data-strip{grid-template-columns:48px 1fr}.data-strip .strip-no{grid-column:1;grid-row:1/4}.product-note,.data-main,.taste{grid-column:2;border-right:0}.product-note{border-bottom:1px solid var(--ink)}.taste{border-top:1px solid var(--ink)}.radar-chart{padding-inline:90px}.origin-band{grid-template-columns:1fr}.origin-panel{min-height:520px;border-right:0;border-bottom:1px solid var(--ink)}.origin-panel:last-child{border-bottom:0}.photo-intro{grid-template-columns:48px 1fr 250px}.vendor-birds{transform:translateX(-36px)}.vendor-bird{width:165px;height:165px}.latte-protocol{height:auto;grid-template-columns:1fr 1fr}.protocol-photo{height:auto;min-height:620px}.protocol-copy{padding:44px 36px}.protocol-copy h3{margin:48px 0}.protocol-steps li{grid-template-columns:58px 1fr}.protocol-steps li div{padding:16px}.protocol-steps p{font-size:16px}.photo-bowl{grid-column:1/-1;height:460px}.photo-powder{height:520px}.photo-pour{height:520px}.about{grid-template-columns:48px 1fr}.about-text{grid-column:2;border-top:1px solid var(--ink)}}
@media(max-width:700px){.masthead{grid-template-columns:1fr auto}.navline,.micro{display:none}.brand{border-bottom:0}.brand img{width:142px;height:100px}.hero{grid-template-columns:36px 1fr}.vertical{padding:18px 10px}.hero-copy{padding:46px 22px 94px}.hero-copy h1{font-size:clamp(72px,25vw,120px);margin-top:54px}.jp-title{right:10px;top:118px}.statement{margin-left:0;margin-top:60px}.product-stage{padding:22px 16px}.product-photo{width:min(100%,280px);max-height:430px}.product-nav{width:44px;min-height:88px;top:39%;font-size:18px}.product-nav-prev{left:36px}.product-counter{right:16px;top:54px}.cta{padding-inline:16px}.cta-copy{display:block}.cta-copy strong,.cta-copy small{display:block}.cta-copy small{margin-top:6px}.data-strip{grid-template-columns:36px 1fr}.data-strip .strip-no{grid-column:1;grid-row:1/4;border-top:0}.product-note{padding:22px 16px 24px}.product-note .datum-label{margin-bottom:16px}.product-note p{font-size:15px}.batch-register{padding:20px 14px 22px;gap:14px}.batch-heading{font-size:9px}.batch-table>div{grid-template-columns:42% 58%}.batch-table dt,.batch-table dd{padding:11px 10px}.batch-table dt{font-size:11px}.batch-table dd{font-size:13px}.batch-origin small{font-size:8px}.taste{min-height:0;padding:22px 8px 12px}.taste .datum-label{margin-left:14px}.radar-chart{min-height:290px;padding:38px 64px 36px}.radar-plot{--label-gap:5px}.radar-label{font-size:11px}.radar-label b{padding:2px 4px;font-size:10px}.origin-panel{min-height:470px}.origin-copy{left:18px;top:18px;width:calc(100% - 36px);padding:20px}.origin-copy.light{top:auto;bottom:18px}.origin-copy h2{font-size:46px}.photo-intro{grid-template-columns:36px 1fr;grid-template-rows:auto 170px}.photo-intro>*{padding:36px 20px}.photo-code{padding:20px 9px;grid-row:1/3}.photo-intro h2{font-size:50px}.vendor-birds{grid-column:2;min-height:170px;margin-top:-18px;transform:none}.vendor-bird{width:145px;height:145px}.vendor-bird-rob{left:8px}.vendor-bird-shima{right:8px}.latte-protocol{grid-template-columns:1fr}.protocol-copy{padding:38px 20px 28px;border-right:0;border-bottom:1px solid var(--ink)}.protocol-copy h3{margin:42px 0;font-size:48px}.protocol-steps li{grid-template-columns:50px 1fr;min-height:96px}.protocol-steps p{font-size:15px}.protocol-photo{min-height:540px}.photo{grid-column:1/-1;height:440px;border-right:0}.photo-bowl{height:300px}.photo-powder{height:430px}.photo figcaption{font-size:8px}.about{grid-template-columns:36px 1fr}.about>*{padding:42px 22px}.about-code{writing-mode:vertical-rl;padding:24px 10px}.about h2{font-size:48px}.about-text{grid-column:2}.about-bird{width:160px}footer{align-items:flex-start;gap:18px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,.product-nav,.radar-value{transition:none}.product-transition{animation:none}}
@media(max-width:700px){.brand img{margin-left:0}}
@media(max-width:900px){.hero::before{left:48px}}
@media(max-width:700px){.hero::before{left:36px}}

/* ============ WEBSITE EXTENSION ============ */

/* Shared masthead navigation */
.masthead-main { grid-template-columns:396px minmax(0,1fr) minmax(0,.9fr); }
.masthead-nav { display:grid; grid-template-columns:repeat(2,max-content); justify-content:center; align-content:center; column-gap:37px; row-gap:6px; font-size:14px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.masthead-nav a { text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent; transition:border-color .2s ease,color .2s ease; }
.masthead-nav a:hover { border-bottom-color:var(--gold); }
.masthead-nav a[aria-current="page"] { border-bottom-color:var(--orange); }
.masthead-mark { background:var(--gold); color:#fff; font-size:30px; font-weight:700; justify-content:center; }
.masthead-mark span[lang="ja"] { font-family:"Courier New",monospace; }

/* Button system */
.btn { display:inline-flex; align-items:center; gap:14px; padding:17px 24px; border:1px solid transparent; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font:700 12px/1.2 "Courier New",Courier,monospace; cursor:pointer; transition:background .22s ease,color .22s ease,border-color .22s ease; }
.btn .btn-arrow { font-size:20px; line-height:1; }
.btn-primary { background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-primary:hover { background:#9f7e3e; border-color:#9f7e3e; }
.btn-ink { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-ink:hover { background:var(--orange); border-color:var(--orange); color:#fff; }
.btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* Dark footer */
.site-footer { display:block; min-height:0; padding:0; background:var(--ink); color:var(--white); border-top:1px solid var(--ink); font-family:"Courier New",Courier,monospace; }
.footer-cols { display:grid; grid-template-columns:1.5fr 1fr 1fr; }
.footer-col { padding:46px 36px; border-right:1px solid #ffffff22; display:flex; flex-direction:column; gap:15px; }
.footer-col:last-child { border-right:0; }
.footer-brand { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.footer-col p { margin:0; max-width:360px; font:15px/1.55 Georgia,serif; color:#e8e2d3; }
.footer-head { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { font-size:10px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--white); opacity:.82; transition:opacity .2s ease,color .2s ease; }
.footer-links a:hover { opacity:1; color:var(--gold); }
.site-footer .btn-ink { margin-top:6px; align-self:flex-start; background:transparent; border-color:#ffffff55; }
.site-footer .btn-ink:hover { background:var(--orange); border-color:var(--orange); }
.social-btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.social-btns .btn { margin-top:0; }
.footer-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 36px; border-top:1px solid #ffffff22; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }

/* Home hero */
.home-hero { display:grid; grid-template-columns:62px 1fr; min-height:660px; border-bottom:1px solid var(--ink); color:#fff; background:linear-gradient(90deg,#000000e6 0%,#00000099 48%,#0000003a 100%),url("assets/brand-story-fields.jpg") center/cover; }
.vertical-light { border-right-color:#ffffff33; color:#fff; }
.home-hero-copy { padding:70px 64px 62px; display:flex; flex-direction:column; min-width:0; }
.eyebrow-light { color:#fff; }
.eyebrow-light::before { background:var(--orange); }
.home-h1 { margin:auto 0 0; font:500 clamp(62px,8.5vw,146px)/.84 Arial,sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.home-h1 span { color:var(--gold); }
.home-sub { margin:30px 0 0; max-width:540px; font:20px/1.5 Georgia,serif; color:#f1ede3; }
.home-badges { display:flex; flex-wrap:wrap; gap:13px 28px; margin-top:32px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.home-badges span { display:inline-flex; align-items:center; gap:9px; }
.home-badges i { width:9px; height:9px; border-radius:50%; background:var(--orange); }
.home-cta { margin-top:40px; align-self:flex-start; }

/* Home data strip */
.home-datastrip { display:grid; grid-template-columns:62px 1fr; border-bottom:1px solid var(--ink); }
.home-facts { display:grid; grid-template-columns:repeat(3,1fr); }
.home-facts>div { padding:28px 30px; border-right:1px solid var(--ink); display:flex; flex-direction:column; gap:12px; }
.home-facts>div:last-child { border-right:0; }
.home-facts span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.home-facts b { font:17px/1.35 Georgia,serif; font-weight:400; }

/* Home products */
.home-products { border-bottom:1px solid var(--ink); background:#fff; }
.home-products-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px 40px; border-bottom:1px solid var(--ink); }
.home-products-head .eyebrow { margin:0; }
.home-products-head .head-jp { font-size:10px; letter-spacing:.1em; }
.product-cards { display:grid; grid-template-columns:1fr 1fr; }
.pcard { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-right:1px solid var(--ink); transition:background .25s ease; }
.pcard:last-child { border-right:0; }
.pcard:hover { background:var(--paper); }
.pcard-media { position:relative; height:440px; padding:36px; background:var(--paper); border-bottom:1px solid var(--ink); overflow:hidden; }
.pcard-media img { position:absolute; inset:36px; display:block; width:calc(100% - 72px); height:calc(100% - 72px); object-fit:contain; transition:transform .4s ease; }
.pcard:hover .pcard-media img { transform:scale(1.03); }
.pcard-body { padding:30px 34px 34px; display:flex; flex-direction:column; gap:16px; flex:1; }
.pcard-top { display:flex; align-items:baseline; justify-content:space-between; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.pcard-no { font:700 40px/1 Arial,sans-serif; letter-spacing:-.04em; color:var(--gold); }
.pcard-lot { color:#6a655a; }
.pcard-title { margin:0; font:500 clamp(40px,4.5vw,64px)/.9 Arial,sans-serif; letter-spacing:-.05em; text-transform:uppercase; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.pcard-title span[lang="ja"] { font-size:20px; letter-spacing:.12em; color:#6a655a; }
.pcard-text { margin:0; font:17px/1.5 Georgia,serif; }
.pcard-foot { margin-top:auto; padding-top:18px; border-top:1px solid var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pcard-price { font:700 20px/1 Arial,sans-serif; }
.pcard-cta { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.pcard:hover .pcard-cta { color:var(--orange); }

/* Home principles */
.home-principles { border-bottom:1px solid var(--ink); background:#fff; }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.principle { padding:44px 38px 48px; border-right:1px solid var(--ink); display:flex; flex-direction:column; gap:20px; }
.principle:last-child { border-right:0; }
.principle-no { font:700 40px/1 Arial,sans-serif; letter-spacing:-.04em; color:var(--gold); }
.principle h3 { margin:0; font:500 clamp(30px,3vw,44px)/.94 Arial,sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
.principle p { margin:0; font:17px/1.55 Georgia,serif; }

/* Home about (extends .about) */
.about-cta { margin-top:26px; align-self:flex-start; }

/* Story-home: hero link */
.home-hero-link { margin-top:36px; align-self:flex-start; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-decoration:none; border-bottom:1px solid #ffffff66; padding-bottom:4px; transition:border-color .2s ease,color .2s ease; }
.home-hero-link:hover { color:var(--gold); border-color:var(--gold); }

/* Founding story */
.founding { display:grid; grid-template-columns:1.05fr 1fr; min-height:540px; border-bottom:1px solid var(--ink); background:#fff; }
.founding-copy { padding:58px 60px 62px; border-right:1px solid var(--ink); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.founding-copy .code-line { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.founding-copy h2 { margin:26px 0 26px; font:500 clamp(42px,5vw,74px)/.88 Arial,sans-serif; letter-spacing:-.06em; text-transform:uppercase; }
.founding-copy p { margin:0 0 18px; max-width:540px; font:17px/1.6 Georgia,serif; }
.founding-copy p:last-child { margin-bottom:0; }
.founding-photo { background:linear-gradient(180deg,#00000018,#00000070),url("assets/brand-story-craft.jpg") center/cover; min-height:360px; }

/* Proof section */
.proof { border-bottom:1px solid var(--ink); background:#fff; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.proof-card { padding:40px 36px 46px; border-right:1px solid var(--ink); display:flex; flex-direction:column; gap:16px; }
.proof-card:last-child { border-right:0; }
.proof-code { display:flex; align-items:center; gap:12px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.proof-code::after { content:""; height:2px; flex:1; background:var(--gold); }
.proof-card h3 { margin:0; font:500 clamp(28px,3vw,42px)/.96 Arial,sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
.proof-card p { margin:0; font:16px/1.55 Georgia,serif; }
.proof-link { margin-top:2px; align-self:flex-start; font-size:10px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; text-underline-offset:5px; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px; transition:color .2s ease,border-color .2s ease; }
.proof-link:hover { color:var(--orange); border-color:var(--orange); }

/* Archive principle refs */
.archive-refs { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 6px; }
.archive-ref { display:flex; align-items:baseline; gap:10px; padding:12px 16px; border:1px solid var(--ink); text-decoration:none; color:var(--ink); font-size:10px; letter-spacing:.08em; text-transform:uppercase; transition:background .2s ease; }
.archive-ref:hover { background:var(--paper); }
.archive-ref b { color:var(--gold); font:700 16px/1 Arial,sans-serif; }

/* Lab report request band */
.labreq { display:grid; grid-template-columns:62px 1fr; border-bottom:1px solid var(--ink); background:var(--deep); }
.labreq-body { padding:44px 60px 48px; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; min-width:0; }
.labreq-copy { max-width:700px; }
.labreq-copy .code-line { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.labreq-copy h2 { margin:16px 0 14px; font:500 clamp(30px,3.4vw,50px)/.94 Arial,sans-serif; letter-spacing:-.05em; text-transform:uppercase; }
.labreq-copy p { margin:0; font:17px/1.55 Georgia,serif; }
.labreq .social-btns { margin-top:0; }

/* Community */
.community { background:var(--ink); color:var(--white); border-bottom:1px solid var(--ink); padding:74px 40px 82px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.community-bird { width:172px; height:auto; }
.community h2 { margin:0; font:500 clamp(40px,5vw,72px)/.9 Arial,sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.community p { margin:0; max-width:520px; font:19px/1.5 Georgia,serif; color:#e8e2d3; }
.community .btn-ink { margin-top:8px; background:transparent; border-color:#ffffff55; }
.community .btn-ink:hover { background:var(--orange); border-color:var(--orange); }

/* Legal pages */
.legal { display:grid; grid-template-columns:62px 1fr; border-bottom:1px solid var(--ink); background:#fff; }
.legal-body { padding:58px 64px 74px; min-width:0; }
.legal-head .eyebrow { margin:0; }
.legal-head h1 { margin:24px 0 0; font:500 clamp(52px,7vw,108px)/.84 Arial,sans-serif; letter-spacing:-.06em; text-transform:uppercase; }
.notice-box { margin:40px 0 8px; background:var(--deep); border:1px solid var(--ink); padding:26px 30px; }
.notice-box strong { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; color:var(--ink); }
.notice-box p { margin:0; font:16px/1.55 Georgia,serif; }
.legal-sections { margin-top:16px; display:flex; flex-direction:column; }
.legal-block { border-top:1px solid var(--ink); padding:28px 0; display:grid; grid-template-columns:minmax(210px,.72fr) minmax(0,2fr); gap:28px; }
.legal-block:last-child { border-bottom:1px solid var(--ink); }
.legal-label { margin:0; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; align-self:start; }
.legal-label.code { color:var(--orange); }
.legal-content p { margin:0 0 12px; font:16px/1.6 Georgia,serif; }
.legal-content p:last-child { margin-bottom:0; }
.legal-content ul { margin:0 0 12px; padding-left:20px; font:16px/1.6 Georgia,serif; }
.ph { font-style:italic; color:#8f897a; }

@media(max-width:900px){
  .masthead-main { display:contents; }
  .masthead-nav { grid-column:1/-1; border-top:1px solid var(--ink); border-right:0; }
  .masthead-mark { display:none; }
  .home-hero { grid-template-columns:48px 1fr; }
  .home-hero-copy { padding:54px 40px 50px; }
  .home-datastrip { grid-template-columns:48px 1fr; }
  .footer-cols { grid-template-columns:1fr 1fr; }
  .footer-col:nth-child(1) { grid-column:1/-1; border-right:0; border-bottom:1px solid #ffffff22; }
  .legal { grid-template-columns:48px 1fr; }
  .legal-body { padding:46px 40px 56px; }
  .founding { grid-template-columns:1fr; }
  .founding-copy { border-right:0; border-bottom:1px solid var(--ink); padding:48px 40px; }
  .founding-photo { min-height:340px; }
}
@media(max-width:700px){
  .masthead-nav { column-gap:16px; row-gap:6px; padding:16px 20px; }
  .home-hero { grid-template-columns:36px 1fr; }
  .home-hero-copy { padding:42px 22px 44px; }
  .home-sub { font-size:17px; }
  .home-facts { grid-template-columns:1fr; }
  .home-facts>div { border-right:0; border-bottom:1px solid var(--ink); }
  .home-facts>div:last-child { border-bottom:0; }
  .home-products-head { flex-direction:column; align-items:flex-start; gap:10px; padding:24px 22px; }
  .principle-grid { grid-template-columns:1fr; }
  .principle { border-right:0; border-bottom:1px solid var(--ink); }
  .principle:last-child { border-bottom:0; }
  .founding-copy { padding:38px 22px; }
  .labreq { grid-template-columns:36px 1fr; }
  .labreq-body { padding:34px 22px 38px; }
  .proof-grid { grid-template-columns:1fr; }
  .proof-card { border-right:0; border-bottom:1px solid var(--ink); padding:34px 22px 38px; }
  .proof-card:last-child { border-bottom:0; }
  .community { padding:56px 22px 62px; }
  .footer-cols { grid-template-columns:1fr; }
  .footer-col { border-right:0; border-bottom:1px solid #ffffff22; padding:34px 22px; }
  .footer-col:last-child { border-bottom:0; }
  .footer-bar { flex-direction:column; align-items:flex-start; gap:8px; padding:16px 22px; }
  .legal { grid-template-columns:36px 1fr; }
  .legal-body { padding:38px 22px 48px; }
  .legal-block { grid-template-columns:1fr; gap:12px; padding:24px 0; }
}


/* ============ MOBILE FIXES 27.07 ============ */
@media(max-width:1120.98px){
  /* Header: feste 131px-Höhe lösen, Zeilen sauber stapeln */
  .masthead { height:auto; min-height:0; grid-template-columns:minmax(0,1fr) auto; }
  .masthead-main, .masthead-product { display:contents; }
  .brand { grid-column:1; grid-row:1; padding:14px 20px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
  .brand img { width:152px; height:74px; margin-left:0; }
  .navline, .micro { display:none; }
  .index, .masthead-mark { display:flex; grid-column:2; grid-row:1; width:auto; min-width:76px; padding:0 20px; border-bottom:1px solid var(--ink); font-size:26px; }
  .masthead-nav { grid-column:1/-1; grid-row:2; display:flex; flex-wrap:wrap; justify-content:flex-start; align-content:center; gap:8px 22px; padding:14px 20px; border-top:0; border-right:0; font-size:12px; }

}
@media(max-width:900px){
  /* Senkrechte Hilfslinie endet am Hero-Text statt durch Bild und CTA zu laufen */
  .hero::before { display:none; }
  .hero > .vertical { border-right:1px solid var(--ink); }

  /* Pfeile ans untere Drittel des Produktbilds statt auf 39% der gestapelten Höhe */
  .product-nav { top:auto; bottom:158px; transform:none; }
  .product-nav:hover { transform:none; }

  /* Lange Versal-Wörter dürfen umbrechen, Grid-Spalten dürfen schrumpfen */
  .about > *, .about-text, .about-copy, .legal-body, .hero-copy, .home-hero-copy,
  .protocol-copy, .founding-copy, .labreq-body, .photo-intro > * { min-width:0; }
  h1, h2, h3, .home-h1, .pcard-title, .about h2 { overflow-wrap:break-word; hyphens:auto; }
  .about h2 { font-size:clamp(38px,7vw,60px); }
}
@media(max-width:700px){
  .masthead-nav { gap:8px 16px; padding:13px 18px; }
  .brand img { width:138px; height:66px; }
  .index, .masthead-mark { min-width:64px; padding:0 14px; font-size:22px; }
  .product-nav { bottom:172px; }
  .about > * { padding:38px 22px; }
  .about h2 { margin-top:34px; font-size:clamp(32px,9vw,44px); }
  .about-bird { width:170px; }
  .home-h1 { font-size:clamp(46px,13vw,86px); }
}

/* Desktop-Header elastisch: kein Klemmen zwischen 1080 und 1250 px */
@media(min-width:1121px){
  .masthead { grid-template-columns:62px minmax(0,1.55fr) minmax(330px,.85fr); }
  .masthead-main { grid-template-columns:minmax(240px,396px) minmax(0,1fr) minmax(190px,1.15fr); }
  .masthead-main > *, .masthead-product > * { padding-inline:clamp(14px,1.9vw,28px); }
  /* Zwei feste Spalten: Start/Archiv oben, Instagram/TikTok darunter */
  .masthead-nav { display:grid; grid-template-columns:repeat(2,max-content); justify-content:center; align-content:center; gap:6px clamp(14px,2.4vw,37px); }
  .brand img { margin-left:clamp(0px,2.2vw,33px); }
  .navline, .micro, .masthead-nav { font-size:clamp(11px,1.05vw,14px); }
}

/* Radar: Größe folgt der tatsächlichen Spaltenbreite statt festen Breakpoints.
   Ursache des Abschneidens war, dass die kompakte Variante an ein Fensterfenster
   (901–1300px) gebunden war, die Spalte aber erst ab ca. 1500px breit genug ist. */
.taste { container-type:inline-size; }
.radar-chart { padding:clamp(26px,3vw,38px) clamp(46px,12vw,112px) clamp(24px,2.6vw,34px); }
.radar-plot { width:min(100%,240px); --label-gap:5px; }
.radar-label { font-size:clamp(8px,1.2vw,15px); }
.radar-label b { padding:2px 4px; font-size:clamp(7px,1vw,12px); }
@supports (container-type:inline-size){
  .radar-chart { padding:clamp(26px,7cqw,38px) clamp(46px,26cqw,112px) clamp(24px,6cqw,34px); }
  .radar-plot { width:min(100%,44cqw,240px); }
  .radar-label { font-size:clamp(8px,2.5cqw,15px); }
  .radar-label b { font-size:clamp(7px,2.1cqw,12px); }
}

/* Einblenden beim Produktwechsel ohne Seitwärtsversatz — der 16px-Shift schob
   die vollbreiten Blöcke am Handy über die Kante von .site-shell{overflow:hidden}. */
@keyframes product-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
/* Kapitelüberschrift fluide, damit sie am Handy nicht getrennt wird */
@media(max-width:700px){ .photo-intro h2 { font-size:clamp(34px,8.4vw,50px); } }

/* Tablet-Band: Kapitelkopf stapelt wie am Handy, sonst quetscht die 250px-Vogelspalte
   die Überschrift auf 318px und erzwingt Silbentrennung */
@media(min-width:700.02px) and (max-width:900px){
  .photo-intro { grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto 190px; }
  .photo-code { grid-row:1/3; }
  .vendor-birds { grid-column:2; min-height:190px; margin-top:-16px; transform:none; }
  .vendor-bird { width:150px; height:150px; }
  .vendor-bird-rob { left:8px; }
  .vendor-bird-shima { right:8px; }
  .photo-intro h2 { font-size:clamp(38px,6.4vw,72px); }
}

/* Mobil/Tablet: grüner Streifen durchgehend und bündig, nichts zeichnet darüber */
@media(max-width:900px){
  .data-strip { grid-template-columns:36px minmax(0,1fr); }
  .data-strip > .strip-no { grid-column:1; grid-row:1/span 12; position:relative; z-index:2; margin:0; padding:22px 6px; border-right:1px solid var(--ink); border-top:0; border-bottom:0; overflow:hidden; }
  .data-strip > *:not(.strip-no) { grid-column:2; border-left:0; border-right:0; }
}
@media(min-width:700.02px) and (max-width:900px){
  .data-strip { grid-template-columns:48px minmax(0,1fr); }
}

/* Mobil/Tablet: Randspalte im About-Block durchgehend, Trennlinie endet an ihr */
@media(max-width:900px){
  .about { grid-template-columns:44px minmax(0,1fr); }
  .about > .about-code { grid-column:1; grid-row:1/span 12; width:auto; min-width:0; padding:22px 8px; font-size:10px; border-right:1px solid var(--ink); position:relative; z-index:2; }
  .about > *:not(.about-code) { grid-column:2; border-right:0; }
}

/* Mobil/Tablet: Produktnavigation als eigene Leiste unter dem Kauf-Button,
   damit keine Bedienelemente über der Packung liegen */
@media(max-width:900px){
  .product-stage { padding-bottom:104px; }
  .product-nav { top:auto; bottom:0; width:50%; min-height:76px; padding:0 16px;
    display:flex; align-items:center; gap:12px; transform:none;
    border:0; border-top:1px solid var(--ink); background:#fff; font-size:20px; }
  .product-nav:hover { transform:none; }
  .product-nav-prev { left:0; justify-content:flex-start; border-right:1px solid var(--ink); }
  .product-nav-next { right:0; justify-content:flex-end; }
  .product-nav .nav-name { position:static; width:auto; height:auto; clip:auto;
    font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
}