:root {
  --ink: #000000;
  --paper: #f7f2e8;
  --coral: #fa452c;
  --blue-powder: #9ab5fd;
  --blue-violet: #5754fb;
  --coffee: #2c180f;
  --ink-muted: #3f3a36;
  --focus: #ffffff;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --gutter: clamp(1rem, 4vw, 4rem);
  --hero-background-bleed: 0px;
  --page-background: var(--coral);
  --display: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --body: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--page-background); transition: background-color 180ms ease-out; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--page-background); font-family: var(--body); font-weight: 600; transition: background-color 180ms ease-out; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 20; top: var(--space-2); left: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--ink); background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--coral); }

.hero-face { position: relative; z-index: 1; width: min(21vw, 17rem); aspect-ratio: 273.67 / 150; }
.dog-face-art { display: block; width: 100%; height: auto; }
.dog-ear { transform-box: view-box; }
.dog-ear-left { transform-origin: 70px 44px; }
.dog-ear-right { transform-origin: 204px 44px; }
.dog-ear-fill { fill: var(--coral); }
.dog-ear-outline { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-width: 9.98px; }
.dog-feature { fill: var(--ink); }
.dog-nose { fill: none; cursor: pointer; stroke: var(--ink); stroke-miterlimit: 10; stroke-width: 8.67px; touch-action: manipulation; }
.instagram-link { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 2px solid currentColor; color: var(--ink); transition: color 180ms ease-out, background 180ms ease-out, transform 180ms ease-out; }
.instagram-link svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.instagram-link:hover { color: var(--paper); background: var(--ink); transform: rotate(-5deg) scale(1.04); }
.instagram-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--coral); }
.hero-stage { display: flex; width: 100%; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: 4.5rem var(--gutter) 1.5rem; }
.hero-wordmark { position: relative; z-index: 1; order: 2; width: min(41.8vw, 30.8rem); height: auto; margin-top: clamp(2rem, 2.25vw, 2.75rem); filter: brightness(0); }
.hero-face { order: 1; }
.hero-content { z-index: 1; order: 3; width: min(100%, 58rem); margin-top: clamp(.75rem, 1vw, 1.25rem); text-align: center; }
.hero h1, .intro h2, .story h2, .family h2 { margin: 0; font-family: var(--display); letter-spacing: -.075em; }
.hero h1 { max-width: 58rem; font-size: clamp(2.45rem, 3.5vw, 3.85rem); font-weight: 800; letter-spacing: .005em; line-height: .96; text-wrap: balance; }
.hero h1 span { display: block; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: clamp(2rem, 3vw, 2.75rem); }
.hero-pill { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .9rem; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .06em; line-height: 1; text-decoration: none; }
.hero-pill-shop { color: var(--ink); background: transparent; cursor: not-allowed; opacity: .42; }
.hero-pill-shop small { font: inherit; font-size: .58rem; font-weight: 600; letter-spacing: .08em; }
.hero-pill-instagram { color: var(--paper); background: var(--ink); transition: color 180ms ease-out, background 180ms ease-out, transform 180ms ease-out; }
.hero-pill-instagram svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.hero-pill-instagram:hover { color: var(--ink); background: var(--paper); transform: translateY(-.15rem); }
.hero-pill-instagram:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(13rem, .9fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; min-height: clamp(31rem, 45vw, 40rem); padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); color: var(--paper); background: var(--ink); }
.intro h2 { max-width: 44rem; font-size: clamp(1.9rem, 3.7vw, 4rem); line-height: 1; }
.intro h2 > span, .intro h2 em { display: block; }
.intro h2 > span { margin-bottom: .18em; white-space: nowrap; }
.intro h2 em { color: var(--blue-powder); font-style: normal; line-height: .9; white-space: nowrap; }
.intro h2 strong { color: var(--paper); font: inherit; }
.intro-illustration { justify-self: end; width: min(100%, 23rem); aspect-ratio: 1122 / 1402; }
.intro-illustration img { width: 100%; height: 100%; object-fit: contain; }

.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-panel { position: relative; isolation: isolate; aspect-ratio: 1122 / 1402; min-height: 39rem; padding: var(--space-8); overflow: hidden; }
.story-copy { position: relative; z-index: 1; }
.panel-violet { color: var(--blue-powder); background: var(--ink); }
.panel-brown { color: var(--coral); background: var(--coffee); }
.panel-powder { color: var(--ink); background: var(--blue-powder); }
.panel-number { margin: 0 0 var(--space-8); font-family: var(--display); font-size: 1.45rem; letter-spacing: -.08em; }
.story-context { margin: 0 0 var(--space-2); font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 800; letter-spacing: -.06em; }
.story h2 { max-width: 24rem; font-size: clamp(2.25rem, 3.5vw, 4.2rem); line-height: .9; }
.story-illustration { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }

.family { display: grid; min-height: clamp(18rem, 24vw, 24rem); place-items: center; background: var(--ink); }
.family-statement { padding: var(--space-16) var(--gutter); color: var(--paper); text-align: center; }
.family h2 { color: var(--ink-muted); font-size: clamp(1.85rem, 2.6vw, 3rem); line-height: .95; }
.family-waf { color: var(--blue-powder); }
.family-icons { display: flex; align-items: center; justify-content: center; gap: clamp(.85rem, 2.2vw, 1.8rem); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.family-icons img { width: clamp(1.05rem, 1.7vw, 1.45rem); height: clamp(1.05rem, 1.7vw, 1.45rem); object-fit: contain; }
.family-coming { margin: clamp(1.25rem, 2.5vw, 1.8rem) 0 0; color: var(--ink-muted); font-size: clamp(.6rem, .75vw, .7rem); font-weight: 500; letter-spacing: .16em; line-height: 1; }

.site-footer { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--gutter) calc(var(--space-6) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom))); color: var(--paper); background: var(--ink); }
.site-footer img { width: 5.2rem; }
.site-footer .instagram-link { justify-self: end; }
.site-footer .instagram-link { color: var(--blue-powder); }
.site-footer .instagram-link:hover { color: var(--ink); background: var(--blue-powder); }

@media (max-width: 699px) {
  .hero { min-height: 100svh; }
  .hero-stage { min-height: 100svh; padding: max(1rem, env(safe-area-max-inset-top, env(safe-area-inset-top))) var(--gutter) max(1rem, env(safe-area-max-inset-bottom, env(safe-area-inset-bottom))); }
  .hero-face { width: min(57vw, 18rem); }
  .hero-wordmark { width: min(71vw, 24rem); margin-top: clamp(2rem, 6vh, 4rem); }
  .hero-content { width: min(100%, 23rem); margin-top: clamp(.75rem, 2vh, 1.25rem); }
  .hero h1 { max-width: none; font-size: clamp(1.3rem, 6.5vw, 1.85rem); line-height: 1.02; }
  .hero-actions { margin-top: clamp(2rem, 5vh, 3rem); }
  .hero-pill { min-height: 2.45rem; padding: .48rem .72rem; font-size: .66rem; }
  .family { min-height: 18rem; }
  .intro { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; padding: var(--space-16) var(--gutter) var(--space-12); }
  .intro h2 { font-size: clamp(1.72rem, 7.6vw, 2.4rem); }
  .intro-illustration { width: min(100%, 17.5rem); }
  .story { grid-template-columns: 1fr; }
  .story-panel { min-height: 31rem; padding: var(--space-6); }
  .panel-number { margin-bottom: var(--space-8); }
  .family h2 { font-size: clamp(1.85rem, 8vw, 2.45rem); }
  .site-footer { display: flex; justify-content: space-between; gap: var(--space-3); }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 699px) {
    .hero { z-index: 1; overflow: visible; }
    .hero-stage { position: relative; z-index: 1; }
    .hero::after { position: absolute; z-index: 0; top: 100%; right: 0; left: 0; height: var(--hero-background-bleed); background: var(--coral); content: ""; pointer-events: none; transition: height 180ms ease-out; }
  }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .story { grid-template-columns: 1fr; }
}

@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  .hero, .intro, .story, .family { scroll-snap-align: start; scroll-snap-stop: always; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-face { animation: hero-face-in 600ms cubic-bezier(.16, 1, .3, 1) 90ms both; }
  .motion-ready .hero-wordmark { animation: hero-wordmark-in 680ms cubic-bezier(.16, 1, .3, 1) 280ms both; }
  .motion-ready .hero-content { animation: hero-copy-in 560ms cubic-bezier(.16, 1, .3, 1) 510ms both; }
  .motion-ready .dog-ear-left { animation: ear-left 860ms cubic-bezier(.65, 0, .35, 1) 650ms both; }
  .motion-ready .dog-ear-right { animation: ear-right 860ms cubic-bezier(.65, 0, .35, 1) 650ms both; }
  .motion-ready .hero-face.is-wagging .dog-ear-left { animation: ear-left-replay 860ms cubic-bezier(.65, 0, .35, 1) both; }
  .motion-ready .hero-face.is-wagging .dog-ear-right { animation: ear-right-replay 860ms cubic-bezier(.65, 0, .35, 1) both; }

  .motion-ready .intro h2,
  .motion-ready .intro-illustration,
  .motion-ready .family-statement { opacity: 0; transform: translateY(1.5rem); transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1); }
  .motion-ready .intro-illustration { transform: translateY(2rem) scale(.98); transition-delay: 100ms; }
  .motion-ready .intro.is-visible h2,
  .motion-ready .intro.is-visible .intro-illustration,
  .motion-ready .family.is-visible .family-statement { opacity: 1; transform: none; }

  .motion-ready .family-icons img { opacity: 0; transform: translateY(.75rem); transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), transform 420ms cubic-bezier(.16, 1, .3, 1); transition-delay: var(--icon-delay, 0ms); }
  .motion-ready .family.is-visible .family-icons img { opacity: 1; transform: none; }

  @keyframes hero-face-in { from { opacity: 0; transform: translateY(-1rem) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes hero-wordmark-in { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes hero-copy-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
  @keyframes ear-left { 0%, 25%, 100% { transform: rotate(0deg); } 43% { transform: rotate(-7deg); } 59% { transform: rotate(0deg); } 76% { transform: rotate(-5deg); } 93% { transform: rotate(0deg); } }
  @keyframes ear-right { 0%, 25%, 100% { transform: rotate(0deg); } 43% { transform: rotate(7deg); } 59% { transform: rotate(0deg); } 76% { transform: rotate(5deg); } 93% { transform: rotate(0deg); } }
  @keyframes ear-left-replay { 0%, 25%, 100% { transform: rotate(0deg); } 43% { transform: rotate(-7deg); } 59% { transform: rotate(0deg); } 76% { transform: rotate(-5deg); } 93% { transform: rotate(0deg); } }
  @keyframes ear-right-replay { 0%, 25%, 100% { transform: rotate(0deg); } 43% { transform: rotate(7deg); } 59% { transform: rotate(0deg); } 76% { transform: rotate(5deg); } 93% { transform: rotate(0deg); } }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .motion-ready .family.is-visible .family-icons img:hover { transform: translateY(-.3rem) rotate(-5deg); }
}

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