/* Mamma Kimchi – pre-launch page.
   Fonts are self-hosted (see fonts.css, generated by tools/build-fonts.py).
   No third-party requests: keep it that way, the privacy notice depends on it. */

:root{
  --paper:#F2F1EC;
  --sheet:#FAF9F5;
  --field:#FFFFFF;
  --ink:#2F2119;
  --ink-2:#5C4A3E;
  --jar:#3A281E;
  --glaze:#7A5A45;
  --seal:#9F2B1F;
  --chili:#9F2B1F;
  --focus:#9F2B1F;
  --stone:#D6CFC2;
  --stone-edge:#B7AD9D;
  --line:rgba(47,33,25,.16);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .1 .28 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' fill='none' stroke='rgba(47,33,25,.07)' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M12 40C80 30 140 60 210 48M300 20C330 60 350 90 410 96M40 150C90 140 120 180 170 170M220 120C260 110 300 150 360 140M10 262C60 250 110 290 160 276M200 230C240 260 280 240 330 270M280 330C320 320 360 350 415 340M60 360C100 340 150 380 190 365M150 80C170 120 160 170 180 210M380 180C360 220 390 260 370 300M100 210C130 230 120 260 150 290M250 380C270 400 300 395 320 415M330 60C300 90 320 120 290 150M20 330C40 360 30 390 60 410M120 20C140 18 160 26 175 24M240 300C252 312 262 318 280 316M350 230C366 236 378 232 392 240M70 100C84 96 94 104 108 100'/%3E%3C/svg%3E");
  --serif:"Gowun Batang","Noto Serif KR","AppleMyungjo",Batang,Georgia,serif;
  --sans:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sys-ko:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background-color:var(--paper);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1B1511;--sheet:#221B16;--field:#161210;--ink:#ECE5D8;--ink-2:#BFB3A4;--jar:#5B4233;--glaze:#9C7A60;--seal:#B4433A;--chili:#E07A6D;--focus:#E07A6D;--stone:#352D27;--stone-edge:#4E443B;--line:rgba(236,229,216,.16);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' fill='none' stroke='rgba(236,229,216,.06)' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M12 40C80 30 140 60 210 48M300 20C330 60 350 90 410 96M40 150C90 140 120 180 170 170M220 120C260 110 300 150 360 140M10 262C60 250 110 290 160 276M200 230C240 260 280 240 330 270M280 330C320 320 360 350 415 340M60 360C100 340 150 380 190 365M150 80C170 120 160 170 180 210M380 180C360 220 390 260 370 300M100 210C130 230 120 260 150 290M250 380C270 400 300 395 320 415M330 60C300 90 320 120 290 150M20 330C40 360 30 390 60 410M120 20C140 18 160 26 175 24M240 300C252 312 262 318 280 316M350 230C366 236 378 232 392 240M70 100C84 96 94 104 108 100'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1B1511;--sheet:#221B16;--field:#161210;--ink:#ECE5D8;--ink-2:#BFB3A4;--jar:#5B4233;--glaze:#9C7A60;--seal:#B4433A;--chili:#E07A6D;--focus:#E07A6D;--stone:#352D27;--stone-edge:#4E443B;--line:rgba(236,229,216,.16);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' fill='none' stroke='rgba(236,229,216,.06)' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M12 40C80 30 140 60 210 48M300 20C330 60 350 90 410 96M40 150C90 140 120 180 170 170M220 120C260 110 300 150 360 140M10 262C60 250 110 290 160 276M200 230C240 260 280 240 330 270M280 330C320 320 360 350 415 340M60 360C100 340 150 380 190 365M150 80C170 120 160 170 180 210M380 180C360 220 390 260 370 300M100 210C130 230 120 260 150 290M250 380C270 400 300 395 320 415M330 60C300 90 320 120 290 150M20 330C40 360 30 390 60 410M120 20C140 18 160 26 175 24M240 300C252 312 262 318 280 316M350 230C366 236 378 232 392 240M70 100C84 96 94 104 108 100'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background-color:var(--paper);background-image:var(--fibers),var(--grain);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word;hyphens:auto;-webkit-font-smoothing:antialiased}
html[lang="ko"] body{word-break:keep-all;line-height:1.75;hyphens:manual}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,70rem);margin-inline:auto}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.875rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:700;font-size:1.1875rem;color:var(--ink);text-decoration:none}
.seal-sm{height:1.9rem;width:auto;flex:none}
.seal-t{font-family:var(--serif);font-weight:700;font-size:38px;fill:#F7F3EA}
.langs{display:flex;gap:.125rem}
.langs button{font:inherit;font-size:.9375rem;line-height:1;color:var(--ink-2);background:none;border:0;border-radius:6px;padding:.8rem .55rem;cursor:pointer}
/* The Korean button uses the system's Korean font, so Swedish and English
   visitors don't download the Korean body-font file just for this label. */
.langs button[lang="ko"]{font-family:var(--sys-ko)}
html[lang="ko"] .langs button[lang="ko"]{font-family:inherit}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--chili);text-underline-offset:.45em}

/* Hero */
.hero{padding-block:clamp(2.5rem,8vw,6rem) clamp(2rem,5vw,3.5rem)}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.25rem,1.15rem + 5.2vw,4.75rem);line-height:1.08;letter-spacing:-.012em;margin:0 0 1.5rem;max-width:13em}
.hero h1 .l{display:block}
html[lang="ko"] .hero h1{font-size:clamp(1.95rem,1rem + 4.6vw,4.25rem);line-height:1.22;letter-spacing:-.03em}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--ink-2);max-width:33em;margin:0 0 2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.85rem 1.5rem;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:inherit;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.btn:hover{background:var(--chili)}
.btn:disabled{opacity:.6;cursor:progress}

/* Jangdokdae: the one bold moment */
.yard{margin:0}
.yard>svg{display:block;width:100%;height:clamp(190px,21vw,420px)}
.jar{animation:settle .9s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 85ms + 120ms);transform-box:fill-box;transform-origin:50% 100%}
@keyframes settle{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.caption{display:flex;align-items:center;gap:1.1rem;padding-top:1.5rem;font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.45;color:var(--ink-2)}
.seal-lg{height:4.25rem;width:auto;flex:none;transform:rotate(-4deg);animation:stamp .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:1.05s}
@keyframes stamp{from{opacity:0;transform:scale(1.3) rotate(-10deg)}to{opacity:1;transform:rotate(-4deg)}}

/* Sections */
.sec{padding-top:clamp(4rem,10vw,7rem);scroll-margin-top:1rem}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.75rem,1.25rem + 2vw,2.625rem);line-height:1.18;letter-spacing:-.008em;margin:0 0 .75rem;max-width:20em}
h3{margin:0}
.intro{color:var(--ink-2);max-width:33em;margin:0 0 2.75rem}

.staples{list-style:none;margin:0;padding:0;display:grid;gap:2.5rem 3rem}
@media (min-width:62rem){.staples{grid-template-columns:repeat(3,1fr)}}
.staple{display:grid;grid-template-columns:6.25rem 1fr;column-gap:1.25rem;align-items:start}
.hg{font-family:var(--serif);font-size:2rem;line-height:1.1;color:var(--ink);word-break:keep-all}
.staple h3{font-family:var(--sans);font-weight:400;font-size:1.0625rem;margin:.3rem 0 .25rem}
.staple p{margin:0 0 .75rem;color:var(--ink-2)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.tags li{font-size:.875rem;line-height:1.3;padding:.2rem .65rem;border:1px solid var(--stone-edge);border-radius:999px}
@media (max-width:23rem){.staple{grid-template-columns:5rem 1fr}.hg{font-size:1.6rem}}

.ways{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:2.25rem 3rem}
@media (min-width:52rem){.ways{grid-template-columns:repeat(3,1fr)}}
.ways h3{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.3;margin-bottom:.5rem}
.ways p{margin:0;color:var(--ink-2)}

/* Waitlist */
.sheet{background-color:var(--sheet);background-image:var(--fibers);border:1px solid var(--line);border-radius:6px;padding:clamp(1.5rem,5vw,3rem);max-width:46rem}
.sheet h2{margin-bottom:.5rem}
.sheet .intro{margin-bottom:2rem}
.field{margin:0 0 1.75rem}
.lbl{display:block;margin:0 0 .5rem}
.opt{color:var(--ink-2)}
.inp{display:block;width:100%;max-width:28rem;min-height:3rem;padding:.7rem .9rem;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--stone-edge);border-radius:6px}
.inp::placeholder{color:var(--ink-2);opacity:.75}
.inp[aria-invalid="true"]{border-color:var(--chili)}
fieldset{border:0;margin:0 0 1.75rem;padding:0;min-width:0}
legend{padding:0;margin:0 0 .625rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:.35em;min-height:2.75rem;padding:.45rem 1rem;border:1px solid var(--stone-edge);border-radius:999px;background:var(--field);transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.chip:hover span{border-color:var(--ink-2)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:checked+span::before{content:"✓"}
.chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.health{margin:-.5rem 0 1.75rem;padding:1rem 1.125rem;border-left:3px solid var(--seal);background:var(--paper)}
.check{display:flex;gap:.75rem;align-items:flex-start}
.check input{flex:none;width:1.25rem;height:1.25rem;margin:.2rem 0 0;accent-color:var(--ink)}
.check label{cursor:pointer}
.err{margin:.5rem 0 0;color:var(--chili);font-size:.9375rem}
.priv-link{display:inline-block;margin:0 0 1.75rem;font-size:.9375rem;color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.noscript{margin:0 0 1.75rem;padding:1rem 1.125rem;border-left:3px solid var(--seal);background:var(--paper)}
.done h2:focus{outline:none}
.done p{margin:0;color:var(--ink-2)}
.done .demo{margin-top:1rem;font-size:.9375rem}

/* Footer */
.foot{margin-top:clamp(4rem,10vw,7rem);padding-block:2.5rem 3rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.foot p{margin:0}
.foot details{margin-top:1.5rem}
.foot summary{cursor:pointer;color:var(--ink);width:max-content;max-width:100%}
.privacy{margin:.5rem 0 0}
.privacy dt{font-family:var(--serif);color:var(--ink);margin-top:1rem}
.privacy dd{margin:.2rem 0 0;max-width:40em}
@media (min-width:46rem){.privacy{display:grid;grid-template-columns:12rem 1fr;column-gap:2rem}.privacy dd{margin-top:1rem}}
mark.todo{background:none;color:var(--chili);border-bottom:1px dashed currentColor}

/* 404 page */
.lost{padding-block:clamp(3rem,10vw,7rem)}
.lost h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.75rem,1.25rem + 2vw,2.625rem);line-height:1.18;margin:0 0 .75rem}
.lost p{margin:0 0 .5rem;color:var(--ink-2)}
.lost .btn{margin-top:1.5rem}

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