/* =====================================================================
   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;
}

*{ 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; }