/* ============================================================
   ATELIER SOL — Bare-Face Beauty, Thoughtfully Designed.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --blush:#EFE3E1;
  --blush-soft:#F8F1F0;
  --paper:#FFFFFF;
  --ink:#141010;
  --ink-70:rgba(20,16,16,.70);
  --ink-45:rgba(20,16,16,.45);
  --rose:#C4645E;
  --rose-soft:#E7BFBA;
  --line:rgba(20,16,16,.14);
  --line-soft:rgba(20,16,16,.08);

  --serif:"Cormorant Garamond",Times,"Times New Roman",serif;
  --sans:"Jost","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --kr:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;

  --shell:1440px;
  --gut:clamp(18px,4vw,56px);
  --sec:clamp(72px,10vw,150px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blush);color:var(--ink);overflow-x:hidden;
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- Language switching ---------- */
html[data-lang="en"] .ko,
html[data-lang="ko"] .en{display:none !important}
html[data-lang="ko"] body{font-family:var(--kr)}
html[data-lang="ko"] .kr-tight{word-break:keep-all}
html[data-lang="ko"] .display,
html[data-lang="ko"] .h2,
html[data-lang="ko"] .h3,
html[data-lang="ko"] .lead,
html[data-lang="ko"] .body,
html[data-lang="ko"] .card__desc,
html[data-lang="ko"] .footer__tag,
html[data-lang="ko"] .step p,
html[data-lang="ko"] .pillar p,
html[data-lang="ko"] .info__v,
html[data-lang="ko"] .announce,
html[data-lang="ko"] .review figcaption{word-break:keep-all}

/* ---------- Shell ---------- */
.shell{max-width:var(--shell);margin:0 auto;background:var(--paper)}
.wrap{padding-inline:var(--gut)}
.section{padding-block:var(--sec)}

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif);font-weight:300;line-height:.94;
  letter-spacing:-.02em;font-size:clamp(38px,7.4vw,104px);
  text-wrap:balance;
}
.display em{font-style:italic;color:var(--rose)}
.h2{
  font-family:var(--serif);font-weight:300;line-height:1.06;
  letter-spacing:-.01em;font-size:clamp(30px,4.6vw,62px);
  text-wrap:balance;
}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.5vw,34px);line-height:1.15;text-wrap:balance}
html[data-lang="ko"] .display,
html[data-lang="ko"] .h2,
html[data-lang="ko"] .h3{font-family:var(--kr);font-weight:300;letter-spacing:-.03em;line-height:1.28}
html[data-lang="ko"] .display{font-size:clamp(28px,4.6vw,62px);line-height:1.24}
html[data-lang="ko"] .h2{font-size:clamp(24px,3.4vw,44px)}
html[data-lang="ko"] .h3{font-size:clamp(18px,1.9vw,23px)}
html[data-lang="ko"] .lead{font-size:15px;line-height:1.9}

.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  font-weight:400;color:var(--ink-45);
}
.eyebrow.rose{color:var(--rose)}
.lead{font-size:clamp(15px,1.35vw,18px);line-height:1.85;color:var(--ink-70);max-width:56ch;text-wrap:pretty}
.body{font-size:15px;line-height:1.9;color:var(--ink-70);text-wrap:pretty}
.script{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--rose)}
.name{font-weight:400;color:var(--ink);letter-spacing:.04em}
.signature{
  font-family:var(--serif);font-size:19px;font-style:italic;color:var(--rose);
  margin-top:6px;letter-spacing:.02em;
}
html[data-lang="ko"] .signature{font-family:var(--kr);font-style:normal;font-size:15px;letter-spacing:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:15px 30px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.btn--sm{padding:11px 20px;font-size:10px;letter-spacing:.18em}
.btn i{font-style:normal;transition:transform .35s ease}
.btn:hover i{transform:translateX(4px)}

.link-u{
  display:inline-block;align-self:start;width:fit-content;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
}
.link-u:hover{color:var(--rose);border-color:var(--rose)}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--ink);color:#fff;text-align:center;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:11px var(--gut);
}
.announce a{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.announce .sep{opacity:.4;margin-inline:.9em}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-soft);
}
.header__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gut);
}
.brand{
  font-family:var(--serif);font-size:19px;letter-spacing:.42em;
  text-transform:uppercase;white-space:nowrap;font-weight:400;
}
.brand small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.3em;color:var(--ink-45);margin-top:3px}
.nav{display:flex;gap:clamp(18px,2.6vw,42px)}
.nav a{
  position:relative;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding-block:6px;color:var(--ink-70);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--ink)}
.header__end{display:flex;align-items:center;gap:18px}

.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--line);padding:3px}
.lang button{
  padding:5px 10px;font-size:10px;letter-spacing:.14em;color:var(--ink-45);
  transition:background .25s,color .25s;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

.burger{display:none;width:26px;height:14px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){bottom:0}
.burger[aria-expanded="true"] span:nth-child(1){top:6px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){bottom:7px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--blush-soft)}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(84vh,760px)}
.hero__pane{position:relative;overflow:hidden}
.hero__pane img,.hero__pane video{width:100%;height:100%;object-fit:cover}
.hero__pane--a img{object-position:50% 22%}
.hero__center{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:var(--gut);pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,.38) 58%,rgba(0,0,0,.46) 100%);
}
.hero__mark{
  font-family:var(--serif);font-weight:300;color:#fff;line-height:.9;
  font-size:clamp(40px,8.2vw,116px);letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 40px rgba(0,0,0,.28);
}
.hero__mark>span{display:block;font-size:.2em;letter-spacing:.28em;line-height:1.75;margin-top:26px;font-family:var(--sans);font-weight:300;text-shadow:0 1px 16px rgba(0,0,0,.55)}
html[data-lang="ko"] .hero__mark>span{font-family:var(--kr);letter-spacing:.02em;font-size:.17em;line-height:1.7;word-break:keep-all}
.hero__cta{margin-top:34px;pointer-events:auto}
.hero__tag{
  position:absolute;left:var(--gut);bottom:26px;color:#fff;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;mix-blend-mode:difference;
}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:26px;color:#fff;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.hero__scroll::after{content:"";width:34px;height:1px;background:#fff;animation:slide 2.4s infinite}
@keyframes slide{0%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(.3);transform-origin:right}}

/* page hero (inner pages) */
.phero{display:grid;grid-template-columns:1.05fr .95fr;background:var(--blush-soft);align-items:stretch}
.phero__media{position:relative;overflow:hidden;min-height:min(78vh,700px)}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,90px)}
.phero__body .h2{margin-block:20px 22px}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--ink);color:#fff;overflow:hidden;padding-block:15px;
  display:flex;white-space:nowrap;
}
.marquee__track{display:flex;gap:0;animation:marq 34s linear infinite;flex:0 0 auto}
.marquee__track span{
  padding-inline:34px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:34px;
}
.marquee__track span::after{content:"✦";color:var(--rose-soft);font-size:9px}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- Statement ---------- */
.statement{text-align:center;max-width:900px;margin-inline:auto}
.statement .h2{margin-block:22px 26px}
.statement .lead{margin-inline:auto;text-align:center}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.card{background:var(--paper);padding:0 0 30px;display:flex;flex-direction:column}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--blush-soft)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.045)}
.card__flag{
  position:absolute;top:14px;left:14px;background:var(--ink);color:#fff;
  padding:6px 11px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
}
.card__flag--rose{background:var(--rose)}
.card__body{padding:24px 26px 0;display:flex;flex-direction:column;flex:1}
.card__body .h3{margin-bottom:10px}
.card__desc{font-size:14px;line-height:1.8;color:var(--ink-70);flex:1;text-wrap:pretty}
.card__meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.price{font-family:var(--serif);font-size:26px;letter-spacing:.01em}
.price s{font-size:15px;color:var(--ink-45);margin-right:9px}
.dur{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.card .btn{margin:20px 26px 0;justify-content:center}

/* ---------- Split editorial ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,90px)}
.split--rev .split__media{order:2}
.split__media img,.split__media video{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media--free img{aspect-ratio:16/10}
.split__media--soft{background:#E5D2CB}
.split__media--soft img{aspect-ratio:1/1}
.split__body{padding-block:20px}
.split__body .h2{margin-block:18px 24px}
.split__body .btn{margin-top:32px;align-self:flex-start}
.split__body>*,.phero__body>*{max-width:100%;min-width:0}
.split--wide{grid-template-columns:1.15fr .85fr}

/* ---------- Numbered list ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(28px,4vw,60px)}
.pillar__n{font-family:var(--serif);font-size:44px;color:var(--rose-soft);line-height:1;display:block;margin-bottom:16px}
.pillar .h3{margin-bottom:12px;font-size:clamp(19px,1.7vw,24px)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.step{background:var(--paper);padding:34px 26px 40px}
.step__n{font-size:10px;letter-spacing:.3em;color:var(--rose);display:block;margin-bottom:20px}
.step h3{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:10px}
html[data-lang="ko"] .step h3{font-family:var(--kr);font-size:18px;font-weight:400}

/* ---------- Gallery ---------- */
.gallery{display:grid;min-width:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px,1.4vw,20px)}
.gallery figure{margin:0;background:var(--blush-soft)}
.gallery img,.gallery video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.gallery figcaption{
  padding-top:11px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
}
.gallery--tall img,.gallery--tall video{aspect-ratio:3/4}
.gallery--free img{aspect-ratio:auto}
.gallery .span2{grid-column:span 2}
.gallery .span2 img{aspect-ratio:3/2}

/* ---------- Offer band ---------- */
.band{background:var(--ink);color:#fff;padding-block:clamp(56px,7vw,96px)}
.band .eyebrow{color:var(--rose-soft)}
.band .h2{margin-block:18px 20px}
.band .lead{color:rgba(255,255,255,.72)}
.band__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.band__price{font-family:var(--serif);font-size:clamp(48px,7vw,96px);line-height:1}
.band__price small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-soft);margin-top:14px}

/* ---------- Testimonials (real messages) ---------- */
.reviews{columns:3;column-gap:clamp(16px,2vw,26px)}
.review{
  break-inside:avoid;margin:0 0 clamp(16px,2vw,26px);background:var(--paper);
  border:1px solid var(--line-soft);padding:14px 14px 0;
  box-shadow:0 24px 50px -38px rgba(20,16,16,.65);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease;
}
.review:nth-child(odd){transform:rotate(-.6deg)}
.review:nth-child(even){transform:rotate(.5deg)}
.review:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 30px 60px -36px rgba(20,16,16,.6)}
.review img{width:100%;height:auto;background:var(--blush-soft)}
.review figcaption{
  padding:14px 3px 15px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-45);border-top:1px solid var(--line-soft);margin-top:13px;
}
html[data-lang="ko"] .review figcaption{
  font-size:12.5px;letter-spacing:0;text-transform:none;line-height:1.6;word-break:keep-all;
}
.reviews-note{
  margin-top:34px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
}
html[data-lang="ko"] .reviews-note{font-size:13px;letter-spacing:0;text-transform:none}
@media (max-width:980px){.reviews{columns:2}}
@media (max-width:620px){.reviews{columns:1}}

/* ---------- Gloss texture band ---------- */
.texture{overflow:hidden;background:#FCF2E9;line-height:0}
.texture img{width:100%;height:clamp(170px,25vw,330px);object-fit:cover;object-position:50% 46%}

/* ---------- Closing ---------- */
.closing{background:var(--blush);text-align:center;padding-block:clamp(80px,11vw,160px)}
.closing .display{max-width:16ch;margin-inline:auto}
.closing__mark{
  width:clamp(112px,15vw,178px);aspect-ratio:1/1;object-fit:cover;
  display:block;margin:0 auto 30px;border-radius:50%;
}

/* ---------- Booking ---------- */
.booking{background:var(--blush-soft)}
.booking__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px)}
.booking .h2{margin-block:18px 22px}
.info{display:grid;gap:26px;align-content:start}
.info__row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.info__k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-45);padding-top:5px}
.info__v{font-family:var(--serif);font-size:21px}
html[data-lang="ko"] .info__v{font-family:var(--kr);font-size:16px}
.info__v small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-45);letter-spacing:.02em;margin-top:4px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#fff;padding-block:clamp(56px,7vw,90px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,60px);padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer .brand{font-size:22px}
.footer .brand small{color:rgba(255,255,255,.45)}
.footer__tag{margin-top:20px;font-size:14px;color:rgba(255,255,255,.6);line-height:1.8;max-width:34ch;text-wrap:pretty}
.footer__tag b{font-weight:inherit;white-space:nowrap}
.nw{white-space:nowrap}
.footer h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:20px;font-weight:400}
.footer li{margin-bottom:11px}
.footer li a{font-size:14px;color:rgba(255,255,255,.8)}
.footer li a:hover{color:#fff}
.footer__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  .hero__scroll::after{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split,.booking__in,.band__in,.phero{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split--wide{grid-template-columns:1fr}
  .phero__media{min-height:62vh}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__top>*:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  /* decorative line breaks off — let the text find its own rhythm */
  br.nb{display:none}
  .h2{font-size:clamp(27px,7.6vw,34px);line-height:1.14}
  .display{font-size:clamp(32px,9.4vw,44px);line-height:1.08}
  .h3{font-size:20px}
  html[data-lang="ko"] .h2{font-size:clamp(21px,5.6vw,26px);line-height:1.42}
  html[data-lang="ko"] .display{font-size:clamp(23px,6.2vw,30px);line-height:1.38}
  html[data-lang="ko"] .h3{font-size:17px}
  .lead,.body,.card__desc{font-size:14.5px;line-height:1.8}
  .eyebrow{letter-spacing:.24em}
  .announce{font-size:9.5px;letter-spacing:.14em;line-height:1.9}
  .hero__mark{font-size:clamp(34px,11vw,54px)}
  .hero__mark>span{font-size:10.5px;letter-spacing:.15em;line-height:1.95;margin-top:20px;max-width:300px;margin-inline:auto}
  html[data-lang="ko"] .hero__mark>span{font-size:12.5px;line-height:1.85;max-width:270px}
  .statement .lead{text-align:left}
  .reviews-note{letter-spacing:.12em;line-height:1.9}
  .band__price{font-size:clamp(54px,17vw,72px)}
  .header__in{padding-block:14px}
  .burger{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;
    padding:10px var(--gut) 26px;border-bottom:1px solid var(--line);
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .nav.open{visibility:visible;opacity:1;transform:none}
  .nav a{padding-block:15px;font-size:13px;border-bottom:1px solid var(--line-soft)}
  .nav a::after{display:none}
  .header__end .btn{display:none}
  .hero__grid{grid-template-columns:1fr;min-height:78vh}
  .hero__pane--b{display:none}
  .hero__tag{display:none}
  .card .btn{margin-inline:22px}
  .card__body{padding-inline:22px}
  .info__row{grid-template-columns:1fr;gap:6px}
  .footer__top{grid-template-columns:1fr}
}

@media (max-width:760px){
  .gallery .span2{grid-column:auto}
  .gallery .span2 img{aspect-ratio:4/5}
}

/* ---------- Very narrow phones (iPhone SE and similar) ---------- */
@media (max-width:400px){
  :root{--gut:16px}
  .brand{font-size:15px;letter-spacing:.3em}
  .brand small{font-size:7px;letter-spacing:.22em;margin-top:2px}
  .header__end{gap:12px}
  .lang{padding:2px}
  .lang button{padding:5px 7px;font-size:9.5px;letter-spacing:.1em}
  .btn{padding:14px 22px;letter-spacing:.18em}
  .announce{font-size:9px;letter-spacing:.1em}
  .card__body{padding-inline:18px}
  .card .btn{margin-inline:18px}
  .quote,.review{padding-inline:16px}
  .step{padding:28px 20px 32px}
}