/* AURUM — shared tokens, fonts, reset, placeholders */
@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=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink:        #0c0b09;
  --ink-2:      #15130e;
  --ink-3:      #211d15;
  --paper:      #f4f1ea;
  --paper-2:    #e7e1d4;
  --gold:       #c7a45a;
  --gold-soft:  #d8bd7e;
  --ember:      #d97a35;
  --muted:      rgba(244,241,234,0.55);
  --muted-2:    rgba(244,241,234,0.38);
  --line:       rgba(199,164,90,0.22);
  --line-soft:  rgba(244,241,234,0.10);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

/* monospace eyebrow / label */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* striped image placeholder (wireframe imagery) */
.ph {
  position: relative;
  background-color: var(--ink-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(199,164,90,0.07) 0 8px,
    rgba(199,164,90,0) 8px 18px
  );
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph::before {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: rgba(12,11,9,0.4);
  text-align: center;
  max-width: 80%;
}
.ph.light {
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(12,11,9,0.05) 0 8px,
    rgba(12,11,9,0) 8px 18px
  );
  border-color: rgba(12,11,9,0.12);
}
.ph.light::before { color: rgba(12,11,9,0.4); background: rgba(244,241,234,0.5); border-color: rgba(12,11,9,0.08); }

/* thin gold rule */
.rule { height: 1px; background: var(--line); border: 0; }