html, body { margin: 0; min-height: 100%; }
body { background: #efefef; }
.lp { --gold: #a97c2d; --gold-2: #d4a84b; --ink: #1d1914; --soft: #efefef; color: var(--ink); background: #efefef; font-family: inherit; overflow-x: hidden; }
.lp * { box-sizing: border-box; }
.lp-top { display: flex; justify-content: center; padding: 36px 20px 28px; background: #efefef; }
.lp-logo { width: min(380px, 84vw); height: auto; display: block; }
.lp-intro { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 48px 22px 56px; background: var(--soft); }
.lp-hero { display: grid; gap: 28px; padding: 12px 22px 40px; background: #efefef; }
.lp-hero-text { text-align: center; display: grid; justify-items: center; gap: 14px; }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: .14em; color: var(--gold); }
.lp h1 { margin: 0; font-size: clamp(44px, 14vw, 84px); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; background: linear-gradient(100deg, #8d6420, #d9b25a 45%, #9a6f23); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 0; font-size: 18px; line-height: 1.5; max-width: 26ch; color: #3a332a; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--ink); color: #f5e3b3; text-decoration: none; font-size: 17px; font-weight: 600; box-shadow: 0 10px 24px rgba(29,25,20,.22); margin-top: 6px; }
.cta:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.lp-photo { margin: 0; position: relative; justify-self: center; width: min(100%, 420px); }
.lp-photo::before { content: ''; position: absolute; inset: 14px -10px -14px 10px; border: 1.5px solid var(--gold-2); border-radius: 26px; z-index: 0; }
.lp-photo img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: 26px; box-shadow: 0 24px 50px rgba(29,25,20,.22); }
.lp-band { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 26px 16px; background: var(--ink); color: #f0d9a0; font-size: 15px; letter-spacing: .12em; flex-wrap: wrap; }
.lp-band i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); }
.lp-contact { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 52px 22px 44px; background: var(--soft); }
.lp-contact h2 { margin: 0; font-size: 32px; font-weight: 700; }
.lp-contact p { margin: 0; color: #4a4237; max-width: 30ch; line-height: 1.5; }
.tel { color: var(--ink); text-decoration: none; font-size: 18px; letter-spacing: .06em; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--gold-2); }
.lp-foot { text-align: center; padding: 18px; font-size: 12px; letter-spacing: .2em; color: #6b6153; background: var(--soft); border-top: 1px solid #e0e0e0; }
@media (min-width: 820px) {
  .lp-hero { grid-template-columns: 1fr 1fr; align-items: center; max-width: 1040px; margin: 0 auto; padding: 24px 40px 64px; gap: 64px; }
  .lp-hero-text { text-align: right; justify-items: start; }
  .lp-top { padding-top: 40px; }
  .lp-band { font-size: 17px; gap: 32px; }
}
.lp-gallery { text-align: center; padding: 56px 16px 24px; background: var(--soft); display: grid; justify-items: center; gap: 10px; }
.lp-gallery h2 { margin: 0 0 18px; font-size: 32px; font-weight: 700; }
.pairs { display: grid; gap: 26px; width: min(100%, 720px); }
.pair { position: relative; padding: 16px 14px 14px; border-radius: 22px; background: linear-gradient(160deg, #26201a, #14110d); box-shadow: 0 18px 40px rgba(29,25,20,.22); outline: 1px solid rgba(212,168,75,.55); outline-offset: -7px; }
.pair-no { display: block; text-align: center; margin: 2px 0 12px; color: var(--gold-2); font-size: 12px; letter-spacing: .32em; }
.pair-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair figure { margin: 0; }
.pair img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 12px; }
.pair figcaption { margin-top: 10px; color: #f5e3b3; font-size: 13px; letter-spacing: .2em; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pair figcaption::before, .pair figcaption::after { content: ''; width: 14px; height: 1px; background: var(--gold-2); opacity: .8; }
.pair .after figcaption { color: #1d1914; }
.pair .after figcaption span { background: linear-gradient(100deg, #d9b25a, #f1d48a); padding: 3px 14px; border-radius: 999px; letter-spacing: .12em; }
.pair .after figcaption::before, .pair .after figcaption::after { display: none; }
.pair-arrow { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #f1d48a; color: #1d1914; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.35); z-index: 2; }
.lp-contact { padding-top: 40px; }
@media (min-width: 820px) { .pairs { gap: 40px; } .pair { padding: 22px 22px 18px; } .pair-photos { gap: 16px; } }
/* fonts */
body, .lp { font-family: 'Heebo', system-ui, sans-serif; font-weight: 400; }
.lp h1, .lp h2 { font-family: 'Frank Ruhl Libre', 'Heebo', serif; font-weight: 500; }
.lp h1 { font-size: clamp(48px, 15vw, 88px); line-height: 1.05; letter-spacing: 0; }
.lp-gallery h2, .lp-contact h2 { font-size: 36px; }
.eyebrow { font-weight: 500; letter-spacing: .18em; font-size: 12.5px; }
.lead { font-weight: 300; font-size: 19px; }
.cta { font-family: 'Heebo', sans-serif; font-weight: 500; }
.lp-band { font-family: 'Frank Ruhl Libre', serif; letter-spacing: .1em; }
/* gallery: light, clean */
.pairs { gap: 34px; }
.pair { background: #fff; outline: none; border-radius: 20px; padding: 12px; box-shadow: 0 10px 30px rgba(60,45,20,.08); }
.pair-no { color: #b69550; font-family: 'Frank Ruhl Libre', serif; letter-spacing: .3em; margin: 4px 0 10px; }
.pair-photos { gap: 8px; }
.pair img { border-radius: 12px; }
.pair figcaption { color: #7a6a4c; font-size: 13px; letter-spacing: .14em; margin-top: 10px; }
.pair figcaption::before, .pair figcaption::after { background: #c9b078; }
.pair .after figcaption { color: #6b5426; }
.pair .after figcaption span { background: #f3e8cc; padding: 3px 16px; }
.pair-arrow { background: #fff; color: #a97c2d; box-shadow: 0 4px 14px rgba(60,45,20,.18); }
/* intro overlay */
.intro { position: fixed; inset: 0; z-index: 99; background: #efefef; display: grid; place-items: center; transition: opacity .6s ease; cursor: pointer; }
.intro img { width: min(460px, 88vw); height: auto; }
.intro.out { opacity: 0; pointer-events: none; }
.skip { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font: 500 14px 'Heebo', sans-serif; letter-spacing: .1em; color: #6b5426; background: transparent; border: 1px solid #c9b078; border-radius: 999px; padding: 10px 26px; min-height: 44px; cursor: pointer; }
body.lock { overflow: hidden; }
.intro { animation: introfb 0s 6s forwards; }
@keyframes introfb { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .intro { transition: none; } }

/* ivory palette, soft cards */
body,.lp,.lp-gallery,.lp-intro,.lp-top,.lp-contact,.lp-foot{background:#faf7f2!important}
.lp-foot{border-color:#e8e1d4}
.lp{--gold:#9a7b4f;--gold-2:#b89a6a}
.lp h1{background:none;color:#2b2622;-webkit-text-fill-color:#2b2622}
.eyebrow{color:#9a7b4f}
.lp-band{background:#faf7f2;color:#2b2622;border-top:1px solid #e0d5c2;border-bottom:1px solid #e0d5c2}.lp-band i{background:#b89a6a}
.cta{background:#2b2622;color:#faf7f2}
.lp-logo{filter:brightness(1.07);mix-blend-mode:multiply}
.pair{background:#fff;border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(80,62,30,.09);border:1px solid #eadfc9}
.pair-no{font-size:13px;letter-spacing:.3em;color:#9a7b4f;margin:2px 0 10px}
.pair-photos{gap:8px}.pair img{border-radius:12px;aspect-ratio:3/4}
.pair figcaption{color:#2b2622;font-size:12px;letter-spacing:.25em;margin-top:9px}
.pair figcaption::before,.pair figcaption::after{display:none}
.pair .after figcaption span{background:none;padding:0;color:#9a7b4f;font-weight:600}
.pair-arrow{background:#faf7f2;color:#9a7b4f;border:1px solid #d8c8a8;box-shadow:none}
.intro{background:#faf7f2}.intro img{filter:brightness(1.07);mix-blend-mode:multiply}.skip{color:#2b2622;border-color:#b89a6a}

/* Chaya portrait, a quiet personal detail beside the contact section */
.artist{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 auto 36px;padding:0 0 30px;border-bottom:1px solid #e0d5c2;max-width:340px;text-align:right}
.artist-portrait{width:132px;height:132px;padding:7px;flex-shrink:0;border:1px solid #b89a6a;border-radius:50%;background:#faf7f2;box-shadow:0 7px 22px rgba(80,62,30,.09)}
.artist-portrait img{width:116px;height:116px;object-fit:cover;object-position:center 40%;border-radius:50%;display:block;box-shadow:0 0 0 1px #e0d5c2}
.artist-name p{font-family:'Frank Ruhl Libre',serif;font-size:29px;line-height:1.3;margin:0 0 6px;color:#2b2622}
.artist-name span{font-family:'Heebo',sans-serif;font-size:13px;color:#9a7b4f;letter-spacing:.08em}

/* Appointment requests, coordinated personally by Chaya */
.request-cta{border:1px solid #b89a6a;background:#faf7f2;color:#2b2622;margin-top:6px}
.request-note{font:400 13px/1.7 Heebo,sans-serif;color:#6b6153;max-width:36ch;margin:0 auto}
.lp-intro .request-note{margin-top:4px}

/* Inline client request form, without leaving the landing page. */
html{scroll-behavior:smooth}
.lp-request{width:min(100%,760px);margin:0 auto;padding:16px 12px 32px;scroll-margin-top:20px}
.lp-request iframe{display:block;width:100%;border:0;border-radius:16px;background:#fff}
@media (max-width:480px){.lp-request{padding:8px 0 24px}.lp-request iframe{border-radius:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Refined slogan, preserving its exact words. */
.lp-intro h1{font-family:"Frank Ruhl Libre",serif;font-size:clamp(49px,13.5vw,86px);line-height:1.14;font-weight:500;letter-spacing:-.025em;margin:6px 0 14px;text-wrap:balance}
.slogan-first,.slogan-second{display:block}
.lp-intro h1 .slogan-first{color:#2b2622;-webkit-text-fill-color:#2b2622}
.lp-intro h1 .slogan-second{color:#947044;-webkit-text-fill-color:#947044;font-weight:400}
.lp-intro h1:after{content:"";display:block;width:54px;height:1px;background:#b89a6a;margin:23px auto 0}
.lp-request iframe{background:#faf7f2;border-radius:0}

/* Approved photo-led hero. */
.lp-top{padding:15px 20px 5px}.lp-logo{width:180px}.lp-intro{padding:16px 0 36px;gap:17px}.lp-intro>.eyebrow{font-size:10px;margin-bottom:1px}
.editorial-hero{width:100%;max-width:700px;height:460px;position:relative;overflow:hidden;margin:0 0 6px;background:#e9e3dc}
.hero-work{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,12,0) 40%,rgba(20,15,12,.12) 55%,rgba(20,15,12,.75) 100%)}
.lp-intro .editorial-hero h1{position:absolute;inset:auto 22px 24px;margin:0;padding:0;font-family:"Frank Ruhl Libre",serif;line-height:.95;letter-spacing:-.04em;font-size:64px;text-align:right}
.lp-intro h1 .slogan-first{font-size:.72em;font-weight:400;line-height:1.25;color:#fff9ef;-webkit-text-fill-color:#fff9ef}
.lp-intro h1 .slogan-second{font-weight:500;line-height:1.12;margin-top:2px;color:#ead09a;-webkit-text-fill-color:#ead09a;font-size:1em;text-align:left}
.lp-intro h1:after{display:none}
.lead{font-size:16px;max-width:30ch}.cta{min-height:48px;font-size:16px}.lp-intro .request-note{font-size:12px;padding:0 20px}

@media(max-width:350px){.lp-intro .editorial-hero h1{font-size:54px;inset:auto 18px 24px}.editorial-hero{height:430px}}

/* Approved final photo and page integration. */
/* Unpublished soft ivory integration. */
.editorial-hero{background:#faf7f2;height:490px}
.hero-work{height:440px;object-position:50% 24%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 62%,transparent 100%)}
.hero-shade{background:linear-gradient(90deg,rgba(250,247,242,.22),transparent 22%,transparent 78%,rgba(250,247,242,.22))}
.lp-intro .editorial-hero h1{inset:auto 22px 5px;font-size:62px}
.lp-intro h1 .slogan-first{color:#3e3329;-webkit-text-fill-color:#3e3329;text-shadow:0 1px 18px #faf7f2}
.lp-intro h1 .slogan-second{color:#987240;-webkit-text-fill-color:#987240}

/* Unpublished finishing gesture: fine brush sweep, echoing the logo. */
.editorial-hero{height:516px}
.lp-intro .editorial-hero h1{bottom:36px}
.gold-flourish{position:absolute;width:214px;height:27px;bottom:1px;left:19px;opacity:.9}
.hero-work{height:440px}
.lp-intro{gap:15px}
/* Review: broad oval wash makes the portrait emerge from the page. */
.hero-work{-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 42%,#000 34%,rgba(0,0,0,.95) 46%,rgba(0,0,0,.58) 62%,transparent 83%);mask-image:radial-gradient(ellipse 75% 70% at 50% 42%,#000 34%,rgba(0,0,0,.95) 46%,rgba(0,0,0,.58) 62%,transparent 83%)}
.hero-shade{background:linear-gradient(to bottom,#faf7f2 0%,rgba(250,247,242,.7) 3%,transparent 19%,transparent 70%,rgba(250,247,242,.4) 88%,#faf7f2 100%)}

@media(max-width:350px){.lp-intro .editorial-hero h1{font-size:51px;inset:auto 18px 36px}}