/* ============================================================
   Family Profile — shared design tokens
   Warm, cozy, handmade scrapbook · sage + honey on cream paper
   ============================================================ */

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

:root {
  /* — Paper & ink — */
  --paper:        oklch(0.962 0.014 84);   /* warm cream paper            */
  --paper-deep:   oklch(0.935 0.018 82);   /* shadowed paper / panels     */
  --paper-edge:   oklch(0.90 0.020 80);    /* torn / folded edges         */
  --ink:          oklch(0.315 0.022 60);   /* warm brown-black text       */
  --ink-soft:     oklch(0.44 0.022 62);    /* secondary text              */
  --ink-faint:    oklch(0.58 0.020 64);    /* captions / meta             */

  /* — Sage — */
  --sage:         oklch(0.575 0.045 148);  /* deep sage                   */
  --sage-mid:     oklch(0.70 0.045 148);   /* mid sage                    */
  --sage-soft:    oklch(0.86 0.035 148);   /* soft sage wash              */
  --sage-tape:    oklch(0.74 0.05 148 / 0.42); /* washi tape              */

  /* — Honey / gold — */
  --honey:        oklch(0.715 0.105 78);   /* honey gold                  */
  --honey-deep:   oklch(0.60 0.11 66);     /* deeper amber                */
  --honey-soft:   oklch(0.90 0.05 82);     /* honey wash                  */
  --honey-tape:   oklch(0.80 0.09 80 / 0.40);  /* washi tape              */

  /* — Photo / frame — */
  --polaroid:     oklch(0.987 0.006 90);   /* polaroid white              */
  --frame-shadow: oklch(0.30 0.02 60 / 0.18);

  /* — Type — */
  --display: 'Cormorant Garamond', Georgia, serif;
  --serif:   'Lora', Georgia, serif;
  --hand:    'Caveat', 'Segoe Script', cursive;

  --shadow-photo: 0 1px 1px rgba(58,52,44,.10), 0 14px 28px -16px rgba(58,52,44,.45);
  --shadow-card:  0 1px 2px rgba(58,52,44,.06), 0 22px 50px -28px rgba(58,52,44,.40);
}

/* — Paper texture: layered soft mottling, no images — */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, oklch(0.97 0.02 86 / 0.6) 0%, transparent 38%),
    radial-gradient(circle at 82% 78%, oklch(0.93 0.02 78 / 0.5) 0%, transparent 42%),
    radial-gradient(circle at 60% 30%, oklch(0.95 0.02 150 / 0.25) 0%, transparent 50%);
}
/* Fine grain overlay — apply on a ::before with this */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================================
   Reusable scrapbook bits
   ============================================================ */

/* Polaroid / taped photo frame */
.polaroid {
  background: var(--polaroid);
  padding: 12px 12px 0 12px;
  box-shadow: var(--shadow-photo);
  position: relative;
}
.polaroid .cap {
  font-family: var(--hand);
  color: var(--ink-soft);
  text-align: center;
  font-size: 22px;
  line-height: 1.1;
  padding: 9px 6px 13px;
}

/* Striped image placeholder (until real photos arrive) */
.ph {
  position: relative;
  background-color: var(--sage-soft);
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(0.90 0.03 120 / 0.55) 0px, oklch(0.90 0.03 120 / 0.55) 9px,
    oklch(0.86 0.035 148 / 0.55) 9px, oklch(0.86 0.035 148 / 0.55) 18px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph.honey {
  background-color: var(--honey-soft);
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(0.93 0.04 86 / 0.55) 0px, oklch(0.93 0.04 86 / 0.55) 9px,
    oklch(0.88 0.06 82 / 0.55) 9px, oklch(0.88 0.06 82 / 0.55) 18px);
}
.ph .lbl {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: oklch(0.99 0.005 90 / 0.78);
  padding: 4px 9px;
  border-radius: 2px;
  text-align: center;
  max-width: 82%;
  line-height: 1.35;
}

/* Washi tape strips */
.tape {
  position: absolute;
  width: 92px; height: 26px;
  background: var(--honey-tape);
  box-shadow: 0 1px 2px rgba(58,52,44,.10);
}
.tape::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.18) 0 6px, transparent 6px 12px);
}
.tape.sage { background: var(--sage-tape); }

/* Section eyebrow */
.eyebrow {
  font-family: var(--hand);
  color: var(--sage);
  font-size: 26px;
  letter-spacing: .01em;
}