/* ============================================================
   מירי מותק — shared site styles
   White & airy · thin black handwriting · soft pink + sage
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Frank+Ruhl+Libre:wght@300;400;500;700&display=swap');

:root{
  /* surfaces */
  --bg:        #fefdfc;   /* barely-warm white */
  --bg-soft:   #faf7f4;
  --paper:     #ffffff;

  /* ink */
  --ink:       #2a2724;   /* thin near-black */
  --ink-soft:  #6c6661;
  --ink-faint: #a59f99;
  --line:      #e7e1db;   /* hairline */

  /* pink (chosen swatch) */
  --pink:      #f5d7da;
  --pink-wash: #fceef0;
  --pink-deep: #c98a93;   /* readable pink accent */

  /* sage green (chosen swatch) */
  --green:      #c2d1b8;
  --green-wash: #eef3e9;
  --green-deep: #7e9476;  /* readable green accent */

  --hand: 'Amatic SC', 'Segoe Print', cursive;
  --serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.7;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }

img{ display:block; max-width:100%; }

/* ---- handwriting voice ---- */
.hand{ font-family:var(--hand); font-weight:700; line-height:1; }
.hand-light{ font-family:var(--hand); font-weight:400; line-height:1.15; }

h1,h2,h3{ font-family:var(--hand); font-weight:700; margin:0; line-height:1.1; }

/* ============================================================
   Logo — thin-line chocolate-chip cookie + wordmark
   ============================================================ */
.logo{ display:inline-flex; align-items:center; gap:.55rem; }
.logo .cookie{ width:var(--cookie,46px); height:var(--cookie,46px); flex:none; }
.logo .cookie .dough{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; }
.logo .cookie .chip{ fill:var(--ink); }
.logo .cookie .chip.p{ fill:var(--pink-deep); }
.logo .cookie .chip.g{ fill:var(--green-deep); }
.logo .word{ display:flex; flex-direction:column; align-items:flex-start; line-height:.82; }
.logo .word .big{ font-family:var(--hand); font-weight:700; font-size:var(--logo-size,2.5rem); letter-spacing:.01em; white-space:nowrap; }
.logo .word .sub{ font-family:var(--serif); font-weight:300; font-size:.62rem; letter-spacing:.42em; color:var(--ink-soft); text-transform:uppercase; padding-inline-start:.15em; }

/* ============================================================
   Image placeholder (user supplies real photos later)
   ============================================================ */
.ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg,#f3efeb 0 11px,#f8f5f2 11px 22px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:var(--ink-faint);
}
.ph.pink{ background:repeating-linear-gradient(45deg,#f9e7e9 0 11px,#fdf2f3 11px 22px); }
.ph.green{ background:repeating-linear-gradient(45deg,#e9efe3 0 11px,#f3f6ef 11px 22px); }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph span{
  font-family:'Courier New',monospace; font-size:.62rem; letter-spacing:.04em;
  background:rgba(255,255,255,.78); padding:.28em .6em; border-radius:2px;
  border:1px solid rgba(0,0,0,.05);
}

/* ============================================================
   Buttons / small UI
   ============================================================ */
.tag{
  display:inline-block; font-family:var(--serif); font-weight:400;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft);
}
.btn-line{
  font-family:var(--serif); font-weight:400; font-size:.92rem;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.btn-line:hover{ color:var(--pink-deep); border-color:var(--pink-deep); }