/* Kulot & Kinang (fictional) · concept: "cherry lacquer" — nail-polish red used as structure, big glossy serif */
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-normal-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(fonts/InstrumentSerif-italic-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-peso.woff2) format("woff2");unicode-range:U+20B1}
@font-face{font-family:"DM Sans";font-weight:400 700;src:url(fonts/DMSans-normal-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"DM Sans";font-weight:400 700;src:url(fonts/DMSans-peso.woff2) format("woff2");unicode-range:U+20B1}
:root{--cherry:#9E1230;--cherry-d:#6E0B20;--blush:#FBEFEA;--rose:#F6DCD3;--ink:#2A0F16;--muted:#5A2A33;
--step--1:.8rem;--step-0:clamp(1rem,.96rem + .2vw,1.1rem);--step-2:clamp(1.4rem,1.2rem + .8vw,1.9rem);--step-4:clamp(2.4rem,1.6rem + 4vw,5rem);--step-6:clamp(4.2rem,1rem + 15vw,13rem);
--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom));background:var(--blush);color:var(--ink);font:400 var(--step-0)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{max-width:65ch;text-wrap:pretty}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.02em;text-wrap:balance}
em,i{font-style:italic}
h2{font-size:var(--step-4)} h2 em{color:var(--cherry)}
.label{font:600 var(--step--1)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.12em}
:focus-visible{outline:3px solid var(--cherry);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:9;background:#fff;padding:8px 12px}
.ribbon{background:var(--ink);color:#F6DCD3;text-align:center;font-size:.78rem;padding:7px 12px;max-width:none}
.ribbon a{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--cherry);color:#fff;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
.btn:hover{background:var(--cherry-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:0 18px;font-size:.92rem}
.btn-dark{background:var(--ink)}.btn-light{background:var(--blush);color:var(--cherry-d)}.btn-light:hover{background:#fff}
.btn-ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}.btn-ghost-light:hover{background:#fff;color:var(--cherry-d)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
/* nav */
.nav{display:flex;align-items:center;gap:16px;padding:12px 20px;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 1.6rem/1 var(--serif);color:var(--cherry)}
.brand i{color:var(--ink)} .logo{width:30px;height:30px}
.nav nav{display:none;margin-left:auto;gap:28px}.nav nav a{text-decoration:none;font-weight:500;padding:10px 0}
.nav nav a:hover{text-decoration:underline;text-underline-offset:6px}
.nav .btn-sm{margin-left:auto}
/* hero: mobile = magazine cover */
.hero{position:relative;display:grid}
.hero-pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tag{position:absolute;top:12px;right:12px;background:rgba(42,15,22,.82);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:999px}
.hero-copy{padding:20px 20px 40px;background:var(--blush)}
.hero h1{font-size:var(--step-6);color:var(--cherry);margin:10px 0 16px;margin-top:-.62em;position:relative}
.hero h1 em{color:var(--ink)}
.hero-copy .label{color:var(--muted);position:relative;top:-.4em}
.lede{font-size:1.08rem;margin-bottom:22px}
.fine{margin-top:14px;font-size:.88rem;color:var(--muted)}
@media(max-width:899px){.hero-copy{padding-top:0}.hero-copy .label{position:static;margin:14px 0 0}.hero h1{margin-top:6px}}
/* marquee */
.marquee{background:var(--cherry);color:var(--blush);overflow:hidden;padding:20px 0;font-family:var(--serif);font-style:italic;font-size:clamp(2rem,1rem + 3vw,3.6rem);line-height:1}
.track{display:flex;gap:48px;width:max-content;animation:mq 30s linear infinite}
.track span::after{content:"✦";font-style:normal;font-size:.5em;margin-left:48px;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}
/* menu */
.menu{padding:72px 20px 112px;max-width:1200px;margin:auto}
.menu-head{margin-bottom:48px}.menu-head .label{color:var(--cherry)}.menu-head h2{margin:10px 0 16px}
.menu-cols{display:grid;gap:56px}
.menu h3{display:flex;align-items:center;gap:12px;font-size:var(--step-2);padding-bottom:14px;border-bottom:2px solid var(--ink)}
.menu h3 svg{width:30px;height:30px;fill:none;stroke:var(--cherry);stroke-width:2;stroke-linecap:round}
dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid #E9C6BB}
dt{font-weight:600}dt small{display:block;font-weight:400;color:var(--muted);font-size:.9rem}
dd{font:400 1.7rem/1 var(--serif);color:var(--cherry-d);white-space:nowrap}
/* looks */
.looks{background:var(--rose);padding:112px 20px 72px;border-radius:40px 40px 0 0}
.looks-head{max-width:1200px;margin:0 auto 40px}.looks-head .label{color:var(--cherry-d)}.looks-head h2{margin-top:10px}
.note{font-size:.85rem;color:var(--muted);margin-top:10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1200px;margin:auto}
.grid figure{overflow:hidden;border-radius:18px}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.grid figure:hover img{transform:scale(1.05)}
.g1{grid-column:1/-1}.g2{grid-row:span 2}
/* book */
.book{background:var(--cherry);color:var(--blush);padding:112px 20px 160px;margin-top:-1px}
.book h2{color:#fff;max-width:1200px;margin:0 auto 56px}.book h2 em{color:var(--rose)}
.book ol{list-style:none;padding:0;display:grid;gap:40px;max-width:1200px;margin:auto;counter-reset:s}
.book li{border-top:1px solid rgba(251,239,234,.5);padding-top:20px}
.book b{font:400 4.5rem/1 var(--serif);color:var(--rose)}
.book h3{font-size:var(--step-2);margin:12px 0 8px;color:#fff}
/* visit */
.visit{display:grid;gap:40px;padding:72px 20px 112px;max-width:1200px;margin:-64px auto 0;background:var(--blush);border-radius:40px 40px 0 0;position:relative}
.visit .label{color:var(--cherry)}.visit h2{margin:10px 0 20px}
.addr{font:400 1.6rem/1.25 var(--serif);margin-bottom:12px}
.today{display:inline-block;margin:20px 0 12px;background:var(--ink);color:#fff;padding:6px 14px;border-radius:999px;font-weight:600;font-size:.9rem}
.hours{list-style:none;padding:0;max-width:360px}.hours li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #E9C6BB}
.map{border-radius:18px;overflow:hidden;align-self:start}.map svg{display:block;width:100%;height:auto}
.map figcaption{font-size:.8rem;color:var(--muted);padding:8px 2px}
.sample-contact{background:#fff;margin:0 20px 72px;padding:24px;border-radius:18px;display:grid;gap:16px;justify-items:start;max-width:1160px}
/* footer sign-off */
.foot{background:var(--cherry-d);color:var(--blush);padding:112px 20px 120px;text-align:left}
.foot .label{color:var(--rose)}
.sign{font-family:var(--serif);font-size:clamp(4rem,1rem + 14vw,14rem);line-height:.9;color:#fff;margin:16px 0 32px;letter-spacing:-.03em;max-width:none}
.sign i{color:var(--rose)}
.credit{margin-top:48px;font-size:.85rem;color:#F6DCD3}
/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(251,239,234,.96);border-top:1px solid #E9C6BB;z-index:20}
.dock a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;font-weight:700;text-decoration:none}
.dock svg{width:20px;height:20px;fill:currentColor}
.d-msg{background:var(--cherry);color:#fff}.d-call{box-shadow:inset 0 0 0 2px var(--ink)}
/* reveals: only with JS */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
.js .grid .rv{clip-path:inset(12% 0 0 0);transition:clip-path .6s ease,opacity .6s,transform .6s}
.js .grid .rv.in{clip-path:inset(0)}
@supports (animation-timeline:scroll()){.track{animation:mq linear both;animation-timeline:scroll(root);animation-range:0 100%}}
@media(min-width:900px){
 .nav{padding:18px 40px}.nav nav{display:flex}.nav .btn-sm{margin-left:24px}
 .hero{grid-template-columns:1fr 38%;height:clamp(640px,calc(100vh - 110px),820px);align-items:end}
 .hero-pic{position:relative}.hero-pic img{position:absolute;inset:0;width:100%}
 .hero-pic{grid-column:2;grid-row:1;height:100%}.hero-pic img{height:100%;aspect-ratio:auto;border-radius:0 0 0 220px}
 .tag{right:24px;top:24px}
 .hero-copy{grid-column:1/-1;grid-row:1;background:none;padding:0 40px 56px;z-index:2;pointer-events:none}
 .hero-copy>*{pointer-events:auto}
 .hero h1{margin:8px 0 24px;font-size:clamp(6rem,11.5vw,13rem);max-width:58vw}
 .hero-copy .label{top:0}
 .lede{max-width:34ch;font-size:1.2rem}
 .menu{padding:160px 40px}.menu-head{display:grid;grid-template-columns:1.3fr 1fr;column-gap:64px;align-items:end}.menu-head .label{grid-column:1/-1}.menu-head h2{margin:0}.menu-head p:not(.label){padding-bottom:10px}
 .menu-cols{grid-template-columns:1fr 1fr;gap:80px}.menu-cols>div:nth-child(2){margin-top:96px}
 .looks{padding:160px 40px 112px;border-radius:80px 80px 0 0}
 .looks-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
 .grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:16px}
 .g1{grid-column:1/8;grid-row:1/3}.g2{grid-column:8/11;grid-row:1/3;margin-top:80px}.g3{grid-column:11/13;grid-row:2/3}.g4{grid-column:2/7;grid-row:3/4}
 .looks .grid::after{content:"Bright, glossy, you.";grid-column:8/13;grid-row:3/4;align-self:center;font:italic 400 clamp(2.4rem,4vw,4.2rem)/1 var(--serif);color:var(--cherry-d)}
 .book{padding:160px 40px 220px}.book ol{grid-template-columns:repeat(3,1fr)}
 .visit{grid-template-columns:1fr 1.1fr;padding:112px 40px;margin-top:-96px;border-radius:80px 80px 0 0}
 .sample-contact{margin:0 auto 112px;grid-template-columns:1fr auto;align-items:center}
 .foot{padding:160px 40px}
 .dock{display:none} body{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none;clip-path:none}}
.rtag{font-weight:700;letter-spacing:.06em}
.stag{margin-left:.35em;font-size:.72em;font-weight:500;opacity:.85}
.sp{display:inline-block;margin:8px 0 0;padding:4px 12px;border:1.5px dashed currentColor;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.ticker *,.marquee *{animation:none!important;transform:none!important}}
@media(max-width:400px){.ribbon{font-size:.7rem;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav .btn-sm{white-space:nowrap;padding-inline:14px}}
@media(max-width:899px){.hero-pic img{aspect-ratio:auto;height:34svh;min-height:220px;object-position:50% 45%}.hero-copy{display:flex;flex-direction:column}.hero-copy .lede{order:5;margin-top:16px}.hero h1{margin-bottom:12px}}
.label .sp{margin:0 0 0 10px;padding:2px 10px;font-size:.92em;vertical-align:middle}