/* Sister identity to Kagoshima Matcha: indigo, paper, editorial photography. */
:root {
  --ink: #09213c;
  --ink2: #12385d;
  --deep: #06182c;
  --paper: #f6f4eb;
  --mist: #e8edf0;
  --muted: #526574;
  --line: #cbd2d5;
  --accent: #d1bc92;
  --serif: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.85 Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
a:hover { text-decoration: underline; text-underline-offset: .3em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #ba9755; outline-offset: 5px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; text-wrap: pretty; }
h1, h2, h3, h4, p, a { overflow-wrap: anywhere; }
img { display: block; width: 100%; height: auto; }
section, article, .wrap, .hero-copy, .company-copy { min-width: 0; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 7%; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -10rem; z-index: 30; padding: .8rem 1rem; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.nav { max-width: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.5rem 4.5% 1rem; background: var(--ink); color: var(--paper); border-bottom: 1px solid #ffffff29; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; line-height: 1.35; font-weight: 400; }
.brand > span { font: 1.65rem/1.4 var(--serif); letter-spacing: .2em; }
.brand small { font: .75rem/1.5 Arial, sans-serif; letter-spacing: .16em; }
.brand:hover { text-decoration: none; }
.navlinks { display: flex; flex-wrap: wrap; gap: .25rem 1.7rem; width: 100%; font-size: .875rem; border-top: 1px solid #ffffff24; padding-top: .6rem; }
.navlinks a { padding-block: .25rem; min-height: 36px; }
.nav-contact { margin-inline-start: auto; border-bottom: 1px solid var(--accent); }
.language-menu { position: relative; z-index: 10; font-size: .875rem; max-width: 100%; }
.language-menu summary { padding: .55rem .9rem; min-height: 44px; cursor: pointer; border: 1px solid #ffffff55; }
.language-options { position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; width: min(340px, 86vw); max-height: 65vh; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 24px #00132525; }
.language-options a { padding: .6rem; min-height: 44px; }
.language-options a:hover, .language-options [aria-current] { background: var(--mist); text-decoration: underline; }
.hero { background: var(--ink); color: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; max-width: none; padding: 0; }
.hero-copy { display: flex; align-items: flex-start; flex-direction: column; padding: 5.5rem 12% 3rem 13.3%; }
.eyebrow, .section-kicker { font: .8125rem/1.8 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hero .eyebrow { color: var(--accent); }
.hero h1 { font-size: clamp(2.8rem, 4.8vw, 5.2rem); line-height: 1.15; letter-spacing: -.035em; margin: 1.5rem 0 2rem; }
.hero-copy > p:not(.hero-seller) { color: #d4dde4; max-width: 34rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 100%; min-height: 54px; padding: 1rem 1.5rem; border: 1px solid transparent; background: var(--paper); color: var(--ink); font: .9375rem/1.65 Arial, 'Yu Gothic', sans-serif; }
.button::after { content: '↗'; font-size: 1.3rem; flex: none; }
.button:hover { background: #dce5e9; text-decoration: none; }
.hero .button { margin-top: 2rem; }
.hero-seller { padding-top: 3.5rem; margin-top: auto; font-size: .8125rem; color: #c0cbd4; }
.hero-image { position: relative; min-height: 660px; }
.hero-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #06182c75, transparent 25%); pointer-events: none; }
figcaption { font-size: .75rem; line-height: 1.7; }
.hero-image figcaption { position: absolute; inset-inline: 1.5rem; bottom: 1.25rem; z-index: 1; color: white; }
.intro { padding-block: 4.5rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.15fr; gap: 7%; align-items: center; }
.intro h2 { font-size: clamp(1.8rem, 2.5vw, 2.75rem); line-height: 1.5; }
.intro p { color: var(--muted); }
.origin, .products, .knowledge, .use, .history, .shavers, .contact { padding-block: 6rem; }
.origin-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7%; }
.section-kicker { color: var(--muted); margin-bottom: 1rem; }
.section-title { font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1.23; letter-spacing: -.025em; }
.origin p + p { margin-top: 1.1rem; }
.number { margin-top: 2.5rem; font: .8125rem/1.8 Arial, sans-serif; letter-spacing: .18em; color: var(--muted); }
.facts { margin: 2rem 0 0; }
.fact { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.2rem; padding-block: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.fact dt, .fact dd { min-width: 0; overflow-wrap: anywhere; }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; }
.products { max-width: none; background: var(--mist); }
.heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 5rem; margin-bottom: 3rem; }
.heading-row > h2 { flex: 1.2; }
.heading-row > p { flex: 1; max-width: 31rem; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #b4c1c9; }
.card { display: flex; flex-direction: column; padding: 2rem; border-inline-end: 1px solid #b4c1c9; }
.card:first-child { padding-inline-start: 0; }
.card:last-child { border-inline-end: 0; padding-inline-end: 0; }
.card small { font: 2.8rem/1.2 var(--serif); color: #698191; margin-bottom: 2rem; }
.card h3 { font-size: 1.75rem; line-height: 1.5; margin-bottom: 1.2rem; }
.card p { color: var(--muted); }
.text-link { display: inline-block; padding-top: 1.5rem; margin-top: auto; font-size: .875rem; text-decoration: underline; text-underline-offset: .4rem; }
.product-note { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }
.knowledge { background: var(--ink); color: var(--paper); }
.knowledge-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 7%; }
.knowledge .section-title { margin-bottom: 1.5rem; }
.knowledge p { color: #d3dde5; }
.editorial-photo { position: relative; overflow: hidden; }
.editorial-photo img { width: 100%; height: 100%; object-fit: cover; }
.editorial-photo figcaption { position: absolute; bottom: 1rem; inset-inline: 1rem; color: white; background: #09213cd9; width: fit-content; max-width: calc(100% - 2rem); padding: .2rem .5rem; }
.craft-photo { aspect-ratio: 3 / 2; margin-top: 2.5rem; }
.list { border-top: 1px solid #ffffff4d; }
.list article { padding: 1.6rem 0; border-bottom: 1px solid #ffffff35; }
.list h3 { font-size: 1.5rem; line-height: 1.55; margin-bottom: .7rem; }
.source-link { display: inline-block; margin-top: .6rem; text-decoration: underline; text-underline-offset: .25rem; font-size: .8125rem; color: #bdcbd6; }
.serving-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4%; align-items: start; }
.serving-photo { aspect-ratio: 4 / 5; }
.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.8rem; }
.use-item { border-top: 1px solid var(--line); padding: 1.2rem 0 1.4rem; }
.ordinal { color: #6b8290; font: 1.25rem/1.5 var(--serif); }
.use-item h3 { font-size: 1.3rem; line-height: 1.5; margin: .4rem 0 .7rem; }
.use-item p { color: var(--muted); }
.dashi-guide { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7%; padding-top: 3rem; margin-top: 3rem; border-top: 1px solid var(--line); }
.dashi-guide h3 { font-size: 1.7rem; line-height: 1.5; margin-bottom: 1rem; }
.dashi-guide ol { margin: 0; padding-inline-start: 1.5rem; }
.dashi-guide li { padding: .5rem 0; }
.dashi-guide .source-link, .history .source-link { color: var(--muted); }
.history { background: var(--mist); }
.history-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.history-heading { font-size: 1.7rem; line-height: 1.5; margin-bottom: 2rem; }
.timeline { border-inline-start: 1px solid #aabdc8; padding-inline-start: 1.7rem; }
.history-event { padding-bottom: 1.8rem; }
.history-event h3, .history-event h4 { font-size: 1.2rem; line-height: 1.6; margin: .5rem 0 .8rem; }
.history-event p { color: var(--muted); }
.makurazaki-story { padding-inline-start: 2rem; border-inline-start: 1px solid #aabdc8; }
.history-note { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.shaver-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8%; }
.shaver-grid > div > .section-title + p { margin-top: 1.5rem; }
.shaver-panel { border-block: 1px solid var(--line); padding-block: 2rem; }
.planned-label { font-size: .875rem; color: var(--muted); }
.shaver-panel h3 { font-size: 1.7rem; line-height: 1.5; margin: .6rem 0 1rem; }
.shaver-panel p + p { margin-top: 1rem; }
.shaver-panel .button { margin-top: 1.7rem; background: var(--ink); color: var(--paper); }
.shaver-panel .button:hover { background: var(--ink2); }
.contact { background: var(--deep); color: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10%; }
.contact .section-kicker { color: var(--accent); }
.contact-copy > p { color: #c2d0dc; }
.contact .button { margin-top: 2rem; }
.contact-email { display: block; width: fit-content; max-width: 100%; margin-top: 1.5rem; font-size: 1.125rem; text-decoration: underline; text-underline-offset: .3rem; }
.contact .contact-note { margin-top: 1rem; font-size: .875rem; }
footer { padding-block: 3.8rem 1.6rem; background: var(--paper); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; }
.footer-top .brand > span { font-size: 2rem; }
.footer-top .brand small { font-size: .875rem; letter-spacing: .19em; }
.company { display: flex; align-items: center; gap: 1.4rem; font-size: .9375rem; min-width: 0; }
.company .eyebrow { font-size: .8125rem; margin-bottom: .6rem; }
.company strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.company p { margin-bottom: .5rem; }
.company summary { cursor: pointer; color: var(--muted); min-height: 44px; padding-block: .3rem; font-size: .875rem; }
.company details p { font-size: .875rem; margin-top: .6rem; }
.nr-logo { width: 124px; height: 105px; overflow: hidden; position: relative; flex: none; }
.nr-logo img { position: absolute; width: 320px; height: 320px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.locale-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; margin-top: 2.8rem; font-size: .9375rem; }
.locale-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .3rem; }
.locale-links [aria-current] { font-weight: 600; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 2rem; padding-top: 1.2rem; margin-top: 2.5rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
html[lang='ja'] .hero h1 { letter-spacing: .04em; line-height: 1.4; }
html[lang='ja'] .section-title, html[lang^='zh'] .section-title, html[lang='ko'] .section-title { letter-spacing: .015em; line-height: 1.45; }
html[lang^='zh'] h1 { line-height: 1.4; letter-spacing: .02em; }
html[lang='ko'] { word-break: keep-all; }
html[lang='th'] body { font-family: Tahoma, Arial, sans-serif; }
html[lang='th'] h1, html[lang='th'] h2, html[lang='th'] h3 { font-family: Tahoma, sans-serif; line-height: 1.65; letter-spacing: 0; }
html[dir='rtl'] body { font-family: Tahoma, Arial, sans-serif; }
html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3, html[dir='rtl'] h4 { font-family: Tahoma, Arial, sans-serif; line-height: 1.65; letter-spacing: 0; }
html[dir='rtl'] .eyebrow { letter-spacing: 0; }
html[dir='rtl'] .brand { direction: ltr; }
@media (min-width: 1650px) { .hero-image { min-height: 800px; } .hero-copy { padding-top: 7rem; } }
@media (max-width: 1100px) {
  .hero-copy { padding: 4rem 9% 2.5rem 12%; }
  .hero-image { min-height: 620px; }
  .hero h1 { font-size: 3rem; }
  .wrap { padding-inline: 6%; }
  .hero-grid { padding: 0; }
  .heading-row { gap: 3rem; }
  .serving-layout { gap: 5%; grid-template-columns: .85fr 1.15fr; }
  .uses { column-gap: 1.2rem; }
  .footer-top { flex-direction: column; gap: 2.5rem; }
}
@media (max-width: 760px) {
  .wrap { padding-inline: 7%; }
  .nav { padding: 1.25rem 7% .85rem; gap: 1rem; }
  .brand > span { font-size: 1.4rem; }
  .brand small { font-size: .75rem; letter-spacing: .1em; }
  .language-menu summary { font-size: .875rem; }
  .navlinks { gap: .25rem 1.15rem; }
  .nav-contact { margin-inline-start: 0; }
  .hero-grid { grid-template-columns: 1fr; padding: 0; }
  .hero-copy { padding: 3.5rem 7% 2.5rem; }
  .hero h1 { font-size: clamp(2.5rem, 9.8vw, 3.7rem); }
  .hero-seller { padding-top: 2rem; }
  .hero-image { min-height: 410px; }
  .hero-image img { object-position: 65% center; }
  .intro { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3.5rem; }
  .origin, .products, .knowledge, .use, .history, .shavers, .contact { padding-block: 4rem; }
  .origin-grid, .knowledge-grid, .serving-layout, .history-columns, .shaver-grid, .contact-grid, .dashi-guide { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-title { font-size: clamp(2rem, 7.5vw, 2.7rem); }
  .number { margin-top: 1.4rem; }
  .heading-row { display: block; margin-bottom: 2rem; }
  .heading-row > p { margin-top: 1.5rem; }
  .cards { grid-template-columns: 1fr; }
  .card, .card:first-child, .card:last-child { padding: 1.8rem 0; border-inline-end: 0; border-bottom: 1px solid #b4c1c9; }
  .card:last-child { border-bottom: 0; }
  .card small { margin-bottom: 1rem; }
  .craft-photo { margin-top: 2rem; }
  .serving-photo { aspect-ratio: 5 / 4; }
  .uses { column-gap: 1.5rem; }
  .use-item p { font-size: 1rem; }
  .makurazaki-story { padding-inline-start: 1.7rem; }
  .dashi-guide { padding-top: 2rem; margin-top: 2rem; }
  .contact-grid { gap: 1.5rem; }
  footer { padding-top: 3.5rem; }
  .company { width: 100%; gap: .9rem; align-items: center; }
  .company-copy { flex: 1; }
  .nr-logo { width: 92px; height: 85px; }
  .nr-logo img { width: 245px; height: 245px; }
  .company strong { font-size: .9375rem; }
  .company .eyebrow { font-size: .8125rem; letter-spacing: .12em; }
  .company p { font-size: .875rem; }
  .locale-links { column-gap: 1rem; }
}
@media (max-width: 440px) {
  .nav > .brand { width: 100%; }
  .language-menu { margin-inline-start: 0; }
  .language-options { inset-inline-start: 0; inset-inline-end: auto; }
  .hero-image { min-height: 350px; }
  .uses { grid-template-columns: 1fr; }
  .serving-photo { aspect-ratio: 1; }
  .fact { grid-template-columns: 1fr 1.5fr; gap: .8rem; }
  .footer-top .brand > span { font-size: 1.8rem; }
  .footer-top .brand small { font-size: .8125rem; letter-spacing: .12em; }
  .company { gap: .7rem; }
  .nr-logo { width: 76px; height: 72px; }
  .nr-logo img { width: 205px; height: 205px; }
  .company strong, .company p, .company summary { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }