/* The Right Foot Studio — personal invitation page.
   Colours, grain and type lifted straight from index.html:
   the hero gradient, the #F4F4F5 and #BBE6CB section blocks,
   the highlighter artifact, the pill CTA. */

:root {
  --grad:     linear-gradient(158deg, #D7AAF1 0%, #FD9868 100%);
  --hero-ink: #1E1E1E;
  --ink:      #16130F;
  --ink-soft: #3A342C;
  --muted:    #7C7566;
  --signal:   #FF4A1C;
  --paper:    #F5F1E6;

  --grey:      #F4F4F5;
  --grey-ink:  #2A2A2D;
  --green:     #BBE6CB;

  --sans: "Inter", "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --wrap: 1120px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* A long, soft deceleration. The reveal travels further and for longer than
     a normal UI transition, so it needs a gentler curve than --ease. */
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grey);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

::selection { background: var(--hero-ink); color: #FD9868; }

:focus-visible {
  outline: 3px solid var(--hero-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--hero-ink);
  color: #FFF;
  padding: .6rem 1rem;
  border-radius: 8px;
  font: 600 .9rem/1 var(--sans);
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

.wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- shared section shell ---------- */

.block {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 8vw, 5.5rem) 0;
}

/* The two grain treatments from index.html: the soft overlay grain that
   sits on the gradient, and the harder speckle on the contact slide. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.grain--speckle {
  opacity: .25;
  mix-blend-mode: normal;
  background-size: 300px 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncA type='discrete' tableValues='1 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the gradient block ---------- */

.block--grad {
  background: var(--grad);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--hero-ink);
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(3rem, 9vw, 6rem);
}
.block--grad ::selection { background: var(--hero-ink); color: #FD9868; }
.block--grad :focus-visible { outline-color: var(--hero-ink); }

.site-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--pad);
}
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { width: auto; height: clamp(1.7rem, 2.4vw, 2rem); }

.head__note {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hero-ink);
  opacity: .65;
}

.hero { padding-top: clamp(2rem, 7vw, 4.5rem); }

.hero__title {
  text-transform: uppercase;
  font-size: clamp(3.4rem, min(15vw, 24vh), 10rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  margin: 0;
  color: var(--hero-ink);
}

/* The name arrives a moment after the page, so the headline opens on
   "Hi there," and then turns into the guest's name. The whole line resizes
   with it, because a different name is a different width. */
/* Added once the first fit has landed, and never removed: a class taken off
   mid-transition orphans it, and the headline sticks at the wrong size. */
.hero__title.is-fitted { transition: font-size 1s var(--ease-reveal); }

.hero__name { display: inline-block; will-change: opacity, transform; }
.hero__name.is-out {
  opacity: 0;
  transform: translateY(-.2em);
  transition: opacity .55s var(--ease-reveal), transform .55s var(--ease-reveal);
}
.hero__name.is-in { animation: nameIn .9s var(--ease-reveal) both; }
@keyframes nameIn {
  from { opacity: 0; transform: translateY(.26em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title.is-fitted { transition: none; }
  .hero__name.is-out { opacity: 1; transform: none; transition: none; }
  .hero__name.is-in { animation: none; }
}

.hero__subtitle {
  font-size: clamp(1.3rem, .9rem + 2.1vw, 2.7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin: clamp(1rem, 3vw, 1.75rem) 0 0;
  color: var(--hero-ink);
}

.hero__body {
  font-size: clamp(1.05rem, .95rem + .75vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
  max-width: 34ch;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  color: var(--hero-ink);
}

.hero__cue {
  margin: clamp(1.75rem, 5vw, 3rem) 0 0;
  font-size: clamp(1.25rem, .6rem + 1.9vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--hero-ink);
}
/* Keep the highlighter on one unbroken line, the way index.html does.
   A wrapped highlight draws two misaligned boxes. */
.hero__cue .text-highlight {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}
/* The stroke is painted behind the text rather than as the span's own
   background, so it can overhang the glyphs without padding shifting the
   line. The brush tapers at both ends, and a box clamped exactly to the
   text leaves the first and last letters uncovered. */
.hero__cue .text-highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.08em -.26em;
  pointer-events: none;
  background: url("stay-highlighter.svg") no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 420px) {
  .hero__cue { font-size: 1.15rem; }
}

/* Desktop: the cue moves alongside the headline instead of under it, so the
   hero spends width rather than height and the calendar clears the fold.
   The headline is capped here because half the width cannot carry 15vw type. */
@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  /* The headline keeps the full line to itself. Only the copy below it
     splits, so the cue rides alongside the body instead of under it. */
  .hero__title {
    grid-column: 1 / -1;
    font-size: clamp(3.4rem, 12vw, 10rem);
  }
  .hero__subtitle { grid-column: 1; grid-row: 2; }
  .hero__body {
    grid-column: 1;
    grid-row: 3;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  }

  .hero__cue {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    margin-top: 0;
    font-size: clamp(1.3rem, 1.7vw, 1.9rem);
  }

  .block--grad { padding-bottom: clamp(2rem, 4vw, 3rem); }
  .block--book { padding-top: clamp(2rem, 4vw, 3rem); }
}

/* ---------- the booking block ---------- */

.block--book {
  background: var(--grey);
  color: var(--grey-ink);
}
.block--book ::selection { background: var(--grey-ink); color: var(--grey); }
.block--book :focus-visible { outline-color: var(--grey-ink); }

.booker {
  display: grid;
  grid-template-columns: minmax(16rem, 23rem) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .booker { grid-template-columns: 1fr; }
}

.booker__side {
  background: #FFF;
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 60px -34px rgba(30, 30, 30, .45);
}
.booker__mark { width: auto; height: 1.8rem; margin-bottom: 1.5rem; }

.booker__org {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E6E76;
}

.booker__title {
  margin: .45rem 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.booker__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}
.booker__meta svg { width: 1.15rem; height: 1.15rem; flex: none; }

.booker__copy {
  margin: 0 0 1rem;
  font-size: .98rem;
  line-height: 1.55;
  color: #47474F;
}

.booker__fine {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(42, 42, 45, .12);
  font-size: .9rem;
  color: #6E6E76;
}

.booker__cal { min-width: 0; }

/* ---------- the picker ---------- */

.cal, .confirm, .booked {
  background: #FFF;
  border-radius: 22px;
  padding: clamp(1.25rem, 2.6vw, 1.85rem);
  box-shadow: 0 24px 60px -34px rgba(30, 30, 30, .45);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.cal__month {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cal__nav {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #F1F1F3;
  color: var(--grey-ink);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.cal__nav svg { width: 1.05rem; height: 1.05rem; }
.cal__nav:not(:disabled):hover { background: var(--grey-ink); color: #FFF; }
.cal__nav:disabled { opacity: .3; cursor: default; }

.cal__body {
  display: grid;
  grid-template-columns: 1fr minmax(8.5rem, 10.5rem);
  gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start;
}
@media (max-width: 560px) {
  .cal__body { grid-template-columns: 1fr; }
}

.cal__dow, .cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}
.cal__dow {
  margin-bottom: .4rem;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A9AA2;
  text-align: center;
}

.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #B9B9C0;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  cursor: default;
  transition: background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.cal__day--empty { visibility: hidden; }

/* A day with something free reads as available at a glance. */
.cal__day.is-open {
  background: rgba(253, 152, 104, .18);
  color: var(--grey-ink);
  font-weight: 700;
  cursor: pointer;
}
.cal__day.is-open:hover { background: rgba(253, 152, 104, .38); transform: translateY(-1px); }
.cal__day.is-picked,
.cal__day.is-picked:hover {
  background: var(--grey-ink);
  color: #FFF;
}

.cal__tz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 0;
  font-size: .82rem;
  color: #6E6E76;
}
.cal__tz select {
  flex: 1 1 8rem;
  min-width: 0;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--grey-ink);
  background: #F1F1F3;
  border: 0;
  border-radius: 8px;
  padding: .4rem .6rem;
  cursor: pointer;
}

.cal__times { min-width: 0; }
.cal__timesHead {
  margin: 0 0 .7rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--grey-ink);
}
.cal__slots {
  display: grid;
  gap: .4rem;
  max-height: 20rem;
  overflow-y: auto;
  padding-right: .2rem;
}
@media (max-width: 560px) {
  .cal__slots { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); max-height: none; }
}

.cal__slot {
  padding: .6rem .5rem;
  border: 1.5px solid rgba(42, 42, 45, .2);
  border-radius: 999px;
  background: #FFF;
  color: var(--grey-ink);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .14s var(--ease);
}
.cal__slot:hover {
  background: var(--grey-ink);
  border-color: var(--grey-ink);
  color: #FFF;
  transform: translateY(-1px);
}

.cal__status {
  margin: 1.25rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: #6E6E76;
}

/* ---------- step two ---------- */

.confirm__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: #6E6E76;
  font: 650 .88rem/1 var(--sans);
  cursor: pointer;
}
.confirm__back:hover { color: var(--grey-ink); }

.confirm__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.confirm__when {
  margin: .8rem 0 1.6rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  background: rgba(253, 152, 104, .16);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--grey-ink);
}

.field { margin: 0 0 1.25rem; }
.field__label {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 .45rem;
}
.field__hint {
  display: block;
  font-size: .82rem;
  font-weight: 450;
  color: #6E6E76;
  margin: -.25rem 0 .55rem;
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 450;
  line-height: 1.5;
  color: var(--grey-ink);
  background: #FFF;
  border: 1.5px solid rgba(42, 42, 45, .2);
  border-radius: 12px;
  padding: .7rem .9rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(42, 42, 45, .4); }
.field input:focus, .field textarea:focus {
  border-color: var(--grey-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 152, 104, .45);
}

/* Honeypot. Humans never see it, bots fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__error {
  margin: 0 0 1.25rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--signal);
  border-radius: 12px;
  background: rgba(255, 74, 28, .08);
  font-size: .9rem;
  font-weight: 500;
}

/* ---------- step three ---------- */

.booked { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); }
.booked__tick {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--hero-ink);
}
.booked__tick svg { width: 1.6rem; height: 1.6rem; }
.booked__title {
  margin: 0;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
}
.booked__when {
  margin: .8rem auto 0;
  max-width: 24ch;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.booked__note {
  margin: 1rem auto 0;
  max-width: 32ch;
  font-size: .92rem;
  line-height: 1.5;
  color: #6E6E76;
}
.booked__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  font-size: .88rem;
}
.booked__links a {
  font-weight: 700;
  color: var(--grey-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: #FD9868;
}
.booked__links a:hover { color: var(--signal); }

/* ---------- pill CTA, same shape as the site's ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 72px;
  padding: 0 2.1rem;
  border: 0;
  border-radius: 40px;
  background: var(--grey-ink);
  color: #FFF;
  font-family: var(--sans);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.55rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(30, 30, 30, .45);
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.pill:hover {
  transform: translateY(-2px);
  background: var(--hero-ink);
  box-shadow: 0 18px 40px -14px rgba(30, 30, 30, .55);
}
.pill:active { transform: translateY(0); }
.pill[disabled] { opacity: .6; cursor: progress; transform: none; }
.pill__arrow {
  flex: none;
  width: 1.5em;
  height: .95em;
  transition: transform .18s var(--ease);
}
.pill:hover .pill__arrow { transform: translateX(.15em); }

/* ---------- green block ---------- */

.block--green {
  background: var(--green);
  color: var(--hero-ink);
}
.block--green ::selection { background: var(--hero-ink); color: var(--green); }

.block--green .big {
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
  max-width: 22ch;
}
.block--green .sub {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, .95rem + .45vw, 1.25rem);
  line-height: 1.45;
  font-weight: 450;
}
.block--green .sub a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--signal);
}
.block--green .sub a:hover { color: var(--signal); }


/* ---------- footer ---------- */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  font-size: .9rem;
  color: #6E6E76;
  background: var(--grey);
}
.site-foot a {
  font-weight: 700;
  color: var(--grey-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: #FD9868;
}
.site-foot a:hover { color: #C4491A; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .pill:hover { transform: none; }
}