/* ============================================================
   KIN — hub (kinfood.in)
   The neutral parent. Its job is one clean fork in the road.
   ============================================================ */
body[data-brand="kin"] {
  --bg: #EFE9DE;
  --fg: #141210;
  --accent: #B4553A;
  --accent-ink: #FBF7EF;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 3rem;
  position: relative; overflow: hidden;
}

.hero__mark { margin-top: auto; }
.hero__mark h1 {
  font-size: clamp(6rem, 34vw, 26rem);
  line-height: .78;
  letter-spacing: -.06em;
  font-weight: 300;
}
.hero__mark h1 em { font-style: italic; font-variation-settings: "SOFT" 50, "WONK" 1; }

.hero__meta {
  display: grid; gap: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 780px) {
  .hero__meta { grid-template-columns: 1fr auto 1fr; align-items: start; gap: 2rem; }
  .hero__meta > :last-child { text-align: right; justify-self: end; }
}

.hero__scroll { display: inline-flex; align-items: center; gap: .7rem; }
.hero__scroll i {
  display: block; width: 1px; height: 34px; background: currentColor; opacity: .4;
  animation: drop 2.2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- The fork: two doors ---------- */
.doors { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 900px) {
  .doors { grid-template-columns: 1fr 1fr; }
}

.door {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 78svh;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  color: var(--door-fg, var(--cream));
  background: var(--door-bg, #2A2622);
}
@media (min-width: 900px) { .door { min-height: 88svh; } }

.door__bg {
  position: absolute; inset: 0; z-index: -2;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.door:hover .door__bg { transform: scale(1.05); }

.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.78) 100%);
  transition: opacity .8s var(--ease);
}
.door:hover::after { opacity: .88; }

.door__index {
  position: absolute; top: clamp(1.5rem, 4vw, 3.5rem); left: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 1; color: inherit; opacity: .7;
}
.door__body { display: grid; gap: 1.25rem; position: relative; z-index: 1; }
.door__name {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: .9; letter-spacing: -.045em;
}
.door__name em { font-style: italic; }
.door__desc { max-width: 40ch; opacity: .82; font-size: clamp(.95rem, 1.4vw, 1.05rem); }
.door__go {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase;
  padding-top: 1rem; margin-top: .25rem;
  border-top: 1px solid rgba(255,255,255,.28);
  width: fit-content;
}
.door__go svg { transition: transform .55s var(--ease); }
.door:hover .door__go svg { transform: translateX(6px); }

/* Whole card is the link */
.door__link { position: absolute; inset: 0; z-index: 2; }
.door__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Door skins */
.door--cafe    { --door-bg: #6E6047; --door-fg: #FBF7EF; }
.door--biryani { --door-bg: #241611; --door-fg: #F6E8CE; }
.door--cafe .door__go    { border-top-color: rgba(251,247,239,.3); }
.door--biryani .door__go { border-top-color: rgba(232,162,28,.45); }

/* ---------- Story ---------- */
.story { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; align-items: start; } }

.pillars { display: grid; gap: 0; margin-top: 1rem; }
.pillar {
  display: grid; gap: .5rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1rem;
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar__n { grid-row: 1 / span 2; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .18em; opacity: .45; padding-top: .35rem; }
.pillar h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -.03em; }
.pillar p { color: var(--muted); max-width: 46ch; }

/* ---------- Visit ---------- */
.visit { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; } }
.card-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card-list > div { background: var(--bg); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: .55rem; }
.card-list dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.card-list dd { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); letter-spacing: -.02em; }

/* ---------- Sister cards in footer ---------- */
.sisters { display: grid; gap: 1rem; }
@media (min-width: 560px) { .sisters { grid-template-columns: 1fr 1fr; } }

/* Desktop: hovering one door lets it breathe. Progressive — browsers
   without :has() or animatable fr units simply keep the 1fr 1fr split. */
@media (min-width: 900px) and (hover: hover) {
  .doors { transition: grid-template-columns .9s var(--ease); }
  .doors:has(.door--cafe:hover)    { grid-template-columns: 1.16fr .84fr; }
  .doors:has(.door--biryani:hover) { grid-template-columns: .84fr 1.16fr; }
}

/* ---------- Door artwork (no photography) ----------
   Each door is a gradient field with a pattern, grain, and a huge outlined
   letterform that drifts as you approach it. */
.door__art {
  position: absolute; inset: 0;
  background: var(--art-grad);
}
.door__art::before {
  content: "";
  position: absolute; inset: -8%;
  background-image: var(--art-pattern);
  background-size: var(--art-size, 30px 30px);
  opacity: var(--art-op, .16);
  color: var(--door-fg);
}
.door__art::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ghost letterform */
.door__ghost {
  position: absolute;
  right: -.08em; bottom: -.14em;
  font-family: var(--display);
  font-size: clamp(9rem, 30vw, 22rem);
  font-weight: 300; font-style: italic;
  line-height: .7; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: .17;
  pointer-events: none;
  transition: transform 1.3s var(--ease), opacity 1.3s var(--ease);
}
.door:hover .door__ghost { transform: translate(-1.5%, -3%); opacity: .3; }

.door--cafe {
  --art-grad: radial-gradient(115% 85% at 15% 8%, #C9B896 0%, transparent 58%), linear-gradient(158deg, #7C6F53 0%, #2E2820 100%);
  --art-pattern: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 15px);
  --art-op: .13;
}
.door--biryani {
  --art-grad: radial-gradient(110% 80% at 82% 12%, #8A4A16 0%, transparent 55%), linear-gradient(165deg, #2A1A11 0%, #0B0705 100%);
  --art-pattern: repeating-radial-gradient(circle at 50% 112%, currentColor 0 1px, transparent 1px 26px);
  --art-op: .22;
}

/* Status chip on each door — sets expectations before the click */
.door__status {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 100px;
  color: inherit;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.door__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .85;
}
.door__status--open i {
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  animation: doorPulse 2.6s infinite;
}
@keyframes doorPulse {
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}