/* Ablaq: the striped courses of Damascus stone, taken from the facade of Azem
   Palace. Plum-charcoal basalt, pale limestone and apricot stone, with the
   terracotta-brown of the inlaid marble frieze as the one accent. */

[data-theme="ablaq"] {
  --basalt: #2e272b; --basalt-2: #584a4e; --iron: #241f22;
  --lime: #f1e9df; --lime-2: #e7dccf; --marble: #faf7f2;
  --apricot: #d9bca3; --apricot-2: #c9a488; --rose: #a28475;
  --inlay: #8a4634; --inlay-2: #a2583f;

  /* one course of wall: basalt, limestone, apricot, limestone, with block joints */
  --courses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='96' viewBox='0 0 240 96'%3E%3Cg stroke='%23b9a391' stroke-opacity='.55' stroke-width='1'%3E%3Crect width='240' height='14' fill='%23584a4e' stroke='none'/%3E%3Crect y='14' width='64' height='30' fill='%23efe6da'/%3E%3Crect x='64' y='14' width='92' height='30' fill='%23e9ddcf'/%3E%3Crect x='156' y='14' width='84' height='30' fill='%23f1e9df'/%3E%3Crect y='44' width='38' height='22' fill='%23d9bca3'/%3E%3Crect x='38' y='44' width='78' height='22' fill='%23dcc2ab'/%3E%3Crect x='116' y='44' width='60' height='22' fill='%23d4b59b'/%3E%3Crect x='176' y='44' width='64' height='22' fill='%23dcc2ab'/%3E%3Crect y='66' width='102' height='30' fill='%23ebe0d3'/%3E%3Crect x='102' y='66' width='70' height='30' fill='%23f1e9df'/%3E%3Crect x='172' y='66' width='68' height='30' fill='%23e7dccf'/%3E%3C/g%3E%3C/svg%3E");
  /* the zigzag border of the inlaid frieze */
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 9 L4 2 L8 9 L12 2 L16 9' fill='none' stroke='%238a4634' stroke-width='1.6'/%3E%3C/svg%3E");

  --bg: var(--lime); --bg-2: var(--lime-2);
  --ink: var(--basalt); --ink-2: #5a4d50;
  --line: rgba(46, 39, 43, .16); --line-strong: rgba(46, 39, 43, .45);
  --accent: var(--basalt); --accent-ink: var(--marble); --accent-hover: var(--basalt-2);
  --ghost-hover: rgba(46, 39, 43, .07);
  --focus: var(--inlay); --focus-ring: rgba(138, 70, 52, .22);
  --select-bg: var(--apricot); --select-ink: var(--basalt);
  --error: #9b2c22; --error-bg: #f3dfd8;

  --f-display: "Marcellus", var(--f-script, "Times New Roman"), serif;
  --f-body: "Hanken Grotesk", var(--f-script, system-ui), sans-serif;
  --f-ar: "Reem Kufi", "Segoe UI", sans-serif;
  --w-display: 400; --t-display: .005em;

  --r-btn: 26px 26px 4px 4px; --r-chip: 12px 12px 2px 2px; --r-field: 4px; --r-thumb: 999px 999px 0 0;
  --arch: 999px 999px 0 0;

  --band: var(--courses) left top / 240px 96px repeat-x;
  --band-h: 96px;

  --head-ink-over: var(--lime); --head-bg: rgba(241, 233, 223, .95); --head-ink: var(--basalt);
  --head-shadow: 0 1px 0 var(--line);
  --hero-bg: var(--lime); --hero-ink: var(--basalt);
  --scrim: linear-gradient(to top, rgba(36, 31, 34, .92) 0%, rgba(36, 31, 34, .45) 55%, rgba(36, 31, 34, .35));

  --chip-bg: rgba(138, 70, 52, .1); --chip-ink: var(--inlay);
  --tab-mark: var(--apricot);

  --dest-bg: var(--basalt); --dest-ink: var(--lime); --dest-ink-2: rgba(241, 233, 223, .76); --dest-line: rgba(241, 233, 223, .16);
  --dmap-land: rgba(241, 233, 223, .07); --dmap-land-lb: rgba(241, 233, 223, .03); --dmap-edge: rgba(217, 188, 163, .5); --dmap-pt: var(--lime); --dmap-pt-on: var(--apricot); --dmap-text: var(--lime);

  --map-bg: var(--marble); --map-pad: clamp(48px, 7vw, 90px) clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px); --r-map: 50% 50% 0 0 / 16% 16% 0 0;
  --map-land: var(--lime); --map-land-lb: #ece3d8; --map-edge: rgba(46, 39, 43, .35); --map-sea: rgba(46, 39, 43, .35);
  --map-route: var(--basalt); --map-route-now: var(--inlay-2); --map-dot: var(--basalt); --map-dot-visit: var(--inlay); --map-text: var(--basalt);
  --map-bg-sticky: var(--marble);

  --tours-bg: var(--lime-2);
  --svc-bg: var(--apricot); --svc-ink: var(--basalt); --svc-ink-2: #4c3f41; --svc-line: rgba(46, 39, 43, .2); --svc-hover: var(--inlay);
  --partners-bg: var(--inlay); --partners-ink: var(--marble); --partners-ink-2: rgba(250, 247, 242, .8); --tick: var(--apricot);
  --bar: #d8cbbd; --bar-good: var(--inlay);
  --cta-bg: var(--basalt); --cta-ink: var(--marble); --cta-scrim: linear-gradient(90deg, rgba(36, 31, 34, .9), rgba(36, 31, 34, .55) 60%, rgba(36, 31, 34, .2));
  --field-bg: var(--marble); --field-line: rgba(46, 39, 43, .22);
  --foot-bg: var(--basalt); --foot-ink: var(--lime); --foot-ink-2: rgba(241, 233, 223, .62); --foot-accent: var(--apricot); --foot-line: rgba(241, 233, 223, .12);
}

/* hero: the wall itself. Stone courses fill the ground, the words sit on a
   marble portal panel, and Azem Palace stands in an arcade arch */
[data-theme="ablaq"] .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; background: var(--courses) center top / 360px 144px repeat; }
[data-theme="ablaq"] .hero__content { grid-column: 1; grid-row: 1; align-self: center; margin-block: 130px 56px; margin-inline: clamp(16px, 5vw, 80px) 0; padding: clamp(28px, 3.4vw, 48px); background: var(--marble); box-shadow: inset 0 0 0 1px rgba(138, 70, 52, .45), inset 0 0 0 7px var(--marble), inset 0 0 0 8px rgba(138, 70, 52, .3), 0 30px 60px -30px rgba(36, 31, 34, .45); }
[data-theme="ablaq"] .hero__content::before { content: ""; display: block; height: 10px; margin: -6px 0 22px; background: var(--zigzag) left center / 16px 10px repeat-x; opacity: .8; }
[data-theme="ablaq"] .hero__ar { font-size: clamp(3.4rem, 6.4vw, 6rem); font-weight: 700; color: var(--inlay); margin-bottom: 6px; }
[data-theme="ablaq"] .hero__h { font-size: clamp(2.6rem, 4.8vw, 4.5rem); margin-bottom: 22px; max-width: 12ch; }
[data-theme="ablaq"] .hero__lead { color: var(--ink-2); }
[data-theme="ablaq"] .hero__actions { margin-top: 26px; }
[data-theme="ablaq"] .hero__media { grid-column: 2; grid-row: 1; display: flex; padding-block: 118px 0; padding-inline: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 64px); }
[data-theme="ablaq"] .hero__img--ablaq { display: block; flex: 1; border-radius: 999px 999px 0 0; min-height: 420px; box-shadow: 0 0 0 10px var(--basalt-2), 0 0 0 11px var(--lime); }
[data-theme="ablaq"] .hero__band { display: none; }
@media (max-width: 900px) {
  [data-theme="ablaq"] .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; background-size: 240px 96px; }
  [data-theme="ablaq"] .hero__content { margin: 96px 16px 28px; }
  [data-theme="ablaq"] .hero__media { grid-column: 1; grid-row: 2; padding: 0 clamp(16px, 5vw, 40px); height: 58svh; }
}

/* the arcade: every framed photo is an arch, like the courtyard's riwaq */
[data-theme="ablaq"] .frame img { border-radius: var(--arch); }
[data-theme="ablaq"] .region__media { aspect-ratio: 4 / 3.4; }
[data-theme="ablaq"] .tour__img { aspect-ratio: 4 / 3.6; }
[data-theme="ablaq"] .moment--show .moment__img, [data-theme="ablaq"] .moment--hakawati .moment__img { border-radius: 999px 999px 0 0; }

/* under each heading, one short run of the three stone courses */
[data-theme="ablaq"] .sec-head .h2::after, [data-theme="ablaq"] .welcome__text .h2::after { content: ""; display: block; width: 84px; height: 12px; margin-top: 22px; background: linear-gradient(var(--basalt-2) 0 3px, var(--lime) 3px 5px, var(--apricot-2) 5px 9px, var(--lime) 9px 10px, var(--basalt-2) 10px 12px); }
[data-theme="ablaq"] .dest .sec-head .h2::after { background: linear-gradient(var(--apricot) 0 3px, transparent 3px 5px, var(--lime) 5px 9px, transparent 9px 10px, var(--apricot) 10px 12px); }

[data-theme="ablaq"] .dest .chips li { background: rgba(217, 188, 163, .14); color: var(--apricot); }
[data-theme="ablaq"] .tab__ar { color: var(--apricot); opacity: 1; }
[data-theme="ablaq"] .dest .region__also { border-color: rgba(241, 233, 223, .16); }
[data-theme="ablaq"] .partners .btn, [data-theme="ablaq"] .cta .btn:not(.btn--ghost) { background: var(--marble); color: var(--basalt); }
[data-theme="ablaq"] .partners .btn:hover, [data-theme="ablaq"] .cta .btn:not(.btn--ghost):hover { background: var(--apricot); }
[data-theme="ablaq"] .services .tour-row__go, [data-theme="ablaq"] .svc__img { box-shadow: 0 30px 60px -30px rgba(36, 31, 34, .55); }
[data-theme="ablaq"] .sig blockquote { color: var(--inlay); }
[data-theme="ablaq"] .welcome__media img { box-shadow: 0 0 0 10px var(--lime), 0 0 0 11px var(--rose); }
[data-theme="ablaq"] .journey__map { box-shadow: inset 0 0 0 1px rgba(138, 70, 52, .25); }
[data-theme="ablaq"] .page-hero .h1 { max-width: 16ch; }
[data-theme="ablaq"] .site-foot .ablaq-band { --band-h: 72px; }

/* on the home page the header sits on light stone, so it uses the dark logo */
[data-theme="ablaq"] .page-index .site-head:not([data-scrolled]):not([data-open]) { color: var(--basalt); }
[data-theme="ablaq"] .page-index .site-head:not([data-scrolled]):not([data-open]) .brand__logo--light { display: none; }
[data-theme="ablaq"] .page-index .site-head:not([data-scrolled]):not([data-open]) .brand__logo--dark { display: block; }
[data-theme="ablaq"] .page-hero { color: var(--marble); background: var(--basalt); }
[data-theme="ablaq"] .site__meta { --site-accent: var(--inlay); }