:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #29372e;
  --muted: #576359;
  --accent: #344f3b;
  --field: #edf2ea;
  --quiet: #f5f7f2;
  --model-field: #e6ecdf;
  --forest: #263e30;
  --forest-ink: #f3f6ef;
  --forest-muted: #cbd8c7;
  --forest-surface: #395443;
  --forest-hover: #496652;
  --forest-accent: #d4e2bd;
  --step-rest: #7c8876;
  --step-field: #e4ebdf;
  --print-ink: #29372e;
  --display: 'Gowun Batang', serif;
  --body: 'Noto Sans KR', sans-serif;
  --small: 14px;
  --text: 17px;
  --subhead: 24px;
  --title: clamp(36px, 3.05vw, 48px);
  --hero: clamp(56px, 5vw, 80px);
  --gutter: clamp(56px, 5.55vw, 112px);
  --out: cubic-bezier(.22, 1, .36, 1);
  --home-scroll-pace: 1.2;
  --demo-cursor-scale: 1.65;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { min-width: 1100px; margin: 0; color: var(--ink); background: var(--paper); font: 400 var(--text)/1.8 var(--body); word-break: keep-all; -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--accent); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
img { display: block; width: 100%; height: auto; }
figure, p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.035em; }
h1 { font-size: var(--hero); line-height: 1.35; }
h2 { font-size: var(--title); line-height: 1.45; }
h3 { font-size: var(--subhead); line-height: 1.45; }
svg { flex: none; }
.wrap { width: 100%; max-width: 1760px; padding-inline: var(--gutter); margin-inline: auto; }
.section-space { padding-block: clamp(100px, 9vw, 156px); }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 80; padding: 14px 24px; color: var(--paper); background: var(--accent); }
.skip-link:focus { top: 16px; }
.masthead { position: absolute; z-index: 5; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 104px; color: var(--paper); }
.brand { display: block; flex: none; width: 150px; }
.brand img { width: 100%; height: auto; }
.masthead .brand img { filter: brightness(0) invert(1); }
.masthead--paper { position: relative; left: auto; transform: none; color: var(--ink); }
.masthead--paper .brand img { filter: none; }
.masthead--paper a:focus-visible { outline-color: var(--accent); }
.main-nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 48px); }
.main-nav a, .footer a { transition: opacity 180ms ease; }
.main-nav a:hover, .footer a:hover { opacity: .75; }
.masthead a:focus-visible, .hero a:focus-visible, .hero button:focus-visible { outline-color: var(--paper); }
.text-link span, .button span { display: inline-block; transition: transform 180ms var(--out); }
.text-link:hover span, .button:hover span { transform: translate(3px, -2px); }
.hero { position: relative; overflow: clip; height: 100svh; min-height: 680px; color: var(--paper); background: var(--ink); }
.hero__video, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__video { object-fit: cover; }
.hero__shade { pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .61), rgb(0 0 0 / .32) 57%, rgb(0 0 0 / .16)), linear-gradient(180deg, rgb(0 0 0 / .44), transparent 24%); } /* taste-skill-ignore: neutral scrim over video for text legibility, the documented gradient exception. */
.hero__layout { position: relative; display: flex; align-items: center; height: 100%; padding-block: 140px 76px; }
.hero__copy { width: 70%; position: relative; }
.hero__intro { margin-top: 30px; line-height: 1.95; }
.hero .hero__build { margin-top: 32px; color: var(--ink); background: var(--paper); gap: 32px; }
.hero .hero__build:hover { background: var(--field); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 56px; padding: 14px 24px; background: var(--accent); color: var(--paper); font-weight: 500; transition: background-color 180ms ease, transform 140ms var(--out); }
.button:hover { background: var(--ink); }
.button:active { transform: translateY(2px); }
.hero__bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: var(--small); }
.text-link { display: inline-flex; align-items: center; gap: 24px; padding-block: 8px; color: var(--accent); font-weight: 500; }
.hero__bottom .text-link { color: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 64px; margin-bottom: 48px; }
.section-heading > p { padding-bottom: 6px; }
.story { position: relative; background: var(--paper); }
.story__sticky { padding-block: 96px; }
.story.is-scroll-story { height: calc(100svh + 260svh * var(--home-scroll-pace, 1)); }
.story.is-scroll-story .story__sticky { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; min-height: 720px; padding-block: 36px; overflow: clip; }
.story__gallery { display: grid; row-gap: 24px; }
.story.is-scroll-story .story__gallery { min-height: min(900px, calc(100svh - 72px)); grid-template-rows: auto 1fr auto; }
.story__top { display: flex; align-items: center; justify-content: flex-start; }
.story__layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 29vw, 480px); align-items: center; gap: clamp(40px, 5vw, 88px); }
.story__art { width: min(100%, 88svh); margin: 0; }
.story__copy { min-width: 0; }
.painting { position: relative; isolation: isolate; aspect-ratio: 3 / 2; }
.painting > img { width: 100%; height: 100%; object-fit: contain; }
.painting > canvas { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
.story__steps { display: flex; flex: none; align-items: center; gap: 24px; }
.story-step { min-width: 0; }
.story-step button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 0; border: 0; text-align: center; color: var(--muted); background: transparent; font-family: var(--body); font-size: var(--text); font-weight: 400; transition: color 180ms ease; }
.story-step.is-current button { color: var(--ink); font-weight: 500; }
.story-step button:hover:not(:disabled) { color: var(--accent); }
.story-step button svg { opacity: 0; transition: opacity 180ms ease; }
.story-step.is-current button svg, .story-step button:hover:not(:disabled) svg { opacity: 1; }
.story-step__label { position: relative; white-space: nowrap; }
.story-step__fill { position: absolute; inset: 0; color: var(--ink); clip-path: inset(0 calc(100% - var(--step-fill, 100%)) 0 0); white-space: nowrap; pointer-events: none; }
.story__caption + .story__caption { margin-top: 32px; }
.story__caption h2 { font-size: var(--title); line-height: 1.35; white-space: nowrap; }
.story__footer { display: flex; justify-content: center; }
.story__details { margin-top: 24px; }
.story__detail { font-size: clamp(22px, 1.65vw, 26px); line-height: 1.65; letter-spacing: -.02em; }
.story__detail + .story__detail { margin-top: 16px; }
.has-story-scenes .story__captions, .has-story-scenes .story__details { display: grid; }
.has-story-scenes .story__caption, .has-story-scenes .story__detail { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease; }
.has-story-scenes .story__caption.is-current, .has-story-scenes .story__detail.is-current { opacity: 1; visibility: visible; pointer-events: auto; }
.story__walk { min-height: 64px; gap: 24px; border-radius: 4px; white-space: nowrap; }
.story__walk > span { transform: none; }
.story__walk svg { transition: transform 180ms var(--out); }
.story__walk:hover svg { transform: translateX(5px); }
/* One stationary canvas: erase the footage, then paint the existing story on its paper. */
.home-opening.is-brush-opening { position: relative; height: calc(100svh + var(--opening-travel)); }
.is-brush-opening .home-opening__stage { position: sticky; top: 0; height: 100svh; isolation: isolate; overflow: clip; background: var(--paper); }
.is-brush-opening .hero { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; mask-image: url('#hero-brush-mask'); mask-mode: luminance; mask-repeat: no-repeat; mask-size: 100% 100%; }
.is-brush-opening .hero[data-brush-erased="true"] { visibility: hidden; }
.is-brush-opening .story.is-scroll-story { position: relative; z-index: 1; height: 100%; background: var(--paper); }
.is-brush-opening .story.is-scroll-story .story__sticky { position: relative; top: auto; height: 100%; min-height: 0; }
.is-brush-opening .story__top, .is-brush-opening .story__copy, .is-brush-opening .story__footer { opacity: var(--story-ink, 0); }
.home-opening__mask { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Laptop toolbars and display scaling reduce CSS viewport height. Keep the
   scroll sequence and fit its composition rather than switching the effect off. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .is-brush-opening .story__layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 32px; }
  .is-brush-opening .story__art { width: min(100%, 78svh); }
  .is-brush-opening .story__gallery { gap: 16px; }
  .is-brush-opening .story__caption h2 { font-size: 32px; }
  .is-brush-opening .story__detail { font-size: 20px; }
}
@media (min-width: 1024px) and (max-height: 719px) {
  .is-brush-opening .hero__layout { padding-block: 100px 72px; }
  .is-brush-opening .hero h1 { font-size: clamp(32px, 7.5svh, 56px); }
  .is-brush-opening .hero__intro { margin-top: 20px; font-size: 16px; }
  .is-brush-opening .story__sticky { padding-block: 20px; }
  .is-brush-opening .story__gallery { min-height: 0; height: 100%; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .is-brush-opening .story__art { width: min(100%, 72svh); }
  .is-brush-opening .story__caption h2 { font-size: clamp(26px, 5svh, 34px); }
  .is-brush-opening .story__details { margin-top: 16px; }
  .is-brush-opening .story__detail { font-size: clamp(16px, 3.2svh, 21px); }
  .is-brush-opening .story__walk { min-height: 48px; padding-block: 10px; }
}
.spaces { position: relative; background: var(--model-field); padding: 0; }
.spaces__stage { display: flex; align-items: center; min-height: 100svh; padding-block: clamp(40px, 5svh, 64px); }
.spaces__stage > .wrap { padding-inline: var(--gutter); }
.spaces .section-heading { margin-bottom: 32px; }
.spaces.is-pinned { height: calc(100svh + 75svh * var(--home-scroll-pace, 1)); }
.spaces.is-pinned .spaces__stage { position: sticky; top: 0; height: 100svh; }
.models { display: grid; grid-template-columns: 1.08fr 1fr .92fr; gap: clamp(36px, 4vw, 72px); align-items: start; }
.model { display: block; transform: translate3d(0, var(--model-lift, 0px), 0); }
.model:nth-child(1) { --print-angle: -2deg; }
.model:nth-child(2) { --print-angle: 1.5deg; padding-top: 24px; }
.model:nth-child(3) { --print-angle: -1deg; padding-top: 8px; }
.model__print { padding: 10px; background: var(--paper); transform: translate3d(0, var(--print-lift, 0px), 0) rotate(var(--print-tilt, var(--print-angle))); }
.model__image { height: clamp(200px, 28svh, 330px); overflow: hidden; }
.model:nth-child(2) .model__image { height: clamp(220px, 33svh, 370px); }
.model:nth-child(3) .model__image { height: clamp(200px, 30svh, 350px); }
.model__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--out); }
.model:hover .model__image img { transform: scale(1.025); }
.model__heading { margin: 28px 0 10px; }
.model__where { display: block; margin-top: 14px; color: var(--muted); font-size: var(--small); }
.model__go { display: inline-flex; align-items: center; gap: 24px; margin-top: 18px; padding-block: 4px; color: var(--accent); }
.model__go::after { content: '↗'; transition: transform 180ms var(--out); }
.model:hover .model__go::after { transform: translate(3px, -2px); }
.model:hover .model__go { text-decoration: underline; text-underline-offset: 6px; }
.library { min-height: calc(100svh - 370px); padding-block: 80px 112px; }
.library__intro { margin-top: 24px; }
.library__empty { margin-top: 56px; padding: 40px; background: var(--quiet); }
.library__empty h2 { font-size: var(--subhead); }
.library__empty p { margin-top: 12px; }
.place { --ink: var(--forest-ink); --muted: var(--forest-muted); --accent: var(--forest-accent); --quiet: var(--forest-surface); --field: var(--forest-hover); position: relative; padding: 0; color: var(--ink); background: var(--forest); }
.place__stage { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: 40px; }
.place__viewport { flex: none; width: 100%; }
.place__track { display: grid; gap: 80px; }
.place__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8%; align-items: center; padding-block: 36px; }
/* Requested Polaroid treatment: a real photo print, including its paper and cast shadow. */
.place__photo { margin-inline: 12px; padding: 16px 16px 30px; color: var(--print-ink); background: var(--paper); transform: rotate(-2.5deg); box-shadow: 0 18px 40px rgb(0 0 0 / .16); } /* taste-skill-ignore: user explicitly requested Polaroid prints; the cast shadow represents the lifted photographic paper. */
.place__photo img { aspect-ratio: 1.4; object-fit: cover; }
.place__picture { overflow: hidden; }
.place__soon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; aspect-ratio: 1.4; padding: 48px; color: var(--forest-ink); background: var(--forest-surface); }
.place__soon > span { font-family: var(--display); font-size: var(--hero); line-height: 1.15; }
.place__soon > p { font-family: var(--display); font-size: var(--subhead); }
.place__photo figcaption { margin-top: 24px; padding-inline: 8px; color: var(--print-ink); font: 400 var(--text)/1.6 var(--display); letter-spacing: -.02em; }
.place__copy > p { margin-top: 30px; }
.place__copy .text-link { margin-top: 28px; }
.case-controls { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 12px; }
.case-selectors { display: flex; align-items: center; gap: 28px; }
.case-selectors button { padding: 10px 0; border: 0; background: transparent; color: var(--muted); }
.case-selectors button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.case-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invitation { background: var(--field); padding-block: 112px; }
.invitation__layout { display: grid; grid-template-columns: minmax(360px, .75fr) minmax(0, 1.75fr); align-items: center; gap: 40px; }
.invitation__copy h2 { font-size: clamp(34px, 2.5vw, 42px); }
.invitation__copy > p { margin-top: 28px; }
.invitation__copy .button { margin-top: 28px; }
.invitation__preview { display: block; }
.invitation__preview > img { width: 100%; height: auto; }
.invitation__preview > span { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; color: var(--accent); font-size: var(--small); }
.partners { padding-block: 64px; }
.partners__layout { display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: center; }
.partners h2 { font-size: var(--subhead); }
.partners__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.partners__logos li { display: flex; align-items: center; justify-content: center; min-height: 80px; mix-blend-mode: multiply; }
.partners__logos img { width: 100%; max-width: 180px; height: 56px; object-fit: contain; filter: grayscale(1); transition: filter 240ms ease; }
.partners__logos li:hover img { filter: grayscale(0); } /* taste-skill-ignore: grayscale(0) restores brand colour; this is not a scale transform. */
/* Multiply removes the original Yonam image's white backing without redrawing its registered mark. */
.footer { --ink: var(--forest-ink); --muted: var(--forest-muted); --accent: var(--forest-accent); padding-block: 64px 32px; color: var(--ink); background: var(--forest); }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer__top .brand { width: 180px; }
.footer__top .brand img { filter: brightness(0) invert(1); }
.footer__top nav { display: flex; gap: 28px; }
.footer__details { margin-top: 40px; }
.footer__policies { display: flex; gap: 24px; margin-bottom: 28px; font-size: var(--small); font-weight: 500; }
.footer__policies a { padding-block: 6px; }
.footer__business { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px 28px; color: var(--muted); font-size: var(--small); }
.footer__business > div { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 16px; }
.footer__business dt { color: var(--ink); }
.footer__business dd { min-width: 0; }
.footer__business--wide { grid-column: span 2; }
.footer__business address { font-style: normal; }
.footer__business a { display: inline-block; padding-block: 2px; }
.footer__business a:hover, .footer__policies a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.footer__bottom { margin-top: 32px; color: var(--muted); font-size: var(--small); }
.has-scroll-motion { --ink: var(--scroll-ink); --muted: var(--scroll-muted); color: var(--ink); background-color: var(--scroll-ground); }
.has-scroll-motion .story, .has-scroll-motion .spaces, .has-scroll-motion .place, .has-scroll-motion .invitation { background: transparent; }
.has-scroll-motion .place { --ink: var(--scroll-ink); --muted: var(--scroll-muted); --accent: var(--scroll-accent); }
.has-scroll-motion .place__soon { color: var(--forest-ink); }
.has-scroll-motion .text-link, .has-scroll-motion .model__go { color: var(--scroll-accent); }
.has-scroll-motion .hero__bottom .text-link { color: var(--paper); }
.has-scroll-motion .button:hover { background: var(--forest); }
.has-scroll-motion .model__image img, .has-scroll-motion .place__picture img { transform: translate3d(0, var(--image-shift, 0px), 0) scale(1.08); }
.has-scroll-motion .model__image img { transition: none; }
.has-scroll-motion .model:hover .model__image img { transform: translate3d(0, var(--image-shift, 0px), 0) scale(1.105); }
@media (prefers-reduced-motion: no-preference) {
  .has-entered { animation: copy-arrives 540ms var(--out) both; }
  .has-entered[data-enter="copy"] { animation-delay: 80ms; }
  .has-entered[data-enter="picture"] { animation: picture-arrives 680ms var(--out) both; }
}
@keyframes copy-arrives { from { opacity: .6; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes picture-arrives { from { opacity: .7; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .story.is-scroll-story { height: auto; }
  .story.is-scroll-story .story__sticky { position: relative; height: auto; min-height: 0; padding-block: 96px; }
  .painting > canvas { display: none; }
  .spaces.is-pinned { height: auto; }
  .spaces.is-pinned .spaces__stage { position: relative; height: auto; }
  .model__print { transform: rotate(var(--print-angle)); }
  .model { transform: none; }
}