/* ============================================================
   JAMES — brand foundation
   Daytime diner · Curaçao · breakfast & lunch
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-extrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-heavy.otf") format("opentype");
  font-weight: 850; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goldenbook";
  src: url("fonts/goldenbook-black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Agrandir";
  src: url("fonts/agrandir-textbold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Goldenbook is a trial font that watermarks the hyphen glyph (U+002D).
   Map just that character to a serif system font so it renders normally. */
@font-face {
  font-family: "GBHyphenFix";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  unicode-range: U+002D;
}
@font-face {
  font-family: "Agrandir Wide";
  src: url("fonts/agrandir-wideblackitalic.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Agrandir Thin";
  src: url("fonts/agrandir-thinitalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* grounds */
  --cream:      #F4EADA;   /* primary warm off-white */
  --cream-deep: #EAD9C0;   /* sand / panels */
  --cream-soft: #FBF5EA;   /* lightest */
  --paper:      #FCF8F0;

  /* ink */
  --ink:        #3A2419;   /* deep espresso text */
  --brown:      #5B3A2B;   /* brand brown (mustache/J) */
  --brown-soft: #8A6650;   /* muted brown */
  --near-black: #1C1714;   /* wordmark black */

  /* accent */
  --coral:      #EE9F84;   /* the dot */
  --coral-deep: #E08763;

  /* green (brand olive/sage from brand book) */
  --green:      #747C4E;   /* mid olive — accents, chips */
  --green-deep: #3E4828;   /* deep olive — dark sections */
  --green-soft: #8E9568;   /* muted olive */
  --green-tint: #EAEEDC;   /* pale sage wash */
  --green-sage: #C5D7A6;   /* brand sage */

  /* lines */
  --line:       #D8C4A6;
  --line-soft:  #E7D8BE;

  --shadow: 0 18px 50px -28px rgba(58,36,25,.45);
}

/* ---------- Base helpers ---------- */
* { box-sizing: border-box; }

.serif { font-family: "GBHyphenFix", "Goldenbook", Georgia, serif; }
.sans  { font-family: "Agrandir", "Helvetica Neue", Arial, sans-serif; }

.eyebrow {
  font-family: "Agrandir", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 12px;
  color: var(--brown-soft);
}

.dot { color: var(--coral); }

/* real photo inside a .ph slot — covers and hides the caption */
.ph > .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; }
.ph:has(> .shot) { background-image: none; }
.ph:has(> .shot) > .cap { display: none; }

/* striped image placeholder */
.ph {
  position: relative;
  background-color: var(--cream-deep);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(91,58,43,.10) 0 2px,
    transparent 2px 11px
  );
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ph > .cap {
  position: relative;
  z-index: 3;
  font-family: "Agrandir", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  text-align: center;
  max-width: 80%;
  box-shadow: 0 6px 18px -10px rgba(58,36,25,.4);
}

.btn {
  font-family: "Agrandir", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 16px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--ink); color: var(--cream-soft); }
.btn-primary:hover { background: var(--brown); transform: translateY(-2px); }
.btn-coral { background: var(--coral); color: var(--near-black); }
.btn-coral:hover { background: var(--coral-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--brown); transform: translateY(-2px); }