/* ------------------------------------------------------------------
   DEMO: a quieter, more architectural look
   Smooth dark wall, soft light, thin gold lines, a calm lacquered door.
   Loaded after site.css, so it only overrides what it needs to.
   ------------------------------------------------------------------ */

:root { --gold-line: rgba(194, 166, 97, .78); }

/* ---------- the wall: smooth dark plaster with a soft spotlight ---------- */
.facade {
  background:
    url("assets/plaster.webp") 0 0 / 180px 180px,
    radial-gradient(72% 34% at 50% 36%, rgba(194, 166, 97, .14), transparent 74%),
    linear-gradient(180deg, #2c2a28 0%, #252321 55%, #222222 100%);   /* ends on the page colour, so there is no visible edge */
}
.facade::after { display: none; }                /* no heavy grain overlay */

/* the string course becomes a single fine gold line */
.course {
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, #f1e2ad 50%, var(--gold-line) 82%, transparent);
  box-shadow: 0 0 16px rgba(194, 166, 97, .35);
}
.entry { --ep: 34px; }

/* ---------- header: plain, confident lettering ---------- */
.emblem::before { display: none; }
.emblem .logo-svg { width: 74px; filter: drop-shadow(0 0 18px rgba(244, 240, 230, .16)); }
.name {
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--ivory);
}
html[lang="ar"] .name { font-size: 1.42rem; font-weight: 700; letter-spacing: 0; padding: 0; }
.caption { margin-top: 16px; color: var(--gold); }

/* ---------- the arch: two fine gold lines, no chunky stone ---------- */
.stone {
  background: rgba(0, 0, 0, .16);
  box-shadow:
    inset 0 0 0 1px var(--gold-line),
    0 40px 70px rgba(0, 0, 0, .5);
}
.stone::before, .vs { display: none; }
.facade .doorway { box-shadow: 0 0 0 1px rgba(194, 166, 97, .5); }

/* ---------- the door: calm lacquer, soft sheen, no heavy texture ---------- */
.half {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg, rgba(255, 238, 200, .06) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .34) 100%),
    #262422;
  box-shadow: inset 0 14px 22px rgba(0, 0, 0, .45), inset 6px 0 10px rgba(0, 0, 0, .25), inset -6px 0 10px rgba(0, 0, 0, .25);
}
.half-e .half, .half-e { background-position: 100% 0; }
.half-s { border-inline-end: 1px solid #0c0b0a; }
.half-e { border-inline-start: 1px solid #0c0b0a; }
.hinge { display: none; }

/* flat panels with a fine gold line, lit softly from above */
.pn {
  background: linear-gradient(165deg, #2b2927, #1f1e1c);
  border: 1px solid rgba(194, 166, 97, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 10px 18px rgba(0, 0, 0, .38);
}
.pn::before { border-color: rgba(194, 166, 97, .22); inset: 5px; }
.pn::after, .pn-sq::after, .pn-arch::after { display: none; }
.pn .ic { filter: none; }
.pn b { text-shadow: none; }

/* ---------- threshold: a thin gold line and a soft floor ---------- */
.step {
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 16%, #f1e2ad 50%, var(--gold-line) 84%, transparent);
  box-shadow: 0 0 20px rgba(194, 166, 97, .4);
}
.facade.opening .step { filter: brightness(1.35); }
.entry::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 110px;
  background: linear-gradient(180deg, rgba(194, 166, 97, .09), transparent);
  pointer-events: none;
}

/* ---------- links below: flat dark cards with a hairline ---------- */
.links3 .tl {
  background: linear-gradient(165deg, #2a2826, #1e1d1b);
  border-color: rgba(194, 166, 97, .55);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .32);
}
.links3 .tl::before { border-color: rgba(194, 166, 97, .16); }
@media (hover: hover) {
  .links3 .tl:hover { box-shadow: 0 14px 26px rgba(0, 0, 0, .42), 0 0 24px rgba(194, 166, 97, .22); }
}