:root{--ink:#1b1720;--paper:#f4ede5;--cream:#fff8ee;--peach:#ef9e69;--violet:#88749c;--line:rgba(255,255,255,.16);--serif:'Gowun Batang',serif;--sans:'Noto Sans KR',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.site-header{position:absolute;top:0;left:0;width:100%;height:92px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;z-index:15;color:#fff}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:var(--serif);font-weight:700;font-size:1.25rem}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-size:1.3rem}.site-header nav{display:flex;gap:36px}.site-header nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9rem;transition:.25s}.site-header nav a:hover{color:#fff}.sound{border:0;background:transparent;color:rgba(255,255,255,.65);font:600 .68rem/1 var(--sans);letter-spacing:.14em;display:flex;align-items:center;gap:8px;cursor:pointer}.sound span{width:7px;height:7px;border-radius:50%;background:#777;box-shadow:0 0 0 0 rgba(239,158,105,.6)}.sound[aria-pressed=true] span{background:var(--peach);animation:pulse 1.8s infinite}@keyframes pulse{60%{box-shadow:0 0 0 8px transparent}}
.hero{position:relative;min-height:100svh;background:radial-gradient(circle at 65% 42%,#4c384c 0,#271e2d 27%,#17131b 72%);color:#fff;overflow:hidden;display:grid;grid-template-columns:.88fr 1.35fr;align-items:center;padding:110px 4.5vw 60px}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(transparent,rgba(12,9,14,.6));pointer-events:none}.aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:.27}.aurora-a{width:520px;height:520px;background:#a67569;right:13%;top:7%;animation:drift 10s ease-in-out infinite alternate}.aurora-b{width:360px;height:360px;background:#565c90;right:35%;bottom:-10%;animation:drift 12s ease-in-out -4s infinite alternate-reverse}@keyframes drift{to{transform:translate3d(50px,30px,0) scale(1.12)}}.hero-copy{position:relative;z-index:5;padding-left:3vw;animation:copyIn 1.1s .15s both}.eyebrow{font-size:.7rem;letter-spacing:.26em;color:var(--peach);font-weight:700;margin:0 0 28px}.hero h1{font:400 clamp(3.2rem,5.3vw,6.5rem)/1.08 var(--serif);letter-spacing:-.065em;margin:0;word-break:keep-all}.hero h1 em{font-style:normal;color:#f0a170;position:relative}.hero h1 em:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:3px;background:#f0a170;transform-origin:left;animation:lineIn 1s 1s both}.hero-desc{font:400 clamp(.95rem,1.1vw,1.15rem)/1.9 var(--serif);color:rgba(255,255,255,.64);margin:34px 0 0}@keyframes copyIn{from{opacity:0;transform:translateY(30px)}}@keyframes lineIn{from{transform:scaleX(0)}}
.character-stage{position:relative;height:min(72vh,720px);perspective:1400px;z-index:4;transform-style:preserve-3d}.hero-character{--x:0;--y:0;position:absolute;width:clamp(145px,15vw,265px);aspect-ratio:1000/1287;padding:0;border:0;background:#f0e5da;border-radius:47% 47% 20px 20px;overflow:hidden;box-shadow:0 32px 70px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.2);cursor:pointer;transform-style:preserve-3d;transition:filter .45s,box-shadow .45s;animation:arrive 1.1s calc(.24s + var(--i)*.13s) cubic-bezier(.2,.85,.25,1) both,float 5s calc(var(--i)*-.7s) ease-in-out infinite}.hero-character img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.hero-character span{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 8px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(28,21,28,.56);backdrop-filter:blur(10px);color:#fff;font:500 .78rem var(--sans);opacity:0;transform:translateY(9px);transition:.3s}.hero-character:hover{z-index:9!important;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 38px rgba(239,158,105,.18)}.hero-character:hover img{transform:scale(1.055)}.hero-character:hover span,.hero-character:focus-visible span{opacity:1;transform:none}.hero-character--worry{left:0;top:23%;z-index:1;transform:translate3d(calc(var(--x)*-8px),calc(var(--y)*-5px),-100px) rotateY(13deg) rotateZ(-5deg)}.hero-character--dream{left:16%;top:6%;z-index:2;transform:translate3d(calc(var(--x)*-4px),calc(var(--y)*-8px),0) rotateY(8deg) rotateZ(3deg)}.hero-character--courage{left:39%;top:18%;z-index:5;width:clamp(165px,17vw,300px);transform:translate3d(calc(var(--x)*4px),calc(var(--y)*-3px),120px) rotateY(-2deg)}.hero-character--memory{left:65%;top:5%;z-index:3;transform:translate3d(calc(var(--x)*7px),calc(var(--y)*4px),20px) rotateY(-10deg) rotateZ(-2deg)}.hero-character--tears{left:80%;top:27%;z-index:1;transform:translate3d(calc(var(--x)*10px),calc(var(--y)*7px),-90px) rotateY(-15deg) rotateZ(5deg)}@keyframes arrive{from{opacity:0;filter:blur(8px);margin-top:70px;transform:translate3d(0,120px,-250px) rotateY(25deg) scale(.82)}}@keyframes float{50%{margin-top:-11px}}.scroll-cue{position:absolute;z-index:10;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);text-decoration:none;font-size:.68rem;letter-spacing:.14em;display:flex;align-items:center;gap:11px}.scroll-cue span{width:34px;height:34px;border:1px solid rgba(255,255,255,.24);border-radius:50%;position:relative}.scroll-cue span:after{content:"";position:absolute;width:5px;height:5px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg);left:13px;top:11px;animation:arrow 1.6s infinite}@keyframes arrow{60%{transform:translateY(6px) rotate(45deg);opacity:.2}}
.story-section,.artisans-section{padding:130px max(6vw,30px)}.section-label{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:#8b7d72;display:flex;align-items:center;gap:14px;margin-bottom:45px}.section-label span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c7b8ab;border-radius:50%;letter-spacing:0}.story-layout{display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);gap:8vw;align-items:center}.story-art{position:relative}.story-frame{position:relative;overflow:hidden;aspect-ratio:1.34;border-radius:2px;background:#d9c9ba}.story-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.28) 50%,transparent 55%);transform:translateX(-120%);transition:1.2s}.story-frame:hover:after{transform:translateX(120%)}.story-frame img{width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:scale(1.04);filter:saturate(.82) contrast(.95)}.play-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(4px);background:rgba(255,255,255,.08)}.play-ring span{margin-left:5px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff}.frame-note{font:400 .78rem var(--serif);color:#7b6d62;letter-spacing:.05em}.story-kicker{color:#bd6741;font-size:.72rem;font-weight:700;letter-spacing:.12em}.story-copy h2,.section-heading h2{font:700 clamp(2.25rem,4vw,4.9rem)/1.22 var(--serif);letter-spacing:-.055em;margin:18px 0 32px}.story-copy>p:not(.story-kicker){font:400 1.03rem/1.95 var(--serif);color:#756a62;max-width:470px;word-break:keep-all}.text-link{display:inline-flex;align-items:center;gap:26px;margin-top:27px;padding-bottom:7px;border-bottom:1px solid #3e342f;color:var(--ink);text-decoration:none;font-size:.86rem}.text-link span{transition:.25s}.text-link:hover span{transform:translate(3px,-3px)}
.artisans-section{background:#201a22;color:#f9f0e8;position:relative}.section-heading{max-width:760px;margin:0 auto 90px;text-align:center}.section-heading .section-label{justify-content:center;color:#968996}.section-heading h2{margin-bottom:24px}.section-heading>p{font:400 1rem/1.85 var(--serif);color:#a99da9}.artisan-list{max-width:1280px;margin:auto;border-top:1px solid var(--line)}.artisan-card{--accent:#fff;display:grid;grid-template-columns:80px 180px 1fr 80px;gap:36px;align-items:center;min-height:210px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:.45s}.artisan-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 13%,transparent));transform:translateX(-100%);transition:.65s}.artisan-card:hover:before{transform:none}.artisan-index{color:#776b77;font:400 .75rem var(--serif)}.artisan-image{width:160px;height:160px;border-radius:50%;overflow:hidden;filter:grayscale(.25);transition:.55s;z-index:1}.artisan-image img{width:100%;height:100%;object-fit:cover;object-position:center 24%;transform:scale(1.02);transition:.7s}.artisan-card:hover .artisan-image{border-radius:22%;filter:none;transform:rotate(-3deg)}.artisan-card:hover .artisan-image img{transform:scale(1.1)}.artisan-copy{z-index:1}.artisan-copy p{font-size:.65rem;letter-spacing:.18em;color:var(--accent);font-weight:700;margin:0 0 8px}.artisan-copy h3{font:700 clamp(1.6rem,2.7vw,2.8rem)/1.2 var(--serif);margin:0 0 12px}.artisan-copy span{font:400 .9rem var(--serif);color:#9d929d}.artisan-symbol{color:var(--accent);font:400 2rem var(--serif);z-index:1}.artisan-card[data-accent="#d87f4f"]{--accent:#d87f4f}.artisan-card[data-accent="#7c89b5"]{--accent:#8b9bc9}.artisan-card[data-accent="#c75e38"]{--accent:#d56840}.artisan-card[data-accent="#557d79"]{--accent:#71a19a}.artisan-card[data-accent="#81678d"]{--accent:#aa83b8}
.about-section{min-height:88vh;background:#e8ded4;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;padding:100px 24px}.about-inner{position:relative;z-index:2}.about-inner>p:first-child{font:.75rem var(--sans);letter-spacing:.2em;color:#8d7565}.about-inner h2{font:400 clamp(2.2rem,4.6vw,5.4rem)/1.3 var(--serif);letter-spacing:-.06em;margin:26px 0}.about-inner h2 em{font-style:normal;color:#b96748}.about-note{font:400 1rem/1.8 var(--serif);color:#82756c}.about-orbit{position:absolute;width:min(72vw,850px);aspect-ratio:1;border:1px solid rgba(91,70,64,.14);border-radius:50%;animation:spin 26s linear infinite}.about-orbit:before,.about-orbit:after{content:"";position:absolute;inset:13%;border:1px solid rgba(91,70,64,.11);border-radius:50%}.about-orbit:after{inset:29%}.about-orbit span{position:absolute;width:10px;height:10px;border-radius:50%;background:#c57858;box-shadow:0 0 24px #c57858}.about-orbit span:nth-child(1){left:12%;top:17%}.about-orbit span:nth-child(2){right:5%;top:49%;background:#707ba0}.about-orbit span:nth-child(3){left:32%;bottom:1%;background:#5e8781}@keyframes spin{to{transform:rotate(360deg)}}footer{min-height:220px;background:#151117;color:#a99da9;padding:60px 5vw 35px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:20px}footer>div{display:flex;align-items:center;gap:12px;color:#f6ede5;font-family:var(--serif)}footer>p{font-size:.65rem;letter-spacing:.18em}.copyright{align-self:end;grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;letter-spacing:0;color:#706670}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s,transform .9s}.reveal.is-visible{opacity:1;transform:none}.character-modal{position:fixed;z-index:31;width:min(880px,90vw);height:min(660px,86vh);left:50%;top:50%;transform:translate(-50%,-48%);background:#f5ede4;display:grid;grid-template-columns:1fr .85fr;box-shadow:0 40px 120px rgba(0,0,0,.5);opacity:0;transition:.3s}.character-modal.open{opacity:1;transform:translate(-50%,-50%)}.character-modal[hidden],.modal-backdrop[hidden]{display:none}.modal-image{overflow:hidden}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-copy{padding:60px 45px;align-self:center}.modal-copy>p:first-child{font-size:.65rem;letter-spacing:.18em;color:#b36243;font-weight:700}.modal-copy h2{font:700 2.8rem var(--serif);margin:15px 0 22px}.modal-copy>p:last-child{font:400 1rem/1.9 var(--serif);color:#756a62}.modal-close{position:absolute;right:20px;top:16px;z-index:2;width:40px;height:40px;border:1px solid rgba(0,0,0,.18);border-radius:50%;background:rgba(255,255,255,.55);font-size:1.5rem;cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:rgba(11,8,12,.72);backdrop-filter:blur(10px);z-index:30}
@media(max-width:980px){.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:110px;align-content:center}.hero-copy{text-align:center;padding:0}.hero-desc br{display:none}.character-stage{height:46vh;margin-top:25px}.hero-character{width:23vw}.hero-character--worry{left:2%;top:24%}.hero-character--dream{left:18%;top:3%}.hero-character--courage{left:39%;top:18%;width:26vw}.hero-character--memory{left:62%;top:2%}.hero-character--tears{left:78%;top:26%}.story-layout{grid-template-columns:1fr;gap:50px}.story-copy{max-width:650px}.artisan-card{grid-template-columns:45px 130px 1fr 45px;gap:20px}.artisan-image{width:120px;height:120px}}
@media(max-width:640px){.site-header{height:72px}.site-header .sound{display:none}.hero{min-height:920px;padding-left:20px;padding-right:20px;align-content:start}.hero-copy{padding-top:60px}.hero h1{font-size:3.2rem}.hero-desc{max-width:340px;margin:24px auto 0}.character-stage{height:450px;margin-top:15px}.hero-character{width:39vw}.hero-character--worry{left:-6%;top:24%}.hero-character--dream{left:12%;top:3%}.hero-character--courage{left:32%;top:26%;width:42vw}.hero-character--memory{left:55%;top:4%}.hero-character--tears{left:71%;top:26%}.hero-character span{display:none}.scroll-cue{bottom:20px}.story-section,.artisans-section{padding:90px 20px}.story-copy h2,.section-heading h2{font-size:2.55rem}.play-ring{width:68px;height:68px}.section-heading{margin-bottom:50px}.artisan-card{grid-template-columns:32px 84px 1fr;gap:14px;min-height:145px}.artisan-image{width:78px;height:96px;border-radius:40px}.artisan-symbol{display:none}.artisan-copy h3{font-size:1.45rem}.artisan-copy span{font-size:.77rem;display:block}.character-modal{grid-template-columns:1fr;height:88vh}.modal-image{height:55vh}.modal-copy{padding:24px 28px}.modal-copy h2{font-size:2rem}.modal-copy>p:last-child{font-size:.9rem}.modal-close{background:#fff}.about-section{min-height:75vh}.about-inner h2{font-size:2.4rem}footer{grid-template-columns:1fr}}

.story-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.text-link-muted{color:#84766e;border-bottom-color:#b5a69c}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

.hero-selector{display:none}
@media(max-width:640px){
  .hero-character{width:34vw}
  .hero-character--worry{left:-3%;top:25%;z-index:8}
  .hero-character--dream{left:15%;top:4%;z-index:7}
  .hero-character--courage{left:34%;top:27%;width:37vw;z-index:6}
  .hero-character--memory{left:55%;top:4%;z-index:5}
  .hero-character--tears{left:73%;top:27%;z-index:4}
  .hero-selector{position:absolute;z-index:12;left:20px;right:20px;bottom:66px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(23,19,27,.58);backdrop-filter:blur(12px)}
  .hero-selector :is(button,a){min-width:0;border:0;border-radius:999px;padding:10px 2px;background:transparent;color:rgba(255,255,255,.72);font:500 .72rem/1 var(--sans);cursor:pointer;text-decoration:none;text-align:center}
  .hero-selector :is(button,a):first-child{background:rgba(239,158,105,.2);color:#ffd8be}
  .hero-selector :is(button,a):active,.hero-selector :is(button,a):focus-visible{background:rgba(255,255,255,.14);color:#fff;outline:none}
}

/* Main cast order: Worry Mender leads from the center; Courage Smith takes the left slot. */
.hero-character--worry{left:41%;top:18%;width:clamp(165px,17vw,300px);z-index:12;transform:translate3d(calc(var(--x,0)*4px),calc(var(--y,0)*-3px),120px) rotateY(-2deg)}
.hero-character--courage{left:-4%;top:23%;width:clamp(145px,15vw,265px);z-index:8;transform:translate3d(calc(var(--x,0)*-8px),calc(var(--y,0)*-5px),-100px) rotateY(13deg) rotateZ(-5deg)}
@media(max-width:640px){
  .hero-character--worry{left:39%;top:27%;width:37vw;z-index:12}
  .hero-character--courage{left:-3%;top:25%;width:34vw;z-index:8}
}

/* Keep every portrait's visible face inside its own click area. */
.hero-character--worry{left:-4%;z-index:10}
.hero-character--dream{left:19%;z-index:9}
.hero-character--courage{left:41%;z-index:8}
.hero-character--memory{left:65%;z-index:7}
.hero-character--tears{left:82%;z-index:6}
@media(max-width:640px){
  .hero-character--worry{left:-3%;top:25%;z-index:10}
  .hero-character--dream{left:18%;top:4%;z-index:9}
  .hero-character--courage{left:39%;top:27%;z-index:8}
  .hero-character--memory{left:60%;top:4%;z-index:7}
  .hero-character--tears{left:79%;top:27%;z-index:6}
  .hero-selector{top:calc(100svh - 96px);bottom:auto}
}

/* Final hero placement — requested lead-character swap. */
.hero-character--worry{left:41%;top:18%;width:clamp(165px,17vw,300px);z-index:12;transform:translate3d(calc(var(--x,0)*4px),calc(var(--y,0)*-3px),120px) rotateY(-2deg)}
.hero-character--courage{left:-4%;top:23%;width:clamp(145px,15vw,265px);z-index:10;transform:translate3d(calc(var(--x,0)*-8px),calc(var(--y,0)*-5px),-100px) rotateY(13deg) rotateZ(-5deg)}
@media(max-width:640px){
  .hero-character--worry{left:39%;top:27%;width:37vw;z-index:12}
  .hero-character--courage{left:-3%;top:25%;width:34vw;z-index:10}
}

/* Wider spacing and unobstructed hit areas for all five portraits. */
.hero-copy{pointer-events:none}
.character-stage,.hero-character{pointer-events:auto}
.hero-character--courage{left:0;top:25%;width:clamp(125px,13vw,235px);z-index:10}
.hero-character--dream{left:22%;top:6%;width:clamp(135px,14vw,250px);z-index:9}
.hero-character--worry{left:44%;top:18%;width:clamp(155px,16vw,285px);z-index:12}
.hero-character--memory{left:68%;top:5%;width:clamp(135px,14vw,250px);z-index:8}
.hero-character--tears{left:86%;top:27%;width:clamp(125px,13vw,235px);z-index:7}
@media(max-width:640px){
  .hero-character--courage{left:0;top:26%;width:28vw;z-index:10}
  .hero-character--dream{left:20%;top:4%;width:28vw;z-index:9}
  .hero-character--worry{left:40%;top:27%;width:33vw;z-index:12}
  .hero-character--memory{left:63%;top:4%;width:28vw;z-index:8}
  .hero-character--tears{left:80%;top:27%;width:28vw;z-index:7}
  .hero-selector :is(button,a):first-child{background:transparent;color:rgba(255,255,255,.72)}
  .hero-selector :is(button,a)[data-character="worry"]{background:rgba(239,158,105,.2);color:#ffd8be}
}

/* Mobile about copy: preserve the same three intentional lines as desktop. */
@media(max-width:640px){
  .about-section{padding-left:16px;padding-right:16px}
  .about-inner h2{
    font-size:clamp(1.35rem,6.8vw,2rem);
    line-height:1.42;
    letter-spacing:-.065em;
    white-space:nowrap;
    word-break:keep-all;
  }
  .about-note{
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
    font-size:.86rem;
    line-height:1.85;
    word-break:keep-all;
    text-wrap:balance;
  }
}

/* Official heart-and-needle mark used beside the Korean brand name. */
.brand-mark{
  display:block;
  width:40px;
  height:29px;
  flex:0 0 40px;
  border:0;
  border-radius:0;
  background:url('./assets/heart-repair-mark.png') center/contain no-repeat;
  font-size:0;
  line-height:0;
}
.content-page .content-brand .brand-mark{
  width:38px;
  height:27px;
  flex-basis:38px;
  filter:brightness(0) saturate(100%) opacity(.82);
}
.content-footer strong{display:flex;align-items:center;gap:10px}
.content-footer .brand-mark{width:36px;height:26px;flex-basis:36px}
@media(max-width:640px){
  .brand-mark{width:35px;height:25px;flex-basis:35px}
}
.artisan-card{color:inherit;text-decoration:none;cursor:pointer}
.artisan-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.modal-backdrop{border:0;padding:0;cursor:pointer}
