@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --ink: #26372d;
  --ink-soft: #506158;
  --paper: #f5f2ea;
  --paper-deep: #e9e4d7;
  --sage: #b5c19e;
  --sage-light: #dbe2ca;
  --clay: #c9694b;
  --line: rgba(38, 55, 45, 0.18);
  --serif: 'Instrument Serif', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.8; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-shell { width: min(1180px, calc(100% - 96px)); margin: 0 auto; }
.eyebrow { margin: 0 0 24px; font: 500 11px/1.2 var(--mono); letter-spacing: .16em; }
.site-header { width: min(1280px, calc(100% - 64px)); height: 92px; margin: 0 auto; display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { display: inline-flex; flex-direction: column; gap: 0; margin-right: auto; }
.brand-name { font: 500 14px/1.1 var(--mono); letter-spacing: .05em; }
.brand-sub { color: var(--ink-soft); font-size: 10px; letter-spacing: .16em; }
.site-nav { display: flex; gap: 30px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.site-nav a, .text-link { transition: color .2s ease; }
.site-nav a:hover, .text-link:hover { color: var(--clay); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 12px 22px; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); font-size: 12px; letter-spacing: .04em; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { color: var(--ink); background: transparent; transform: translateY(-2px); }
.button span { font-size: 17px; line-height: 1; }
.button-small { min-height: 38px; padding: 8px 14px; font: 500 10px var(--mono); }
.menu-toggle { display: none; border: 0; background: transparent; }

.hero { min-height: 675px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 50px; padding-top: 54px; padding-bottom: 62px; }
.hero-copy { padding: 22px 0 0 5%; }
.hero h1 { max-width: 620px; margin: 0 0 28px; font: 400 clamp(55px, 7.1vw, 104px)/.97 var(--serif); letter-spacing: -.035em; }
h1 em, h2 em { color: var(--clay); font-style: italic; }
.hero-lead { max-width: 460px; color: var(--ink-soft); font-size: 15px; line-height: 2.1; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.text-link { font: 500 11px var(--mono); letter-spacing: .02em; }
.text-link span { margin-left: 8px; color: var(--clay); font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 76px; color: var(--ink-soft); font: 10px var(--mono); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(201,105,75,.12); }
.hero-art { min-height: 590px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--sage); }
.hero-art::before { content: ''; position: absolute; width: 62%; height: 78%; border-radius: 50%; background: rgba(245,242,234,.2); filter: blur(1px); }
.leaf-art { width: min(72%, 480px); height: auto; position: relative; z-index: 2; overflow: visible; }
.leaf-art .stem, .leaf-art .leaf, .leaf-art .vein, .leaf-art .pot-rim, .leaf-art .pot, .leaf-art .pot-detail { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.leaf-art .stem { stroke-width: 5; }
.leaf-art .thin { stroke-width: 2.5; }
.leaf-art .pot { fill: rgba(245,242,234,.18); }
.art-orbit { position: absolute; z-index: 1; border: 1px solid rgba(38,55,45,.4); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 78%; height: 40%; }
.orbit-two { width: 45%; height: 78%; transform: rotate(39deg); }
.art-label, .art-caption { position: absolute; z-index: 3; color: var(--ink); font: 500 10px/1.35 var(--mono); letter-spacing: .14em; }
.art-label { top: 28px; left: 28px; }
.art-caption { right: 28px; bottom: 24px; margin: 0; text-align: right; }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 148px; padding-bottom: 160px; border-top: 1px solid var(--line); }
h2 { margin: 0; font: 400 clamp(43px, 5.6vw, 78px)/1 var(--serif); letter-spacing: -.035em; }
.intro-copy { padding-top: 45px; max-width: 520px; }
.large-copy { margin: 0 0 28px; font-size: 19px; line-height: 1.95; }
.intro-copy > p:not(.large-copy) { color: var(--ink-soft); font-size: 13px; line-height: 2; }
.signature { margin-top: 54px; font: 13px var(--serif); font-style: italic; }
.signature span { margin-left: 10px; color: var(--ink-soft); font: 10px var(--mono); font-style: normal; }

.journal { padding-bottom: 170px; }
.section-topline { display: flex; justify-content: space-between; align-items: end; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.section-intro { max-width: 250px; margin: 0 4% 3px 0; color: var(--ink-soft); font-size: 12px; line-height: 2; }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 18px; }
.journal-card { min-height: 355px; padding: 25px 26px; position: relative; display: flex; flex-direction: column; }
.card-sage { background: var(--sage-light); }
.card-clay { background: var(--clay); color: var(--paper); }
.card-ink { background: var(--ink); color: var(--paper); }
.card-number { font: 11px var(--mono); opacity: .75; }
.card-icon { margin: auto 0 12px; font: 58px/1 var(--serif); font-style: italic; }
.journal-card h3 { margin: 0; font: 400 35px/1 var(--serif); }
.journal-card p { max-width: 270px; margin: 16px 0 42px; font-size: 12px; line-height: 1.9; opacity: .82; }
.card-tag { margin-top: auto; font: 10px var(--mono); letter-spacing: .12em; opacity: .7; }

.channels { padding-bottom: 170px; }
.channels-panel { padding: 80px 8%; display: grid; grid-template-columns: 1fr 1.05fr; gap: 90px; background: var(--ink); color: var(--paper); }
.light-heading .eyebrow { color: var(--sage); }
.channel-list { align-self: center; border-top: 1px solid rgba(245,242,234,.3); }
.channel-row { min-height: 93px; display: grid; grid-template-columns: 45px 1fr auto; gap: 18px; align-items: center; border-bottom: 1px solid rgba(245,242,234,.3); }
.channel-index, .channel-state { color: var(--sage); font: 10px var(--mono); }
.channel-row strong { display: block; font: 400 28px/1.1 var(--serif); }
.channel-row small { display: block; margin-top: 3px; color: rgba(245,242,234,.65); font-size: 10px; }
.channel-state { font-size: 9px; letter-spacing: .07em; }

.shop { min-height: 500px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; padding-top: 80px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.shop-mark { width: 245px; height: 245px; display: grid; place-content: center; border: 1px solid var(--ink); border-radius: 50%; text-align: center; font: 500 27px/.93 var(--mono); letter-spacing: -.08em; transform: rotate(-12deg); }
.shop-mark span { margin-top: 17px; color: var(--clay); font: 8px var(--mono); letter-spacing: .1em; }
.shop-copy { max-width: 520px; }
.shop-copy h2 { margin-bottom: 28px; }
.shop-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; line-height: 2; }
.coming-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: 10px var(--mono); letter-spacing: .12em; }

.closing { padding: 132px 0 138px; text-align: center; border-top: 1px solid var(--line); }
.closing h2 { margin: 0 auto 26px; }
.closing > p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; }
.closing .button { margin-top: 32px; }
.site-footer { display: flex; justify-content: space-between; align-items: end; padding-top: 25px; padding-bottom: 35px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; gap: 3px; font: 500 12px var(--mono); }
.footer-brand small, .footer-meta { color: var(--ink-soft); font: 9px var(--mono); letter-spacing: .08em; }
.footer-meta { display: flex; gap: 22px; }

@media (max-width: 800px) {
  .section-shell { width: min(100% - 42px, 620px); }
  .site-header { width: calc(100% - 42px); height: 76px; gap: 18px; }
  .header-button { display: none; }
  .menu-toggle { display: grid; gap: 5px; padding: 8px 0 8px 8px; margin-left: auto; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 24px; height: 1px; display: block; background: var(--ink); }
  .site-nav { position: absolute; top: 75px; right: 0; left: 0; display: none; padding: 22px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 28px rgba(38,55,45,.08); }
  .site-nav.is-open { display: grid; gap: 22px; }
  .hero { min-height: auto; display: flex; flex-direction: column; gap: 58px; padding-top: 78px; padding-bottom: 80px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(54px, 15vw, 84px); }
  .hero-lead { font-size: 14px; }
  .hero-note { margin-top: 45px; }
  .hero-art { width: 100%; min-height: 470px; }
  .intro, .shop { display: block; padding-top: 92px; padding-bottom: 105px; }
  .intro-copy { padding-top: 42px; }
  .journal { padding-bottom: 105px; }
  .section-topline { display: block; padding-bottom: 35px; }
  .section-intro { margin: 32px 0 0; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card { min-height: 285px; }
  .channels { padding-bottom: 105px; }
  .channels-panel { display: block; padding: 55px 24px; }
  .channel-list { margin-top: 62px; }
  .channel-row { grid-template-columns: 32px 1fr; gap: 10px; }
  .channel-state { grid-column: 2; margin-top: -26px; text-align: right; }
  .shop-mark { width: 190px; height: 190px; margin: 0 auto 65px; font-size: 22px; }
  .closing { padding: 94px 0 100px; }
  .site-footer { display: block; }
  .footer-meta { justify-content: space-between; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}