/* ============================================================
   Golden Touch Creations — shared foundation
   Brand DNA: warm cream grounds, antique brass gold,
   elegant serif + retro script + clean caps. Sage accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Yellowtail&family=Great+Vibes&family=Fredoka:wght@600&family=Josefin+Sans:wght@600&family=Playfair+Display:wght@600&display=swap');

:root {
  /* grounds */
  --cream:        #F5ECD6;
  --cream-deep:   #EDE0C2;
  --ivory:        #FBF6EA;
  --paper:        #FFFDF7;

  /* brass golds */
  --gold:         #B68A2E;
  --gold-bright:  #C9A646;
  --gold-soft:    #D8C079;
  --gold-deep:    #8A6818;

  /* ink */
  --ink:          #3A3324;
  --ink-soft:     #6B6149;
  --espresso:     #2A2419;

  /* sage accent */
  --sage:         #8A977F;
  --sage-deep:    #6E7C63;
  --sage-tint:    #E4E7DC;

  /* misc */
  --line:         rgba(138,104,46,0.22);
  --shadow-sm:    0 2px 10px rgba(58,51,36,0.06);
  --shadow-md:    0 10px 34px rgba(58,51,36,0.10);
  --shadow-lg:    0 24px 60px rgba(58,51,36,0.16);

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', system-ui, sans-serif;
  --script: 'Yellowtail', cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- type helpers ---- */
.script  { font-family: var(--script); font-weight: 400; }
.serif   { font-family: var(--serif); }
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold-deep);
}

/* ---- buttons ---- */
.btn {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 1em 1.9em;
  font-size: 0.86rem;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #fff;
  box-shadow: 0 8px 22px rgba(138,104,46,0.28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(138,104,46,0.36); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.4px var(--gold);
}
.btn-outline:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
.btn-ink { background: var(--espresso); color: var(--cream); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 0.7em 1.3em; font-size: 0.78rem; }

/* ---- sparkle motif ---- */
.spark {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--spark-mask) center/contain no-repeat;
          mask: var(--spark-mask) center/contain no-repeat;
}
:root {
  --spark-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C54 30 70 46 100 50 C70 54 54 70 50 100 C46 70 30 54 0 50 C30 46 46 30 50 0 Z'/></svg>");
}

/* ============================================================
   CSS PRODUCT PLACEHOLDERS  (swap for real photos later)
   <div class="ph ph-wood" data-label="Family Name Sign"></div>
   ============================================================ */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-deep);
  display: grid;
  place-items: center;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.5), transparent 60%),
    var(--ph-grad, linear-gradient(150deg, #E7D8B4, #D8C49A));
  opacity: 0.96;
}
.ph::after {
  content: attr(data-label);
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: rgba(58,51,36,0.45);
  text-align: center;
  padding: 0 14%;
  line-height: 1.3;
}
/* tiny sparkle badge on every placeholder */
.ph .ph-mark {
  position: absolute;
  z-index: 2;
  top: 14px; left: 14px;
  width: 22px; height: 22px;
  color: rgba(138,104,46,0.5);
}
.ph .ph-mark .spark { width: 100%; height: 100%; }

/* ---- when a real photo is hydrated in (gt-images.js) ---- */
.ph--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* the studio photos are already shot in the brand palette; only a whisper of warmth */
  filter: saturate(0.92) contrast(0.98);
}
.ph--img::before {
  background: linear-gradient(165deg, rgba(245,236,214,0.08), rgba(138,104,46,0.10));
  mix-blend-mode: multiply;
  opacity: 1;
}
.ph--img::after { display: none; }      /* hide the text label once a photo loads */
.ph--img .ph-mark { color: rgba(255,253,247,0.85); }

.ph-wood   { --ph-grad: linear-gradient(150deg, #E3CFA3, #CBAE78); }
.ph-acrylic{ --ph-grad: linear-gradient(150deg, #E2E6DC, #C9D2C0); }
.ph-mirror { --ph-grad: linear-gradient(150deg, #F1E2B6, #D9BB74); }
.ph-laser  { --ph-grad: linear-gradient(150deg, #E8D7B0, #D2B884); }
.ph-soft   { --ph-grad: linear-gradient(150deg, #F0E6CE, #E4D3AC); }

/* ---- reusable logo lockup (CSS, crisp at any size) ---- */
.gt-mark { display: inline-flex; align-items: center; gap: 0.6em; }
.gt-badge {
  display: grid;
  place-items: center;
  border: 1.6px solid var(--gold);
  border-radius: 50%;
  aspect-ratio: 1;
  text-align: center;
  line-height: 0.9;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.gt-badge .b-script { font-family: var(--script); color: var(--gold); }
.gt-badge .b-caps {
  font-family: var(--sans); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}

/* ---- utility ---- */
.wrap { width: min(1180px, 92vw); margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
section { position: relative; }

/* scrollbar accent */
::selection { background: var(--gold-soft); color: var(--espresso); }