/*
  Marisol Vega Makeup
  Harmony: monochromatic with one accent. One warm skin hue (about 20deg) in five lightness steps, sampled from the
  bronze skin, cocoa backdrops and nude lips of the photo shoot, plus a single emerald accent (about 160deg) taken
  from the emerald foil eye look. Makeup's usual blush pink and rose gold are left out on purpose.
  60%  --nude      #F2DDD2  page background
  30%  --sand      #E6C3B2  surfaces (looks, form)
       --espresso  #2B1812  text, calendar section, footer
       --cocoa     #6E4436  secondary text, dividers
       --tan       #C99A85  decorative lines on dark
  10%  --emerald   #0E6B4F  buttons, open dates, focus
       --mint      #8BD3B5  emerald for use on dark surfaces
  Contrast (WCAG): espresso on nude 12.92, espresso on sand 10.32, cocoa on nude 6.31, cocoa on sand 5.04,
  white on emerald 6.49 (buttons), emerald on nude 4.96, emerald on sand 3.96 (large text and marks only),
  nude on espresso 12.92, sand on espresso 10.32, tan on espresso 6.80, mint on espresso 9.73.
*/
:root {
  --nude: #F2DDD2;
  --sand: #E6C3B2;
  --tan: #C99A85;
  --cocoa: #6E4436;
  --espresso: #2B1812;
  --emerald: #0E6B4F;
  --mint: #8BD3B5;
  --serif: "Gloock", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nude); color: var(--espresso); font: 400 1.0625rem/1.65 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--espresso); color: var(--nude); padding: .6rem 1rem; z-index: 60; }
.skip:focus { top: 1rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.7rem; font: 600 1rem/1 var(--sans); text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--em { background: var(--emerald); color: #fff; }
.btn--em:hover { background: #0A5840; }
.btn--dark { background: var(--espresso); color: var(--nude); }
.btn--dark:hover { background: var(--cocoa); }
.link { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--espresso); padding-bottom: 2px; }
.link:hover { color: var(--emerald); border-color: var(--emerald); }

/* Bar */
.bar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1rem, 4vw, 3.5rem); background: var(--nude); transition: box-shadow .3s ease, padding .3s ease; }
.bar.is-solid { padding-block: .7rem; box-shadow: 0 1px 0 rgba(43, 24, 18, .12); }
.logo { font: 400 1.7rem/1 var(--serif); text-decoration: none; display: flex; align-items: baseline; gap: .6rem; }
.logo span { font: 500 .85rem/1 var(--sans); color: var(--cocoa); }
.nav { display: flex; gap: clamp(1.2rem, 2.6vw, 2.4rem); align-items: center; font-weight: 500; }
.nav a { text-decoration: none; position: relative; padding: .3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover::after { transform: scaleX(1); }
.nav .nav__book { background: var(--espresso); color: var(--nude); padding: .65rem 1.3rem; }
.nav .nav__book::after { display: none; }
.toggle { display: none; min-height: 44px; padding: 0 1rem; border: 1px solid var(--espresso); background: transparent; font: 600 .95rem/1 var(--sans); color: var(--espresso); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 46%) 1fr; min-height: max(calc(100vh - 76px), 640px); }
.hero__photo { margin: 0; position: relative; overflow: hidden; background: var(--cocoa); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: settle 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes settle { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
.hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(1.2rem, 5vw, 5.5rem) 3.5rem; }
.hero__place { color: var(--cocoa); font-weight: 500; font-size: 1.05rem; margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(3rem, 5.8vw, 5.9rem); max-width: 11ch; }
.hero__lede { margin-top: 1.6rem; max-width: 40ch; font-size: 1.15rem; }
.hero__cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.swatches { margin-top: 3.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.swatches ul { list-style: none; margin: 0; padding: 0; display: flex; }
.swatches li { width: 34px; height: 64px; background: var(--c); border-radius: 17px; margin-right: -6px; box-shadow: 0 0 0 3px var(--nude); animation: swatch .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.swatches li:nth-child(1) { animation-delay: .5s; } .swatches li:nth-child(2) { animation-delay: .57s; } .swatches li:nth-child(3) { animation-delay: .64s; } .swatches li:nth-child(4) { animation-delay: .71s; }
.swatches li:nth-child(5) { animation-delay: .78s; } .swatches li:nth-child(6) { animation-delay: .85s; } .swatches li:nth-child(7) { animation-delay: .92s; } .swatches li:nth-child(8) { animation-delay: .99s; }
@keyframes swatch { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.swatches p { font-size: .95rem; color: var(--cocoa); max-width: 22ch; line-height: 1.4; }

/* Looks */
.looks { background: var(--sand); padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); }
.looks__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; max-width: 1340px; margin-inline: auto; }
.looks h2 { font-size: clamp(3rem, 7vw, 6.5rem); }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--cocoa); }
.tabs button { background: none; border: 0; font: 500 1.05rem/1 var(--sans); color: var(--cocoa); padding: .9rem 1.1rem; min-height: 48px; cursor: pointer; position: relative; }
.tabs button[aria-selected="true"] { color: var(--espresso); font-weight: 700; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--emerald); }
.panel { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: clamp(1rem, 2.5vw, 2rem); max-width: 1340px; margin: 0 auto; }
.panel[hidden] { display: none; }
.panel:not([hidden]) .shot { animation: rise .5s ease both; }
.panel:not([hidden]) .shot:nth-child(2) { animation-delay: .08s; } .panel:not([hidden]) .shot:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.shot { margin: 0; display: grid; grid-template-columns: 1fr; }
.shot img { width: 100%; object-fit: cover; aspect-ratio: 8 / 5; }
.shot--big { grid-row: span 2; }
.shot--big img { aspect-ratio: auto; height: 100%; min-height: 0; flex: 1; }
.shot--big { grid-template-rows: 1fr auto; }
.shot figcaption { padding-top: .8rem; font-size: .95rem; color: var(--cocoa); }
.shot figcaption b { display: block; font: 400 1.35rem/1.2 var(--serif); color: var(--espresso); }

/* Services */
.services { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); max-width: 1440px; margin: 0 auto; }
.services h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); max-width: 12ch; margin-bottom: 3rem; }
.services__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.menu h3 { font-size: 1.9rem; padding-bottom: 1rem; border-bottom: 2px solid var(--espresso); }
.menu dl { margin: 0 0 2rem; }
.menu dl div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid rgba(110, 68, 54, .35); }
.menu dt { font-weight: 600; font-size: 1.12rem; }
.menu dt small { display: block; font-weight: 400; font-size: .95rem; color: var(--cocoa); }
.menu dd { margin: 0; font: 400 1.6rem/1 var(--serif); white-space: nowrap; }
.menu__note { color: var(--cocoa); max-width: 44ch; }

/* Dates: signature calendar */
.dates { background: var(--espresso); color: var(--nude); padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dates h2 { font-size: clamp(2.8rem, 5.5vw, 5rem); }
.dates__intro > p { margin-top: 1.2rem; color: var(--sand); max-width: 38ch; }
.legend { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .7rem; }
.legend li { display: flex; align-items: center; gap: .8rem; font-size: .98rem; }
.legend i { width: 22px; height: 22px; display: inline-block; border-radius: 50%; }
.k-open { background: var(--mint); }
.k-busy { border: 2px solid var(--tan); }
.k-booked { background: repeating-linear-gradient(135deg, var(--cocoa) 0 3px, transparent 3px 7px); border: 1px solid var(--cocoa); }
.answer { border-top: 1px solid rgba(201, 154, 133, .45); padding-top: 1.5rem; }
.answer__date { font: 400 2rem/1.1 var(--serif); }
.answer__text { color: var(--sand); margin-top: .6rem; max-width: 38ch; }
.answer__go { margin-top: 1.4rem; }
.answer__go[hidden] { display: none; }
.cal { background: var(--nude); color: var(--espresso); padding: clamp(1rem, 2.5vw, 2rem); }
.cal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.cal__month { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--serif); }
.cal__nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--espresso); background: transparent; color: var(--espresso); cursor: pointer; display: grid; place-items: center; }
.cal__nav svg { width: 20px; height: 20px; }
.cal__nav:hover:not(:disabled) { background: var(--espresso); color: var(--nude); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__week span { text-align: center; font-size: .82rem; font-weight: 600; color: var(--cocoa); padding-bottom: .5rem; }
.day-cell { aspect-ratio: 1 / .86; border: 0; background: var(--sand); color: var(--espresso); font: 500 1.05rem/1 var(--sans); cursor: pointer; position: relative; display: flex; align-items: flex-start; justify-content: flex-start; padding: .55rem; transition: transform .15s ease, background-color .15s ease; }
.day-cell::after { content: ""; position: absolute; right: .55rem; bottom: .55rem; width: 12px; height: 12px; border-radius: 50%; }
.day-cell.open::after { background: var(--emerald); }
.day-cell.busy { background: transparent; box-shadow: inset 0 0 0 2px var(--tan); }
.day-cell.busy::after { border: 2px solid var(--cocoa); width: 10px; height: 10px; }
.day-cell.booked { background: repeating-linear-gradient(135deg, rgba(110, 68, 54, .18) 0 3px, transparent 3px 8px); color: var(--cocoa); text-decoration: line-through; }
.day-cell.past, .day-cell.pad { background: transparent; color: rgba(110, 68, 54, .45); cursor: default; }
.day-cell.pad { visibility: hidden; }
.day-cell:hover:not(.past):not(.pad) { transform: translateY(-2px); }
.day-cell[aria-selected="true"] { background: var(--emerald); color: #fff; box-shadow: none; text-decoration: none; }
.day-cell[aria-selected="true"]::after { background: #fff; border: 0; }
.day-cell.today { font-weight: 800; }

/* Steps */
.day { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); max-width: 1440px; margin: 0 auto; }
.day h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 16ch; margin-bottom: 3rem; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); }
.steps li { counter-increment: s; border-top: 2px solid var(--espresso); padding-top: 1.2rem; }
.steps li::before { content: counter(s); display: block; font: 400 3.6rem/1 var(--serif); color: var(--emerald); margin-bottom: 1rem; }
.steps h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.steps p { color: var(--cocoa); }

/* Kind words */
.kind { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: 0 clamp(1rem, 4vw, 3.5rem) clamp(4rem, 8vw, 7rem); max-width: 1440px; margin: 0 auto; }
.kind__photo { margin: 0; }
.kind__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.kind__quotes { display: grid; gap: 3rem; }
.kind blockquote { margin: 0; }
.kind blockquote p { font: 400 clamp(1.7rem, 3vw, 2.7rem)/1.15 var(--serif); }
.kind blockquote footer { margin-top: 1rem; color: var(--cocoa); font-weight: 500; }

/* Booking */
.book { background: var(--sand); padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
.book h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.book__side > p { margin-top: 1.2rem; max-width: 38ch; }
.book__contact a { font-weight: 600; }
.form { display: grid; gap: 1.2rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.f { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
.f input, .f select, .f textarea { font: 400 1rem/1.4 var(--sans); min-height: 52px; padding: .75rem .9rem; border: 0; border-bottom: 2px solid var(--cocoa); background: var(--nude); color: var(--espresso); border-radius: 0; width: 100%; }
.f textarea { resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: #8a6557; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--emerald); box-shadow: 0 2px 0 var(--emerald); }
.f input.is-bad { border-bottom-color: #A3261B; }
.f input.is-flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 60% { background: #fff; } 100% { background: var(--nude); } }
.send { justify-self: start; }
.status { font-weight: 600; min-height: 1.5em; }
.status.is-ok { color: var(--emerald); }

/* Footer */
.foot { background: var(--espresso); color: var(--sand); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; align-items: end; padding: 3rem clamp(1rem, 4vw, 3.5rem); }
.foot__logo { font: 400 clamp(2.2rem, 4vw, 3.4rem)/1 var(--serif); color: var(--nude); }
.foot a { text-decoration: none; margin-right: 1rem; }
.foot a:hover { color: var(--mint); }
.foot__credit { font-size: .88rem; }

@media (max-width: 960px) {
  .toggle { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--nude); flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 1rem 1.2rem; box-shadow: 0 12px 20px -14px rgba(43, 24, 18, .5); display: none; }
  .bar.is-open { background: var(--nude); }
  .bar.is-open .nav { display: flex; }
  .nav a { padding: 1rem .2rem; border-bottom: 1px solid rgba(110, 68, 54, .25); font-size: 1.1rem; }
  .nav .nav__book { margin-top: .8rem; text-align: center; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__photo { height: 72vh; min-height: 460px; }
  .hero__copy { padding: 2.5rem clamp(1.2rem, 5vw, 3rem) 3.5rem; }
  .services__cols, .dates, .kind, .book { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 3.4rem); }
  .hero__photo { height: 50vh; min-height: 340px; }
  .hero__copy { padding-top: 1.8rem; }
  .panel { grid-template-columns: 1fr; }
  .shot--big { grid-row: auto; }
  .shot--big img { aspect-ratio: 4 / 5; height: auto; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding-inline: .4rem; }
  .pair { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cal { padding: .8rem; margin-inline: -.4rem; }
  .cal__week, .cal__grid { gap: 4px; }
  .day-cell { font-size: .92rem; padding: .35rem; aspect-ratio: 1 / 1; }
  .day-cell::after { right: .3rem; bottom: .3rem; width: 8px; height: 8px; }
  .day-cell.busy::after { width: 7px; height: 7px; }
  .kind__photo { max-width: 70%; }
  .foot { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}