/* Design 2: the atelier. Quiet ivory and rosewood, one almond-shaped photo, the visitor picks a shade. */
:root{--bg:#F3EDE6;--ink:#221A18;--soft:#675953;--acc:#7E3445;--acc-ink:#fff;--card:#FBF8F4;--line:#E0D5CA;--fd:"Bellefair",Georgia,serif;--ft:"Rubik",system-ui,sans-serif;--r:2px;--ri:3px;--almond:50% 50% 50% 50% / 74% 74% 26% 26%}
body{font-weight:300}
section h2{font-weight:400;font-size:clamp(36px,5.4vw,64px)}

.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px clamp(16px,5vw,64px);background:rgba(243,237,230,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font:400 30px var(--fd);text-decoration:none;direction:ltr}
.logo span{font:400 13px var(--ft);color:var(--soft);letter-spacing:.14em;margin-inline-start:4px}
.top nav{display:flex;gap:4px}
.top nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;text-decoration:none;font-weight:400;letter-spacing:.04em}
.top nav a:hover{text-decoration:underline;text-underline-offset:6px}

.hero{--tone:#E9546B;position:relative;display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"copy fan" "sw fan";gap:28px 64px;align-items:center;min-height:calc(100svh - 66px);overflow:hidden;isolation:isolate}
.wm{position:absolute;inset-inline:0;bottom:-.24em;margin:0;text-align:center;font:400 clamp(160px,30vw,460px)/1 var(--fd);color:transparent;-webkit-text-stroke:1px #D9CCBF;letter-spacing:-.02em;direction:ltr;z-index:-1;transform:translateY(calc(var(--y,0) * -60px));user-select:none}
.copy{grid-area:copy;align-self:end}
.kick{font-size:14px;letter-spacing:.24em;color:var(--acc);margin-bottom:16px;font-weight:500}
.hero h1{font:400 clamp(50px,7.4vw,108px)/1.02 var(--fd);margin-bottom:22px}
.lead{font-size:19px;color:var(--soft);max-width:36ch;margin-bottom:30px}
.fan{grid-area:fan;position:relative;justify-self:center;width:min(360px,72vw);padding:18px}
.fan::before{content:"";position:absolute;inset:0;border:1px solid var(--acc);border-radius:var(--almond);opacity:.5;transform:translate(calc(var(--y,0) * -12px),calc(var(--y,0) * 30px))}
.nail{position:relative}
.nail img{width:100%;aspect-ratio:3/4.4;object-fit:cover;object-position:50% 65%;border-radius:var(--almond);box-shadow:0 40px 70px -40px rgba(60,20,25,.6)}
.nail figcaption{position:absolute;bottom:6%;inset-inline-start:-34px;background:var(--card);padding:8px 16px;font:400 18px var(--fd);border:1px solid var(--line);box-shadow:0 12px 28px -16px rgba(0,0,0,.35)}
.nail figcaption::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tone);margin-inline-end:8px;vertical-align:1px;transition:background .5s}
.nail.swap img{animation:fade .6s ease}
@keyframes fade{from{opacity:.25;filter:blur(6px)}to{opacity:1;filter:none}}
.swatches{grid-area:sw;align-self:start;display:flex;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:6px}
.swatches button{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px 0 4px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font:400 15px var(--ft);color:var(--soft)}
.swatches .dot{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 5px rgba(0,0,0,.2)}
.swatches [aria-checked=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}

.posts h2{text-align:center}
.igrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);align-items:start}
.igrow .igp{--ig-bg:var(--card);--ig-line:var(--line);--ig-r:3px;justify-self:center;box-shadow:0 30px 50px -36px rgba(60,20,25,.45)}
.igrow .igp:nth-child(2){margin-top:56px}
.igp .cap{font-weight:400}

.story{margin:0 auto}
.story h2{font-size:clamp(40px,6vw,76px)}
.pill{border-color:var(--acc);color:var(--acc);border-radius:2px;letter-spacing:.14em}
.facts li{border-radius:2px;background:transparent;font-weight:400}

.gal{background:var(--card);border-block:1px solid var(--line)}
.tabs{gap:28px;border-bottom:1px solid var(--line)}
.tabs [role=tab]{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 2px;font:400 24px var(--fd)}
.tabs [aria-selected=true]{background:none;color:var(--ink);border-bottom-color:var(--acc)}

.menu{grid-template-columns:repeat(2,1fr);column-gap:56px;max-width:none}
.menu h3{font:400 26px var(--fd)}
.menu b{font:400 26px var(--fd);color:var(--acc)}

.ask{--ask-bg:#2A1E1D;--orb1:#7E3445;--orb2:#D8BFA8;--orb3:#B48A5A;--her-bg:#F3EDE6;--her-ink:#221A18;--av-bg:#7E3445}
.ask-head h2{font:400 32px var(--fd)}

.close{border-top:1px solid var(--line)}
.close h2{font-size:clamp(44px,7vw,92px)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "fan" "sw";padding-top:28px;min-height:auto}
  .fan{width:min(290px,72vw)}
  .nail figcaption{inset-inline-start:-10px}
  .top nav a:not(:last-child){display:none}
  .igrow{grid-template-columns:1fr;gap:28px}
  .igrow .igp:nth-child(2){margin-top:0}
  .menu{grid-template-columns:1fr}
}