/* =========================================================
   Dine at Jennie  ·  shared styles
   "Warm Minimalism" / Golden Hour
   ========================================================= */

/* Brand-mark only fonts (kept narrow on purpose so we don't touch
   the rest of the page typography). DM Serif Display + DM Sans are
   only referenced inside `.brand .mark` and `.brand .tag`. */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@500&display=swap");

:root {
  --cream:       #FDF9F3;
  --cream-deep:  #F4ECDD;
  --paper:       #F8F1E4;
  --ink:         #2A241D;   /* warm charcoal, never pure black */
  --ink-soft:    #5B4F42;
  --ink-faint:   #8A7B6A;
  --terracotta:  #C97B5C;
  --terracotta-deep: #A85F44;
  --sage:        #9AA888;
  --sage-deep:   #6F7E62;
  --oak:         #B08A5B;
  --oak-deep:    #8A6940;
  --rule:        rgba(42,36,29,0.14);

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --script: "Caveat", "Homemade Apple", cursive;

  --measure: 38rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (max-width: 520px) {
  html, body { font-size: 16px; }
}

/* paper grain overlay, very subtle, warm */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(255, 220, 170, 0.28), transparent 55%),
    radial-gradient(ellipse at 90% 85%, rgba(201, 123, 92, 0.10), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0.045 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.05; }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: inherit; }

.uppercase {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--terracotta-deep);
  line-height: 1.1;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky; top: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: linear-gradient(180deg, var(--cream) 60%, rgba(253, 249, 243, 0));
}

.brand {
  display: inline-flex; align-items: baseline; gap: 1rem;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
/* Brand wordmark, matched 1:1 to index_refer.html
   (DM Serif Display, italic, 26px, letter-spacing -0.01em) */
.brand .mark {
  font-family: "DM Serif Display", "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand .mark em { font-style: italic; color: var(--terracotta); }
/* Sub-label "Bengaluru", matched 1:1 to index_refer.html
   (DM Sans, 10px, 0.24em, uppercase, weight 500) */
.brand .tag {
  font-family: "DM Sans", "Outfit", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  font-weight: 500;
}

.nav {
  display: flex; gap: 2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}
.nav a:hover { color: var(--terracotta-deep); }
.nav a.active { color: var(--ink); }
.nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6'><path d='M2 4 Q 20 1, 40 3.5 T 78 3' stroke='%23C97B5C' fill='none' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

@media (max-width: 720px) {
  .nav { gap: 1.1rem; font-size: 0.78rem; }
  .brand .tag { display: none; }
}
@media (max-width: 520px) {
  .topbar {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem var(--gutter) 0.7rem;
  }
  .brand .mark { font-size: 22px; }
  .nav { gap: 1rem; font-size: 0.72rem; }
  .nav a.active::after { bottom: -2px; height: 4px; }
}

/* ---------- Hand-drawn link / wax seal CTA ---------- */

.link-handdrawn {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  position: relative;
  white-space: nowrap;
  padding-bottom: 6px;
}
.link-handdrawn::after {
  content: "";
  position: absolute; left: -4px; right: -4px; bottom: 0;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M2 5 Q 30 1, 60 4 T 118 4' stroke='%23C97B5C' fill='none' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  transition: transform 0.4s ease;
  transform-origin: left;
}
.link-handdrawn:hover::after { transform: scaleX(1.04) translateY(1px); }

.wax-seal {
  display: inline-flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.wax-seal .seal {
  width: 78px; height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #E29478 0%, #C0664A 45%, #8E3F26 100%);
  display: grid; place-items: center;
  color: #FBEFE4;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  letter-spacing: -0.04em;
  box-shadow:
    inset -3px -4px 8px rgba(0,0,0,0.25),
    inset 3px 4px 6px rgba(255,210,180,0.35),
    0 4px 18px rgba(142, 63, 38, 0.22);
  transform: rotate(-6deg);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.wax-seal .seal::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(251, 239, 228, 0.5);
}
.wax-seal:hover .seal { transform: rotate(2deg) scale(1.04); }
.wax-seal .label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.2;
}
.wax-seal .label small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* ---------- Blob image placeholder ---------- */

.photo {
  position: relative;
  display: block;
  background: var(--cream-deep);
  overflow: hidden;
}

/* alternating organic shapes */
.photo--blob-a { border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; }
.photo--blob-b { border-radius: 38% 62% 40% 60% / 55% 40% 60% 45%; }
.photo--blob-c { border-radius: 50% 50% 42% 58% / 60% 40% 60% 40%; }
.photo--soft   { border-radius: 14px 28px 22px 32px / 26px 18px 30px 22px; }

.photo--placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      #EFE3CD 0px, #EFE3CD 14px,
      #E7D8BE 14px, #E7D8BE 28px
    );
}
.photo--placeholder::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42,36,29,0.5);
  padding: 1rem;
  text-align: center;
}

.photo--sage { background: #C7D1B8; }
.photo--terracotta { background: #E5B59C; }
.photo--oak { background: #D8BE94; }

.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- Rules + dividers ---------- */

.hr-soft {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

.dotted-rule {
  display: block;
  background-image: radial-gradient(circle, var(--ink-faint) 1px, transparent 1.6px);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-position: center;
  height: 4px;
  width: 100%;
  opacity: 0.45;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn:hover { background: var(--ink); color: var(--cream); }

.btn--terracotta {
  border-color: var(--terracotta-deep);
  background: var(--terracotta-deep);
  color: var(--cream);
}
.btn--terracotta:hover { background: var(--ink); border-color: var(--ink); }

.btn--ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- Layout helpers ---------- */

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px; background: var(--ink-soft);
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 8rem;
  padding: 3.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}
.footer .brand .mark { font-size: 22px; }
.footer p { margin: 0.3rem 0; }
@media (max-width: 720px) {
  .footer { grid-template-columns: 1fr; }
}

/* ---------- Breathing / steam animation ---------- */

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.55; }
  50%      { transform: translateY(-12px) scale(1.04); opacity: 0.9; }
}
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0.0; }
  20%  { opacity: 0.55; }
  100% { transform: translateY(-90px) translateX(8px); opacity: 0; }
}
@keyframes slow-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

.steam {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0));
  animation: drift 5.5s ease-in infinite;
  filter: blur(4px);
}

/* ---------- Fade-in on load ---------- */

.fade-up {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 1.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.fade-up.d1 { animation-delay: 0.15s; }
.fade-up.d2 { animation-delay: 0.35s; }
.fade-up.d3 { animation-delay: 0.55s; }
.fade-up.d4 { animation-delay: 0.75s; }
.fade-up.d5 { animation-delay: 0.95s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Forms ---------- */

.field {
  display: inline-block;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  background: transparent;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.15rem 0.4rem;
  min-width: 6ch;
  text-align: center;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.field:focus {
  border-color: var(--terracotta-deep);
  background: rgba(201, 123, 92, 0.06);
}
.field--wide { min-width: 12ch; }

textarea.field {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255,255,255,0.4);
  padding: 0.9rem 1rem;
  min-height: 110px;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
}
textarea.field:focus { border-color: var(--terracotta-deep); }

/* ---------- Annotation note (handwritten) ---------- */

.margin-note {
  font-family: var(--script);
  color: var(--terracotta-deep);
  font-size: 1.4rem;
  line-height: 1.1;
  display: inline-block;
  transform: rotate(-3deg);
  max-width: 220px;
}
.margin-note::before {
  content: "↳";
  display: inline-block;
  margin-right: 0.3rem;
  transform: rotate(-90deg);
  font-family: var(--sans);
}

/* =========================================================
   Mobile pass · small screen refinements
   ========================================================= */
@media (max-width: 720px) {
  .wax-seal .seal { width: 64px; height: 64px; font-size: 1.5rem; }
  .wax-seal .label { font-size: 1rem; }
  .wax-seal .label small { font-size: 0.62rem; letter-spacing: 0.18em; }

  .link-handdrawn { font-size: 1.05rem; }

  .footer {
    margin-top: 5rem;
    padding: 2.5rem var(--gutter) 1.8rem;
    gap: 1.6rem;
  }

  .btn { padding: 0.72rem 1.2rem; font-size: 0.78rem; }

  h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  h2 { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
  h3 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
}

@media (max-width: 480px) {
  :root { --gutter: 1.1rem; }
  .margin-note { font-size: 1.15rem; max-width: 160px; }
  .script { font-size: 1.25rem; }
}

/* ---------- Footer Instagram badge ---------- */
.ig-footer-link {
  display: inline-block;
  margin-top: 0.4rem;
  text-decoration: none;
  line-height: 0;
}
.ig-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 78%, #F7C871 0%, transparent 38%),
    radial-gradient(circle at 28% 78%, #EE5A3E 0%, transparent 58%),
    radial-gradient(circle at 70% 100%, #C5377A 0%, transparent 60%),
    radial-gradient(circle at 90% 0%, #6E3FAF 0%, transparent 60%),
    linear-gradient(135deg, #C5377A, #6E3FAF);
  color: #FBEFE4;
  box-shadow:
    inset -1px -2px 4px rgba(0, 0, 0, 0.18),
    inset 1px 2px 4px rgba(255, 210, 180, 0.20),
    0 4px 12px rgba(142, 63, 38, 0.18);
  transform: rotate(-3deg);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.ig-footer-link:hover .ig-badge,
.ig-footer-link:focus-visible .ig-badge {
  transform: rotate(2deg) scale(1.06);
}
.ig-badge svg {
  width: 22px;
  height: 22px;
  stroke: #FBEFE4;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ig-badge svg rect,
.ig-badge svg circle {
  fill: none;
  stroke: #FBEFE4;
}