/* ═══════════════════════════════════════════════════════════════════
   Majestic City Palace · home editorial layer
   Curated gallery, photographic dividers, refreshed section art.
   Loaded after the inline <style> block so it wins on equal specificity.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · shared fine print (condensed caps key + mono credit) ───────── */
.ed-key{
  font-family:var(--f-cond,var(--f-sans));
  font-weight:600;font-size:.6875rem;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-deep);
}
.ed-credit{
  font-family:var(--f-mono,monospace);
  font-size:.6875rem;letter-spacing:.06em;color:var(--umber-lt);
  font-variant-numeric:tabular-nums lining-nums;
}
.ed-note{
  font-size:var(--fs-xs,.8125rem);line-height:1.5;color:var(--umber);
  max-width:44ch;text-wrap:pretty;
}

/* ── 1b · hero, the 1892 facade ────────────────────────────────────
   The photograph is a symmetric elevation, so the scrim is vertical:
   a light veil at the top for the header, clear air across the gables,
   a deep plinth under the type. Measured at 375 and 1440.            */
.hero-media img{object-position:50% 42%}
.hero-scrim{
  background:
    linear-gradient(180deg,rgba(14,20,26,.40) 0%,rgba(14,20,26,.08) 24%,rgba(13,19,25,.44) 48%,rgba(11,16,22,.80) 74%,rgba(9,13,18,.92) 100%),
    linear-gradient(82deg,rgba(11,16,22,.66) 0%,rgba(11,16,22,.30) 46%,rgba(11,16,22,.02) 78%);
}
.hero-eyebrow{color:#FBF4E4;letter-spacing:.3em}
.hero-eyebrow::before{background:#D9B978}
.hero .sub{color:rgba(253,251,246,.92)}
/* a still elevation should not slide sideways: scale only, very slow */
.hero-media img{animation:edKen 34s ease-in-out infinite alternate}
@keyframes edKen{from{transform:scale(1.015)}to{transform:scale(1.06)}}
@media(max-width:700px){
  .hero-media img{object-position:50% 40%}
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(14,20,26,.42) 0%,rgba(14,20,26,.08) 22%,rgba(13,19,25,.46) 42%,rgba(10,15,20,.84) 60%,rgba(8,12,17,.96) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-media img{animation:none;transform:none}
}

/* ── 2 · gallery, curated editorial sequence ───────────────────────── */
#galGrid{display:block}

.eg-head{
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  align-items:baseline;
  margin:clamp(34px,5vw,58px) 0 clamp(16px,2vw,22px);
  padding-top:14px;border-top:1px solid var(--hairline);
}
.eg-head:first-child{margin-top:clamp(20px,3vw,30px)}
.eg-head .eg-n{
  font-family:var(--f-mono,monospace);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;color:var(--clay-deep);
  font-variant-numeric:tabular-nums lining-nums;
}
.eg-head h3{
  font-family:var(--f-display,serif);font-weight:400;
  font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);
  line-height:1.1;letter-spacing:-.012em;color:var(--espresso);
  text-wrap:balance;margin:0;
}
.eg-head p{
  grid-column:2;margin:2px 0 0;max-width:56ch;
  font-size:var(--fs-sm,.9375rem);line-height:1.55;color:var(--umber);
  text-wrap:pretty;
}

.egal{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.4vw,18px);
}

/* cell */
.ecell{
  position:relative;display:flex;flex-direction:column;
  margin:0;cursor:pointer;background:none;border:0;
  grid-column:span 3;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.ecell .ec-fr{
  position:relative;overflow:hidden;display:block;
  background:var(--ivory-2);
  aspect-ratio:4/3;
}
.ecell.ec-p .ec-fr{aspect-ratio:3/4}
.ecell.ec-w .ec-fr{aspect-ratio:16/9}
.ecell.ec-s .ec-fr{aspect-ratio:1/1}
.ecell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ecell:hover img{transform:scale(1.035)}
.ecell .ec-fr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,28,28,.10);
}
.ecell .ec-plus{
  position:absolute;right:10px;bottom:10px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;line-height:1;
  background:rgba(20,26,32,.55);
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
}
.ecell:hover .ec-plus,.ecell:focus-visible .ec-plus{opacity:1;transform:none}
.ecell figcaption{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 2px 0;text-align:left;
}
.ecell .ec-k{
  font-family:var(--f-cond,var(--f-sans));
  font-weight:600;font-size:.6875rem;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;color:var(--clay-deep);
}
.ecell .ec-t{
  font-family:var(--f-display,serif);font-weight:400;
  font-size:clamp(1rem,.94rem + .28vw,1.1875rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--espresso);
  text-wrap:balance;
}

/* deliberate spans, desktop */
@media(min-width:781px){
  .egal .sp2{grid-column:span 2}
  .egal .sp3{grid-column:span 3}
  .egal .sp4{grid-column:span 4}
  .egal .sp6{grid-column:span 6}
}
/* mobile: two up, with named full-width moments */
@media(max-width:780px){
  .egal{grid-template-columns:repeat(2,1fr);gap:10px 10px}
  .ecell{grid-column:span 1}
  /* one ratio for the two up cells so the rows stay level on a phone,
     the full frame is still there in the lightbox */
  .ecell:not(.m-full) .ec-fr{aspect-ratio:4/5}
  .ecell.m-full{grid-column:1 / -1}
  .ecell.m-full .ec-fr{aspect-ratio:3/2}
  .ecell.m-full.ec-p .ec-fr{aspect-ratio:4/5}
  .ecell .ec-t{font-size:1rem}
  .ecell .ec-plus{display:none}
  .eg-head p{grid-column:1 / -1}
}

.eg-foot{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,30px);padding-top:14px;
  border-top:1px solid var(--hairline);
}

/* ── 3 · photographic divider, the majolica moment ─────────────────── */
.ed-band{
  position:relative;width:100%;overflow:hidden;
  background:var(--ink);
  height:clamp(240px,34vw,420px);
  display:flex;align-items:flex-end;
}
.ed-band img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.ed-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,22,28,.10) 0%,rgba(16,22,28,.05) 34%,rgba(16,22,28,.70) 78%,rgba(14,19,25,.93) 100%);
}
.ed-band .ed-band-tx{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad-x) clamp(20px,3vw,34px);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.ed-band .bd-k{
  font-family:var(--f-cond,var(--f-sans));font-weight:600;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:#F2E5C8;
}
.ed-band .bd-t{
  display:block;margin-top:6px;
  font-family:var(--f-display,serif);font-weight:400;
  font-size:clamp(1.375rem,1rem + 1.6vw,2.25rem);
  line-height:1.12;letter-spacing:-.015em;color:#FCFAF4;
  text-wrap:balance;max-width:22ch;
  -webkit-font-smoothing:antialiased;
}
.ed-band .bd-c{
  font-family:var(--f-mono,monospace);font-size:.6875rem;
  letter-spacing:.06em;color:#D6C8AC;white-space:nowrap;
}
@media(max-width:600px){
  .ed-band{height:clamp(300px,74vw,360px)}
  .ed-band img{object-position:26% 46%}
  .ed-band .bd-c{display:none}
}

/* ── 4 · spotlight art, main frame + detail frame ──────────────────── */
.sp-stack{display:grid;gap:clamp(10px,1.2vw,14px)}
.sp-stack .sp-main{position:relative;overflow:hidden;background:var(--ivory-2)}
.sp-stack .sp-main img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.sp-stack .sp-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,14px)}
.sp-stack .sp-row > span{position:relative;overflow:hidden;display:block;background:var(--ivory-2)}
.sp-stack .sp-row img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.sp-stack .sp-cap{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding-top:4px;
}

/* ── 5 · the hotel story, third frame for the 1892 stone ───────────── */
.ho-pair{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(10px,1.2vw,16px);align-items:end;
  margin-top:clamp(34px,4.4vw,56px);
}
.ho-pair figure{margin:0;position:relative}
.ho-pair .hp-fr{position:relative;overflow:hidden;display:block;background:var(--ivory-2)}
.ho-pair img{width:100%;height:100%;object-fit:cover;display:block}
.ho-pair .hp-a img{aspect-ratio:16/10}
.ho-pair .hp-b img{aspect-ratio:4/5}
.ho-pair figcaption{padding-top:9px;display:flex;flex-direction:column;gap:3px;min-height:4.4em}
@media(max-width:700px){
  .ho-pair{grid-template-columns:1fr;gap:20px}
  .ho-pair .hp-b img{aspect-ratio:16/10}
}

/* the "reading the facade" plate now carries the crest over the arcade */
.fr-img img{object-position:57% 50%}
@media(max-width:900px){.fr-img img{object-position:57% 56%}}

/* ── 6 · amenities detail strip, asymmetric pair ───────────────────── */
.am-strip{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(30px,3.6vw,46px);
}
.am-strip span{position:relative;overflow:hidden;display:block;background:var(--ivory-3)}
.am-strip img{width:100%;height:100%;object-fit:cover;display:block}
.am-strip .as-a img{aspect-ratio:2/1}
.am-strip .as-b img{aspect-ratio:5/4}
@media(max-width:640px){
  .am-strip{grid-template-columns:1.35fr 1fr;gap:10px}
  .am-strip .as-a img{aspect-ratio:3/4}
  .am-strip .as-b img{aspect-ratio:3/4}
}

/* ── 7 · café, second frame under the main one ─────────────────────── */
.cf-stack{display:grid;gap:clamp(10px,1.2vw,14px)}
.cf-stack .cf-b{position:relative;overflow:hidden;display:block;background:var(--ivory-2)}
.cf-stack .cf-b img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:2/1}
@media(max-width:860px){.cf-stack .cf-b img{aspect-ratio:5/2}}

/* ── 8 · calmer reveals, under 400ms ───────────────────────────────── */
.rv{
  opacity:0;transform:translateY(14px);
  transition:opacity .34s cubic-bezier(.2,.7,.2,1),transform .34s cubic-bezier(.2,.7,.2,1);
}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.05s}
.rv-d2{transition-delay:.1s}
.rv-d3{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-d1,.rv-d2,.rv-d3{opacity:1;transform:none;transition:none;transition-delay:0s}
  .ecell img,.ecell:hover img{transition:none;transform:none}
  .ed-band img{transform:none}
}

/* ── 9 · lightbox refinements ──────────────────────────────────────── */
.lbx{background:rgba(13,17,22,.975)}
.lbx figure{max-width:1180px;width:100%;margin:0}
/* the position now reads in the caption, in mono, so drop the corner count */
.lbx-count{display:none}
.lbx img{width:100%;max-height:74svh;object-fit:contain;background:rgba(0,0,0,.2)}
.lbx figcaption{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;
  align-items:baseline;margin-top:14px;color:#E7DEC9;
}
.lbx .lc-k{
  grid-column:1;font-family:var(--f-cond,var(--f-sans));font-weight:600;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#E2C9A0;
}
.lbx .lc-t{grid-column:1;font-family:var(--f-display,serif);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);color:#fff;line-height:1.15}
.lbx .lc-d{grid-column:1;font-size:.875rem;color:#C7BBA4;max-width:62ch;line-height:1.6}
.lbx .lc-n{
  grid-column:2;grid-row:1 / span 2;align-self:start;
  font-family:var(--f-mono,monospace);font-size:.75rem;letter-spacing:.1em;
  color:#C7BBA4;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
}
.lbx-hint{
  position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));
  text-align:center;font-family:var(--f-cond,var(--f-sans));font-weight:600;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#9E937F;
}
@media(min-width:781px){.lbx-hint{display:none}}
@media(max-width:780px){
  .lbx{padding:16px 14px}
  .lbx-nav{display:none}
  .lbx img{max-height:62svh}
  .lbx figcaption{grid-template-columns:1fr}
  .lbx .lc-n{grid-column:1;grid-row:auto}
  .lbx-close{width:44px;height:44px;top:max(12px,env(safe-area-inset-top))}
}

/* ── 10 · focus, always visible on the new controls ────────────────── */
.ecell:focus-visible{outline:2px solid var(--majolica);outline-offset:3px}
.ed-band a:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}

/* ── 11 · shimmer parity for the new frames ────────────────────────── */
.ecell .ec-fr,.sp-stack .sp-main,.sp-stack .sp-row > span,
.ho-pair .hp-fr,.am-strip span,.cf-stack .cf-b{
  background:linear-gradient(100deg,var(--ivory-2) 30%,var(--ivory-3) 50%,var(--ivory-2) 70%);
  background-size:200% 100%;animation:shim 1.4s linear infinite;
}
.ecell .ec-fr.loaded,.sp-stack .sp-main.loaded,.sp-stack .sp-row > span.loaded,
.ho-pair .hp-fr.loaded,.am-strip span.loaded,.cf-stack .cf-b.loaded{
  animation:none;background:var(--ivory-2);
}
@media(prefers-reduced-motion:reduce){
  .ecell .ec-fr,.sp-stack .sp-main,.sp-stack .sp-row > span,
  .ho-pair .hp-fr,.am-strip span,.cf-stack .cf-b{animation:none;background:var(--ivory-2)}
}

/* ── 12 · print ────────────────────────────────────────────────────── */
@media print{
  .ed-band{height:auto;page-break-inside:avoid}
  .ecell .ec-plus,.lbx-hint{display:none}
}