/* Hallmark · macrostructure: Nail Studio Portfolio · tone: soft minimal, feminine, exact · anchor hue: dusty rose */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper: #FFF8F3;
  --paper-2: #F1E3D9;
  --ink: #2E2926;
  --muted: #8B7C74;
  --rose: #C9938E;
  --rose-dark: #8D5E5B;
  --line: #DECBC1;
  --white: #FFFDFB;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}
html { scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-y: none; background: var(--paper); }
body { min-width:0; overflow-x:clip; overscroll-behavior-y:none; background: var(--paper); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px clamp(16px,5vw,78px); background:color-mix(in srgb,var(--paper) 92%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { font-family:var(--display); font-size:clamp(26px,4vw,44px); line-height:.9; color:var(--rose-dark); letter-spacing:-.03em; }
.nav { display:flex; gap:clamp(14px,3vw,32px); color:var(--muted); font-size:14px; font-weight:700; }
.nav a { transition:color .18s var(--ease); }
.nav a:hover { color:var(--rose-dark); }
.hero { min-height:calc(100svh - 68px); display:grid; grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr); gap:clamp(34px,6vw,88px); align-items:center; padding:clamp(54px,7vw,112px) clamp(16px,5vw,88px) clamp(58px,8vw,120px); }
.kicker { color:var(--rose-dark); font-size:13px; font-weight:800; line-height:1.35; }
h1,h2,h3 { font-family:var(--display); font-style:normal; font-weight:650; letter-spacing:-.025em; line-height:1; text-wrap:balance; overflow-wrap:anywhere; }
h1 { margin-top:18px; max-width:760px; font-size:clamp(46px,7vw,92px); }
.hero-copy > p:not(.kicker) { margin-top:24px; max-width:590px; color:var(--muted); font-size:clamp(16px,1.45vw,19px); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; border-radius:999px; font-size:14px; font-weight:800; transition:transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease); }
.btn:hover { transform:translateY(-2px); }
.primary { color:#fff; background:var(--rose-dark); }
.secondary { color:var(--ink); background:var(--white); border:1px solid var(--line); }
.secondary:hover { border-color:var(--rose); }
.nail-board { position:relative; min-height:570px; }
.nail-main,.nail-small { position:absolute; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); box-shadow:0 22px 70px rgba(46,41,38,.12); }
.nail-main { inset:0 10% 9% 4%; border-radius:36px; }
.nail-small { width:34%; aspect-ratio:4/5; border-radius:22px; }
.nail-small.a { top:4%; right:0; }
.nail-small.b { left:0; bottom:0; }
.nail-main img,.nail-small img { width:100%; height:100%; object-fit:cover; }
.services,.style-section,.contact { padding:clamp(58px,7vw,112px) clamp(16px,5vw,88px); }
.services { background:var(--paper-2); border-block:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:.32fr 1fr; gap:32px; align-items:start; }
.section-head h2,.style-section h2,.contact h2 { max-width:900px; font-size:clamp(38px,5.8vw,82px); }
.service-list { margin-top:52px; display:grid; border-top:1px solid var(--line); }
.service-list article { display:grid; grid-template-columns:minmax(150px,260px) minmax(0,1fr); gap:28px; padding:30px 0; border-bottom:1px solid var(--line); }
.service-list span { color:var(--rose-dark); font-family:var(--display); font-size:clamp(30px,4vw,58px); line-height:1; }
.service-list p { color:var(--muted); max-width:720px; }
.style-section { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(32px,6vw,88px); align-items:center; }
.style-section figure { aspect-ratio:4/5; overflow:hidden; border-radius:30px; border:1px solid var(--line); background:var(--paper-2); }
.style-section figure img { width:100%; height:100%; object-fit:cover; }
.style-section p:not(.kicker) { margin-top:24px; color:var(--muted); max-width:640px; font-size:17px; }
.contact { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:24px; background:var(--paper-2); }
.contact-card,.map-wrap { border:1px solid var(--line); border-radius:28px; background:var(--paper); }
.contact-card { padding:clamp(24px,4vw,48px); }
dl { margin-top:30px; display:grid; gap:22px; }
dt { font-weight:800; margin-bottom:5px; }
dd { color:var(--muted); }
dd a { color:var(--rose-dark); border-bottom:1px solid color-mix(in srgb,var(--rose) 45%,transparent); }
.map-wrap { overflow:hidden; min-height:430px; }
.map-wrap iframe { width:100%; height:100%; min-height:430px; border:0; filter:grayscale(.12) contrast(.97); }
.footer { padding:24px clamp(16px,5vw,88px); color:color-mix(in srgb,var(--paper) 78%,transparent); background:var(--ink); font-size:14px; }
.footer a { color:var(--paper); border-bottom:1px solid color-mix(in srgb,var(--paper) 35%,transparent); }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:120ms !important; animation-duration:120ms !important; } }
@media (max-width:980px) { .hero,.style-section,.contact { grid-template-columns:1fr; } .hero { min-height:auto; } .nail-board { min-height:500px; } .section-head { grid-template-columns:1fr; gap:14px; } }
@media (max-width:620px) { .topbar { position:static; flex-direction:column; align-items:flex-start; padding:16px; } .nav { width:100%; justify-content:space-between; font-size:13px; } .hero,.services,.style-section,.contact { padding-left:16px; padding-right:16px; } h1 { font-size:clamp(44px,13vw,66px); } .actions { flex-direction:column; align-items:stretch; } .btn { width:100%; } .nail-board { min-height:390px; } .nail-main { inset:0 0 16% 7%; border-radius:24px; } .nail-small { width:40%; } .service-list article { grid-template-columns:1fr; gap:8px; } .style-section figure { aspect-ratio:5/4; } .map-wrap,.map-wrap iframe { min-height:340px; } .footer { font-size:13px; } }