/* ============================================================
   UnoSei — Shared design tokens
   Earth tones · desaturated sage · classic serif
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root{
  /* warm earth neutrals */
  --bone:        #F4F1EA;   /* page background */
  --paper:       #FBFAF6;   /* lifted cards */
  --sand:        #ECE6DA;   /* soft fill / placeholder base */
  --stone:       #B9AF9D;   /* taupe lines & accents */
  --stone-soft:  #D8D1C3;

  /* ink (warm, faintly green near-black) */
  --ink:         #2B2F29;
  --ink-soft:    #5C6056;
  --ink-faint:   #8A8E82;

  /* desaturated sage greens */
  --sage:        #6E7A66;   /* primary green */
  --sage-deep:   #444E3F;   /* dark section ground */
  --sage-mist:   #DCE0D5;   /* pale green tint */

  --line:        rgba(43,47,41,0.14);
  --line-soft:   rgba(43,47,41,0.08);

  --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --shadow-soft: 0 24px 60px -34px rgba(43,47,41,0.45);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ margin:0; background:var(--bone); color:var(--ink); font-family:var(--sans);
      font-weight:400; line-height:1.6; }

/* ---- shared type helpers ---- */
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--sage);
}
.display{
  font-family:var(--serif); font-weight:300; line-height:1.02;
  letter-spacing:-.005em; color:var(--ink);
}
.serif-italic{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---- elegant image placeholder ---- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(43,47,41,0.035) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, var(--sand), #E4DDCF);
  color:var(--ink-faint);
}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(43,47,41,0.34);
  text-align:center; padding:1rem;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #3C4537, #2E352B);
}
.ph.dark::after{ color:rgba(245,242,234,0.42); }

/* real photo — overrides placeholder gradient, hides label */
.ph.photo{ background-size:cover; background-position:center; }
.ph.photo::after{ display:none; }

/* thin hairline button (shared) */
.btn-line{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:500; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; padding:1em 1.9em; border:1px solid var(--ink); white-space:nowrap;
  background:transparent; cursor:pointer; transition:.45s cubic-bezier(.2,.7,.3,1);
}
.btn-line:hover{ background:var(--ink); color:var(--bone); }
.btn-solid{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:500; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
  text-decoration:none; padding:1em 1.9em; border:1px solid var(--sage-deep); white-space:nowrap;
  background:var(--sage-deep); cursor:pointer; transition:.45s cubic-bezier(.2,.7,.3,1);
}
.btn-solid:hover{ background:transparent; color:var(--sage-deep); }