@font-face {
  font-family: 'Pretendard';
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --design-paper: #fff; --design-ink: #141414; --design-muted: #666;
  --design-rule: #dedede; --design-tint: #fff; --design-accent: #222;
  --design-serif: Georgia, 'Times New Roman', serif;
  --design-sans: Arial, 'Pretendard', 'Malgun Gothic', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body.design-page { margin: 0; background: var(--design-paper); color: var(--design-ink); font-family: var(--design-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.design-page a { color: inherit; text-underline-offset: 5px; }
.design-page :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.design-page img, .design-page canvas { max-width: 100%; }
/* Desaturate imagery, not the interactive pattern's red selection or garment color samples. */
.design-page img, .design-page .sewing-diagram { filter:grayscale(1); }
.design-skip { position: fixed; z-index: 10; left: 1rem; top: 1rem; padding: .7rem 1rem; background: #fff; color: #111 !important; transform: translateY(-200%); }
.design-skip:focus { transform: translateY(0); }
.design-header { position:absolute; inset:0 0 auto; z-index:6; padding:28px 6vw; display:flex; justify-content:space-between; align-items:center; gap:24px; color:#fff; background:transparent; }
.design-wordmark { font:400 clamp(32px,8.4vw,128px)/1.1 var(--design-serif); letter-spacing:-.065em; text-decoration:none; }
.design-header > .design-wordmark { font-size:26px; letter-spacing:-.04em; white-space:nowrap; }
.design-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 28px; align-items:center; font-size:11px; }
.design-nav a { text-decoration:none; min-height:48px; display:inline-flex; align-items:center; gap:.8rem; color:inherit; border-bottom:1px solid transparent; }
.design-nav a:hover, .design-nav a:focus-visible { color:inherit; border-bottom-color:currentColor; }
.design-hero { position:relative; z-index:5; isolation:isolate; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; padding:180px 8vw 12svh; background:#171717; color:#fff; }
.design-hero-copy { position: relative; z-index: 1; min-width: 0; max-width: 900px; }
.design-hero-visual { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: #171717; }
.design-hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.design-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .2em; line-height: 1.7; margin: 0 0 26px; color: var(--design-muted); }
.design-hero h1 { font-weight:300; font-size:clamp(48px,6.3vw,92px); line-height:1.2; letter-spacing:-.065em; margin:24px 0 32px; word-break:keep-all; }
.design-hero-deck { margin:0; font-size:14px; line-height:1.9; color:#ededed; word-break:keep-all; }
.design-hero h1 em { font-style: normal; color: #fff; }
.design-intro { padding:88px max(6vw,calc((100vw - 1280px)/2)); background:#111; color:#fff; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:clamp(36px,8vw,120px); border-bottom:1px solid #111; }
.design-intro .design-eyebrow { color: #bdbdbd; margin: 8px 0 0; }
.design-intro-title { font-size:clamp(30px,3.6vw,52px); font-weight:300; line-height:1.5; margin:28px 0; letter-spacing:-.055em; word-break:keep-all; }
.design-intro-deck { margin:0; font-size:13px; line-height:1.9; color:#bdbdbd; }
.design-contents > p { margin:0 0 10px; font-size:10px; letter-spacing:.16em; color:#bdbdbd; }
.design-contents a { display:grid; grid-template-columns:26px minmax(0,1fr) 20px; align-items:center; gap:12px; min-height:60px; padding:12px 0; border-bottom:1px solid #ffffff40; text-decoration:none; }
.design-contents a > span:first-child, .design-contents a > span:last-child { font:10px var(--design-sans); color:#bdbdbd; }
.design-contents a > span:nth-child(2) { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; font:500 24px 'ivybodoni', Georgia, serif; }
.design-contents small { font:11px/1.6 var(--design-sans); color:#bdbdbd; }
.design-contents a:hover { border-bottom-color:#fff; }
.design-chapter { --chapter-gutter:max(6vw,calc((100vw - 1280px)/2)); padding:0 var(--chapter-gutter) 128px; border-bottom:1px solid var(--design-rule); }
.design-chapter-tinted { background: var(--design-tint); }
.design-chapter-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:36px 64px; margin:0 calc(-1 * var(--chapter-gutter)) 64px; padding:80px var(--chapter-gutter) 64px; background:#111; color:#fff; align-items:end; }
.design-chapter-heading { position:relative; isolation:isolate; overflow:hidden; }
.design-chapter-heading::before { content:""; position:absolute; z-index:-1; inset:0 0 0 28%; background:url('../assets/effects/chapter-drafting.svg') right 42% / auto 160% no-repeat; opacity:.25; mask-image:linear-gradient(to right,transparent,#000 65%); pointer-events:none; }
.design-chapter-heading .design-eyebrow { grid-column:1 / -1; margin:0; font:500 clamp(38px,7.2vw,104px)/1 'ivybodoni', Georgia, serif; letter-spacing:-.055em; color:#fff; overflow-wrap:anywhere; }
.design-step-number { display:block; width:fit-content; margin-bottom:24px; padding:7px 11px; background:#fff; font:500 12px/1.4 'ivybodoni', Georgia, serif; letter-spacing:.1em; color:#111; }

.design-chapter-heading h2 { grid-column:1; padding-left:12%; font-size:clamp(27px,2.6vw,38px); line-height:1.5; letter-spacing:-.045em; font-weight:400; margin:0; word-break:keep-all; }
.design-chapter-heading > p:last-child { grid-column:2; font-size:13px; color:#ccc; max-width:34em; margin:0; }
.design-feature-root { min-width: 0; scroll-margin-top: 2rem; }
.design-feature-root > :is(.measurement, .configurator, .pattern-section, .sewing, .visit-section) { border: 0; padding: 0; background: transparent; }
.design-feature-root .pattern-sticky { padding: 0; }
.design-feature-root .sewing-layout { margin-top: 0; }
.design-chapter-heading h2, .design-hero h1 { text-wrap: balance; }
.design-chapter-heading > p:last-child { line-height: 1.85; word-break: keep-all; }
/* Chapter titles are supplied by the page; standalone feature previews retain their headings. */
.design-feature-root .measurement-eyebrow, .design-feature-root .measurement-title,
.design-feature-root .measurement-lead, .design-feature-root .configurator-header,
.design-feature-root .pattern-header, .design-feature-root .sewing-header,
.design-feature-root .visit-eyebrow, .design-feature-root .visit-title { display: none; }
.design-loading, .design-unavailable { padding: 32px; border: 1px solid var(--design-rule); font-size: 14px; line-height: 1.8; color: var(--design-muted); }
.design-noscript { padding: 24px 5vw; border: 1px solid var(--design-rule); }
.design-footer { padding: 64px 6vw 36px; background: #111; color: #fff; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.design-footer p, .design-footer > a:last-child { font-size: 10px; letter-spacing: .08em; color: #bdbdbd; }
.design-footer > a:last-child { padding: 12px 0; }
.design-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000b 0%, #0006 60%, #0004 100%), linear-gradient(180deg, #0006, transparent 35%, #0006); }
.design-hero .design-eyebrow { color: #eee; }
.design-footer > .design-wordmark { flex-basis:100%; font-size:clamp(32px,8vw,120px); line-height:1.1; white-space:normal; padding-bottom:32px; border-bottom:1px solid #ffffff30; }
@media (max-width: 1000px) {
  .design-chapter-heading { gap: 20px 28px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 1rem; }
  .design-header { padding:20px 6vw; flex-direction:column; align-items:flex-start; gap:8px; }
  .design-nav { justify-content:space-between; gap:0 12px; width:100%; font-size:11px; }
  .design-nav a { gap: 4px; }
  .design-hero { min-height:100vh; min-height:100svh; padding:180px 6vw 12svh; }
  .design-hero h1 { font-size: clamp(2.6rem, 9vw, 4rem); margin: 22px 0 24px; }
  .design-hero-visual { width: 100%; }
  .design-hero-visual img { object-position: 58% center; }
  .design-intro { padding: 56px 6vw; grid-template-columns: 1fr; gap: 24px; }
  .design-chapter { --chapter-gutter:6vw; padding:0 var(--chapter-gutter) 72px; }
  .design-chapter-heading { grid-template-columns: minmax(0, 1fr); margin-bottom:26px; padding:48px var(--chapter-gutter) 40px; gap: 14px; }
  .design-chapter-heading::before { left:36%; background-position:72% top; background-size:auto 115%; opacity:.16; }
  .design-chapter-heading .design-eyebrow, .design-chapter-heading h2, .design-chapter-heading > p:last-child { grid-column: 1; }
  .design-chapter-heading .design-eyebrow { margin:0; }
  .design-chapter-heading h2 { padding-left:0; }
  .design-step-number { margin-bottom:18px; }
  .design-footer { padding: 34px 6vw; align-items: flex-start; flex-direction: column; gap: 12px; }
}
.design-snowfall { position:fixed; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.design-snowfall span { position:absolute; left:0; top:0; border-radius:50%; background:#fff; box-shadow:0 0 2px #7777; }
.design-snowfall .design-snow-ambient { top:-12px; width:var(--snow-size); height:var(--snow-size); opacity:.65; animation:design-snow-fall var(--snow-duration) var(--snow-delay) linear infinite; }
.design-snowfall[data-paused="true"] .design-snow-ambient { animation-play-state:paused; }
@keyframes design-snow-fall { to { transform:translate(var(--snow-drift), calc(100vh + 24px)); } }
@media (max-width:720px) { .design-snow-ambient:nth-last-of-type(-n+12) { display:none; } }
.design-snowfall[hidden], .design-snowfall [hidden] { display:none; }
.design-santa-sleigh { position:absolute; left:0; top:0; width:clamp(200px,26vw,320px); height:auto; transform:translateX(-400px); }
.design-snow-toggle { position:fixed; right:16px; bottom:16px; z-index:5; min-height:44px; padding:10px 14px; border:1px solid #ddd; border-radius:24px; background:#fff; color:#333; font:12px var(--design-sans); cursor:pointer; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .design-snowfall, .design-snow-toggle { display:none; }
  .design-snowfall .design-snow-ambient { animation:none; }
}