:root {
  --cream: #F6F1E7;
  --ink: #1C1A17;
  --terracotta: #C0603C;
  --serif: "Gowun Batang", serif;
  --sans: "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.8; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: var(--cream); }
.skip-link:focus { top: 1rem; }
.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; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 40; height: 88px; padding: 0 clamp(1.25rem,5vw,5rem); display: flex; align-items: center; justify-content: space-between; color: var(--cream); border-bottom: 1px solid transparent; }
.site-header.scrolled,.site-header.solid { height: 72px; color: var(--ink); background: color-mix(in srgb,var(--cream) 94%,transparent); border-color: color-mix(in srgb,var(--ink) 14%,transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: .8rem; }
.brand strong { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .03em; }
.brand small { max-width: 4rem; font-size: .52rem; line-height: 1.3; letter-spacing: .23em; }
.site-nav { display: flex; gap: 2.4rem; font-size: .76rem; letter-spacing: .04em; }
.site-nav a { padding: .5rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current] { color: var(--terracotta); border-color: var(--terracotta); }
.menu-button { display: none; padding: .65rem; border: 0; background: none; }
.menu-button span:not(.sr-only) { display: block; width: 25px; height: 1px; margin: 7px 0; background: currentColor; }

.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; color: var(--cream); }
.hero-media { position: absolute; inset: 0; height: 100%; object-fit: cover; animation: hero-zoom 24s ease-out both; }
.scrim { position: absolute; inset: 0; background: linear-gradient(90deg,color-mix(in srgb,var(--ink) 72%,transparent),color-mix(in srgb,var(--ink) 8%,transparent) 72%),linear-gradient(0deg,color-mix(in srgb,var(--ink) 36%,transparent),transparent 60%); }
.hero-copy { position: relative; z-index: 2; max-width: 84rem; padding: 0 clamp(1.25rem,8vw,9rem) clamp(5rem,12vh,9rem); }
.eyebrow { margin: 0 0 1.5rem; color: var(--terracotta); font-size: .63rem; font-weight: 600; letter-spacing: .22em; }
.hero .eyebrow { color: var(--cream); }
.hero h1,.page-hero h1,.chapter h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: -.055em; }
.hero h1 { max-width: 12ch; font-size: clamp(3.1rem,7vw,7.8rem); }
.inner-hero h1 { max-width: 16ch; font-size: clamp(2.8rem,5.5vw,6.3rem); }
.hero-copy>p:not(.eyebrow) { max-width: 40ch; margin: 2rem 0; font-size: clamp(.92rem,1.2vw,1.08rem); color: color-mix(in srgb,var(--cream) 82%,transparent); }
.line-link { display: inline-flex; align-items: center; gap: 2.6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--terracotta); font-size: .75rem; letter-spacing: .05em; }
.hero .line-link { border-color: var(--cream); }
.scroll-note { position: absolute; right: clamp(1.25rem,5vw,5rem); bottom: 3rem; z-index: 2; color: var(--cream); font-size: .55rem; letter-spacing: .18em; writing-mode: vertical-rl; }
.scroll-note span { margin-top: 1rem; color: var(--terracotta); }
.section-anchor { scroll-margin-top: 72px; }

.chapter { padding: 15vh clamp(1.25rem,8vw,9rem); }
.chapter h2 { font-size: clamp(2.3rem,5vw,5.6rem); }
.statement { min-height: 82vh; display: grid; grid-template-columns: .55fr 1.45fr; align-content: center; gap: 8vw; }
.statement>.eyebrow { padding-top: .8rem; }
.statement-copy { grid-column: 2; width: min(100%,34rem); margin-left: auto; padding-top: 8vh; }
.statement-copy p,.section-intro>p:last-child,.human-copy>p,.asset-note { max-width: 40ch; color: color-mix(in srgb,var(--ink) 68%,transparent); }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 10vh; }
.section-intro .eyebrow { position: absolute; }
.section-intro>p:last-child { margin: 0; }
.outline-button { display: inline-flex; padding: 1rem 2rem; border: 1px solid var(--terracotta); color: var(--ink); font-size: .75rem; letter-spacing: .08em; }

.human-standard { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10vw; background: color-mix(in srgb,var(--terracotta) 8%,var(--cream)); }
.portrait-card { height: min(70vw,800px); overflow: hidden; }
.portrait-card img { height: 100%; object-fit: cover; }
.human-copy h2 { margin-bottom: 3.5rem; }
.human-copy blockquote { max-width: 24ch; margin: 0 0 2.5rem; padding-left: 1.5rem; border-left: 2px solid var(--terracotta); font-family: var(--serif); font-size: clamp(1.25rem,2.2vw,2rem); line-height: 1.7; }
.human-copy .line-link { margin-top: 2rem; }

.journal-preview { border-top: 1px solid color-mix(in srgb,var(--ink) 14%,transparent); }
.journal-list { border-top: 1px solid color-mix(in srgb,var(--ink) 24%,transparent); }
.journal-row { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 2rem; padding: 2.3rem 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.journal-row>span,.journal-row small { color: var(--terracotta); font-size: .62rem; letter-spacing: .12em; }
.journal-row h3 { margin: .35rem 0; font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.8rem); font-weight: 400; }
.journal-row time { color: color-mix(in srgb,var(--ink) 55%,transparent); font-size: .64rem; }
.closing { min-height: 82vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--ink); color: var(--cream); }
.closing .eyebrow { color: var(--terracotta); }
.closing h2 { margin-bottom: 3.5rem; }
.closing>p:not(.eyebrow) { margin: -1.5rem 0 3rem; color: var(--terracotta); font-size: .72rem; letter-spacing: .12em; }
.closing .outline-button { color: var(--cream); }

.site-footer { padding: 4rem clamp(1.25rem,8vw,9rem) 2rem; border-top: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.site-footer nav { display: flex; gap: 1.8rem; margin: 3rem 0 1rem; font-size: .72rem; }
.site-footer>p { color: color-mix(in srgb,var(--ink) 60%,transparent); font-family: var(--serif); }
.site-footer>div { display: flex; justify-content: space-between; margin-top: 3rem; color: color-mix(in srgb,var(--ink) 52%,transparent); font-size: .62rem; letter-spacing: .08em; }

.founder-intro { display: grid; grid-template-columns: .45fr 1.55fr; gap: 8vw; }
.founder-intro>div>h2 { margin-bottom: 8vh; }
.prose { max-width: 40ch; margin-left: auto; }
.prose p { margin: 0 0 1.7rem; color: color-mix(in srgb,var(--ink) 70%,transparent); }
.prose .lead { color: var(--ink); font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.65rem); }
.manifesto { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--terracotta); color: var(--cream); }
.manifesto>span { color: color-mix(in srgb,var(--cream) 22%,transparent); font-family: var(--serif); font-size: 8rem; line-height: .5; }
.manifesto blockquote { margin: 2rem 0; font-family: var(--serif); font-size: clamp(2.2rem,5vw,5.2rem); line-height: 1.4; letter-spacing: -.05em; }
.manifesto p { max-width: 40ch; }
.story-columns,.timeline-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; }
.story-columns aside { margin-top: 5rem; padding: 2rem 0 2rem 2rem; border-left: 2px solid var(--terracotta); }
.story-columns aside small { color: var(--terracotta); letter-spacing: .12em; }
.story-columns aside p { color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.timeline-section { background: color-mix(in srgb,var(--terracotta) 7%,var(--cream)); }
.timeline { margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb,var(--ink) 22%,transparent); list-style: none; }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.timeline li>span { color: var(--terracotta); font-size: .7rem; }
.timeline strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.timeline p { max-width: 40ch; margin: .4rem 0 0; color: color-mix(in srgb,var(--ink) 60%,transparent); font-size: .8rem; }

.collection-banner { position: relative; min-height: 88vh; overflow: hidden; display: flex; align-items: flex-end; color: var(--cream); }
.collection-banner>img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.collection-banner>div:last-child { position: relative; z-index: 2; padding: 0 clamp(1.25rem,8vw,9rem) 12vh; }
.collection-banner h2 { max-width: 14ch; margin: 0; font-family: var(--serif); font-size: clamp(2.8rem,6vw,6.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -.055em; }
.collection-banner .eyebrow { color: var(--cream); }
.journal-heading { padding-top: 4vh; }
.contact-section { border-top: 1px solid color-mix(in srgb,var(--ink) 14%,transparent); }

.page-hero { min-height: 86vh; padding: 25vh clamp(1.25rem,8vw,9rem) 12vh; display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero h1 { max-width: 14ch; font-size: clamp(3rem,7vw,7.5rem); }
.page-hero>p:last-child { max-width: 40ch; margin: 2.5rem 0 0; color: color-mix(in srgb,var(--ink) 64%,transparent); }

.catalog .section-intro { margin-bottom: 15vh; }
.home-products { display: block; }
.home-feature,.curated-feature { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 8vw; margin-bottom: 15vh; }
.product-photo { display: block; overflow: hidden; aspect-ratio: 1/1; background: color-mix(in srgb,var(--terracotta) 5%,var(--cream)); }
.product-photo img { width: 100%; height: 100%; object-fit: contain; }
.home-feature-copy h3,.curated-feature-copy h2 { max-width: 13ch; margin: 0; font-family: var(--serif); font-size: clamp(2rem,4.4vw,4.8rem); font-weight: 400; line-height: 1.3; letter-spacing: -.045em; }
.home-feature-copy .product-tagline,.curated-feature-copy .product-tagline { margin: 2rem 0; font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.5rem); }
.home-grid,.curated-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12vh 2rem; }
.home-product,.curated-card { min-width: 0; }
.home-product-copy,.curated-card-copy { padding-top: 1.5rem; }
.home-product-copy>span,.curated-card-copy>span { color: var(--terracotta); font-size: .62rem; letter-spacing: .12em; }
.home-product h3,.curated-card h3 { display: -webkit-box; overflow: hidden; margin: .6rem 0; font-family: var(--serif); font-size: clamp(1.15rem,1.7vw,1.5rem); font-weight: 400; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-tagline { max-width: 40ch; margin: .8rem 0; color: color-mix(in srgb,var(--ink) 64%,transparent); font-size: .84rem; }
.product-price { margin: 1.5rem 0 1.8rem; }
.price-original { margin: 0 0 .1rem; color: color-mix(in srgb,var(--ink) 50%,transparent); line-height: 1.2; }
.price-original del { color: inherit; font-size: .76rem; }
.price-current { display: flex; align-items: baseline; gap: .45rem; margin: 0; line-height: 1.2; }
.price-discount { color: var(--terracotta); white-space: nowrap; }
.price-discount em { font-family: var(--serif); font-size: 1.2rem; font-style: normal; font-weight: 700; }
.price-current strong { font-family: var(--serif); font-size: clamp(1.45rem,2vw,1.8rem); font-weight: 700; letter-spacing: -.03em; }
.home-feature .price-current strong,.curated-feature .price-current strong { font-size: clamp(1.8rem,3vw,2.5rem); }
.collection-more { margin-top: 8vh; }
.store-more { margin-top: 15vh; }
.loading-copy { min-height: 30vh; color: color-mix(in srgb,var(--ink) 60%,transparent); }

.journal-page { padding-top: 0; }
.story-card { display: grid; grid-template-columns: 7rem 1fr; gap: 3rem; padding: 10vh 0; border-top: 1px solid color-mix(in srgb,var(--ink) 20%,transparent); }
.story-card>span,.story-card small { color: var(--terracotta); font-size: .65rem; letter-spacing: .1em; }
.story-card h2 { margin: 1rem 0 2rem; font-size: clamp(2rem,4.2vw,4.6rem); }
.story-card p { max-width: 40ch; color: color-mix(in srgb,var(--ink) 62%,transparent); }
.story-card .line-link { margin-top: 1.5rem; }
.home-story-list { border-top: 1px solid color-mix(in srgb,var(--ink) 20%,transparent); }
.home-story-card { display: grid; grid-template-columns: 4rem 1fr auto; gap: 2rem; align-items: start; padding: 7vh 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.home-story-card>span,.home-story-card time { color: var(--terracotta); font-size: .65rem; letter-spacing: .1em; }
.home-story-card h3 { max-width: 22ch; margin: .8rem 0 1rem; font-family: var(--serif); font-size: clamp(1.6rem,3vw,3rem); font-weight: 400; line-height: 1.4; letter-spacing: -.035em; }
.home-story-card p { max-width: 40ch; margin: 0; color: color-mix(in srgb,var(--ink) 62%,transparent); }
.home-story-card>i { color: var(--terracotta); font-style: normal; }
.story-more { margin-top: 8vh; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 0; }
.contact-card { position: relative; min-height: 50vh; padding: clamp(2rem,5vw,5rem); display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid color-mix(in srgb,var(--ink) 18%,transparent); }
.contact-card:first-child { background: var(--terracotta); color: var(--cream); }
.contact-card>span { position: absolute; top: 2rem; font-size: .62rem; letter-spacing: .13em; }
.contact-card h2 { font-size: clamp(2rem,4vw,4rem); }
.contact-card p { max-width: 40ch; }
.contact-card i { position: absolute; top: 2rem; right: 2rem; font-style: normal; }
.toast { position: fixed; bottom: 2rem; left: 50%; z-index: 60; width: max-content; max-width: calc(100% - 2rem); padding: .9rem 1.2rem; transform: translate(-50%,150%); background: var(--ink); color: var(--cream); font-size: .75rem; }
.toast.show { transform: translate(-50%,0); }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity .85s ease,transform .85s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }

@media (max-width: 820px) {
  .site-header { height: 70px; }
  .menu-button { display: block; z-index: 2; }
  .menu-button.open span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: var(--cream); color: var(--ink); font-family: var(--serif); font-size: 1.6rem; opacity: 0; visibility: hidden; }
  .site-nav.open { opacity: 1; visibility: visible; }
  .hero-copy { padding-bottom: 12vh; }
  .hero h1,.inner-hero h1 { font-size: clamp(2.8rem,11.5vw,5rem); }
  .inner-hero .hero-media { object-position: 58% center; }
  .chapter { padding: 15vh 1.25rem; }
  .statement,.founder-intro,.story-columns,.timeline-section { grid-template-columns: 1fr; }
  .statement { min-height: auto; }
  .statement-copy { grid-column: auto; margin: 0; padding-top: 6vh; }
  .section-intro { display: block; }
  .section-intro>p:last-child { margin-top: 2rem; }
  .human-standard,.home-feature,.curated-feature { grid-template-columns: 1fr; gap: 8vh; }
  .portrait-card { height: 68vh; }
  .home-grid,.curated-grid { grid-template-columns: 1fr; }
  .journal-row { grid-template-columns: 2.5rem 1fr; }
  .journal-row time { grid-column: 2; }
  .home-story-card { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .home-story-card>i { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer nav { flex-wrap: wrap; }
  .page-hero { min-height: 76vh; padding-top: 20vh; }
  .scroll-note { display: none; }
  .collection-banner { min-height: 76vh; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .hero-media { object-position: 62% center; }
  .hero-copy>p:not(.eyebrow) br { display: none; }
  .hero h1,.inner-hero h1 { font-size: 2.65rem; }
  .chapter h2,.page-hero h1 { font-size: 2.5rem; }
  .section-intro { margin-bottom: 8vh; }
  .portrait-card { height: 58vh; }
  .journal-row { gap: 1rem; }
  .journal-row h3 { font-size: 1.1rem; }
  .manifesto blockquote br,.closing h2 br { display: none; }
  .story-columns aside { padding-left: 1.25rem; }
  .timeline li { grid-template-columns: 5.3rem 1fr; gap: 1rem; }
  .story-card { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .story-card h2 { font-size: 2rem; }
  .contact-card { min-height: 46vh; padding: 2rem 1.4rem; }
  .site-footer nav { gap: 1rem; }
  .site-footer>div { gap: 1rem; }
  .toast { width: calc(100% - 2rem); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*:before,*:after { animation: none!important; transition: none!important; }
  .reveal { opacity: 1!important; transform: none!important; }
}