/* /shop/ — the two-door chooser: The Night Apothecary | The Faith Collection.
   Each door wears its own collection's type and accent so the visitor sees
   which world they are stepping into before they click. */
:root {
  --ink: #0c0b0a;
  --bone: #ece4d2;
  --bone-dim: #b9b098;
  --line: #2e2a26;
  --amber: #d9a441;
  --sage: #8fa68e;
  --gold: #c9a96a;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink); color: var(--bone);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--amber); color: var(--ink); padding: .5rem 1rem; font-family: var(--mono);
}
.skip-link:focus { left: 0; }

/* ---- top bar ---- */
.shop-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.shop-topbar .brand {
  font-family: "IM Fell English SC", Georgia, serif; font-size: 1.05rem;
  letter-spacing: .06em; color: var(--bone-dim); text-decoration: none;
}
.shop-topbar nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: flex-end; }
.shop-topbar nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-dim); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.shop-topbar a:hover, .shop-topbar a:focus-visible { color: var(--bone); border-color: var(--bone-dim); }

/* ---- heading ---- */
.doors-head { text-align: center; padding: clamp(1.6rem, 4vw, 2.6rem) 1rem clamp(1rem, 3vw, 1.8rem); }
.doors-head .eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--bone-dim); margin: 0 0 .6rem;
}
.doors-head h1 {
  font-family: "IM Fell English", Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.1rem); margin: 0; letter-spacing: .01em;
}
.doors-head p { margin: .5rem 0 0; font-size: 1.15rem; font-style: italic; color: var(--bone-dim); }

/* ---- the two doors ---- */
.doors {
  display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 2vw, 1.25rem);
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  max-width: 1320px; margin: 0 auto;
}
@media (min-width: 760px) {
  .doors { grid-template-columns: 1fr 1fr; }
  .door { min-height: clamp(460px, 72vh, 760px); }
}
.door {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(380px, 52vh, 520px); overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--bone); text-decoration: none;
}
.door img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,7,.05) 22%, rgba(8,8,7,.55) 45%, rgba(8,8,7,.86) 68%, rgba(8,8,7,.96) 100%);
}
.door-body { padding: clamp(1.4rem, 3.5vw, 2.4rem); max-width: 34rem; }
.door .kicker {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; margin-bottom: .7rem;
}
.door h2 { margin: 0 0 .55rem; font-weight: 400; line-height: 1.05; }
.door p { margin: 0 0 1.3rem; font-size: 1.2rem; line-height: 1.45; color: var(--bone); }
.door .enter {
  display: inline-block; font-family: var(--mono); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; padding: .85rem 1.3rem; border: 1px solid currentColor;
  transition: background-color .25s, color .25s;
}
.door:hover img, .door:focus-visible img { transform: scale(1.035); }
.door:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* Apothecary door — IM Fell, amber candlelight */
.door-apothecary img { object-position: 50% 42%; }
.door-apothecary .kicker { color: var(--sage); }
.door-apothecary h2 { font-family: "IM Fell English", Georgia, serif; font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.door-apothecary p { font-family: "Crimson Pro", Georgia, serif; font-size: 1.12rem; }
.door-apothecary .enter { color: var(--amber); }
.door-apothecary:hover .enter, .door-apothecary:focus-visible .enter { background: var(--amber); color: var(--ink); }

/* Faith door — Cinzel, gold */
.door-faith img { object-position: 50% 22%; }
.door-faith .kicker { color: var(--gold); }
.door-faith h2 { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: .04em; }
.door-faith p { font-style: italic; }
.door-faith .enter { color: var(--gold); }
.door-faith:hover .enter, .door-faith:focus-visible .enter { background: var(--gold); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .door img { transition: none; }
  .door:hover img, .door:focus-visible img { transform: none; }
}

/* ---- footer ---- */
.shop-footer {
  border-top: 1px solid var(--line); text-align: center;
  padding: 2rem clamp(1rem, 4vw, 2.4rem) 2.6rem; color: var(--bone-dim);
}
.shop-footer .foot-mark { font-family: "IM Fell English SC", Georgia, serif; font-size: 1.1rem; color: var(--bone); margin: 0 0 .8rem; }
.shop-footer .legal { font-family: var(--mono); font-size: .68rem; line-height: 1.6; max-width: 46rem; margin: .4rem auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 1rem; }
.foot-links a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-dim); text-decoration: none;
}
.foot-links a:hover, .foot-links a:focus-visible { color: var(--bone); }