@font-face {
  font-family: Pretendard;
  src: url('../fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #f1eee6;
  --ink: #302d25;
  --muted: #767063;
  --line: #d6d0c3;
  --serif: 'Batang', '바탕', 'Noto Serif CJK KR', 'Nanum Myeongjo', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Pretendard, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
figure, p, h1, h2, h3 { margin: 0; }
p { line-height: 1.95; word-break: keep-all; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; word-break: keep-all; letter-spacing: -.055em; }
img { display: block; }
.skip { position: fixed; left: 20px; top: -80px; z-index: 30; background: var(--paper); padding: 15px; }
.skip:focus { top: 12px; }
.header { position: fixed; inset: 0 0 auto; z-index: 10; height: 94px; padding: 0 4%; display: flex; align-items: center; color: var(--paper); gap: 42px; transition: background .35s, color .35s; }
.header.is-paper, .header:has(.menu[open]) { background: rgba(241,238,230,.97); color: var(--ink); }
.brand { display: block; flex-shrink: 0; }
.crop { position: relative; display: block; overflow: hidden; }
.crop img { position: absolute; height: auto; max-width: none; }
.logo { width: 160px; aspect-ratio: 480 / 154; mix-blend-mode: multiply; }
.logo img { width: 326.6667%; left: -146.875%; top: -427.27%; }
.header .brand { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.header.is-paper .brand, .header:has(.menu[open]) .brand { filter: none; mix-blend-mode: multiply; }
.desktop-nav { display: flex; gap: 32px; margin-left: auto; font-size: 12px; }
.desktop-nav a, .header-shop { padding: 12px 0; }
.desktop-nav a { position: relative; }
.desktop-nav a:after { content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.desktop-nav a:hover:after { transform: scaleX(1); }
.header-shop { font-size: 12px; display: flex; gap: 25px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 40px; height: 40px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { height: 1px; width: 19px; background: currentColor; transition: transform .2s; }
.menu[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu nav { position: absolute; right: -23px; top: 59px; width: min(390px, 100vw); padding: 20px 28px 28px; background: var(--paper); color: var(--ink); display: grid; gap: 8px; font-size: 15px; }
.menu nav a { padding: 14px 0; }
.hero-track { height: 135svh; }
.hero { height: 100svh; min-height: 660px; position: sticky; top: 0; isolation: isolate; overflow: hidden; background: #302b22; color: var(--paper); }
.hero-image { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 57%; }
.hero:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,21,15,.4), transparent 70%), linear-gradient(0deg,rgba(24,21,15,.45),transparent 35%); }
.hero-copy { position: absolute; left: 7%; top: 28%; }
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .08em; margin-bottom: 26px; }
h1 { font-size: clamp(52px,6vw,88px); line-height: 1.3; }
h1 span { display: inline-block; margin-left: .45em; }
.intro { font-size: 13px; color: #e1d9ca; margin-top: 30px; }
.hero-bottom { position: absolute; bottom: 40px; left: 4%; right: 4%; display: flex; align-items: end; justify-content: space-between; }
.discover { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .04em; }
.scroll-line { display: inline-block; width: 1px; height: 42px; background: #ffffff36; position: relative; overflow: hidden; }
.scroll-line:after { content: ''; position: absolute; width: 1px; height: 24px; background: #e9e1d1; top: var(--scroll-mark,0px); }
.hero-caption { font-size: 10px; line-height: 1.8; color: #e1d9ca; text-align: right; }
.hero-index { position: absolute; top: 51%; left: 2%; writing-mode: vertical-rl; transform: rotate(180deg); font: 8px Georgia, serif; letter-spacing: .18em; color: #d2c8b6; }
.hero-index span { margin: 12px 0; }
.story { padding: 70px 8% 140px; position: relative; background: var(--paper); }
.section-label { display: flex; align-items: center; gap: 22px; font-size: 10px; letter-spacing: .04em; }
.section-label > span:first-child { font: 11px Georgia,serif; color: #92846d; }
.section-label .label-en { margin-left: auto; font: 9px Georgia,serif; letter-spacing: .12em; color: var(--muted); }
.manifesto { text-align: center; padding: 115px 0 130px; }
.manifesto h2 { font-size: clamp(33px,4vw,62px); line-height: 1.65; letter-spacing: -.065em; }
.story-line { display: block; }
.manifesto > p { margin-top: 36px; font-size: 12px; color: var(--muted); }
.origin { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 17%; align-items: center; }
.origin-photo { min-width: 0; }
.rice-photo { aspect-ratio: 390/445; }
.rice-photo img { width: 402.0513%; left: -59.7436%; top: -115.0562%; }
.origin-photo figcaption { margin-top: 16px; color: var(--muted); font-size: 9px; }
.origin-copy .eyebrow { color: var(--muted); margin-bottom: 24px; }
h3 { font-size: clamp(32px,3vw,44px); line-height: 1.5; }
.origin-copy > p:not(.eyebrow) { font-size: 12px; line-height: 2.1; color: var(--muted); margin-top: 28px; }
.origin-note { display: flex; gap: 60px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 35px; font-size: 10px; }
.products { padding: 60px 5% 32px; background: #e5dfd2; }
.products .section-label { margin: 0 3% 60px; }
.product-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8%; align-items: center; }
.product-image { min-width: 0; overflow: hidden; }
.product-photo { aspect-ratio: 503/343; }
.product-photo img { width: 311.7296%; left: -115.507%; top: -52.187%; }
.product-content { padding-right: 4%; }
.product-content .eyebrow { color: var(--muted); }
.product-content h2 { font-size: clamp(30px,3vw,45px); line-height: 1.5; }
.product-content > p:not(.eyebrow) { font-size: 12px; color: var(--muted); margin-top: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 65px; font-size: 11px; border-bottom: 1px solid #8c8170; padding: 0 0 13px; margin-top: 35px; }
.text-link span, .header-shop span { display: inline-block; transition: transform .3s; }
.text-link:hover span, .header-shop:hover span { transform: translate(3px,-3px); }
.product-footnote { display: flex; justify-content: space-between; padding: 27px 3% 0; margin-top: 55px; border-top: 1px solid #cbc2b2; font-size: 10px; color: var(--muted); }
.closing { text-align: center; position: relative; overflow: hidden; padding: 135px 5% 120px; }
.closing-kicker { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.closing h2 { font-size: clamp(48px,6vw,80px); line-height: 1.4; margin-top: 28px; }
.closing .text-link { gap: 100px; margin-top: 35px; }
.closing-signature { position: absolute; bottom: 50px; right: 6%; writing-mode: vertical-rl; font: 12px var(--serif); letter-spacing: .2em; color: #978774; }
footer { margin: 0 4%; padding: 32px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 32px; }
footer .logo { width: 135px; }
footer p { font-size: 10px; color: var(--muted); }
footer > span { margin-left: auto; font: 9px Georgia,serif; letter-spacing: .12em; color: var(--muted); }
.back-top { margin-left: 40px; font-size: 10px; }
.back-top span { margin-left: 16px; }
/* Scroll positions drive these variables; there is no continuous animation loop. */
.motion-ready .hero-image { transform: scale(var(--hero-scale,1.055)); transform-origin: 70% 60%; }
.motion-ready .hero-copy { transform: translateY(var(--hero-copy-y,0px)); opacity: var(--hero-opacity,1); }
.motion-ready .story-line { background: linear-gradient(90deg,var(--ink) var(--ink-progress,100%),#b7b0a3 var(--ink-progress,100%)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.motion-ready .origin-photo .crop { clip-path: inset(var(--origin-inset,0%) 0); }
.motion-ready .origin-copy { transform: translateY(var(--origin-y,0px)); }
.motion-ready .product-image .crop { transform: scale(var(--product-scale,1)); }
.motion-ready .product-image { clip-path: inset(var(--product-inset,0%) 0); }
.motion-ready .closing h2 { transform: translateY(var(--closing-y,0px)); }
@media(min-width:1600px) { .story { padding-left: 12%; padding-right: 12%; } .products { padding-left: 8%; padding-right: 8%; } }
@media(max-width:900px) { .header { gap: 28px; } .hero-copy { left: 8%; } .origin { gap: 10%; } .product-layout { gap: 5%; } .product-content h2 { font-size: 30px; } footer p { display: none; } }
@media(max-width:640px) {
  html { scroll-padding-top: 80px; }
  .header { height: 80px; padding: 0 6%; }
  .header .logo { width: 134px; }
  .desktop-nav,.header-shop { display: none; }
  .menu { display: block; margin-left: auto; }
  .hero-track { height: 112svh; }
  .hero { min-height: 660px; }
  .hero-image img { object-position: 65% center; }
  .hero:after { background: linear-gradient(180deg,rgba(24,21,15,.25),rgba(24,21,15,.12) 50%,rgba(24,21,15,.5)),linear-gradient(90deg,rgba(24,21,15,.4),transparent); }
  .hero-copy { top: 22%; left: 7%; right: 5%; }
  .hero-copy .eyebrow { font-size: 10px; margin-bottom: 22px; }
  h1 { font-size: clamp(45px,12vw,65px); }
  h1 span { margin-left: 0; }
  .intro { font-size: 11px; margin-top: 24px; }
  .hero-index { display: none; }
  .hero-bottom { left: 7%; right: 7%; bottom: 28px; }
  .hero-caption { font-size: 8px; }
  .discover { font-size: 9px; gap: 10px; }
  .scroll-line { height: 32px; }
  .story { padding: 42px 7% 75px; }
  .section-label { gap: 14px; font-size: 9px; }
  .section-label .label-en { font-size: 7px; letter-spacing: .06em; }
  .manifesto { padding: 75px 0 80px; }
  .manifesto h2 { font-size: clamp(25px,6.6vw,36px); line-height: 1.75; }
  .manifesto > p { font-size: 10px; margin-top: 25px; }
  .origin { grid-template-columns: 1fr; gap: 36px; }
  .origin-photo { width: 82%; }
  .origin-copy { padding-left: 15%; }
  .origin-copy h3 { font-size: 32px; }
  .origin-copy .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .origin-copy > p:not(.eyebrow) { font-size: 11px; margin-top: 22px; }
  .origin-note { gap: 35px; margin-top: 25px; font-size: 9px; }
  .products { padding: 38px 0 25px; }
  .products .section-label { margin: 0 7% 34px; }
  .product-layout { grid-template-columns: 1fr; gap: 38px; }
  .product-image { width: 93%; }
  .product-content { padding: 0 7%; }
  .product-content h2 { font-size: 31px; }
  .product-content .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .product-content > p:not(.eyebrow) { font-size: 11px; margin-top: 20px; }
  .text-link { font-size: 10px; margin-top: 27px; }
  .product-footnote { margin: 38px 7% 0; padding: 20px 0 0; display: block; font-size: 9px; }
  .product-footnote p { margin-top: 8px; }
  .closing { padding: 85px 7% 90px; }
  .closing h2 { font-size: 51px; margin-top: 22px; }
  .closing-signature { right: 7%; bottom: 32px; font-size: 9px; }
  footer { margin: 0 7%; flex-wrap: wrap; gap: 24px; padding: 28px 0; }
  footer .logo { width: 125px; }
  footer > span { font-size: 8px; }
  .back-top { margin-left: 0; width: 100%; font-size: 9px; text-align: right; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hero-track { height: auto; }
  .hero { position: relative; }
  .motion-ready .hero-image,.motion-ready .hero-copy,.motion-ready .origin-copy,.motion-ready .product-image .crop,.motion-ready .closing h2 { transform: none; opacity: 1; }
  .motion-ready .origin-photo .crop,.motion-ready .product-image { clip-path: none; }
  .motion-ready .story-line { background: none; color: var(--ink); }
  * { transition: none!important; }
}
/* Composite the white logo against the photograph at the header layer. */
.header:not(.is-paper):not(:has(.menu[open])) { mix-blend-mode: screen; }
/* One reversible scene: the table leaves, the centered pouch receives and shrinks. */
.journey-layer { display: none; }
/* 100svh stage + 380svh of scrolling shortened to 67.5% in pouch-journey.js. */
.journey-loading .hero-track,.journey-enabled .hero-track { height: 356.5svh; }
.journey-enabled .hero { background: var(--paper); }
.journey-enabled .hero-image { transform: translateY(var(--journey-bg-y,0px)); z-index: 0; }
.journey-enabled .hero:after { transform: translateY(var(--journey-bg-y,0px)); z-index: 1; pointer-events: none; }
.journey-enabled .hero-copy { z-index: 5; opacity: 1; transform: translateY(var(--journey-hero-y,0px)); }
.journey-enabled .hero-bottom,.journey-enabled .hero-index { z-index: 5; transform: translateY(var(--journey-hero-y,0px)); }
.journey-enabled .journey-layer { display: block; position: absolute; top: 0; left: 0; }
.journey-food { z-index: 3; pointer-events: none; transform-origin: center; filter: brightness(.91) saturate(.82); }
.journey-food svg { width: 100%; height: 100%; overflow: visible; display: block; }
.journey-pack-copy { z-index: 3; color: var(--ink); width: 32%; }
.journey-pack-copy h2 { font-size: clamp(30px,4.6vw,70px); line-height: 1.42; }
.journey-pack-copy .eyebrow { color: var(--muted); }
.journey-bag-rear { z-index: 2; }
.journey-bag-lip { z-index: 4; }
.journey-bag-rear,.journey-bag-lip { transform-origin: center top; pointer-events: none; }
.pouch-art { width: 100%; height: 100%; display: block; overflow: visible; }
/* Continue the real story beneath the small pouch, within the same viewport. */
.journey-loading .story,.journey-enabled .story { margin-top: -42svh; padding-top: 24px; }
.journey-loading .manifesto,.journey-enabled .manifesto { padding-top: 40px; padding-bottom: 85px; }
@media(max-width:640px) {
  .journey-loading .hero-track,.journey-enabled .hero-track { height: 329.5svh; }
  .journey-loading .hero { min-height: 0; }
  .journey-enabled .hero { min-height: 0; height: 100svh; }
  .journey-pack-copy { width: 86%; text-align: center; }
  .journey-pack-copy h2 { font-size: 39px; line-height: 1.35; }
  .journey-pack-copy .eyebrow { font-size: 9px; margin-bottom: 15px; }
  .journey-loading .story,.journey-enabled .story { margin-top: -34svh; }
  .journey-loading .manifesto,.journey-enabled .manifesto { padding-top: 34px; padding-bottom: 65px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey-enabled .hero-track { height: auto; }
  .journey-enabled .journey-layer { display: none; }
  .journey-enabled .hero-image,.journey-enabled .hero:after,.journey-enabled .hero-copy,.journey-enabled .hero-bottom,.journey-enabled .hero-index { transform: none; }
}