/* ==========================================================================
   Summer Lounge — Design Tokens
   Palette pulled from the venue itself: the sage banquettes, the brass
   chair frames, the marble tabletops, the near-black mark, the dusty
   rose upholstery. Nothing generic-AI added on top.
   ========================================================================== */

:root{
  /* --- Colour: named, not decorative --- */
  --sage:        #7C9690;   /* banquette velvet */
  --sage-deep:   #5C766F;   /* shaded sage, for text-on-light accents */
  --ink:         #1B1A17;   /* the mark's black, near-black bg */
  --ink-soft:    #2C2A26;
  --cream:       #F7F2E9;   /* warm gallery wall */
  --cream-dim:   #EFE8D9;
  --terracotta:  #B3543F;   /* dusty rose chairs, warmed & deepened */
  --terracotta-soft:#D98B76;
  --gold:        #B8934F;   /* brass frames, marble veining */
  --gold-soft:   #E4D2A6;
  --paper:       #FFFDF8;

  /* --- Type: two roles, restrained --- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-num:     'Manrope', sans-serif;

  /* --- Scale (mobile-first, fluid) --- */
  --step-1: clamp(1.9rem, 8vw + 0.4rem, 3.4rem);   /* hero display */
  --step-2: clamp(1.4rem, 5vw, 2rem);               /* section head */
  --step-3: clamp(1.05rem, 3.2vw, 1.25rem);         /* card title */
  --step-0: 1rem;                                    /* body */
  --step--1: 0.85rem;                                /* caption */

  /* --- Space --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- Shape --- */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --arc: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 180ms;
  --slow: 520ms;

  /* --- Elevation --- */
  --shadow-card: 0 10px 30px -14px rgba(27,26,23,.35);
  --shadow-pop:  0 20px 48px -18px rgba(27,26,23,.5);

  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){ }

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + var(--safe-b));
}
h1,h2,h3{ font-family:var(--font-display); margin:0; line-height:1.05; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:var(--font-body); }

.eyebrow{
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage-deep);
  font-weight:700;
}

/* Signature motif: the gold arc — echoes the round mark & brass frames.
   Used as a section divider, never as blanket decoration. */
.arc-divider{
  width:56px; height:2px;
  background:var(--gold);
  border-radius:var(--arc);
  margin:var(--sp-4) 0;
}
.arc-divider.center{ margin-inline:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2.5px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}