body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
[id]{scroll-margin-top:6.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.eyebrow{
  font-family:var(--cond);font-weight:400;font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}

/* ========================= LINK PAGE =========================
   One centred column on an apricot wash — the same 14% tint the
   live links page uses, which lands on our cream as a warm sand. */
main{flex:1 0 auto}
.lp{
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(237,165,125,.26) 0%,rgba(237,165,125,0) 62%),
    rgba(237,165,125,.14);
  padding:clamp(7.5rem,14vh,10rem) 0 clamp(4rem,8vw,6.5rem);
}
.lp__in{max-width:38rem;margin-inline:auto;text-align:center}

/* portrait --------------------------------------------------- */
.lp__ava{
  margin:0 auto;width:clamp(7.3rem,20vw,9.4rem);aspect-ratio:1;
  border-radius:50%;overflow:hidden;position:relative;
  /* the live page throws its glow up and to the left; keep that tilt */
  box-shadow:-5px -5px 20px rgba(237,165,125,.9),0 26px 48px -30px rgba(38,34,31,.5);
}
/* The portrait is a 3:4 half-body shot; a plain `cover` crop would put the
   face in the top half of the disc. Sized and offset instead so the circle
   frames the top 700px of the source — head and shoulders.
   Rosie does not stand in the middle of that source frame: her head sits at
   x≈369 of 850, so centring the *file* leaves the face ~6% left of the disc.
   The offset centres the head, not the file. */
.lp__ava img{position:absolute;top:0;left:.4%;width:114.3%;height:auto}

.lp__kicker{display:block;margin-bottom:clamp(1.6rem,3.4vw,2.2rem)}
.lp__name{
  font-family:var(--serif);font-size:clamp(2.1rem,1.6rem + 2.2vw,3.1rem);
  line-height:1;letter-spacing:-.035em;margin-top:clamp(1.4rem,3vw,2rem);
}
.lp__name em{font-style:italic;color:var(--terracotta)}
.lp__role{
  font-family:var(--cond);font-weight:400;font-size:clamp(.9375rem,.89rem + .2vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin:1.05rem 0 0;line-height:1.5;
}
.lp__mail{
  display:inline-block;margin-top:1.15rem;text-decoration:none;
  font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  letter-spacing:-.015em;color:var(--terracotta);
  border-bottom:1px solid rgba(196,99,60,.34);padding-bottom:.12em;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.lp__mail:hover{color:var(--ink-soft);border-color:var(--ink-soft)}

/* socials ----------------------------------------------------- */
.lp__social{
  list-style:none;margin:clamp(1.5rem,3vw,2rem) 0 0;padding:0;
  display:flex;justify-content:center;gap:clamp(.85rem,2.4vw,1.4rem);
}
.lp__social a{
  display:grid;place-content:center;width:2.85rem;height:2.85rem;border-radius:50%;
  color:var(--terracotta);
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.lp__social svg{width:1.5rem;height:1.5rem;fill:currentColor}
.lp__social a:hover{background:var(--ink-deep);color:var(--apricot);transform:translateY(-3px)}

/* pill stack --------------------------------------------------
   Two booking CTAs in ink first, then the site's own pages in
   apricot — same order as the live page. */
/* 26.5rem ≈ 424px, close to the live page's 404px pills. It is the narrowest
   the stack goes without breaking a label: the widest line, CONSULTING &
   SPEAKING EVENTS, measures 16.06em at .16em tracking (Barlow Condensed 500,
   fontTools) and the pill adds 3em of padding — 400px at the 21px ceiling. */
.lp__links{
  display:grid;gap:.85rem;margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  width:100%;max-width:26.5rem;
}
.pill{
  --bg:var(--apricot);--fg:var(--ink-deep);--fill:var(--ink-deep);--fill-fg:var(--cream);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3.8rem;padding:.85em 1.5em;border-radius:999px;
  border:1px solid var(--bg);background:var(--bg);color:var(--fg);
  font-family:var(--cond);font-weight:500;font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;line-height:1.25;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.pill::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.pill:hover::before,.pill:focus-visible::before{transform:translateY(0)}
.pill:hover,.pill:focus-visible{color:var(--fill-fg);border-color:var(--fill)}
.pill--book{
  --bg:var(--ink-deep);--fg:var(--apricot);--fill:var(--apricot);--fill-fg:var(--ink-deep);
  min-height:4.6rem;letter-spacing:.13em;
}
.pill small{display:block;font-size:inherit;letter-spacing:inherit}

.lp__note{
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  font-family:var(--cond);font-weight:400;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.lp__note a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.1em}
.lp__note a:hover{color:var(--terracotta);border-color:currentColor}

/* entrance: one short stagger down the column, nothing on reload
   for anyone who has asked for less motion (see the query below) */
.rv{opacity:0;transform:translateY(14px);animation:lpIn .8s var(--ease) forwards}
.rv:nth-child(1){animation-delay:.05s}
.rv:nth-child(2){animation-delay:.12s}
.rv:nth-child(3){animation-delay:.19s}
.rv:nth-child(4){animation-delay:.26s}
.rv:nth-child(5){animation-delay:.33s}
.rv:nth-child(6){animation-delay:.4s}
.rv:nth-child(7){animation-delay:.47s}
.rv:nth-child(8){animation-delay:.54s}
@keyframes lpIn{to{opacity:1;transform:none}}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem;flex-shrink:0}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
}
@media (max-width:860px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr}
  /* the long booking labels need the room back once the column narrows */
  .pill{letter-spacing:.1em;padding-inline:1.1em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}