@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono.ttf') format('truetype');
}

:root {
  color-scheme: light;
  --background: #ececea;
  --paper: #e0e0dd;
  --ink: #0f1a0c;
  --muted: #4c5847;
  --leaf: #2e5b23;
  --cream: #fbfaf3;
  --line: rgba(15, 26, 12, .14);
  --control: rgba(255, 255, 255, .45);
  --selected-muted: rgba(251, 250, 243, .7);
  --disabled-fill: rgba(15, 26, 12, .12);
  --disabled-text: rgba(15, 26, 12, .42);
  --hero-fallback: #cfe3b8;
  --hero-shade: 12, 32, 8;
  --font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --mono: 'IBM Plex Mono', var(--font);
  --title: clamp(36px, 4.6vw, 72px);
  --subtitle: clamp(20px, 1.7vw, 24px);
  --body: 17px;
  --caption: 13px;
  --gutter: 40px;
  --content-width: 1600px;
  --radius: 6px;
  --thumb-radius: 4px;
  --pill: 999px;
  --s8: 8px;
  --s10: 10px;
  --s12: 12px;
  --s14: 14px;
  --s16: 16px;
  --s18: 18px;
  --s20: 20px;
  --s22: 22px;
  --s24: 24px;
  --s28: 28px;
  --s30: 30px;
  --s32: 32px;
  --s36: 36px;
  --s40: 40px;
  --s48: 48px;
  --s56: 56px;
  --s64: 64px;
  --s72: 72px;
  --s80: 80px;
  --s96: 96px;
  --s112: 112px;
  --s120: 120px;
  --target: 44px;
  --fast: 200ms;
  --swap: 320ms;
  --scene: 600ms;
  --zoom: 1200ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

.home-page main, .site-footer {
  --title: clamp(44px, 6.2vw, 96px);
  --subtitle: clamp(28px, 2.25vw, 36px);
  --body: 24px;
  --caption: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s24); }
body { background: var(--background); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { color: var(--cream); background: var(--leaf); }
h1, h2, h3, p, dd { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
p, dd { text-wrap: pretty; }
h2 { font-size: var(--title); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
h3 { font-size: var(--subtitle); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.phrase { display: inline-block; }
.mono, .section-label, .story-kicker { font-family: var(--mono); font-size: var(--caption); letter-spacing: .06em; }
.section-label, .story-kicker { color: var(--leaf); }
.section-label { margin-bottom: var(--s18); }
.desc, .shop-description { color: var(--muted); font-size: var(--body); line-height: 1.6; letter-spacing: -.015em; }
.skip-link { position: fixed; z-index: 50; top: var(--s12); left: var(--s12); padding: var(--s16); background: var(--cream); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.wrap { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); }

.kv { position: relative; height: 92.5svh; min-height: 520px; color: var(--cream); background: var(--hero-fallback); overflow: hidden; }
.hero-poster, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster { object-fit: cover; object-position: center 35%; }
.hero-canvas { opacity: 0; }
.hero-canvas.is-ready { opacity: 1; }
.hero-toggle { position: absolute; top: var(--gutter); right: var(--gutter); min-height: var(--target); padding: var(--s10) var(--s16); border: 1px solid var(--selected-muted); border-radius: var(--pill); color: var(--cream); background: rgba(var(--hero-shade), .64); font-size: var(--caption); }
.hero-toggle:hover { background: var(--ink); }
.hero-toggle:focus-visible { outline-color: var(--cream); }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--hero-shade), 0) var(--hero-fade-start, 38%), rgba(var(--hero-shade), .34) var(--hero-fade-middle, 70%), rgba(var(--hero-shade), .64)); pointer-events: none; }
.hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s112); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s40); text-shadow: 0 1px 24px rgba(10, 30, 6, .25); }
.hero-eyebrow { margin-bottom: var(--s22); }
.hero-copy h1 { font-size: var(--title); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.hero-lede { white-space: nowrap; font-size: var(--body); line-height: 1.5; letter-spacing: -.02em; }
.hero-facts { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: var(--s72); border-top: 1px solid rgba(251, 250, 243, .75); display: flex; justify-content: space-between; align-items: center; gap: var(--s20); }
.home-section { padding-block: var(--s40) var(--s56); border-top: 1px solid var(--line); }
.home-page main h2 { line-height: 1.1; }
.home-page main :is(.desc, .shop-description) { line-height: 1.5; }
.shop { padding-top: var(--s40); border-top: 0; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s48); align-items: start; }
.buy-info { min-width: 0; }
.buy-info h2 { margin-bottom: var(--s20); }
.gal-main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.product-photo { display: block; width: 100%; height: 100%; border: 0; background: transparent; cursor: zoom-in; }
.product-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--scene) var(--ease); }
.product-photo[aria-pressed='true'] { cursor: zoom-out; }
.product-photo[aria-pressed='true'] img { transform: scale(1.65); }
.product-photo:focus-visible { outline-offset: -8px; }
.zoom-label { position: absolute; top: var(--s16); right: var(--s16); padding: var(--s8) var(--s12); border-radius: var(--thumb-radius); background: var(--cream); font-size: var(--caption); opacity: 0; transition: opacity var(--fast); }
.image-arrow { position: absolute; bottom: var(--s16); width: var(--target); height: var(--target); display: grid; place-items: center; border: 0; border-radius: var(--thumb-radius); background: var(--cream); opacity: 0; transition: opacity var(--fast); }
.image-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#photoPrev { left: var(--s16); }
#photoNext { right: var(--s16); }
.gal-main:hover :is(.image-arrow, .zoom-label), .gal-main:focus-within :is(.image-arrow, .zoom-label) { opacity: 1; }
.thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s10); margin-top: var(--s10); }
.thumbnail { width: 100%; aspect-ratio: 1; border: 0; border-radius: var(--thumb-radius); background: transparent; opacity: .5; overflow: hidden; transition: opacity var(--fast); }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.thumbnail[aria-pressed='true'] { opacity: 1; outline: 1.5px solid var(--ink); outline-offset: 2px; }
.thumbnail:hover { opacity: 1; }
.thumbnail:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
.photo-caption { display: flex; justify-content: space-between; gap: var(--s16); margin-top: var(--s14); color: var(--muted); font-size: var(--caption); }
.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s14); margin-block: var(--s24); padding-bottom: var(--s20); border-bottom: 1px solid var(--line); font-size: var(--body); }
.shop-price strong { font-size: var(--subtitle); font-weight: 800; letter-spacing: -.03em; }
.shop-price strong small { font-size: var(--body); font-weight: 600; margin-left: 2px; }
.shop-price > span { color: var(--muted); }
.shop-price .shipping-tag { color: var(--leaf); font-weight: 600; }
.pack-options { border: 0; min-width: 0; }
.pack-options legend { margin-bottom: var(--s14); color: var(--muted); font-size: var(--caption); }
.pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s10); margin-bottom: var(--s24); }
.pack-choice { position: relative; display: flex; flex-direction: column; gap: var(--s8); padding: var(--s18) var(--s16); min-height: var(--target); border: 1px solid var(--line); border-radius: var(--radius); background: var(--control); cursor: pointer; transition: background var(--fast), color var(--fast); }
.pack-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pack-choice > span { font-size: var(--body); font-weight: 700; }
.pack-choice strong { color: var(--muted); font-size: var(--caption); font-weight: 400; }
.pack-choice:has(input:checked) { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pack-choice:has(input:checked) strong { color: var(--selected-muted); }
.pack-choice:has(input:focus-visible) { outline: 2px solid var(--leaf); outline-offset: 4px; }
.purchase-facts { font-size: var(--body); }
.purchase-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s12); line-height: 1.6; }
.purchase-facts > div + div { margin-top: var(--s12); }
.purchase-facts dt { color: var(--muted); }
.purchase-facts a { margin-left: var(--s8); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.purchase-exception { color: var(--muted); font-size: var(--caption); margin-block: var(--s10) var(--s20); }
.action { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: var(--s12) var(--s20); border: 0; border-radius: var(--radius); background: var(--ink); color: var(--cream); font-size: var(--body); font-weight: 600; transition: background var(--fast); }
.action:hover { background: var(--leaf); }
.action:disabled { background: var(--disabled-fill); color: var(--disabled-text); cursor: not-allowed; }
.order-note { color: var(--muted); font-size: var(--caption); margin-top: var(--s14); text-align: center; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s10); min-height: var(--target); padding-block: var(--s8); border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: var(--caption); }
.text-link:hover { color: var(--leaf); }
.order-button { display: flex; width: fit-content; margin-inline: auto; margin-top: var(--s8); }
.order-summary { padding: var(--s24); margin-top: var(--s24); border-radius: var(--radius); background: var(--control); }
.order-summary h3 { margin-bottom: var(--s8); }
.order-summary p { font-size: var(--body); line-height: 1.6; }
.summary-notice { color: var(--muted); margin-block: var(--s12); }
#copyStatus:not(:empty) { margin-top: var(--s12); }

.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s24); margin-bottom: var(--s32); }
.home-section-head > p { flex-shrink: 0; }
.story-layout { display: block; }
.story-stage { display: none; }
.story-chapters { list-style: none; }
.story-chapter + .story-chapter { margin-top: var(--s48); }
.chapter-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper); margin-bottom: var(--s16); }
.chapter-photo img { width: 100%; height: 100%; object-fit: cover; }
.recipe-section .chapter-photo { aspect-ratio: 1; }
.chapter-copy .story-kicker { margin-bottom: var(--s10); }
.chapter-copy h3 { margin-bottom: var(--s10); }
.chapter-copy p { max-width: 32em; }
.read-recipe { margin-top: var(--s18); }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .story-layout[data-enhanced='true'] { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--s48); }
  .story-layout[data-enhanced='true'] .story-stage { position: sticky; top: var(--s32); display: block; min-width: 0; }
  .story-layout[data-enhanced='true'] .chapter-copy { --subtitle: 44px; }
  .story-media { position: relative; width: 100%; height: min(62svh, 720px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
  .recipe-section .story-media { aspect-ratio: 1; height: min(62svh, 640px); }
  .story-frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--scene) ease; }
  .story-frame[data-active='true'] { opacity: 1; }
  .story-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform var(--zoom) var(--ease); }
  .story-frame[data-active='true'] img { transform: none; }
  .story-caption { display: flex; justify-content: space-between; gap: var(--s20); margin-top: var(--s14); color: var(--muted); font-size: var(--caption); }
  .story-chapter { display: flex; flex-direction: column; justify-content: center; min-height: max(280px, 38svh); padding-block: var(--s32); border-top: 1px solid var(--line); }
  .story-chapter:first-child { border-top-color: var(--ink); }
  .story-chapter + .story-chapter { margin-top: 0; }
  .story-layout[data-enhanced='true'] .chapter-photo { display: none; }
  .story-chapter:last-child { min-height: max(320px, 42svh); }
}

.shipping-section, .reading-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s48); }
.shipping-facts { margin-block: var(--s40) var(--s32); border-top: 1px solid var(--ink); }
.shipping-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s12); padding-block: var(--s22); border-bottom: 1px solid var(--line); font-size: var(--body); }
.shipping-facts dt { padding-top: 2px; color: var(--muted); font-size: var(--caption); }
.shipping-facts dd { font-weight: 700; }
.shipping-facts small { display: block; margin-top: var(--s8); color: var(--muted); font-size: var(--caption); font-weight: 400; }
.shipping-questions h3 { margin-bottom: var(--s16); }
.delivery-list details { border-bottom: 1px solid var(--line); }
.delivery-list details:first-child { border-top: 1px solid var(--ink); }
.delivery-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s20); padding-block: var(--s24); list-style: none; cursor: pointer; font-size: var(--body); font-weight: 600; letter-spacing: -.02em; }
.delivery-list summary::-webkit-details-marker { display: none; }
.delivery-list summary::after { content: '+'; flex-shrink: 0; font: 400 var(--subtitle)/1 var(--mono); transition: transform var(--fast); }
.delivery-list details[open] summary::after { transform: rotate(45deg); }
.delivery-list details p { padding: 0 var(--s40) var(--s28) 0; color: var(--muted); font-size: var(--body); line-height: 1.65; }
.delivery-list details a { text-decoration: underline; text-underline-offset: 3px; }
.reading-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.reading-intro { --title: clamp(40px, 5vw, 80px); }
.guide-topics { display: flex; flex-wrap: wrap; gap: var(--s8); margin-block: var(--s36) var(--s32); }
.guide-topics a { display: inline-flex; align-items: center; min-height: var(--target); padding: var(--s10) var(--s16); border: 1px solid var(--line); border-radius: var(--pill); font-size: var(--caption); }
.guide-topics a:hover { color: var(--leaf); border-color: var(--ink); }
.side-links { display: flex; flex-wrap: wrap; gap: var(--s28); }
.reading-list a { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--s24); align-items: center; min-height: var(--target); padding-block: var(--s30); border-bottom: 1px solid var(--line); }
.reading-list a:first-child { border-top: 1px solid var(--ink); }
.reading-list small { color: var(--leaf); font-size: var(--caption); }
.reading-list a > span { font: 400 var(--subtitle) var(--mono); }
.reading-list a:hover h3 { color: var(--leaf); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s24); }
.post .post-photo { aspect-ratio: 3 / 2; margin-bottom: var(--s20); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--scene) var(--ease); }
.post:hover img { transform: scale(1.04); }
.post h3 { margin-bottom: var(--s12); }
.post:hover h3 { color: var(--leaf); }
.post .mono { color: var(--muted); }
.blog-more { margin-top: var(--s32); }
.site-footer { background: var(--ink); color: var(--cream); }
.site-footer .wrap { min-height: var(--s120); display: flex; align-items: center; justify-content: space-between; gap: var(--s24); }
.brand { display: inline-flex; align-items: center; min-height: var(--target); font-size: var(--subtitle); font-weight: 800; letter-spacing: -.03em; }
.site-footer .mono { color: var(--selected-muted); }
.mobile-order { display: none; }

@media (max-width: 900px) {
  :root { --gutter: 20px; --body: 16px; }
  .home-page main, .site-footer { --title: clamp(40px, 5.8vw, 52px); --subtitle: 28px; --body: 20px; --caption: 15px; }
  .kv { height: calc(100svh - 52px); }
  .hero-copy { flex-direction: column; align-items: flex-start; bottom: var(--s96); gap: var(--s40); text-shadow: 0 1px 18px rgba(8, 24, 4, .45); }
  .hero-lede { white-space: normal; }
  .hero-scrim { background: linear-gradient(180deg, rgba(var(--hero-shade), 0) var(--hero-fade-start, 25%), rgba(var(--hero-shade), .42) var(--hero-fade-middle, 50%), rgba(var(--hero-shade), .7)); }
  .hero-facts .hide-narrow { display: none; }
  .shop-layout, .shipping-section, .reading-section { grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
  .home-section { padding-block: var(--s32) var(--s48); }
  .home-section-head { flex-direction: column; align-items: flex-start; gap: var(--s16); }
  .home-section-head > p { flex-shrink: 1; }
  .story-chapters { display: grid; gap: var(--s32); }
  .story-chapter + .story-chapter { margin-top: 0; }
  .chapter-photo { aspect-ratio: 4 / 3; }
  .reading-list a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); }
  .reading-list small { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
  .site-footer .wrap { flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s16); padding-block: var(--s32); }
}

@media (max-width: 900px) and (max-height: 760px) {
  .hero-eyebrow { margin-bottom: var(--s14); }
  .hero-copy { bottom: 88px; gap: var(--s20); }
}

@media (max-width: 480px) {
  .pack-choice { padding: var(--s18) var(--s12); }
  .shop-price { gap: var(--s10); }
  .shipping-facts > div { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .story-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s48); }
  .story-chapter + .story-chapter { margin-top: 0; }
}