/* =====================================================================
   PRIMROSE - Brand foundation
   Two luxury family homes · St Saviour, Jersey
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* --- Core palette (drawn from the homes) --- */
  --ink:        #2b3036;   /* slate-charcoal roofs */
  --ink-soft:   #4a5159;   /* secondary text */
  --render:     #f6f2ec;   /* warm render-white / page ground */
  --picket:     #fdfcfa;   /* picket-fence white */
  --line:       #e3ddd3;   /* hairline on ground */

  /* --- Accents (shared chroma/lightness, varied hue) --- */
  --granite:    #c69a93;   /* Jersey pink granite, signature */
  --granite-dp: #a9776f;   /* deeper granite for text on light */
  --oak:        #c4a277;   /* clean timber / oak, secondary */
  --oak-dp:     #9c7c52;

  /* --- Type --- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* --- Letterspacing tokens for the refined uppercase labels --- */
  --track-label: 0.42em;
  --track-sub:   0.26em;

  /* --- Type scale (editorial display → fine print) --- */
  --fs-hero:    clamp(76px, 13vw, 168px); /* wordmark hero only */
  --fs-display: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-lede:    clamp(1.5rem, 3vw, 2.15rem);
  --fs-quote:   clamp(1.6rem, 3.4vw, 2.6rem);
  --fs-title:   1.45rem;
  --fs-body:    1.04rem;
  --fs-small:   .9rem;
  --fs-caption: .78rem;

  /* --- Spacing scale (vertical rhythm) --- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 140px;
  --sec-pad:       clamp(88px, 12vw, 150px);  /* standard section */
  --sec-pad-tight: clamp(64px, 9vw, 110px);   /* compressed section */

  /* --- Motion (slow, purposeful, expensive) --- */
  --ease-luxe:  cubic-bezier(.16, 1, .3, 1);  /* long ease-out for reveals */
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);   /* micro-interactions */
  --dur-micro:  .25s;   /* hovers, presses */
  --dur-hover:  .45s;   /* image zooms within frames */
  --dur-reveal: 1.05s;  /* scroll reveals */
  --stagger:    95ms;   /* per-sibling reveal offset */

  /* --- Imagery treatment --- */
  --frame-radius: 3px;
  --scrim-hero: linear-gradient(180deg, rgba(20,24,28,.55) 0%, rgba(20,24,28,.18) 38%, rgba(20,24,28,.42) 100%);
  --scrim-band: linear-gradient(180deg, rgba(20,24,28,.46), rgba(20,24,28,.46));
  --shadow-lift: 0 22px 55px -28px rgba(43,48,54,.45);
}

*{ box-sizing:border-box; }

/* ---------- Reusable label / eyebrow ---------- */
.label{
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--track-label);
  font-size:.72rem;
}

/* =====================================================================
   THE WORDMARK
   ===================================================================== */
.wordmark{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.02em;
  line-height:.9;
  color:var(--ink);
  display:inline-block;
}

/* =====================================================================
   THE PRIMROSE MARK  (fine geometric 5-petal flower)
   Use as: <svg class="mark"> ... </svg>  via the .pr-mark template,
   or copy the markup below.
   ===================================================================== */
.pr-mark{ display:block; }
.pr-mark .petal{
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
}
.pr-mark .core{ fill:currentColor; stroke:none; }