:root{
  --gold:#b59b62; --ash:#a39580; --champagne:#eadfc4;
  --bg:#f8f5ef; --tint:#f4f0e7;--pearl:linear-gradient(135deg,#f4ede0 0%,#efe8dc 50%,#ebe4d8 100%); --ink:#161616; --mute:#6f6a62; --line:#dcd6cb;
  --serif:"Cormorant Garamond","Noto Serif JP",serif;
  --jp-serif:"Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:300 15px/1.9 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

/* header */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:rgba(250,248,244,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:600 26px/1 var(--serif);letter-spacing:.06em;text-decoration:none}
.logo img{display:block;height:24px;width:auto}
.hero-logo{height:clamp(45px,7.2vw,77px);width:auto;margin-bottom:14px}
.tagline{font:italic 400 clamp(15px,2vw,19px) var(--serif);letter-spacing:.08em;color:var(--mute);margin:0 0 64px}
.site-footer .logo img{height:26px;margin:0 auto}
.nav{display:flex;gap:28px}
.nav a{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.2em;text-decoration:none;color:var(--mute)}
.nav a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;width:36px;height:36px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:8px;right:8px;height:1px;background:var(--ink)}
.nav-toggle span:first-child{top:14px}.nav-toggle span:last-child{top:21px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;min-height:84vh;padding:72px 6vw;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(60% 55% at 12% 18%,#f9d5df 0,transparent 70%),radial-gradient(55% 60% at 88% 12%,#fbe6d2 0,transparent 70%),radial-gradient(60% 60% at 80% 85%,#d3dcf4 0,transparent 70%),radial-gradient(50% 55% at 25% 95%,#e1d6f2 0,transparent 70%),radial-gradient(40% 40% at 50% 50%,#fdf3ea 0,transparent 75%),#f3dfe6;background-size:140% 140%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 60%}}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-logo{height:clamp(45px,7.2vw,77px);width:auto;margin-bottom:14px}
.tagline{font:500 clamp(20px,2.4vw,26px) 'Dancing Script',cursive;color:#7a6f63;margin:0 0 52px}
.hero h1{font:500 clamp(24px,3.4vw,38px)/1.7 var(--jp-serif);letter-spacing:.08em;margin:0 0 22px}
.lead{margin:0 0 40px;font-size:13px;letter-spacing:.08em}
.eyebrow{font:500 13px var(--serif);letter-spacing:.35em;color:var(--mute);margin:0 0 18px}
.btn{display:inline-block;padding:15px 40px;background:var(--ink);color:var(--bg);text-decoration:none;font:500 12px var(--sans);letter-spacing:.2em;border:1px solid var(--ink);border-radius:999px;transition:.25s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
/* hero visual: scattered botanical nails */
.hero-visual{position:relative;width:100%;max-width:520px;aspect-ratio:1/1.1;justify-self:center}
.hv{position:absolute;width:27%;height:auto;filter:drop-shadow(0 10px 18px rgba(90,60,60,.14));animation:float 7s ease-in-out infinite}
.n1{left:0;top:0;transform:rotate(-6deg)}
.n2{left:35%;top:2%;width:25%;animation-delay:-1s}
.n3{left:68%;top:0;transform:rotate(5deg);animation-delay:-2s}
.n4{left:16%;top:33%;transform:rotate(4deg);animation-delay:-3s}
.n5{left:52%;top:31%;animation-delay:-4s}
.n6{left:0;top:65%;transform:rotate(-4deg);animation-delay:-5s}
.n7{left:35%;top:64%;width:23%;animation-delay:-6s}
.n8{left:70%;top:62%;width:24%;transform:rotate(7deg);animation-delay:-2.5s}
@keyframes float{50%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.hv{animation:none}}
.card-art{display:block;height:92px;width:auto;margin:-10px 0 14px}
.about{position:relative;overflow:hidden}
.side-art{position:absolute;top:50%;height:260px;width:auto;translate:0 -50%;opacity:.85}
.side-art.l{left:4vw}.side-art.r{right:4vw}
.ig-tile{position:relative;flex-direction:column;gap:8px;border:0!important;overflow:hidden}
.ig-tile img{height:41%;width:auto}
.ig-tile span{font-size:10px!important}
.foot-nails{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.foot-nails img{height:64px;width:auto}
.foot-nails img:nth-child(even){translate:0 10px}
.marquee{background:var(--ink);color:var(--bg);overflow:hidden;white-space:nowrap;padding:12px 0}
.marquee-track{display:inline-flex;gap:40px;animation:mq 28s linear infinite;font:500 20px 'Dancing Script',cursive;letter-spacing:.04em}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* sections */
.section{padding:96px 6vw}
.section.tint{background:var(--pearl)}
.section-head{text-align:center;margin-bottom:56px}
.section-head h2{font:500 clamp(26px,4vw,38px)/1.3 var(--serif);letter-spacing:.1em;margin:0}
.note{color:var(--mute);margin:14px 0 0;font-size:13px}
.center{text-align:center;margin-top:48px}

.story{max-width:34em;margin:0 auto;text-align:center;font:400 16px/2.2 var(--jp-serif);letter-spacing:.06em}
.story p{margin:0 0 2.2em}
.story p:last-child{margin:0}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
.card{background:#fff;border:0;border-radius:200px 200px 24px 24px;padding-top:72px!important;padding:40px 32px;display:flex;flex-direction:column;position:relative}
.card{overflow:hidden;position:relative}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s}
.card:hover::after{transform:translateX(120%)}
.card>*{position:relative;z-index:1}
.card .num{font:400 14px var(--serif);color:var(--mute);letter-spacing:.2em}
.card h3{font:500 28px/1.2 var(--serif);margin:14px 0 2px;letter-spacing:.06em}
.card .jp{font-size:12px;color:var(--mute);margin:0 0 20px;letter-spacing:.1em}
.card p:not(.jp){font-size:14px;margin:0 0 28px;flex:1}
.link{font:500 14px var(--sans);text-decoration:none;border-bottom:1px solid var(--ink);align-self:flex-start;padding-bottom:2px}
.sub{margin-top:14px;font-size:12px;color:var(--mute)}

/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:760px;margin:0 auto}
.ig-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ig-tile span{font:400 12px var(--serif);letter-spacing:.3em;color:var(--mute)}

/* steps */
.steps{list-style:none;counter-reset:s;max-width:680px;margin:0 auto;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:400 24px var(--serif);color:var(--mute)}
.steps b{font-weight:500}
.steps span{color:var(--mute);font-size:14px}

/* support / faq */
.support-grid,.faq{max-width:760px;margin:0 auto}
.support-grid{display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line)}
.faq details{background:transparent;border:0;border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:20px 24px;font-weight:500;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/1 var(--serif);color:var(--mute)}
details[open] summary::after{content:"–"}
details>div,details>p{padding:0 24px 22px;margin:0;color:#3a3732;font-size:14px}
details ul,details ol{padding-left:1.3em;margin:10px 0}
.tbd{color:var(--mute);font-size:12px;border:1px dashed var(--line);padding:8px 12px!important}

/* footer */
.site-footer{text-align:center;padding:64px 6vw 40px;border-top:1px solid var(--line)}
.site-footer img{display:block;margin:0 auto 10px;mix-blend-mode:multiply}
.site-footer .logo{display:block;margin:0 0 20px}
.site-footer .links{display:flex;gap:28px;justify-content:center;margin:0 0 24px;font:500 14px var(--serif);letter-spacing:.12em}
.small{font-size:12px;color:var(--mute);margin:4px 0}
.small a{text-decoration:none}

@media(max-width:820px){
  .side-art{display:none}
  .foot-nails img{height:44px}
  .hero{grid-template-columns:1fr;min-height:0;padding:56px 6vw 48px}
  .hero-visual{order:-1;margin-bottom:8px}
  .nail-frame{max-width:110px}
  .cards{grid-template-columns:1fr}
  .section{padding:72px 6vw}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:16px 5vw;border-top:1px solid var(--line)}
}


/* ---- calm revision: back to the paper world ---- */
.hero{background:var(--bg);animation:none;min-height:80vh;
  background-image:radial-gradient(45% 55% at 72% 50%,rgba(244,214,222,.55) 0,transparent 70%),radial-gradient(35% 45% at 88% 70%,rgba(214,222,244,.5) 0,transparent 70%)}
.tagline{color:#8a7f72;margin-bottom:48px}
.hero-visual{position:relative;display:grid;grid-template-columns:repeat(5,1fr);column-gap:2.2%;row-gap:9%;align-items:center;max-width:560px;aspect-ratio:auto;justify-self:center}
.hero-visual img{width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(120,90,90,.10))}
.hero-visual img:nth-child(2n){translate:0 8%}
.marquee{display:none}
.btn{border-radius:0;letter-spacing:.2em}
.card{background:#fff!important;border:1px solid var(--line)!important;border-radius:0!important;padding-top:40px!important}
.card::after{display:none}
.card-art{height:84px;margin:0 0 18px}
.ig-tile.t0,.ig-tile.t1,.ig-tile.t2{background:#fff;border:1px solid var(--line)!important}
.section.tint{background:var(--tint)}
@media(max-width:820px){.hero{padding-top:40px}.hero-visual{order:-1;max-width:420px;margin-bottom:12px}}

/* ---- gold / ash gold palette ---- */
.hero{background-image:radial-gradient(45% 55% at 72% 48%,rgba(232,214,170,.60) 0,transparent 70%),radial-gradient(35% 45% at 90% 75%,rgba(190,174,148,.38) 0,transparent 70%),radial-gradient(30% 35% at 10% 90%,rgba(232,218,184,.45) 0,transparent 70%)}
.tagline{color:var(--ash)}
.eyebrow{color:var(--gold)}
.hero-visual img{filter:drop-shadow(0 8px 16px rgba(150,120,60,.16))}
.link{border-bottom-color:var(--gold)}
.link:hover{color:var(--gold)}
.card{box-shadow:0 0 0 1px rgba(181,155,98,.0)}
.card:hover{border-color:var(--gold)!important}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn::after{background:linear-gradient(110deg,transparent 30%,rgba(232,205,140,.55) 50%,transparent 70%)}
.section-head h2::after{content:'';display:block;width:36px;height:1px;background:var(--gold);margin:18px auto 0}
.steps li::before{color:var(--gold)}
summary::after{color:var(--gold)}
.side-art{opacity:.8}

/* real photography */
.hero-visual{display:block;position:relative;max-width:460px;width:100%;justify-self:center;padding:0;margin:0 0 22px 22px}
.hero-visual::before{content:'';position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--gold);z-index:0}
.hero-visual img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:none;translate:none;box-shadow:0 24px 50px -24px rgba(90,70,30,.35)}
.ig-tile.photo{padding:0;background:none;border:0!important}
.ig-tile.photo img{width:100%;height:100%;object-fit:cover;filter:none}
.hero{align-items:center}
@media(max-width:820px){.hero-visual{order:-1;max-width:340px;margin:0 0 18px 18px}}

/* dictionary entry */
.entry{max-width:34em;margin:0 auto;padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-family:var(--jp-serif)}
.entry dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:14px}
.entry .head{font:600 34px/1 var(--serif);letter-spacing:.06em}
.entry .pron{font:400 16px var(--serif);color:var(--ash)}
.entry .yomi{font-size:15px}
.entry .pos{font-size:12px;color:var(--mute);border:1px solid var(--line);padding:1px 8px;letter-spacing:.08em}
.entry dd{margin:0}
.entry dd p{margin:0 0 .6em;padding-left:1.6em;text-indent:-1.6em;font-size:15px;line-height:2}
.entry dd b{font-weight:500;color:var(--gold);margin-right:.4em}
.entry .ex{padding-left:1.6em;text-indent:0;color:var(--mute);font-size:14px}
.entry .ex em{font-style:normal;border-bottom:1px solid var(--gold)}
@media(max-width:820px){.entry{margin-bottom:48px}.entry .head{font-size:28px}}

.entry .note-tag{font-size:13px;color:var(--mute);letter-spacing:.06em}

/* photo grading: ash-gold, slightly matte */
:root{--grade:sepia(.20) saturate(.92) contrast(.95) brightness(1.03) hue-rotate(-6deg)}
.hero-visual img,.ig-tile.photo img{filter:var(--grade)!important}
.hero-visual::after,.ig-tile.photo::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(160deg,rgba(240,222,180,.38),rgba(190,170,140,.22));mix-blend-mode:soft-light}
.ig-tile.photo{position:relative}
.hero-visual::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

.card{padding-top:40px!important}

.soon{font:500 13px var(--serif);letter-spacing:.2em;color:var(--ash);align-self:flex-start;padding-bottom:2px;border-bottom:1px dotted var(--ash);cursor:default}
.site-footer .links .soon{border:0;font-size:14px;letter-spacing:.12em}

.policy{max-width:680px;margin:0 auto 40px;padding:28px 32px;background:#fff;border:1px solid var(--line);font-size:14px;line-height:2}
.policy p{margin:0 0 .8em}
.policy .price{margin:1.2em 0 0;padding-top:1em;border-top:1px solid var(--line);font:500 18px var(--jp-serif);letter-spacing:.06em}
.policy .price span{font:500 12px var(--sans);letter-spacing:.2em;color:var(--gold);margin-right:1em}
.policy .price small{font:400 13px var(--sans);color:var(--mute);margin-left:.6em;letter-spacing:.04em}
/* policy: no floating card, flat like the dictionary entry */
.policy{background:none;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:28px 0;font-family:var(--jp-serif)}
.policy .price{border-top:0;padding-top:0}

/* ---- type scale: body 16px minimum, annotations 14px ---- */
:root{--fs-body:16px;--fs-note:14px}
body{font-size:var(--fs-body)}
/* body-size (16) */
.nav a{font-size:var(--fs-body);letter-spacing:.12em}
.lead,.btn,.link,.card p:not(.jp),.steps span,details>div,details>p,.policy,
.site-footer .links,.site-footer .links .soon,.soon,
.entry .yomi,.entry dd p,.entry .ex{font-size:var(--fs-body)}
.btn{letter-spacing:.14em}
.link,.soon{font-size:var(--fs-body)}
/* annotations (14) */
.eyebrow,.note,.small,.tbd,.card .jp,.card .num,.sub,.ig-tile span,
.entry .pos,.entry .note-tag,.policy .price span,.policy .price small{font-size:var(--fs-note)!important}
.ig-tile span{letter-spacing:.2em}
.policy .price span{letter-spacing:.14em}
.card .jp{letter-spacing:.06em}
@media(max-width:820px){.nav a{font-size:var(--fs-body)}}

/* gothic: regular weight, no soft/light look */
body{font-weight:400}
.nav a,.btn,.link{font-weight:500}

/* header nav: mincho, smaller, airy */
.nav{gap:clamp(24px,3.6vw,52px)}
.nav a{font-family:"Cormorant Garamond","Noto Serif JP",serif;font-weight:500;font-size:var(--fs-note);letter-spacing:.22em;text-transform:none;color:var(--ink)}
.nav a:hover{color:var(--gold)}
@media(max-width:820px){.nav a{font-size:var(--fs-body);letter-spacing:.14em}}