/* PencilBooth reference tokens with Hanae-specific editorial flow */
:root{--gold:#f7ca42;--ink:#11110b;--paper:#fffef8;--muted:#615a3c;--line:#11110b30}
.wrap{max-width:960px}header{border:0;height:110px}.wordmark{font-size:44px}.nav-side.right{background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:4px}.concept{background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
.hero{padding-top:25px;text-align:center}.hero-meta{justify-content:center}.hero-meta span:last-child{display:none}.hero h1{font-family:'Courier New','Malgun Gothic',monospace;font-weight:500;font-size:clamp(34px,4vw,54px);letter-spacing:-2px;line-height:1.35;margin:28px 0 20px}.hero h1>span{font-size:.55em;letter-spacing:.12em;display:inline-block;margin-bottom:15px}.hero-bottom{margin:0 auto 38px;display:block}.hero-bottom p{font-size:14px;margin:0 0 15px}.hero-bottom .text-link{border:0;background:var(--ink);color:var(--paper);padding:13px 23px;border-radius:4px}.image-frame{height:auto;aspect-ratio:1.75;border-radius:24px;border:2px solid var(--ink)}.image-frame img{object-fit:cover}.seal{display:none}.vertical-note{right:-25px}.caption{padding-right:0}.image-note{border-radius:20px}.hero .caption span:last-child{font-size:10px;letter-spacing:0}
h2{font-family:'Malgun Gothic',sans-serif;font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-1.2px}.story{padding:80px 0 60px;text-align:center}.story .eyebrow{margin-bottom:18px}.story p{font-family:'Courier New','Malgun Gothic',monospace;font-size:14px;line-height:1.9;margin:24px 0}.stat-line{display:flex;gap:30px;justify-content:center;margin-top:33px}.stat-line>span{display:flex;align-items:center;gap:11px;font-size:13px}.stat-line b{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--ink);color:var(--gold);font:27px 'Courier New'}
.portraits{padding:40px 0 65px;border:0;overflow:hidden}.section-top{align-items:center;gap:25px}.section-top h2{font-size:28px}.section-top .eyebrow{margin-bottom:15px}.gallery-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.gallery-controls button{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;font-size:18px}.gallery-controls #pause{width:auto;border:0;font-size:11px;background:#f9e49a;padding:0 15px;border-radius:30px}.gallery{overflow-x:auto;scrollbar-width:none;margin-top:35px;padding:4px max(30px,calc((100vw - 960px)/2)) 10px;outline-offset:-3px!important}.gallery::-webkit-scrollbar{display:none}.profiles{display:flex;width:max-content;gap:24px;padding:0;position:relative}.profile{flex:0 0 260px;width:260px;align-self:auto}.profile:nth-child(even){padding-top:34px}.profile-offset{margin:0}.portrait{height:auto;aspect-ratio:1;border-radius:24px;border:2px solid var(--ink);overflow:hidden}.photo-tile{width:100%;height:100%;background-image:url('assets/profiles.png');background-size:300% 200%;background-repeat:no-repeat;transition:transform .55s}.face-0{background-position:0% 0%}.face-1{background-position:50% 0%}.face-2{background-position:100% 0%}.face-3{background-position:0% 100%}.face-4{background-position:50% 100%}.face-5{background-position:100% 100%}.profile:hover .photo-tile{transform:scale(1.035)}.profile-label{font-size:8px;border-radius:20px;padding:4px 9px;left:11px;bottom:11px}.profile-title{padding:14px 4px 0;border:0}.profile-title h3{font-size:26px}.profile p{margin:8px 4px;font-size:12px}.tags{margin:4px;font-size:9px}.gallery-note{text-align:center;font-size:10px;color:var(--muted);margin:28px 20px 0}
.trust{background:transparent;color:var(--ink);padding:40px 0 60px}.trust-grid{gap:70px}.trust h2{font:600 32px/1.5 'Malgun Gothic',sans-serif}.trust h2 i{color:var(--ink)}.trust p{font-size:13px;margin:23px 0}.trust .text-link{border-color:var(--ink)}.verification-paper{border-radius:24px;border:2px solid var(--ink);padding:25px;transform:rotate(3deg);background:#e7dcc0}.verification-paper h3{font-family:'Malgun Gothic';font-size:19px}.face-symbol{margin:22px auto 15px;border-radius:50%;width:80px;height:80px}.paper-top{font-size:8px}.verification-paper>p{margin:10px auto 18px}
.process{padding:55px 0 65px;text-align:center}.process h2{font-size:29px}.steps{text-align:left;gap:32px;margin-top:38px}.steps article{border:0;padding:0}.step-no{display:grid;place-items:center;background:var(--ink);color:var(--gold);border-radius:50%;width:43px;height:43px;font:22px 'Courier New'}.steps h3{font-weight:600;margin:17px 0 9px}.steps p{margin:0;font-size:13px}.tiny{display:none}.invitation{border:0;padding:35px 0 75px;gap:60px}.still-life{height:auto;aspect-ratio:1/1.15;border-radius:24px;border:2px solid var(--ink)}.still-life img{width:300%;height:auto;min-height:100%;object-fit:cover}.still-life span{border-radius:30px;font-size:11px}.invite-copy h2{font-size:30px}.button{border-radius:4px}.notes{padding-bottom:60px}.notes h2{font-size:24px}.notes summary{font-size:13px}footer{border:0;padding:28px 0 40px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.reveal.seen{opacity:1;transform:none}dialog{border-radius:24px}dialog select,dialog input{border-radius:10px}.close{border-radius:50%}
@media(max-width:900px){.wrap{width:calc(100% - 60px)}.hero h1{font-size:42px}.trust-grid{gap:40px}.profile{width:235px;flex-basis:235px}.invitation{gap:35px}.steps{gap:20px}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}header{height:92px;grid-template-columns:1fr auto}.nav-side.right{font-size:9px;padding:11px 12px}.wordmark{font-size:36px}.hero{padding-top:20px}.hero h1{font-size:36px;line-height:1.4}.hero-bottom p{font-size:12px}.hero-bottom .text-link{font-size:11px}.image-frame{aspect-ratio:1.4;border-radius:24px}.hero .caption span:last-child{display:none}.story{padding:60px 0 35px}.story h2{font-size:26px}.story p{font-size:12px}.stat-line{gap:22px}.stat-line>span{font-size:11px}.stat-line b{width:36px;height:36px;font-size:23px}.portraits{padding:28px 0 40px}.section-top{display:block}.section-top h2{font-size:24px}.gallery-controls{margin-top:20px;justify-content:end}.gallery{margin-top:20px;padding-inline:16px}.profile{width:220px;flex-basis:220px}.profiles{gap:18px}.profile:nth-child(even){padding-top:26px}.profile-title{display:flex}.profile-title h3{font-size:25px}.profile p{font-size:12px}.gallery-note{font-size:9px}.trust{padding:25px 0 30px}.trust-grid{gap:30px}.trust h2{font-size:27px}.verification-paper{margin:0 12px}.process{padding:40px 0}.process h2{font-size:25px}.steps{gap:24px}.steps article{display:grid;grid-template-columns:42px 1fr;gap:0 14px}.step-no{grid-row:1/3;width:36px;height:36px;font-size:18px}.steps h3{margin:0 0 8px}.steps p{font-size:12px}.invitation{gap:28px;padding:25px 0 50px}.still-life{aspect-ratio:1.15;height:auto}.invite-copy h2{font-size:27px}.notes h2{font-size:22px}footer{gap:20px}.concept{font-size:7px}.concept>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.photo-tile{transition:none}}

/* Original Hanae palette and editorial typography, retaining the revised flow. */
:root{--gold:#e6d7ad;--ink:#253027;--paper:#f6f2e8;--muted:#646655;--line:#25302738}
.concept{background:var(--ink);color:var(--gold)}
header{border-bottom:1px solid var(--line)}
.nav-side.right{background:transparent;color:var(--ink);padding-inline:0}
.hero h1,h2,.trust h2,.verification-paper h3{font-family:'Noto Serif KR',serif;font-weight:400}
.hero h1{letter-spacing:-2px;line-height:1.55}
.hero-bottom .text-link{background:transparent;color:var(--ink);border-bottom:1px solid var(--ink);border-radius:0;padding-inline:0}
.story p{font-family:'DM Sans','Malgun Gothic',sans-serif}
.stat-line b,.step-no{font-family:Georgia,serif;font-weight:400}
.gallery-controls #pause{background:#d9cba5}
.trust{background:var(--ink);color:var(--paper);padding:75px 0;margin:30px 0}
.trust h2 i{color:#c4c7b0}.trust .text-link{border-color:var(--paper)}
.verification-paper{background:var(--paper)}
.signup-progress{height:3px;background:var(--line);margin:18px 0 28px}.signup-progress span{height:100%;display:block;background:var(--ink);transition:width .25s}
.signup-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
#signup-form textarea{font:inherit;width:100%;padding:12px;background:transparent;border:1px solid var(--line);border-radius:10px;resize:vertical;min-height:100px}
#signup-form .check{display:flex;align-items:start;gap:10px;margin:18px 0;font-size:12px}
#signup-form .check input{width:18px;min-height:18px;height:18px;margin:3px 0;flex-shrink:0;accent-color:var(--ink)}
.signup-actions{display:flex;align-items:center;gap:18px;margin-top:22px}.signup-actions .button{margin:0;flex:1}.signup-back{font-size:12px;min-height:44px}
.signup-note{padding:12px 15px;background:#e6d7ad55;font-size:11px!important;border-radius:10px}
#signup-status{color:#8d3125;font-size:12px;min-height:20px}
.signup-review{padding:14px 0;border-top:1px solid var(--line)}.signup-review h3{font-size:13px;margin:0 0 8px;display:flex;justify-content:space-between}.signup-review h3 button{font-size:11px;text-decoration:underline}.signup-review p{font-size:12px;margin:4px 0;overflow-wrap:anywhere}
.signup-photo{width:90px;height:110px;object-fit:cover;border-radius:12px;margin-top:12px}.signup-photo[hidden]{display:none}
.complete-mark{font:44px Georgia;margin:25px 0 15px}
@media(max-width:600px){.trust{padding:50px 0;margin:15px 0}.signup-grid{grid-template-columns:1fr}.hero h1{font-size:36px}}
/* Signup contact choice — demo-only, transient form input. */
.contact-demo{margin:22px 0 26px;padding:20px 22px;background:#f6f2e866;border:1px solid var(--line);border-radius:12px}
.contact-demo h3{font:19px 'Noto Serif KR',serif;margin:0 0 15px}
.contact-demo fieldset{border:0;padding:0;margin:0 0 17px;display:flex;gap:10px}
.contact-choice{position:relative;display:flex;align-items:center;gap:8px;min-width:130px;padding:9px 13px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:12px}
.contact-choice:has(input:checked){border-color:var(--ink);background:#e6d7ad70}
.contact-choice input{accent-color:var(--ink);margin:0}
.contact-symbol{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 12px Arial}
.kakao-symbol{background:#fee500;color:#191600}.phone-symbol{background:#253027;color:#f6f2e8}
.contact-demo>label{display:block;font-size:11px;margin:0 0 6px}
.contact-demo>input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:5px;background:#fffdf7;color:var(--ink)}
.contact-demo>input:disabled{opacity:.65}
.contact-demo>small{display:block;color:var(--muted);font-size:10px;margin-top:8px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.contact-demo{padding:17px}.contact-choice{min-width:0;flex:1}.connected-note{left:8px;right:8px;bottom:8px;padding:7px 9px}.connected-note b{font-size:13px}.approved-tag{right:0;padding:4px 6px;font-size:8px}}
/* Compact contact controls; scoped to override the dialog's full-width inputs. */
#signup-form .contact-demo{padding:20px 0;margin:22px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
#signup-form .contact-demo h3{font:16px/1.5 'Noto Serif KR',serif;margin:0 0 14px;letter-spacing:-.3px}
#signup-form .contact-demo fieldset{display:flex;gap:8px;margin:0 0 16px;min-width:0}
#signup-form .contact-choice{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;width:auto;min-width:0;min-height:42px;margin:0;padding:9px 15px;border:1px solid #25302730;border-radius:7px;background:transparent;font-size:12px;line-height:1.4;white-space:nowrap;transition:background .18s,border-color .18s}
#signup-form .contact-choice input{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;opacity:0;clip-path:inset(50%);overflow:hidden}
#signup-form .contact-choice:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
#signup-form .contact-choice:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
#signup-form .contact-choice:hover{border-color:var(--ink)}
#signup-form .contact-symbol{width:16px;height:16px;flex:0 0 16px;background:none;color:inherit;border-radius:0;display:grid;place-items:center}
#signup-form .contact-symbol svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#signup-form .contact-demo>input{min-height:44px;padding:10px 12px;border-radius:7px;font-size:13px;background:#fffdf766}
#signup-form .contact-demo>small{font-size:10px;line-height:1.6;margin-top:8px}